static/css/mainStyle.css

@@ -17,12 +17,6 @@ body {
     overflow-y: hidden;
   }
   
-  .full .clr-field button {
-    width: 100%;
-    height: 100%;
-    border-radius: 5px;
-  }
-  
   .b-example-divider {
     flex-shrink: 0;
     width: 1.5rem;

static/js/interface.js

@@ -51,10 +51,11 @@ $(document).ready(function () {
         $("#colors1").append(
             '<tr>' +
             '<td contenteditable="true" class="time"></td>' +
-            '<td contenteditable="true" class="color full"><input id="demo-input1" "type="text" value="#COLOR#" data-coloris /></td></td>' +
+            '<td contenteditable="true" class="color"><input id="demo-input1" class="colorPicky" type="button" value="#COLOR#" /></td></td>' +
             '<td><button type="button" class="btn btn-danger btn-rounded btn-sm my-0 deleteRow1">Remove</button></td>' +
             '</tr>'
         );
+        $('.colorPicky').colorpicker();
 
     });
 
@@ -62,23 +63,42 @@ $(document).ready(function () {
         $("#colors2").append(
             '<tr>' +
             '<td contenteditable="true" class="time"></td>' +
-            '<td contenteditable="true" class="color full"><input id="demo-input2" type="text" value="#COLOR#" data-coloris /></td></td>' +
+            '<td contenteditable="true" class="color"><input id="demo-input2" class="colorPicky" type="button" value="#COLOR#" /></td></td>' +
             '<td><button type="button" class="btn btn-danger btn-rounded btn-sm my-0 deleteRow1">Remove</button></td>' +
             '</tr>'
         );
+        $('.colorPicky').colorpicker();
+    });
+
+    $("#copyColors").click(function CopyTextColors(event) {
+        event.target.innerHTML = '<div class="spinner-border-sm spinner-border"></div>'
+        saveOption("/api/v1/set/text/colors?copy=true", function finishCopyColors(event) {
+            setTimeout(function () {
+                document.getElementById("copyColors").innerHTML = "Copy from progressbar colors"
+            }, 500)
+
+        })
     });
 
 
+    $("input[name='btnradio2']").click(function (event) {
+        console.debug()
+        const darkid = parseInt(event.currentTarget.id.replace("Mbtnradio", ""))
+        if (darkid == 1) {
+            DarkReader.disable()
+        } else if (darkid == 2) {
+            DarkReader.enable()
+        } else {
+            DarkReader.auto()
+        }
+        Cookies.set("interfaceColor", darkid)
+    });
 
     // Restore settings
     saveOption("/api/v1/data", function (event, xmlHttp) {
 
         const tableEntry = ' <tr><td class="pt-3-half numVal" contenteditable="true">#VALUE#</td>\
-            <td class="pt-3-half full" contenteditable="false"> \
+            <td class="pt-3-half" contenteditable="false" style="background-color: #bg-COLOR#;"><input id="demo-input1" class="colorPicky" type="button" value="#COLOR#" /></td>\
-            <div class="clr-field" style="color: #bg-COLOR#;"> \
-                        <button aria-labelledby="clr-open-label"></button> \
-                        <input id="demo-input1" type="text" class="coloris" value="#COLOR#"></div> \
-                  </div> \
             <td>\
                 <span class="table-remove"><button type="button"\
                         class="btn btn-danger btn-rounded btn-sm my-0 deleteRow1">\
@@ -104,7 +124,7 @@ $(document).ready(function () {
             temp = temp.replace("#COLOR#", jsonResult.colorSegments[item]);
             temp = temp.replace("#bg-COLOR#", jsonResult.colorSegments[item]);
             document.getElementById("colors1").innerHTML += temp
-            //console.log(jsonResult.colorSegments[item])
+            console.log(jsonResult.colorSegments[item])
         }
 
         // Text colors
@@ -113,44 +133,22 @@ $(document).ready(function () {
             temp = temp.replace("#COLOR#", jsonResult.textColors[item]);
             temp = temp.replace("#bg-COLOR#", jsonResult.textColors[item]);
             document.getElementById("colors2").innerHTML += temp
-            //console.log(jsonResult.textColors[item])
+            console.log(jsonResult.textColors[item])
         }
 
 
 
-        //console.debug(jsonResult, currentModeInt)
+        console.debug(jsonResult, currentModeInt)
+        $('.colorPicky').colorpicker();
         $('.colorPicky').on('colorpickerChange', function (event) {
             event.target.parentElement.style.backgroundColor = event.target.value
         });
         $(".deleteRow1").on("click", function removeRowEntry(event) {
-            //console.warn(event.target.parentElement)
+            console.warn(event.target.parentElement)
             $(event.target).closest("tbody").remove();
         });
     })
 
-    $("#copyColors").click(function CopyTextColors(event) {
-        event.target.innerHTML = '<div class="spinner-border-sm spinner-border"></div>'
-        saveOption("/api/v1/set/text/colors?copy=true", function finishCopyColors(event) {
-            setTimeout(function () {
-                document.getElementById("copyColors").innerHTML = "Copy from progressbar colors"
-            }, 500)
-
-        })
-    });
-
-
-    $("input[name='btnradio2']").click(function (event) {
-        const darkid = parseInt(event.currentTarget.id.replace("Mbtnradio", ""))
-        if (darkid == 1) {
-            DarkReader.disable()
-        } else if (darkid == 2) {
-            DarkReader.enable()
-        } else {
-            DarkReader.auto()
-        }
-        Cookies.set("interfaceColor", darkid)
-    });
-    
     // Presets
     $(".pres").click(function (event) {
         currentTime = parseInt(event.currentTarget.value)
@@ -186,6 +184,8 @@ $(document).ready(function () {
         const colors = convertColorSegments("colors1")
         const colors2 = convertColorSegments("colors2")
 
+        console.log(JSON.stringify(colors))
+
         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)
@@ -196,6 +196,7 @@ $(document).ready(function () {
 
         for (pI in allPathes) {
             const path = allPathes[pI];
+            console.warn(path)
             saveOption(path, function (event) {
                 console.debug(event)
             })
@@ -225,6 +226,7 @@ $(document).ready(function () {
 
         for (pI in allPathes) {
             const path = allPathes[pI];
+            console.warn(path)
             saveOption(path, function (event) {
                 console.debug(event)
             })
@@ -396,7 +398,7 @@ $(document).ready(function () {
 
         $(".pageC").addClass("hidden")
         $("#" + event.target.href.split("#")[1]).removeClass("hidden")
-        // console.log(event.target.href.split("#")[1])
+        console.log(event.target.href.split("#")[1])
     });
 });
 

static/js/script.js

@@ -9,9 +9,6 @@ let socket = new ReconnectingWebSocket("ws://localhost:" + location.port);
 let ackdSessionToken = false
 let isFirstPacket = true
 
-let lastTime = "00:00:00";
-let timerCountdownFirst = true;
-
 socket.onopen = function (e) {
   // alert("[open] Connection established");
   //alert("Sending to server");
@@ -50,7 +47,29 @@ socket.onclose = function (event) {
     // e.g. server process killed or network down
     // event.code is usually 1006 in this case
     console.error('[close] Connection died');
+
+    /*websocketFailed = true
+    if (recoveryAttempts < 5) {
+      setTimeout(function handleWebsocketRecovery() {
+        // requestBackend()
+        websocketFailed = false
+        recoveryAttempts++;
+        console.warn("Trying to recover websocket connection")
+        socket.onopen = function (e) {
+          // alert("[open] Connection established");
+          //alert("Sending to server");
+          socket.send("new client");
+        };
+      }, 1000)
+    } else {
+      backReqInt = setInterval(requestBackend, 500);
     }
+    */
+  }
+};
+
+socket.onerror = function (error) {
+  // alert(`[error] ${error.message}`);
 };
 
 allowFullscreen = true
@@ -60,9 +79,9 @@ let timeDiff = 0
 function enterFullscreen(element) {
   if (element.requestFullscreen) {
     element.requestFullscreen();
-  } else if (element.msRequestFullscreen) {
+  } else if (element.msRequestFullscreen) {      // for IE11 (remove June 15, 2022)
     element.msRequestFullscreen();
-  } else if (element.webkitRequestFullscreen) {
+  } else if (element.webkitRequestFullscreen) {  // iOS Safari
     element.webkitRequestFullscreen();
   }
 }
@@ -82,6 +101,7 @@ function updateFullscreen() {
 }
 
 
+
 function msToTime(s, data) {
   isSmallerThenZero = false
   if (s < 0) {
@@ -150,6 +170,25 @@ function handleUpdate() {
   var data = dataFame;
   document.getElementById("incomeData").innerHTML = JSON.stringify(data)
   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";
@@ -192,35 +231,13 @@ function handleUpdate() {
     document.getElementById("wholeProgBar").style.display = "none";
     document.getElementById("clockSec").innerHTML = "";
     document.getElementById("timer").style.color = "white"
-    timerCountdownFirst = true;
 
   } else if (data.mode == "timer") {
     document.getElementById("wholeProgBar").style.display = "block";
-    const now = new Date()
-
-    if(timerCountdownFirst){
-      const diff = data.countdownGoal - now.getTime()
-      timerCountdownFirst = false
-      document.getElementById("timer").innerHTML = msToTime(diff, data);
-      if (diff > 0) {
-        document.getElementById("progBar").style.width = percentage(diff, data.timeAmountInital) + "%";
-      } else {
-        document.getElementById("progBar").style.width = "0%";
-      }
-
-      document.getElementById("progBar").style.backgroundColor = findProgessColor(data.colorSegments, diff)
-      document.getElementById("testImg").style.display = "none";
-      if (data.enableColoredText) {
-        document.getElementById("timer").style.color = findProgessColor(data.textColors, diff)
-      } else {
-        document.getElementById("timer").style.color = "white"
-      }
-    }
-
     if (data.timerRunState) {
+      const now = new Date()
       const diff = data.countdownGoal - now.getTime()
       document.getElementById("timer").innerHTML = msToTime(diff, data);
-      lastTime = msToTime(diff, data);
       if (diff > 0) {
         document.getElementById("progBar").style.width = percentage(diff, data.timeAmountInital) + "%";
       } else {
@@ -235,18 +252,14 @@ function handleUpdate() {
         document.getElementById("timer").style.color = "white"
       }
 
-    } else {
-      document.getElementById("timer").innerHTML = lastTime
     }
   } else if (data.mode == "black") {
-    timerCountdownFirst = true;
     document.getElementById("timer").innerHTML = "";
     document.getElementById("testImg").style.display = "none";
     document.getElementById("wholeProgBar").style.display = "none";
     document.getElementById("clockSec").innerHTML = "";
 
   } else if (data.mode == "test") {
-    timerCountdownFirst = true;
     document.getElementById("timer").innerHTML = "";
     document.getElementById("testImg").style.display = "block";
     document.getElementById("progBar").style.display = "none";

templates/newAdminPanel.html

@@ -21,8 +21,8 @@
     <script type="text/javascript" src="/js/cookie.js"></script>
     <link href="/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
     <link href="/css/mainStyle.css" rel="stylesheet">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/mdbassit/Coloris@latest/dist/coloris.min.css"/>
+    <link href="colorpicker/css/bootstrap-colorpicker.css" rel="stylesheet">
-    <script src="https://cdn.jsdelivr.net/gh/mdbassit/Coloris@latest/dist/coloris.min.js"></script>
+    <script src="colorpicker/js/bootstrap-colorpicker.js"></script>
 </head>
 
 <body>
@@ -412,13 +412,6 @@
                 <input type="checkbox" name="debugMode" id="debugModeEnable" value="true"><br><br>
 
                 <button type="button" class="btn btn-outline-success" id="applyDebug">Apply settings</button>
-                <br>
-                <div class="full">
-                    <p>Full size thumbnail</p>
-                    <div class="clr-field" style="color: rgb(255, 204, 0);">
-                        <button aria-labelledby="clr-open-label"></button>
-                        <input type="text" class="coloris" value="#ffcc00"></div>
-                  </div>
                 <br><br>
                 <h3>Raw server reponse</h3>
                 <code id="responeSnippet" style="width: 40%; display: inline-block;" class="overflow-auto">
@@ -443,13 +436,7 @@
     </main>
     <script type="text/javascript" src="js/jsonview.js"></script>
     <script type="text/javascript" src="/js/interface.js"> </script>
-    <script type="text/javascript">
 
-        Coloris({
-          el: '.coloris',
-          alpha: false,
-        });
-    </script>
 
 </body>