some more touchups + fixes

static/css/mainStyle.css

@@ -17,6 +17,12 @@ 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,11 +51,10 @@ $(document).ready(function () {
         $("#colors1").append(
             '<tr>' +
             '<td contenteditable="true" class="time"></td>' +
-            '<td contenteditable="true" class="color"><input id="demo-input1" class="colorPicky" type="button" value="#COLOR#" /></td></td>' +
+            '<td contenteditable="true" class="color full"><input id="demo-input1" "type="text" value="#COLOR#" data-coloris /></td></td>' +
             '<td><button type="button" class="btn btn-danger btn-rounded btn-sm my-0 deleteRow1">Remove</button></td>' +
             '</tr>'
         );
-        $('.colorPicky').colorpicker();
 
     });
 
@@ -63,42 +62,23 @@ $(document).ready(function () {
         $("#colors2").append(
             '<tr>' +
             '<td contenteditable="true" class="time"></td>' +
-            '<td contenteditable="true" class="color"><input id="demo-input2" class="colorPicky" type="button" value="#COLOR#" /></td></td>' +
+            '<td contenteditable="true" class="color full"><input id="demo-input2" type="text" value="#COLOR#" data-coloris /></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" contenteditable="false" style="background-color: #bg-COLOR#;"><input id="demo-input1" class="colorPicky" type="button" value="#COLOR#" /></td>\
+            <td class="pt-3-half full" contenteditable="false"> \
+            <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">\
@@ -124,7 +104,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
@@ -133,22 +113,44 @@ $(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)
@@ -184,8 +186,6 @@ $(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,7 +196,6 @@ $(document).ready(function () {
 
         for (pI in allPathes) {
             const path = allPathes[pI];
-            console.warn(path)
             saveOption(path, function (event) {
                 console.debug(event)
             })
@@ -226,7 +225,6 @@ $(document).ready(function () {
 
         for (pI in allPathes) {
             const path = allPathes[pI];
-            console.warn(path)
             saveOption(path, function (event) {
                 console.debug(event)
             })
@@ -398,7 +396,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,6 +9,9 @@ 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");
@@ -47,29 +50,7 @@ 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
@@ -79,9 +60,9 @@ let timeDiff = 0
 function enterFullscreen(element) {
   if (element.requestFullscreen) {
     element.requestFullscreen();
-  } else if (element.msRequestFullscreen) {      // for IE11 (remove June 15, 2022)
+  } else if (element.msRequestFullscreen) {
     element.msRequestFullscreen();
-  } else if (element.webkitRequestFullscreen) {  // iOS Safari
+  } else if (element.webkitRequestFullscreen) {
     element.webkitRequestFullscreen();
   }
 }
@@ -101,7 +82,6 @@ function updateFullscreen() {
 }
 
 
-
 function msToTime(s, data) {
   isSmallerThenZero = false
   if (s < 0) {
@@ -170,25 +150,6 @@ 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";
@@ -231,12 +192,15 @@ 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";
-    if (data.timerRunState) {
     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) + "%";
@@ -251,15 +215,38 @@ function handleUpdate() {
       } else {
         document.getElementById("timer").style.color = "white"
       }
+    }
 
+    if (data.timerRunState) {
+      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 {
+        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"
+      }
+
+    } 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 href="colorpicker/css/bootstrap-colorpicker.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/mdbassit/Coloris@latest/dist/coloris.min.css"/>
-    <script src="colorpicker/js/bootstrap-colorpicker.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/mdbassit/Coloris@latest/dist/coloris.min.js"></script>
 </head>
 
 <body>
@@ -412,6 +412,13 @@
                 <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">
@@ -436,7 +443,13 @@
     </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>