- add countdown to function

- small cleanup
- make the open buttons float right
2022-03-28 22:11:12 +02:00 · 2022-03-27 16:41:40 +02:00
6 changed files with 107 additions and 59 deletions
--- 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 => {
--- 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",
--- 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",
--- a/static/flatpickr/dist
+++ b/static/flatpickr/dist
@ -0,0 +1 @@
+../../node_modules/flatpickr/dist/
--- 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) {
--- 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>

@ -111,26 +114,32 @@
                <div class="container">
                    <div class="row">
                        <div class="col">
-                            <h3>Preview <span class="helperTip" data-placement="right" title="A preview of what is currently visible on the countdown view" data-toggle="tooltip">
-                                <i class="bi bi-question-circle-fill" ></i>
+                            <h3 class="d-flex">Preview <span class="helperTip" data-placement="right" title="A preview of what is currently visible on the countdown view" data-toggle="tooltip">
+                                    <i class="bi bi-question-circle-fill"></i>
+                                </span>
+                                 <div class="ms-auto">
+                                    <span class="helperTip" data-placement="right"
+                                        title="Copies the link to the timer view" data-toggle="tooltip">
+                                        <button class="btn" onclick="navigator.clipboard.writeText(window.location.toString() + 'timer')">
+                                            <i class="bi bi-clipboard"></i>
+                                        </button>
+                                    </span>

-                            </span>
-                            <span class="helperTip" data-placement="right" title="Copies the link to the timer view" data-toggle="tooltip">
-                                <button class="btn" onclick="navigator.clipboard.writeText(window.location.toString() + 'timer')"><i class="bi bi-clipboard"></i></button>
-                            </span>
-                            <span class="helperTip" data-placement="right" title="Open the countdown view in a new tab" data-toggle="tooltip">
-                                <a href="/timer" class="btn " target="_blank"><i class="bi bi-box-arrow-up-right"></i></a>
-                                
-                            </span>
-                            
-                        </h3>
+                                    <span class="helperTip" data-placement="right"
+                                        title="Open the countdown view in a new tab" data-toggle="tooltip">
+                                        <a href="/timer" class="btn " target="_blank"><i
+                                                class="bi bi-box-arrow-up-right"></i></a>
+                                    </span>
+                                </div>
+                            </h3>
                            <iframe src="/timer?smaller=true" height="100%" width="100%" style="min-height: 400px;">
                            </iframe>
                        </div>
                        <div class="col">
-                            <h3>Mode <span class="helperTip" data-placement="right" title="Select what to show on the countdown view" data-toggle="tooltip">
-                                <i class="bi bi-question-circle-fill" ></i>
-                            </span></h3>
+                            <h3>Mode <span class="helperTip" data-placement="right"
+                                    title="Select what to show on the countdown view" data-toggle="tooltip">
+                                    <i class="bi bi-question-circle-fill"></i>
+                                </span></h3>
                            <div class="btn-group" role="group" aria-label="Basic radio toggle button group">
                                <input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off"
                                    checked>
@ -174,11 +183,13 @@
                            <br>
                            <br>
                            <br>
-                            <h3>Messaging <span class="helperTip" data-placement="right" title="Shows a given message on the timer view" data-toggle="tooltip">
-                                <i class="bi bi-question-circle-fill" ></i>
-                            </span></h3>
+                            <h3>Messaging <span class="helperTip" data-placement="right"
+                                    title="Shows a given message on the timer view" data-toggle="tooltip">
+                                    <i class="bi bi-question-circle-fill"></i>
+                                </span></h3>

-                            <input type="text" id="messageContent" class="form-control" placeholder="Message here" style="width: 50%;">
+                            <input type="text" id="messageContent" class="form-control" placeholder="Message here"
+                                style="width: 50%;">

                            <br>
                            <button class="btn btn-outline-primary m-1" id="sendMessage"><i
@ -194,37 +205,42 @@
                <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>
+                            <button class="btn btn-outline-secondary m-1 pres" value="600000">00:10:00</button>
+                            <button class="btn btn-outline-secondary m-1 pres" value="900000">00:15:00</button>
+                            <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-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>
+                        </presets>
+                        
+                        <div class="row" style="width: 100%;">
                            
                            
-                        <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>
-                                <button class="btn btn-outline-secondary m-1 pres" value="600000">00:10:00</button>
-                                <button class="btn btn-outline-secondary m-1 pres" value="900000">00:15:00</button>
-                                <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-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>
-                            </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 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>
+                            </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>
@ -317,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">
Author	SHA1	Message	Date
grey	104c52b575	- add countdown to function - small cleanup	2022-03-28 22:11:12 +02:00
grey	7dbe7ed6b1	- make the open buttons float right	2022-03-27 16:41:40 +02:00