Some more changes to the color picker

helpers.js

@@ -0,0 +1,33 @@
+/**
+ * Converts a string into a boolean
+ * @param {String} stringBoolean 
+ * @returns Boolean if valid or -1 otherwise
+ */
+function convertStringBooleanToBoolean(stringBoolean) {
+  if (stringBoolean === 'true') {
+    return true;
+  } else if(stringBoolean === 'false') {
+    return false;
+  } else {
+      return(-1)
+  }
+}
+
+/**
+ * Wraps convertStringBooleanToBoolean to be used with express. Will respond with an error if the boolean is invalid. Else dataObj will be set to the converted boolean value.
+ * @param {String} stringBoolean An input string given by the user
+ * @param {*} res Expresses response object
+ * @param {*} dataObj The data to manipulate
+ */
+
+function wrapBooleanConverter(stringBoolean, res) {
+  const temp = convertStringBooleanToBoolean(stringBoolean);
+  if(temp === -1) {
+    res.json({ status: "error", message: "Invalid boolean value" });
+  } else {
+    return(temp);
+  }
+}
+
+// export { convertStringBooleanToBoolean, wrapBooleanConverter };
+module.exports = { convertStringBooleanToBoolean, wrapBooleanConverter };

index.js

@@ -1,6 +1,7 @@
 const express = require("express");
 const fs = require("fs");
 const bodyParser = require("body-parser");
+const helper = require("./helpers.js");
 
 console.log("Preparing server...");
 const app = express();
@@ -18,10 +19,10 @@ app.use(
 
 let loadedData = {}
 
-if(fs.existsSync("data-persistence.json")) {
+if (fs.existsSync("data-persistence.json")) {
   const loadedDataRaw = fs.readFileSync("data-persistence.json", "utf8");
   loadedData = JSON.parse(loadedDataRaw);
-}else{
+} else {
   console.warn("Unable to load persistent data");
 }
 
@@ -38,7 +39,7 @@ currentState = {
   showMessage: false,
   messageAppearTime: 0,
   showProgressbar: true,
-  colorSegments: {20000: "#FFAE00", 5000: "#ff0000", "START": "yellow"},
+  colorSegments: { 20000: "#FFAE00", 5000: "#ff0000", "START": "yellow" },
   textColors: {},
   srvTime: 0,
   enableColoredText: true,
@@ -83,11 +84,15 @@ app.get("/api/v1/set/mode", function (req, res) {
 });
 
 app.get("/api/v1/set/layout/showMillis", function (req, res) {
-  currentState.showMilliSeconds = (req.query.show === 'true');
+  const resy = helper.wrapBooleanConverter(req.query.show, res)
-  if(req.query.persist === 'true'){
+  if (resy) {
-    dataToBeWritten.showMilliSeconds = currentState.showMilliSeconds
+    currentState.showMilliSeconds = resy;
+    if (req.query.persist === 'true') {
+      dataToBeWritten.showMilliSeconds = currentState.showMilliSeconds
+    }
+    res.json({ status: "ok" });
   }
-  res.json({ status: "ok" });
+
 });
 
 app.get("/api/v1/set/timerGoal", function (req, res) {
@@ -99,7 +104,7 @@ app.get("/api/v1/set/addMillisToTimer", function (req, res) {
   currentState.timeAmountInital = req.query.time;
   currentState.countdownGoal = new Date().getTime() + parseInt(req.query.time)
   res.json({ status: "ok" });
-}); 
+});
 
 app.get("/api/v1/ctrl/timer/pause", function (req, res) {
   currentState.timerRunState = false;
@@ -108,8 +113,8 @@ app.get("/api/v1/ctrl/timer/pause", function (req, res) {
 });
 
 app.get("/api/v1/ctrl/timer/play", function (req, res) {
-  
+
-  if(currentState.timerRunState == false){
+  if (currentState.timerRunState == false) {
     currentState.timerRunState = true
     currentState.countdownGoal += new Date().getTime() - currentState.pauseMoment;
   }
@@ -122,16 +127,20 @@ app.get("/api/v1/ctrl/timer/restart", function (req, res) {
 });
 
 app.get("/api/v1/set/layout/showTime", function (req, res) {
-  currentState.showTimeOnCountdown = (req.query.show === 'true');
+  const resy = helper.wrapBooleanConverter(req.query.show, res)
-  if(req.query.persist === 'true'){
+  if (resy) {
-    dataToBeWritten.showTimeOnCountdown = currentState.showTimeOnCountdown
+    currentState.showTimeOnCountdown = resy;
+    if (req.query.persist === 'true') {
+      dataToBeWritten.showTimeOnCountdown = currentState.showTimeOnCountdown
+    }
+    res.json({ status: "ok" });
   }
   res.json({ status: "ok" });
 });
 
 app.get("/api/v1/set/progressbar/show", function (req, res) {
   currentState.showProgressbar = (req.query.show === 'true');
-  if(req.query.persist === 'true'){
+  if (req.query.persist === 'true') {
     dataToBeWritten.showProgressbar = currentState.showProgressbar
   }
   res.json({ status: "ok" });
@@ -140,7 +149,7 @@ app.get("/api/v1/set/progressbar/show", function (req, res) {
 app.get("/api/v1/set/progressbar/colors", function (req, res) {
   try {
     currentState.colorSegments = JSON.parse(req.query.colors);
-    if(req.query.persist === 'true'){
+    if (req.query.persist === 'true') {
       dataToBeWritten.colorSegments = currentState.colorSegments
     }
     res.json({ status: "ok" });
@@ -151,12 +160,12 @@ app.get("/api/v1/set/progressbar/colors", function (req, res) {
 
 app.get("/api/v1/set/text/colors", function (req, res) {
   try {
-    if(req.query.copy === "true"){
+    if (req.query.copy === "true") {
       currentState.textColors = currentState.colorSegments;
     } else {
       currentState.textColors = JSON.parse(req.query.colors);
     }
-    if(req.query.persist === 'true'){
+    if (req.query.persist === 'true') {
       dataToBeWritten.textColors = currentState.textColors
     }
     res.json({ status: "ok" });
@@ -167,7 +176,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');
-  if(req.query.persist === 'true'){
+  if (req.query.persist === 'true') {
     dataToBeWritten.enableColoredText = currentState.enableColoredText
   }
   res.json({ status: "ok" });
@@ -192,8 +201,28 @@ app.get("/api/v1/ctrl/message/hide", function (req, res) {
 
 app.get("/api/v1/storage/commit", function (req, res) {
   const tempString = JSON.stringify(dataToBeWritten);
-  fs.writeFileSync("data-persistence.json", tempString);
+  try {
-  res.json({ status: "ok" });
+    fs.writeFileSync("data-persistence.json", tempString);
+    res.json({ status: "ok" });
+  } catch (error) {
+    res.json({ status: "error", reason: error });
+  }
+});
+
+
+app.get("/api/v1/storage/delete", function (req, res) {
+  if (req.query.delete === "true") {
+    if (fs.existsSync("data-persistence.json")) {
+      fs.unlinkSync("data-persistence.json");
+      res.json({ status: "ok" });
+    } else {
+      res.json({ status: "error", reason: "No persistence data was found" });
+    }
+
+  } else {
+
+  } res.json({ status: "error", reason: "Missing delete argument" });
+
 });
 
 
@@ -201,6 +230,6 @@ console.log("Starting server...");
 const port = 8005
 app.listen(port);
 
-console.info("Server running on port " + port );
+console.info("Server running on port " + port);
 console.info("Visit localhost:" + port + "/timer for the timer page");
 console.info("Visit localhost:" + port + " for the admin page");

templates/newAdminPanel.html

@@ -343,11 +343,31 @@
                 <label for="progBarShow">Show progressbar:</label>
                 <input type="checkbox" name="progBarShow" id="progBarShow"><br>
                 <br>
-                <placeholder>Colors</placeholder><br>
+                <placeholder>Make this writeable, currently read only</placeholder>
+                <div class="card">
+                    <div class="card-body">
+                        <div id="table" class="table-editable">
+                            <span class="table-add float-right mb-3 mr-2"><a href="#!" class="text-success"><i
+                                        class="fas fa-plus fa-2x" aria-hidden="true"></i></a></span>
+                            <table class="table table-bordered table-responsive-md table-striped text-center" id="colors1">
+                                <thead>
+                                    <tr>
+                                        <th class="text-center">Time</th>
+                                        <th class="text-center">Color</th>
+                                        <th class="text-center">Remove</th>
+                                    </tr>
+                                </thead>
+                               
+
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                </div>
                 <label for="textColors">Enable Text Colors:</label>
                 <input type="checkbox" name="textColors" id="textColors"><br>
                 <br>
-                <placeholder>Colors</placeholder><br>
+
 
                 <button type="button" class="btn btn-outline-success" id="applyLayout">Apply settings</button>
 
@@ -380,72 +400,6 @@
                     <input id="demo-input" class="colorPicky" type="button" value="rgb(255, 128, 0)" />
                 </div>
 
-                <div class="card">
-                    <div class="card-body">
-                        <div id="table" class="table-editable">
-                            <span class="table-add float-right mb-3 mr-2"><a href="#!" class="text-success"><i
-                                        class="fas fa-plus fa-2x" aria-hidden="true"></i></a></span>
-                            <table class="table table-bordered table-responsive-md table-striped text-center">
-                                <thead>
-                                    <tr>
-                                        <th class="text-center">Time</th>
-                                        <th class="text-center">Color</th>
-                                        <th class="text-center">Remove</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    <tr>
-                                        <td class="pt-3-half numVal" contenteditable="true">2000</td>
-                                        <td class="pt-3-half" contenteditable="false"><input id="demo-input0" class="colorPicky" type="button" value="rgb(255, 128, 0)" /></td>
-
-                                        <td>
-                                            <span class="table-remove"><button type="button"
-                                                    class="btn btn-danger btn-rounded btn-sm my-0">
-                                                    Remove
-                                                </button></span>
-                                        </td>
-                                    </tr>
-                                    <!-- This is our clonable table line -->
-                                    <tr>
-                                        <td class="pt-3-half numVal" contenteditable="true">5000</td>
-                                        <td class="pt-3-half" contenteditable="false"><input id="demo-input1" class="colorPicky" type="button" value="rgb(255, 128, 0)" /></td>
-                                        <td>
-                                            <span class="table-remove"><button type="button"
-                                                    class="btn btn-danger btn-rounded btn-sm my-0">
-                                                    Remove
-                                                </button></span>
-                                        </td>
-                                    </tr>
-                                    <!-- This is our clonable table line -->
-                                    <tr>
-                                        <td class="pt-3-half numVal" contenteditable="true">10000</td>
-                                        <td class="pt-3-half" contenteditable="false"><input id="demo-input2" class="colorPicky" type="button" value="rgb(255, 128, 0)" /></td>
-                                        <td>
-                                            <span class="table-remove"><button type="button"
-                                                    class="btn btn-danger btn-rounded btn-sm my-0">
-                                                    Remove
-                                                </button></span>
-                                        </td>
-                                    </tr>
-                                    <!-- This is our clonable table line -->
-                                    <tr class="hide">
-                                        <td class="pt-3-half numVal" contenteditable="true">20000</td>
-                                        <td class="pt-3-half" contenteditable="false"><input id="demo-input3" class="colorPicky" type="button" value="rgb(255, 128, 0)" /></td>
-
-                                        <td>
-                                            <span class="table-remove"><button type="button"
-                                                    class="btn btn-danger btn-rounded btn-sm my-0">
-                                                    Remove
-                                                </button></span>
-                                        </td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </div>
-                    </div>
-                </div>
-
-
             </page>
             <page id="about" class="pageC hidden flex-fill">
                 <h1>About</h1>
@@ -460,7 +414,7 @@
 
         $(document).ready(function () {
 
-            $('.colorPicky').colorpicker();
+            
             $('#demo-input').on('colorpickerChange', function (event) {
                 $('#demo-input').css('background-color', event.color.toString());
             });
@@ -498,6 +452,15 @@
             // 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>\
+                        <span class="table-remove"><button type="button"\
+                                class="btn btn-danger btn-rounded btn-sm my-0">\
+                                Remove\
+                            </button></span>\
+                    </td></tr>'
+
                 const jsonResult = JSON.parse(xmlHttp.response)
                 document.getElementById("responeSnippet").innerHTML = JSON.stringify(jsonResult)
                 // Restore mode radio
@@ -508,7 +471,15 @@
                 $("#showMillis")[0].checked = jsonResult.showMilliSeconds;
                 $("#progBarShow")[0].checked = jsonResult.showProgressbar;
                 $("#textColors")[0].checked = jsonResult.enableColoredText;
+                for (item in jsonResult.colorSegments) {
+                    let temp = tableEntry.replace("#VALUE#", item);
+                    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.debug(jsonResult, currentModeInt)
+                $('.colorPicky').colorpicker();
             })
 
             // Presets
@@ -598,7 +569,7 @@
                     }, 500)
                 })
 
-                
+
 
             })