Merge pull request #45 from gnmyt/updates/status-rework

ℹ️ Änderungen am Statussystem

client/src/common/components/Header/HeaderComponent.jsx

@@ -4,12 +4,16 @@ import {faCircleExclamation, faGaugeHigh, faGear} from "@fortawesome/free-solid-
 import {useContext, useEffect, useState} from "react";
 import DropdownComponent, {toggleDropdown} from "../Dropdown/DropdownComponent";
 import {DialogContext} from "@/common/contexts/Dialog";
+import {StatusContext} from "@/common/contexts/Status";
+import {SpeedtestContext} from "@/common/contexts/Speedtests";
 
 
 function HeaderComponent() {
 
     const [setDialog] = useContext(DialogContext);
     const [icon, setIcon] = useState(faGear);
+    const [status, updateStatus] = useContext(StatusContext);
+    const updateTests = useContext(SpeedtestContext)[1];
     const [updateAvailable, setUpdateAvailable] = useState("");
 
     const headers = localStorage.getItem("password") ? {password: localStorage.getItem("password")} : {}
@@ -20,7 +24,26 @@ function HeaderComponent() {
     }
 
     const startSpeedtest = async () => {
-        setDialog({speedtest: true, promise: fetch("/api/speedtests/run", {headers, method: "POST"})});
+        await updateStatus();
+        if (status.paused) return setDialog({
+            title: "Fehlgeschlagen",
+            description: "Speedtests sind aktuell pausiert. Bitte setze sie fort, wenn du einen machen möchtest.",
+            buttonText: "Okay"
+        });
+
+        if (status.running) return setDialog({
+            title: "Fehlgeschlagen",
+            description: "Es läuft bereits ein Speedtest. Bitte gedulde dich ein wenig, bis dieser fertig ist.",
+            buttonText: "Okay"
+        });
+
+        setDialog({speedtest: true});
+
+        fetch("/api/speedtests/run", {headers, method: "POST"}).then(() => {
+            updateTests();
+            updateStatus();
+            setDialog();
+        });
     }
 
     useEffect(() => {
@@ -56,7 +79,9 @@ function HeaderComponent() {
                                               })}/></div>
                         : <></>}
                     <div className="tooltip-element tooltip-bottom">
-                        <FontAwesomeIcon icon={faGaugeHigh} className="header-icon" onClick={startSpeedtest}/>
+                        <FontAwesomeIcon icon={faGaugeHigh}
+                                         className={"header-icon " + (status.running || status.paused ? "icon-red" : "")}
+                                         onClick={startSpeedtest}/>
                         <span className="tooltip">Speedtest starten</span>
                     </div>
 

client/src/common/components/Header/styles.sass

@@ -32,6 +32,9 @@
   transform: scale(1.1)
   color: $green
 
+.icon-red:hover
+  color: $red-hover
+
 @media (max-width: 425px)
   .header-main
     justify-content: center

client/src/common/contexts/Dialog/DialogContext.jsx

@@ -1,13 +1,11 @@
-import React, {useState, createContext, useContext} from "react";
+import React, {useState, createContext} from "react";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import {faClose} from "@fortawesome/free-solid-svg-icons";
-import {SpeedtestContext} from "../Speedtests";
 import "./styles.sass";
 
 export const DialogContext = createContext();
 
 const Dialog = ({dialog, setDialog}) => {
-    const updateTests = useContext(SpeedtestContext)[1];
     const [value, setValue] = useState(dialog.value || "");
 
     document.onkeyup = e => {
@@ -55,39 +53,15 @@ const Dialog = ({dialog, setDialog}) => {
 
     hideTooltips(true);
 
-    if (dialog.speedtest) {
-        dialog.promise.then(res => {
-            if (res.status === 409) {
-                setDialog({
-                    title: "Fehlgeschlagen",
-                    description: "Es läuft bereits ein Speedtest. Bitte gedulde dich ein wenig, bis dieser fertig ist.",
-                    buttonText: "Okay"
-                });
-            } else if (res.status === 410) {
-                setDialog({
-                    title: "Fehlgeschlagen",
-                    description: "Speedtests sind aktuell pausiert. Bitte setze sie fort, wenn du einen machen möchtest.",
-                    buttonText: "Okay"
-                });
-            } else {
-                updateTests();
-                setDialog();
-            }
-        });
-
-        return (
-            <div className="dialog-area">
-                <div className="dialog dialog-speedtest">
-                    <div className="lds-ellipsis">
-                        <div/>
-                        <div/>
-                        <div/>
-                        <div/>
-                    </div>
+    if (dialog.speedtest) return (
+        <div className="dialog-area">
+            <div className="dialog dialog-speedtest">
+                <div className="lds-ellipsis">
+                    <div/><div/><div/><div/>
                 </div>
             </div>
-        )
-    }
+        </div>
+    )
 
     return (
         <div className="dialog-area">

client/src/common/contexts/Status/StatusContext.jsx

@@ -4,7 +4,7 @@ export const StatusContext = createContext();
 
 export const StatusProvider = (props) => {
 
-    const [status, setStatus] = useState({paused: false});
+    const [status, setStatus] = useState({paused: false, running: false});
 
     const updateStatus = () => {
         let headers = localStorage.getItem("password") ? {password: localStorage.getItem("password")} : {}
@@ -15,7 +15,7 @@ export const StatusProvider = (props) => {
 
     useEffect(() => {
         updateStatus();
-        const interval = setInterval(() => updateStatus(), 15000);
+        const interval = setInterval(() => updateStatus(), 5000);
         return () => clearInterval(interval);
     }, []);
 

server/routes/speedtests.js

@@ -1,6 +1,7 @@
 const app = require('express').Router();
 const tests = require('../controller/speedtests');
 const pauseController = require('../controller/pause');
+const testTask = require("../tasks/speedtest");
 
 // List all speedtests
 app.get("/", async (req, res) => {
@@ -15,14 +16,14 @@ app.get("/averages", async (req, res) => {
 // Runs a speedtest
 app.post("/run", async (req, res) => {
     if (pauseController.currentState) return res.status(410).json({message: "The speedtests are currently paused"});
-    let speedtest = await require("../tasks/speedtest").create("custom");
+    let speedtest = await testTask.create("custom");
     if (speedtest !== undefined) return res.status(409).json({message: "An speedtest is already running"});
     res.json({message: "Speedtest successfully created"});
 });
 
-// Get the current pause status
+// Get the current test status
 app.get("/status", (req, res) => {
-    res.json({paused: pauseController.currentState});
+    res.json({paused: pauseController.currentState, running: testTask.isRunning()});
 });
 
 // Pauses all speedtests

server/tasks/speedtest.js

@@ -60,6 +60,8 @@ module.exports.create = async (type = "auto", retried = false) => {
     isRunning = false;
 }
 
+module.exports.isRunning = () => isRunning;
+
 module.exports.removeOld = async () => {
     await tests.removeOld();
 }