From 104c52b575e14cdec6b98b9ac4fb7625295bca3c Mon Sep 17 00:00:00 2001
From: grey <pnh@thegreydiamond.de>
Date: Mon, 28 Mar 2022 22:11:12 +0200
Subject: [PATCH] - add countdown to function - small cleanup

---
 index.js                     |  2 +-
 package-lock.json            | 11 ++++++++++
 package.json                 |  1 +
 static/flatpickr/dist        |  1 +
 static/js/interface.js       | 25 +++++++++++++++++++++++
 templates/newAdminPanel.html | 39 ++++++++++++++++++------------------
 6 files changed, 59 insertions(+), 20 deletions(-)
 create mode 120000 static/flatpickr/dist

diff --git a/index.js b/index.js
index c52dc3a..f0a484d 100644
--- a/index.js
+++ b/index.js
@@ -319,7 +319,7 @@ app.use(function(req, res, next) {
 
 
 console.log("Starting server...");
-const port = 3006
+const port = 3005
 const server = app.listen(port);
 server.on('upgrade', (request, socket, head) => {
   wsServer.handleUpgrade(request, socket, head, socket => {
diff --git a/package-lock.json b/package-lock.json
index 6e76bb1..0f8f883 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,6 +15,7 @@
         "bootstrap-icons": "^1.8.1",
         "darkreader": "^4.9.44",
         "express": "^4.17.3",
+        "flatpickr": "^4.6.11",
         "jquery": "^3.6.0",
         "js-cookie": "^3.0.1",
         "less": "^3.13",
@@ -270,6 +271,11 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/flatpickr": {
+      "version": "4.6.11",
+      "resolved": "https://registry.npmjs.org/flatpickr/-/flatpickr-4.6.11.tgz",
+      "integrity": "sha512-/rnbE/hu5I5zndLEyYfYvqE4vPDvI5At0lFcQA5eOPfjquZLcQ0HMKTL7rv5/+DvbPM3/vJcXpXjB/DjBh+1jw=="
+    },
     "node_modules/forwarded": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@@ -917,6 +923,11 @@
         "unpipe": "~1.0.0"
       }
     },
+    "flatpickr": {
+      "version": "4.6.11",
+      "resolved": "https://registry.npmjs.org/flatpickr/-/flatpickr-4.6.11.tgz",
+      "integrity": "sha512-/rnbE/hu5I5zndLEyYfYvqE4vPDvI5At0lFcQA5eOPfjquZLcQ0HMKTL7rv5/+DvbPM3/vJcXpXjB/DjBh+1jw=="
+    },
     "forwarded": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
diff --git a/package.json b/package.json
index b52f836..0026266 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "bootstrap-icons": "^1.8.1",
     "darkreader": "^4.9.44",
     "express": "^4.17.3",
+    "flatpickr": "^4.6.11",
     "jquery": "^3.6.0",
     "js-cookie": "^3.0.1",
     "less": "^3.13",
diff --git a/static/flatpickr/dist b/static/flatpickr/dist
new file mode 120000
index 0000000..9c148d9
--- /dev/null
+++ b/static/flatpickr/dist
@@ -0,0 +1 @@
+../../node_modules/flatpickr/dist/
\ No newline at end of file
diff --git a/static/js/interface.js b/static/js/interface.js
index 638c1a1..5cc2360 100644
--- a/static/js/interface.js
+++ b/static/js/interface.js
@@ -462,6 +462,31 @@ $(function () {
         $("#" + event.target.href.split("#")[1]).removeClass("hidden")
         // console.log(event.target.href.split("#")[1])
     });
+    $("#customValue").durationPicker({
+        showSeconds: true,
+        showDays: false,
+        onChanged: function (newVal, test, val2) {
+            currentTime = newVal * 1000
+        }
+    })
+
+    flatty = flatpickr("#datetimetester", {
+        enableTime: true,
+        time_24hr: true,
+        dateFormat: "H:i d.m.Y",
+    });
+
+    $(".goTimeGoalCountdown").on("click", function handleCountdownToTime(){
+        const selectTime = flatty.selectedDates[0].getTime()
+        const timeDiff = selectTime - new Date().getTime() 
+        $(".goTimeGoalCountdown")[0].innerHTML = '<div class="spinner-border-sm spinner-border"></div>'
+        saveOption("/api/v1/set/addMillisToTimer?time=" + timeDiff, function (ev) {
+            setTimeout(function () {
+                $(".goTimeGoalCountdown")[0].innerHTML = '<i class="bi bi-check2-circle"></i>'
+            }, 200);
+        })
+        console.log( timeDiff)
+    })
 });
 
 function saveOption(path, callback) {
diff --git a/templates/newAdminPanel.html b/templates/newAdminPanel.html
index 2ff921a..6282241 100644
--- a/templates/newAdminPanel.html
+++ b/templates/newAdminPanel.html
@@ -23,9 +23,12 @@
     <link href="/css/mainStyle.css" rel="stylesheet">
     <link rel="stylesheet" href="/coloris/coloris.min.css" />
     <link rel="stylesheet" href="/bootstrap-duration-picker/bootstrap-duration-picker.css" />
+    <link rel="stylesheet" href="/flatpickr/dist/flatpickr.min.css" />
     <script src="/bootstrap-duration-picker/bootstrap-duration-picker-debug.js"></script>
     <script src="/coloris/coloris.min.js"></script>
 
+    <script type="text/javascript" src="/flatpickr/dist/flatpickr.js"> </script>
+
     <link rel="stylesheet" href="/css/bootstrap-icons.css">
 </head>
 
@@ -202,8 +205,6 @@
                 <div class="container">
 
 
-
-
                     <div class="row">
                         <presets class="d-inline-flex justify-content-center">
                             <button class="btn btn-outline-secondary m-1 pres" value="300000">00:05:00</button>
@@ -216,24 +217,30 @@
                             <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>
                         </presets>
+                        
                         <div class="row" style="width: 100%;">
+                            
+                            
                             <div class="d-inline-flex justify-content-center p-2 col">
                                 <input type="text" class="form-control m-1" id="customValue">
+                                
                                 <button class="btn btn-outline-primary m-1 mt-0 goTimer"><i
                                         class="bi bi-check2-circle"></i></button>
-                                <script>
-                                    $("#customValue").durationPicker({
-                                        showSeconds: true,
-                                        showDays: false,
-                                        onChanged: function (val, t1, t2) {
-                                            currentTime = val * 1000
-                                        }
-                                    })
-                                </script>
                             </div>
-
-
                         </div>
+                        <h5>
+                            Countdown to time
+                        </h5>
+                        <div class="row justify-content-center flex-nowrap d-flex" >
+                            <input id="datetimetester" class="form-control input-sm" style="width: 20%;">
+                            <button class="btn btn-outline-primary goTimeGoalCountdown ms-2" style="width: 5%;"><i
+                                class="bi bi-check2-circle"></i></button>
+
+                            
+
+                        </input>
+                        </div>
+                        
                     </div>
                 </div>
             </page>
@@ -326,12 +333,6 @@
                 <hr>
                 <br>
 
-                <button class="navbar-toggler" type="button" data-toggle="collapse"
-                    data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent"
-                    aria-expanded="false" aria-label="Toggle navigation">
-                    <i class="bi bi-list"></i>
-                </button>
-
                 <h3>Host information</h3>
                 <code id="systemInfo" class="overflow-auto">