Fix countdown inital value, fix colortable time pickers

helpers.js

@@ -22,12 +22,11 @@ function convertStringBooleanToBoolean(stringBoolean) {
 
 function wrapBooleanConverter(stringBoolean, res) {
   const temp = convertStringBooleanToBoolean(stringBoolean);
-  if(temp === -1) {
+  if(temp == -1) {
     res.json({ status: "error", message: "Invalid boolean value" });
   } else {
     return(temp);
   }
 }
 
-// export { convertStringBooleanToBoolean, wrapBooleanConverter };
 module.exports = { convertStringBooleanToBoolean, wrapBooleanConverter };

index.js

@@ -40,12 +40,12 @@ currentState = {
   showMessage: false,
   messageAppearTime: 0,
   showProgressbar: true,
-  colorSegments: {  40000: "yellow", 20000: "#FFAE00", 5000: "#ff0000", "START": "green" },
+  colorSegments: { 40000: "yellow", 20000: "#FFAE00", 5000: "#ff0000", "START": "green" },
   textColors: {},
   srvTime: 0,
   enableColoredText: true,
   debug: false,
-  sessionToken: Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15), 
+  sessionToken: Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15),
 };
 
 const dataToBeWritten = {};
@@ -58,7 +58,7 @@ currentState.textColors = currentState.colorSegments
 const wsServer = new ws.Server({ noServer: true });
 wsServer.on('connection', socket => {
   socket.on('message', function incoming(data) {
-    if(data.toString() == "new client"){
+    if (data.toString() == "new client") {
       updatedData()
     }
   });
@@ -78,7 +78,7 @@ function updatedData() {
   currentState.srvTime = new Date().getTime()
   wsServer.broadcast(JSON.stringify(currentState));
   clearTimeout(updatey);
-  setTimeout(updatedData, 5000 );
+  setTimeout(updatedData, 5000);
 }
 
 console.log("Preparing routes...");
@@ -131,7 +131,7 @@ app.get("/api/v1/set/mode", function (req, res) {
 
 app.get("/api/v1/set/layout/showMillis", function (req, res) {
   const resy = helper.wrapBooleanConverter(req.query.show, res)
-  if (resy) {
+  if (resy != undefined) {
     currentState.showMilliSeconds = resy;
     if (req.query.persist === 'true') {
       dataToBeWritten.showMilliSeconds = currentState.showMilliSeconds
@@ -151,6 +151,7 @@ app.get("/api/v1/set/timerGoal", function (req, res) {
 app.get("/api/v1/set/addMillisToTimer", function (req, res) {
   currentState.timeAmountInital = req.query.time;
   currentState.countdownGoal = new Date().getTime() + parseInt(req.query.time)
+  currentState.pauseMoment = new Date().getTime();
   res.json({ status: "ok" });
   updatedData()
 });
@@ -180,7 +181,7 @@ app.get("/api/v1/ctrl/timer/restart", function (req, res) {
 
 app.get("/api/v1/set/layout/showTime", function (req, res) {
   const resy = helper.wrapBooleanConverter(req.query.show, res)
-  if (resy) {
+  if (resy != undefined) {
     currentState.showTimeOnCountdown = resy;
     if (req.query.persist === 'true') {
       dataToBeWritten.showTimeOnCountdown = currentState.showTimeOnCountdown
@@ -202,7 +203,7 @@ app.get("/api/v1/set/progressbar/show", function (req, res) {
 app.get("/api/v1/set/progressbar/colors", function (req, res) {
   try {
     let data = req.query.colors
-    if(req.query.isBase64 === "true"){
+    if (req.query.isBase64 === "true") {
       data = atob(data)
     }
     currentState.colorSegments = JSON.parse(data);
@@ -219,14 +220,19 @@ app.get("/api/v1/set/progressbar/colors", function (req, res) {
 
 app.get("/api/v1/set/text/colors", function (req, res) {
   try {
-    let data = req.query.colors
+    if (req.query.copy === "true") {
-    if(req.query.isBase64 === "true"){
+      currentState.textColors = currentState.colorSegments
-      data = atob(data)
+      res.json({ status: "ok" });
-    }
+    } else {
-    console.debug(data)
+      let data = req.query.colors
-    currentState.textColors = JSON.parse(data);
+      if (req.query.isBase64 === "true") {
-    if (req.query.persist === 'true') {
+        data = atob(data)
-      dataToBeWritten.textColors = currentState.textColors
+      }
+      console.debug(data)
+      currentState.textColors = JSON.parse(data);
+      if (req.query.persist === 'true') {
+        dataToBeWritten.textColors = currentState.textColors
+      }
     }
     res.json({ status: "ok" });
   } catch (error) {

static/js/interface.js

@@ -6,20 +6,24 @@ function convertTimeOffset() {
 
 function convertColorSegments(elementId) {
     const raw = document.getElementById(elementId);
-    console.log(raw)
     const segmentData = {}
     for (elm in raw.children) {
-        if (raw.children[elm].nodeName == "TBODY") {
+        if (raw.children[elm].nodeName == "TR") {
-            const child = raw.children[elm].firstChild.childNodes
+            const child = raw.children[elm].children[1].children[0]
-            segmentData[child[0].innerText] = child[2].firstChild.value
+            let timeVal = parseInt(raw.children[elm].children[0].children[0].value * 1000);
+            if(Number.isInteger(timeVal)){
+                segmentData[timeVal] = child.style.color
+            } else {
+                segmentData["START"] = child.style.color
+            }
         }
     }
     console.info(segmentData)
     return (segmentData)
 }
 
-$(document).ready(function () {
+$(function () {
-    $(".numVal").bind("DOMSubtreeModified", alert);
+    // $(".numVal").bind("DOMSubtreeModified", alert);
 
     const modes = ["timer", "clock", "black", "test"]
     let selectPresetTime = 0;
@@ -43,28 +47,58 @@ $(document).ready(function () {
         const tree2 = jsonview.create(dataSystem);
         jsonview.render(tree2, document.getElementById("systemInfo"));
         jsonview.expand(tree2);
-        // console.log(dataSystem)
     })
 
-    $("#addRow").click(function (event) {
+    $("#addRow").on("click", function (event) {
-        $("#colors1").append(
+        const tableEntryDom = document.getElementById("tableCopySource").cloneNode(true)
-            '<tr>' +
+        let temp = tableEntryDom.innerHTML
-            '<td contenteditable="true" class="time"></td>' +
+        temp = temp.replace("#COLOR#", "gray");
-            '<td contenteditable="true" class="color full"><input id="demo-input1" "type="text" value="#COLOR#" data-coloris /></td></td>' +
+        temp = temp.replace("#bg-COLOR#", "gray");
-            '<td><button type="button" class="btn btn-danger btn-rounded btn-sm my-0 deleteRow1">Remove</button></td>' +
+        temp = temp.replace("#VALUE#", 60); // BUG: Doesn't work but not too important
-            '</tr>'
+        temp = temp.replace("timeValue-ID", Math.floor(Math.random() * 9999999))
-        );
+        tableEntryDom.innerHTML = temp;
-
+        tableEntryDom.firstChild.nextSibling.children[0].classList.add("timeDurPicker")
+        tableEntryDom.id = Math.floor(Math.random() * 9999999)
+        document.getElementById("colors1").appendChild(tableEntryDom)
+        $(".deleteRow1").on("click", function removeRowEntry(event) {
+            $(event.target).closest("tr").remove();
+        });
+        $('.timeDurPicker').durationPicker({
+            showSeconds: true,
+            showDays: false,
+            onChanged: function (newVal, test, val2) {
+                //   $('#duration-label2').text(newVal);
+                val2.days[0].parentElement.parentElement.parentElement.parentElement.children[1].value = newVal
+                //console.log(val2.days[0].parentElement.parentElement.parentElement.parentElement.children[1].value)
+                //console.log(val2.days[0].parentElement.parentElement.parentElement.parentElement.children[1])
+            }
+        });
     });
 
-    $("#addRow2").click(function (event) {
+    $("#addRow2").on("click", function (event) {
-        $("#colors2").append(
+        const tableEntryDom = document.getElementById("tableCopySource").cloneNode(true)
-            '<tr>' +
+        let temp = tableEntryDom.innerHTML
-            '<td contenteditable="true" class="time"></td>' +
+        temp = temp.replace("#COLOR#", "gray");
-            '<td contenteditable="true" class="color full"><input id="demo-input2" type="text" value="#COLOR#" data-coloris /></td></td>' +
+        temp = temp.replace("#bg-COLOR#", "gray");
-            '<td><button type="button" class="btn btn-danger btn-rounded btn-sm my-0 deleteRow1">Remove</button></td>' +
+        temp = temp.replace("#VALUE#", 60); // BUG: Doesn't work but not too important
-            '</tr>'
+        temp = temp.replace("timeValue-ID", Math.floor(Math.random() * 9999999))
-        );
+        tableEntryDom.innerHTML = temp;
+        tableEntryDom.firstChild.nextSibling.children[0].classList.add("timeDurPicker")
+        tableEntryDom.id = Math.floor(Math.random() * 9999999)
+        document.getElementById("colors2").appendChild(tableEntryDom)
+        $(".deleteRow1").on("click", function removeRowEntry(event) {
+            $(event.target).closest("tr").remove();
+        });
+        $('.timeDurPicker').durationPicker({
+            showSeconds: true,
+            showDays: false,
+            onChanged: function (newVal, test, val2) {
+                //   $('#duration-label2').text(newVal);
+                val2.days[0].parentElement.parentElement.parentElement.parentElement.children[1].value = newVal
+                //console.log(val2.days[0].parentElement.parentElement.parentElement.parentElement.children[1].value)
+                //console.log(val2.days[0].parentElement.parentElement.parentElement.parentElement.children[1])
+            }
+        });
     });
 
     
@@ -93,38 +127,98 @@ $(document).ready(function () {
         // Restore mode radio
         const currentModeInt = modes.indexOf(jsonResult.mode);
         $("#btnradio" + (currentModeInt + 1))[0].checked = true
+
         // Restore layout settings
         $("#showTime")[0].checked = jsonResult.showTimeOnCountdown;
         $("#showMillis")[0].checked = jsonResult.showMilliSeconds;
         $("#progBarShow")[0].checked = jsonResult.showProgressbar;
         $("#textColors")[0].checked = jsonResult.enableColoredText;
+        console.log(document.getElementById("tableCopySource"))
+
+        let tableEntryDom = document.getElementById("tableCopySource").cloneNode(true)
+        let currIndex = 0
         for (item in jsonResult.colorSegments) {
-            let temp = tableEntry.replace("#VALUE#", item);
+            tableEntryDom = document.getElementById("tableCopySource").cloneNode(true)
+            let temp = tableEntryDom.innerHTML
             temp = temp.replace("#COLOR#", jsonResult.colorSegments[item]);
             temp = temp.replace("#bg-COLOR#", jsonResult.colorSegments[item]);
-            document.getElementById("colors1").innerHTML += temp
+            temp = temp.replace("timeValue-ID", "timeValue-1C" + currIndex)
-            //console.log(jsonResult.colorSegments[item])
+
+            if(item != "START"){
+                temp = temp.replace("#VALUE#", item/1000);
+                tableEntryDom.innerHTML = temp;
+                tableEntryDom.firstChild.nextSibling.children[0].classList.add("timeDurPicker")
+            } else {
+                tableEntryDom.innerHTML = temp;
+                tableEntryDom.children[2].children[0].children[0].disabled = true;
+                tableEntryDom.children[2].children[0].setAttribute("data-toggle", "tooltip")
+                tableEntryDom.children[2].children[0].setAttribute("data-placement", "right")// 'data-placement="right" title="Tooltip on right"'
+                tableEntryDom.children[2].children[0].setAttribute("title", "You cannot delete the start time")
+                
+                tableEntryDom.children[0].innerHTML = '<i class="bi bi-flag-fill"></i> Start'
+            }
+            tableEntryDom.id = "1C" + currIndex
+            tableEntryDom.style.display = "table-row"
+            document.getElementById("colors1").appendChild(tableEntryDom)
+            currIndex++;
         }
 
+        
+
         // Text colors
+        currIndex = 0
         for (item in jsonResult.textColors) {
-            let temp = tableEntry.replace("#VALUE#", item);
+            tableEntryDom = document.getElementById("tableCopySource").cloneNode(true)
+            let temp = tableEntryDom.innerHTML
             temp = temp.replace("#COLOR#", jsonResult.textColors[item]);
             temp = temp.replace("#bg-COLOR#", jsonResult.textColors[item]);
-            document.getElementById("colors2").innerHTML += temp
+            temp = temp.replace("timeValue-ID", "timeValue-1C" + currIndex)
-            //console.log(jsonResult.textColors[item])
+
+            if(item != "START"){
+                temp = temp.replace("#VALUE#", item/1000);
+                tableEntryDom.innerHTML = temp;
+                tableEntryDom.firstChild.nextSibling.children[0].classList.add("timeDurPicker")
+            } else {
+                tableEntryDom.innerHTML = temp;
+                tableEntryDom.children[2].children[0].children[0].disabled = true;
+                tableEntryDom.children[2].children[0].setAttribute("data-toggle", "tooltip")
+                tableEntryDom.children[2].children[0].setAttribute("data-placement", "right")// 'data-placement="right" title="Tooltip on right"'
+                tableEntryDom.children[2].children[0].setAttribute("title", "You cannot delete the start time")
+                
+                tableEntryDom.children[0].innerHTML = '<i class="bi bi-flag-fill"></i> Start'
+            }
+            
+            
+            // timeDurPicker
+            tableEntryDom.id = "1C" + currIndex
+            tableEntryDom.style.display = "table-row"
+            document.getElementById("colors2").appendChild(tableEntryDom)
+            currIndex++;
         }
 
 
+        $('.timeDurPicker').durationPicker({
+            showSeconds: true,
+            showDays: false,
+            onChanged: function (newVal, test, val2) {
+                //   $('#duration-label2').text(newVal);
+                val2.days[0].parentElement.parentElement.parentElement.parentElement.children[1].value = newVal
+                //console.log(val2.days[0].parentElement.parentElement.parentElement.parentElement.children[1].value)
+                //console.log(val2.days[0].parentElement.parentElement.parentElement.parentElement.children[1])
+            }
+        });
+
+
 
         //console.debug(jsonResult, currentModeInt)
         $('.colorPicky').on('colorpickerChange', function (event) {
             event.target.parentElement.style.backgroundColor = event.target.value
         });
+
         $(".deleteRow1").on("click", function removeRowEntry(event) {
-            //console.warn(event.target.parentElement)
+            $(event.target).closest("tr").remove();
-            $(event.target).closest("tbody").remove();
         });
+        $('[data-toggle="tooltip"]').tooltip({container: "body"})
     })
 
     $("#copyColors").click(function CopyTextColors(event) {
@@ -174,7 +268,7 @@ $(document).ready(function () {
     $("#applyLayout").click(function (event) {
         $("#applyLayout")[0].innerHTML = '<div class="spinner-border-sm spinner-border"></div>'
 
-        // Collect all data, build all paths3
+        // Collect all data, build all paths
         const allPathes = [];
 
         const showTimeB = $("#showTime")[0].checked

templates/newAdminPanel.html

@@ -261,7 +261,7 @@
                     <summary>Text Colors</summary>
                     <p>
 
-                    <div id="table" class="table-editable">
+                    <div id="table2" class="table-editable">
                         <table class="table table-bordered table-responsive-md table-striped text-center" id="colors2">
                             <thead>
                                 <tr>
@@ -314,26 +314,53 @@
                 </div>
                 <br><br>
                 <i class="bi-alarm"></i>
-                <templateObj id="tableCopySource">
+                <templateObj>
-                    <tr>
+                    <table class="table table-bordered table-responsive-md table-striped text-center" id="colors1">
-                        <td contenteditable="true" class="time">
+                        <thead>
-                            <form>
+                            <tr>
-                                <div class="form-group">
+                                <th class="text-center">Time</th>
-                                    <label>Duration with seconds</label>
+                                <th class="text-center">Color</th>
-                                    <input type="text" class="form-control" id="duration2">
+                                <th class="text-center">Remove</th>
-                                </div>
+                            </tr>
-                                <value></value>
+                        </thead>
-                            </form>
+                        <tr id="tableCopySource">
+                            <td contenteditable="false" class="time">
+                                        <input type="text" class="form-control " id="timeValue-ID" value="#VALUE#">
+                                    <value></value>
+                            </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  type="text" class="coloris" value="#COLOR#"></div> 
+                                      </div> 
+                                      </td>
+                                      <td>
+                                        <span class="table-remove"><button type="button"
+                                                class="btn btn-danger btn-rounded btn-sm my-0 deleteRow1">
+                                                Remove
+                                            </button></span>
+                                    </td>
+                        </tr>
+                        </tbody>
+                    </table>
 
-                        </td>
+                   
-                        <td contenteditable="true" class="color full"><input id="demo-input2" type="text"
+                    
-                                value="#COLOR#" data-coloris /></td>
+                
-                        </td>
+                <tr><td class="pt-3-half numVal" contenteditable="true">#VALUE#</td>
-                        <td>
+                    <td class="pt-3-half full" contenteditable="false"> 
-                            <button type="button"
+                    <div class="clr-field" style="color: #bg-COLOR#;"> 
-                                class="btn btn-danger btn-rounded btn-sm my-0 deleteRow1">Remove</button>
+                                <button aria-labelledby="clr-open-label"></button> 
-                        </td>
+                                <input id="demo-input1" type="text" class="coloris" value="#COLOR#"></div> 
-                    </tr>
+                          </div> 
+                          </td>
+                    <td>
+                        <span class="table-remove"><button type="button"
+                                class="btn btn-danger btn-rounded btn-sm my-0 deleteRow1">
+                                Remove
+                            </button></span>
+                    </td>
+                </tr>
                 </templateObj>
                 <script>
                     $('#duration2').durationPicker({
@@ -376,7 +403,10 @@
         Coloris({
             el: '.coloris',
             alpha: false,
-        });
+        }); 
+            $(function () {
+                $('[data-toggle="tooltip"]').tooltip({container: "body"})
+              })                        
     </script>
 
 </body>