Merge branch 'Coffeescale' into 'master'

Coffeescale See merge request sahkoinsinoorikilta/vtmk/web2.0-frontend!193
2025-10-13 22:02:53 +03:00
parent d75c6b4756 80ccf1bc66
commit 81be5a1e60
5 changed files with 1081 additions and 48 deletions
@@ -1,3 +1,4 @@
 NEXT_PUBLIC_DEPLOY_ENV=local
 NEXT_PUBLIC_API_URL=https://api.dev.sahkoinsinoorikilta.fi/api
 NEXT_PUBLIC_SITE_URL=https://dev.sahkoinsinoorikilta.fi
+NEXT_MQTT_HOST=mqtt.dev.sahkoinsinoorikilta.fi
@@ -72,6 +72,7 @@
    "fast-deep-equal": "^3.1.3",
    "js-cookie": "^3.0.1",
    "lodash": "^4.17.21",
+    "mqtt": "^5.14.1",
    "next": "^13.1.6",
    "normalize.css": "^8.0.1",
    "react": "^18.2.0",
@@ -0,0 +1,18 @@
+import React from "react";
+import { NextPage } from "next";
+import Head from "next/head";
+import GuildroomPageView from "@views/GuildroomPage/GuildroomPageView";
+import PageWrapper from "@views/common/PageWrapper";
+
+const GuildroomPage: NextPage = () => (
+  <>
+    <Head>
+      <link rel="canonical" href={`${process.env.NEXT_PUBLIC_SITE_URL}/kilta/guildroom`} />
+    </Head>
+    <PageWrapper>
+      <GuildroomPageView />
+    </PageWrapper>
+  </>
+);
+
+export default GuildroomPage;
@@ -0,0 +1,93 @@
+import { useState, useEffect } from "react";
+import mqtt from "mqtt";
+import { TextSection } from "@components/index";
+import styled from "styled-components";
+
+const CoffeeTitle = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  font-size: 3rem;
+  font-weight: bold;
+`;
+
+const Cups = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  font-size: 7rem;
+  font-variant-numeric: tabular-nums;
+`;
+
+const Time = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  font-size: 1rem;
+`;
+
+const GuildroomView = () => {
+  const [brewing, setBrewing] = useState<boolean>(false);
+  const [time, setTime] = useState<number>(0);
+  const [cups, setCups] = useState<number>(0);
+  const [client, setClient] = useState<mqtt.MqttClient | null>(null);
+  const [status, setStatus] = useState<boolean>(false);
+
+  useEffect(() => {
+    setStatus(false);
+    setClient(mqtt.connect(`ws://${process.env.NEXT_PUBLIC_MQTT_HOST}`));
+  }, []);
+
+  useEffect(() => {
+    if (client) {
+      client.on("connect", () => {
+        setStatus(true);
+        client.subscribe("sik/kiltahuone/kahvivaaka/#", (err) => {
+          if (!err) {
+            console.log("Connected to MQTT server!");
+          }
+        });
+      });
+      client.on("error", (err) => {
+        console.error("Connection error: ", err);
+        client.end();
+      });
+      client.on("reconnect", () => {
+        setStatus(false);
+      });
+      client.on("offline", () => {
+        setStatus(false);
+      });
+      client.on("message", (topic, message) => {
+        if (topic === "sik/kiltahuone/kahvivaaka/cups") {
+          setCups(Number(message.toString()));
+        }
+        if (topic === "sik/kiltahuone/kahvivaaka/brewtime") {
+          setTime(Number(message.toString()));
+        }
+        if (topic === "sik/kiltahuone/kahvivaaka/brewing") {
+          setBrewing(Boolean(message.toString()));
+        }
+      });
+    }
+  }, [client]);
+
+  if (!status) {
+    return (
+      <CoffeeTitle style={{ margin: "10%" }}>NO MQTT CONNECTION</CoffeeTitle>
+    );
+  }
+
+  return (
+    <div style={{ margin: "10%" }}>
+      <CoffeeTitle>{brewing ? "Brewing more..." : "Cups left"}</CoffeeTitle>
+      <Cups>{cups}</Cups>
+      <Time>Brewed {time} min ago</Time>
+    </div>
+  );
+};
+
+export default GuildroomView;