Justus Ojala
94 lines
2.4 KiB
TypeScript
94 lines
2.4 KiB
TypeScript
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;
|