flatpickr for time input

src/js/admin-general-view.js

@@ -152,14 +152,19 @@ module.exports = {
         return;
       }
       console.log(this.selected_date, this.selected_time);
-      return;
 
       try {
-        const datetime = `${date} ${time}`;
+        const datetime = `${this.selected_date} ${this.selected_time}`;
         const timezone = "UTC";
 
         const response = await api.put("time", { datetime, timezone });
 
+        if (response == "ok") {
+          alert("Date/Time updated successfully.");
+        } else {
+          throw response;
+        }
+
         console.log("Time update successful: ", response);
       } catch (error) {
         alert("Error updating time: ", error);

src/pug/index.pug

@@ -6,6 +6,8 @@ html(lang="en")
 
     title Onefinity CNC - Web interface
 
+    link(rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css")
+
     style: include ../static/css/pure-min.css
     style: include ../static/css/side-menu.css
 
@@ -76,7 +78,7 @@ html(lang="en")
           .brand
             img(src="/images/onefinity_logo.png")
             .version
-              div  Version: v{{config.full_version}} Alpha 2
+              div  Version: v{{config.full_version}} Beta 2
               div  IP Address: {{config.ip}}
               div  WiFi: {{config.wifiName}}
             a.upgrade-link(v-if="show_upgrade()", href="#admin-general")
@@ -177,6 +179,17 @@ html(lang="en")
     #templates: include ../../build/templates.pug
     iframe#download-target(style="display:none")
 
+    script.
+      document.addEventListener('DOMContentLoaded', function() {
+        flatpickr(".flatpickr", {
+          enableTime: true,
+          noCalendar: true,
+          dateFormat: "H:i", 
+          time_24hr: true, 
+        });
+      });
+    script(src="https://cdn.jsdelivr.net/npm/flatpickr")
+
     script: include ../static/js/vue.js
     script: include ../static/js/sockjs.min.js
     script: include ../static/js/clusterize.min.js

src/pug/templates/admin-general-view.pug

@@ -67,5 +67,5 @@ script#admin-general-view-template(type="text/x-template")
     h2 Date/Time
     .pure-form
       input(id="date" type="date" v-model="selected_date")
-      input(id="time" type="time" v-model="selected_time")
+      input.flatpickr(id="time" type="time" v-model="selected_time")
     button.pure-button.pure-button-primary(@click="change_date_time", style="margin-top:5px") Update Date/Time