TTMK/web2.0-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'Coffeescale' into 'master'

Browse Source 
Coffeescale

See merge request sahkoinsinoorikilta/vtmk/web2.0-frontend!193
This commit is contained in:
Justus Ojala
2025-10-13 22:02:53 +03:00
parent d75c6b4756 80ccf1bc66
commit 81be5a1e60
5 changed files with 1081 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.env.local.example
+1
View File
@@ -1,3 +1,4 @@
NEXT_PUBLIC_DEPLOY_ENV=local NEXT_PUBLIC_DEPLOY_ENV=local
NEXT_PUBLIC_API_URL=https://api.dev.sahkoinsinoorikilta.fi/api NEXT_PUBLIC_API_URL=https://api.dev.sahkoinsinoorikilta.fi/api
NEXT_PUBLIC_SITE_URL=https://dev.sahkoinsinoorikilta.fi NEXT_PUBLIC_SITE_URL=https://dev.sahkoinsinoorikilta.fi
NEXT_MQTT_HOST=mqtt.dev.sahkoinsinoorikilta.fi
package-lock.json
Generated
+968 -48
View File
File diff suppressed because it is too large Load Diff
package.json
+1
View File
@@ -72,6 +72,7 @@
"fast-deep-equal": "^3.1.3", "fast-deep-equal": "^3.1.3",
"js-cookie": "^3.0.1", "js-cookie": "^3.0.1",
"lodash": "^4.17.21", "lodash": "^4.17.21",
"mqtt": "^5.14.1",
"next": "^13.1.6", "next": "^13.1.6",
"normalize.css": "^8.0.1", "normalize.css": "^8.0.1",
"react": "^18.2.0", "react": "^18.2.0",
src/pages/kilta/guildroom.tsx
+18
View File
@@ -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;
src/views/GuildroomPage/GuildroomPageView.tsx
+93
View File
@@ -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;