Merge branch 'master' into 'production'
Master See merge request sahkoinsinoorikilta/vtmk/web2.0-frontend!194
This commit is contained in:
J4DER4
@@ -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
|
||||
Generated
+999
-59
File diff suppressed because it is too large
Load Diff
+3
-1
@@ -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",
|
||||
@@ -89,7 +90,8 @@
|
||||
"sharp": "^0.30.3",
|
||||
"shortid": "^2.2.16",
|
||||
"styled-components": "^5.3.5",
|
||||
"swr": "^1.2.2"
|
||||
"swr": "^1.2.2",
|
||||
"uuid": "^13.0.0"
|
||||
},
|
||||
"overrides": {
|
||||
"react-mde": {
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
import { OptionTypes } from "@components/Widgets/SignupQuestionsWidget/common";
|
||||
|
||||
export interface Signup {
|
||||
id?: number;
|
||||
id?: number; // Database id for completed signup
|
||||
submit_id?: string; // Signup request idempotency key
|
||||
signupForm_id: number;
|
||||
answer: string;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
@@ -13,6 +13,7 @@ import PageWrapper from "@views/common/PageWrapper";
|
||||
import LoadingView from "@views/common/LoadingView";
|
||||
import noop from "@utils/noop";
|
||||
import NotFoundPage from "@pages/404";
|
||||
import { v4 as uuid } from "uuid";
|
||||
|
||||
type InitialProps = {
|
||||
initialForm: SignupForm;
|
||||
@@ -23,6 +24,7 @@ const FORM_URL = `${process.env.NEXT_PUBLIC_API_URL}/signupForm/`;
|
||||
const SignUpPage: NextPage<InitialProps> = ({ initialForm }) => {
|
||||
const router = useRouter();
|
||||
const id = String(initialForm?.id ?? "");
|
||||
const SUBMIT_ID = uuid(); // Submission key, generated on page refresh
|
||||
const URL = `${FORM_URL}${id}/`;
|
||||
const { data: signupForm, error } = useSWR<SignupForm>(URL, (url) => axios.get(url).then((res) => res.data), { fallbackData: initialForm });
|
||||
|
||||
@@ -43,6 +45,7 @@ const SignUpPage: NextPage<InitialProps> = ({ initialForm }) => {
|
||||
|
||||
const onSubmit = async ({ formData }: ISubmitEvent<string>) => {
|
||||
const payload: Signup = {
|
||||
submit_id: SUBMIT_ID, // This is for preventing duplicate requests; NOT RELATED TO THE SIGNUP ID IN DATABASE
|
||||
signupForm_id: signupForm.id,
|
||||
answer: formData,
|
||||
};
|
||||
|
||||
@@ -54,7 +54,7 @@
|
||||
"name_en": "Guild Room Representative",
|
||||
"representatives": [
|
||||
{
|
||||
"name": "Justus Ojala"
|
||||
"name": "Milja Kuusela"
|
||||
},
|
||||
{
|
||||
"name": "Aaro Rasilainen"
|
||||
|
||||
@@ -30,7 +30,7 @@ const FrontPageHero: React.FC = () => (
|
||||
<HeroAsideItem
|
||||
header="Vasta-aloittaneelle opiskelijalle"
|
||||
text="Fuksikasvatusta ja ISOtoimintaa"
|
||||
link="/kilta/fuksi"
|
||||
link="/newStudent/fuksi"
|
||||
linkText="Fuksit ›"
|
||||
/>
|
||||
<HeroAsideItem
|
||||
|
||||
@@ -0,0 +1,97 @@
|
||||
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);
|
||||
if (process.env.NEXT_PUBLIC_MQTT_HOST) {
|
||||
setClient(mqtt.connect(`wss://${process.env.NEXT_PUBLIC_MQTT_HOST}`));
|
||||
} else {
|
||||
console.error("MQTT host undefined");
|
||||
}
|
||||
}, []);
|
||||
|
||||
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;
|
||||
Reference in New Issue
Block a user