Improves admin ui;adds recovery after net issue

.gitignore

@@ -1 +1,2 @@
-node_modules
+node_modules
+rename.sh

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");

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;
+}

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");
 

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"
+                                    value="1800000">00:30:00</button><button class="btn btn-outline-primary m-1 mt-0 goTimer" >Go</button><br>
-                                    id="GoPreset">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,28 +499,24 @@
 
             // 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) {
-                    setTimeout(function () {
-                        $("#GoPreset")[0].innerHTML = 'Go'
-                    }, 200)
-
-                })
-            })
 
 
-            $("#goJogger").click(function (event) {
+            $(".goTimer").click(function (event) {
-                $("#goJogger")[0].innerHTML = '<div class="spinner-border-sm spinner-border"></div>'
+                event.currentTarget.innerHTML = '<div class="spinner-border-sm spinner-border"></div>'
+                setTimeout(function () {
+                    event.currentTarget.innerHTML = 'Go'
+                }, 200);
 
-                saveOption("/api/v1/set/addMillisToTimer?time=" + currentTime, function (event) {
+                saveOption("/api/v1/set/addMillisToTimer?time=" + currentTime, function (ev) {
-                    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)
                     })

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;">