Added better color picker

README.MD

@@ -6,7 +6,6 @@
 - [X] time on countdown page
 - [X] one-way messaging
 - [P] Better UI
-    - [ ] Wait for all resources to load
     - [ ] Error popups
 - [X] Progress bar
 - [P] Endpoint docs

index.js

@@ -155,8 +155,9 @@ app.get("/api/v1/ctrl/message/hide", function (req, res) {
   res.json({ status: "ok" });
 });
 console.log("Starting server...");
-app.listen(3005);
+const port = 8005
+app.listen(port);
 
-console.info("Server running on port 3005");
+console.info("Server running on port " + port );
-console.info("Visit localhost:3005/timer for the timer page");
+console.info("Visit localhost:" + port + "/timer for the timer page");
-console.info("Visit localhost:3005 for the admin page");
+console.info("Visit localhost:" + port + " for the admin page");

package-lock.json

@@ -11,6 +11,7 @@
       "dependencies": {
         "body-parser": "^1.19.2",
         "bootstrap": "^5.1.3",
+        "bootstrap-colorpicker": "^3.4.0",
         "bootstrap-icons": "^1.8.1",
         "countdown": "^2.6.0",
         "darkreader": "^4.9.44",
@@ -80,6 +81,16 @@
         "@popperjs/core": "^2.10.2"
       }
     },
+    "node_modules/bootstrap-colorpicker": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/bootstrap-colorpicker/-/bootstrap-colorpicker-3.4.0.tgz",
+      "integrity": "sha512-7vA0hvLrat3ptobEKlT9+6amzBUJcDAoh6hJRQY/AD+5dVZYXXf1ivRfrTwmuwiVLJo9rZwM8YB4lYzp6agzqg==",
+      "dependencies": {
+        "bootstrap": ">=4.0",
+        "jquery": ">=2.2",
+        "popper.js": ">=1.10"
+      }
+    },
     "node_modules/bootstrap-icons": {
       "version": "1.8.1",
       "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.8.1.tgz",
@@ -415,6 +426,16 @@
       "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
       "integrity": "sha1-32BBeABfUi8V60SQ5yR6G/qmf4w="
     },
+    "node_modules/popper.js": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
+      "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==",
+      "deprecated": "You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/proxy-addr": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
@@ -628,6 +649,16 @@
       "integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==",
       "requires": {}
     },
+    "bootstrap-colorpicker": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/bootstrap-colorpicker/-/bootstrap-colorpicker-3.4.0.tgz",
+      "integrity": "sha512-7vA0hvLrat3ptobEKlT9+6amzBUJcDAoh6hJRQY/AD+5dVZYXXf1ivRfrTwmuwiVLJo9rZwM8YB4lYzp6agzqg==",
+      "requires": {
+        "bootstrap": ">=4.0",
+        "jquery": ">=2.2",
+        "popper.js": ">=1.10"
+      }
+    },
     "bootstrap-icons": {
       "version": "1.8.1",
       "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.8.1.tgz",
@@ -881,6 +912,11 @@
       "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
       "integrity": "sha1-32BBeABfUi8V60SQ5yR6G/qmf4w="
     },
+    "popper.js": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
+      "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ=="
+    },
     "proxy-addr": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "body-parser": "^1.19.2",
     "bootstrap": "^5.1.3",
+    "bootstrap-colorpicker": "^3.4.0",
     "bootstrap-icons": "^1.8.1",
     "countdown": "^2.6.0",
     "darkreader": "^4.9.44",

static/colorpicker/css

@@ -0,0 +1 @@
+../../node_modules/bootstrap-colorpicker/dist/css

static/colorpicker/js

@@ -0,0 +1 @@
+../../node_modules/bootstrap-colorpicker/dist/js

templates/newAdminPanel.html

@@ -21,6 +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">
+    <script src="colorpicker/js/bootstrap-colorpicker.js"></script>
 </head>
 
 <body>
@@ -230,7 +232,8 @@
                                 <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 goTimer" >Go</button><br>
+                                    value="1800000">00:30:00</button><button
+                                    class="btn btn-outline-primary m-1 mt-0 goTimer">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>
@@ -372,7 +375,10 @@
 
                 </code>
 
-
+                <div class="demo">
+                    test
+                    <input id="demo-input" class="colorPicky" type="button" value="rgb(255, 128, 0)" />
+                </div>
 
                 <div class="card">
                     <div class="card-body">
@@ -389,8 +395,8 @@
                                 </thead>
                                 <tbody>
                                     <tr>
-                                        <td class="pt-3-half" contenteditable="true">Aurelia Vega</td>
+                                        <td class="pt-3-half numVal" contenteditable="true">2000</td>
-                                        <td class="pt-3-half" contenteditable="false"><input type="color"></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"
@@ -401,8 +407,8 @@
                                     </tr>
                                     <!-- This is our clonable table line -->
                                     <tr>
-                                        <td class="pt-3-half" contenteditable="true">5000</td>
+                                        <td class="pt-3-half numVal" contenteditable="true">5000</td>
-                                        <td class="pt-3-half" contenteditable="false"><input type="color"></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">
@@ -412,8 +418,8 @@
                                     </tr>
                                     <!-- This is our clonable table line -->
                                     <tr>
-                                        <td class="pt-3-half" contenteditable="true">Guadalupe House</td>
+                                        <td class="pt-3-half numVal" contenteditable="true">10000</td>
-                                        <td class="pt-3-half" contenteditable="false"><input type="color"></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">
@@ -423,8 +429,8 @@
                                     </tr>
                                     <!-- This is our clonable table line -->
                                     <tr class="hide">
-                                        <td class="pt-3-half" contenteditable="true">Elisa Gallagher</td>
+                                        <td class="pt-3-half numVal" contenteditable="true">20000</td>
-                                        <td class="pt-3-half" contenteditable="false"><input type="color"></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"
@@ -453,6 +459,14 @@
 
 
         $(document).ready(function () {
+
+            $('.colorPicky').colorpicker();
+            $('#demo-input').on('colorpickerChange', function (event) {
+                $('#demo-input').css('background-color', event.color.toString());
+            });
+
+            $(".numVal").bind("DOMSubtreeModified", alert);
+
             const modes = ["timer", "clock", "black", "test"]
             let selectPresetTime = 0;
 
@@ -501,12 +515,12 @@
             $(".pres").click(function (event) {
                 currentTime = parseInt(event.currentTarget.value)
                 const times = msToTime(currentTime)
-                    $("#timerHoursV")[0].innerHTML = times[3];
+                $("#timerHoursV")[0].innerHTML = times[3];
-                    $("#timerMinuteV")[0].innerHTML = times[2];
+                $("#timerMinuteV")[0].innerHTML = times[2];
-                    $("#timerSecondsV")[0].innerHTML = times[1];
+                $("#timerSecondsV")[0].innerHTML = times[1];
             })
 
-           
+
 
 
             $(".goTimer").click(function (event) {
@@ -516,7 +530,7 @@
                 }, 200);
 
                 saveOption("/api/v1/set/addMillisToTimer?time=" + currentTime, function (ev) {
-                    
+
 
                 })
             })
@@ -532,7 +546,7 @@
                 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)