Improves admin ui;adds recovery after net issue

2022-03-02 21:10:34 +01:00 · 2022-03-02 21:10:34 +01:00 · d6ced44ff5
commit d6ced44ff5
parent f499829342
6 changed files with 83 additions and 44 deletions
--- a/.gitignore
+++ b/.gitignore
@ -1 +1,2 @@
 node_modules
+rename.sh
--- a/index.js
+++ b/index.js
@ -2,6 +2,7 @@ const express = require("express");
 const fs = require("fs");
 const bodyParser = require("body-parser");

+console.log("Preparing server...");
 const app = express();

 app.use(express.static("static"));
@ -37,7 +38,7 @@ currentState = {

 currentState.textColors = currentState.colorSegments

-
+console.log("Preparing routes...");
 app.get("/", function (req, res) {
  const data = fs.readFileSync("templates/newAdminPanel.html", "utf8");
  res.send(data);
@ -92,7 +93,6 @@ app.get("/api/v1/ctrl/timer/play", function (req, res) {
    currentState.timerRunState = true
    currentState.countdownGoal += new Date().getTime() - currentState.pauseMoment;
  }
-  
  res.json({ status: "ok" });
 });

@ -135,6 +135,7 @@ app.get("/api/v1/set/text/colors", function (req, res) {

 app.get("/api/v1/set/text/enableColoring", function (req, res) {
  currentState.enableColoredText = (req.query.enable === 'true');
+  res.json({ status: "ok" });
 });

 app.get("/api/v1/ctrl/message/show", function (req, res) {
@ -153,7 +154,9 @@ app.get("/api/v1/ctrl/message/hide", function (req, res) {
  currentState.showMessage = false
  res.json({ status: "ok" });
 });
-
+console.log("Starting server...");
 app.listen(3005);

-console.log("Server running on port 3005");
+console.info("Server running on port 3005");
+console.info("Visit localhost:3005/timer for the timer page");
+console.info("Visit localhost:3005 for the admin page");
--- a/static/css/styles.css
+++ b/static/css/styles.css
@ -104,3 +104,10 @@ html, body {
 animation:fade 1000ms infinite;
 -webkit-animation:fade 1000ms infinite;
 }
+
+.connectionWarning{
+  background-color: red;
+  width: 100vw;
+  font-size: x-large;
+  font-family: sans-serif;
+}
--- a/static/js/script.js
+++ b/static/js/script.js
@ -3,6 +3,7 @@ newDateObj = new Date(newDateObj.getTime() + 1000 * 20)

 allowFullscreen = true
 let dataFame = {}
+let timeDiff = 0

 function enterFullscreen(element) {
  if (element.requestFullscreen) {
@ -76,15 +77,48 @@ function requestBackend() {
    if (resp.status == 200) {
      resp = resp.responseText;
      var data = JSON.parse(resp);
+      timeDiff = new Date().getTime() - data.srvTime
      dataFame = data;
    }
  }
 }

+let isSlowed = false
+
+function handleRecovery() {
+  var img = document.body.appendChild(document.createElement("img"));
+    img.onload = function()
+    {
+      location.reload(); 
+    };
+    img.src = "SMPTE_Color_Bars.svg";
+}
+
+let recoInter = -1
+
 function handleUpdate() {
  var data = dataFame;
  document.getElementById("incomeData").innerHTML = JSON.stringify(data)
-  document.getElementById("timediff").innerHTML = new Date().getTime() - data.srvTime;
+  document.getElementById("timediff").innerHTML = timeDiff + "<br>" + String(new Date().getTime() - data.srvTime);
+  if (new Date().getTime() - data.srvTime > 1000 * 5) {
+    
+    if (!isSlowed) {
+      console.error("Server timeout")
+      clearInterval(updateInter)
+      updateInter = setInterval(handleUpdate, 900)
+      document.getElementById("warningBanner").style.display = "block"
+      isSlowed = true
+      recoInter = setInterval(handleRecovery, 10000)
+    }
+  } else {
+    if(isSlowed){
+      clearInterval(updateInter)
+      clearInterval(recoInter)
+      updateInter = setInterval(handleUpdate, 2)
+      document.getElementById("warningBanner").style.display = "none"
+      isSlowed = false
+    }
+  }

  if (data.debug) {
    document.getElementById("timediff").style.display = "block";
@ -101,7 +135,13 @@ function handleUpdate() {
    document.getElementById("overlay").style.display = "block";
    document.getElementById("text").innerHTML = data.message
  } else {
-    off()
+    document.getElementById("overlay").style.display = "none";
+  }
+
+  if (data.showTimeOnCountdown && data.mode == "timer") {
+    document.getElementById("clockSec").innerHTML = getTime();
+  } else {
+    document.getElementById("clockSec").innerHTML = "";
  }

  if (new Date().getTime() - data.messageAppearTime < 5000) {
@ -123,9 +163,7 @@ function handleUpdate() {
    document.getElementById("timer").style.color = "white"

  } else if (data.mode == "timer") {
-
    document.getElementById("wholeProgBar").style.display = "block";
-
    if (data.timerRunState) {
      const now = new Date()
      const diff = data.countdownGoal - now.getTime()
@ -145,12 +183,6 @@ function handleUpdate() {
      }

    }
-    if (data.showTimeOnCountdown) {
-      document.getElementById("clockSec").innerHTML = getTime();
-    } else {
-      document.getElementById("clockSec").innerHTML = "";
-    }
-
  } else if (data.mode == "black") {
    document.getElementById("timer").innerHTML = "";
    document.getElementById("testImg").style.display = "none";
@ -189,16 +221,9 @@ function getTime() {
  return time;
 }

-function on() {
-  document.getElementById("overlay").style.display = "block";
-}
-
-function off() {
-  document.getElementById("overlay").style.display = "none";
-}

 setInterval(requestBackend, 500);
-setInterval(handleUpdate, 2);
+updateInter = setInterval(handleUpdate, 2);

 let temp = new URLSearchParams(window.location.search).get("smaller");

--- a/templates/newAdminPanel.html
+++ b/templates/newAdminPanel.html
@ -230,8 +230,7 @@
                                <button class="btn btn-outline-secondary m-1 pres" value="1200000">00:20:00</button>
                                <button class="btn btn-outline-secondary m-1 pres" value="1500000">00:25:00</button>
                                <button class="btn btn-outline-secondary m-1 pres"
-                                    value="1800000">00:30:00</button><button class="btn btn-outline-primary m-1 mt-0"
-                                    id="GoPreset">Go</button><br>
+                                    value="1800000">00:30:00</button><button class="btn btn-outline-primary m-1 mt-0 goTimer" >Go</button><br>
                                <button class="btn btn-outline-secondary m-1 pres" value="2100000">00:35:00</button>
                                <button class="btn btn-outline-secondary m-1 pres" value="2400000">00:40:00</button>
                                <button class="btn btn-outline-secondary m-1 pres" value="2700000">00:45:00</button>
@ -298,7 +297,7 @@
                            </button>
                        </div>
                        <div class="col">
-                            <button class="btn btn-outline-primary m-1 mt-0" id="goJogger">Go</button>
+                            <button class="btn btn-outline-primary m-1 mt-0 goTimer" id="goJogger">Go</button>
                        </div>
                        <div class="col">
                            <div style="border-left:1px solid #000;height:100%"></div>
@ -500,29 +499,25 @@

            // Presets
            $(".pres").click(function (event) {
-                selectPresetTime = parseInt(event.currentTarget.value)
+                currentTime = parseInt(event.currentTarget.value)
+                const times = msToTime(currentTime)
+                    $("#timerHoursV")[0].innerHTML = times[3];
+                    $("#timerMinuteV")[0].innerHTML = times[2];
+                    $("#timerSecondsV")[0].innerHTML = times[1];
            })

-            $("#GoPreset").click(function (event) {
-                $("#GoPreset")[0].innerHTML = '<div class="spinner-border-sm spinner-border"></div>'
           
-                saveOption("/api/v1/set/addMillisToTimer?time=" + selectPresetTime, function (event) {
+
+
+            $(".goTimer").click(function (event) {
+                event.currentTarget.innerHTML = '<div class="spinner-border-sm spinner-border"></div>'
                setTimeout(function () {
-                        $("#GoPreset")[0].innerHTML = 'Go'
-                    }, 200)
+                    event.currentTarget.innerHTML = 'Go'
+                }, 200);

-                })
-            })
+                saveOption("/api/v1/set/addMillisToTimer?time=" + currentTime, function (ev) {
                    

-            $("#goJogger").click(function (event) {
-                $("#goJogger")[0].innerHTML = '<div class="spinner-border-sm spinner-border"></div>'
-
-                saveOption("/api/v1/set/addMillisToTimer?time=" + currentTime, function (event) {
-                    setTimeout(function () {
-                        $("#goJogger")[0].innerHTML = 'Go'
-                    }, 200)
-
                })
            })

@ -537,13 +532,15 @@
                const showMillisB = $("#showMillis")[0].checked
                const progBarShowB = $("#progBarShow")[0].checked
                const textColorsB = $("#textColors")[0].checked
+ 
                allPathes.push("/api/v1/set/layout/showTime?show=" + showTimeB)
                allPathes.push("/api/v1/set/layout/showMillis?show=" + showMillisB)
                allPathes.push("/api/v1/set/progressbar/show?show=" + progBarShowB)
-                allPathes.push("/api/v1/set/text/enableColoring?show=" + textColorsB)
+                allPathes.push("/api/v1/set/text/enableColoring?enable=" + textColorsB)

                for (pI in allPathes) {
                    const path = allPathes[pI];
+                    console.warn(path)
                    saveOption(path, function (event) {
                        console.debug(event)
                    })
--- a/templates/timerPage.html
+++ b/templates/timerPage.html
@ -15,10 +15,16 @@

 <body onclick="updateFullscreen()">

+
+
    <div id="overlay" onclick="off()">
        <div id="text">Message here</div>
    </div>

+    <div class="connectionWarning" id="warningBanner" style="display: none;">
+        Connection lost. Trying to reconnect...
+    </div>
+
    <img src='SMPTE_Color_Bars.svg' class='testImg' id="testImg" style="display: none;">
    </img>
    <valueStore style="display: none;">