set time to 12 hrs format

src/js/admin-general-view.js

@@ -44,6 +44,7 @@ module.exports = {
       selected_date: null,
       selected_hours: `${new Date().getHours()}`,
       selected_minutes: `${new Date().getMinutes()}`,
+      selected_meridiem: "AM",
     };
   },
 
@@ -174,20 +175,30 @@ module.exports = {
 
     change_date_time: async function () {
       if (!this.selected_date || !this.selected_hours || !this.selected_minutes) {
+        alert("Please enter all required fields.");
         return;
       }
-      if (
-        this.selected_hours < 0 ||
-        this.selected_hours > 23 ||
-        this.selected_minutes < 0 ||
-        this.selected_minutes > 59
-      ) {
+
+      const hours = parseInt(this.selected_hours, 10);
+      const minutes = parseInt(this.selected_minutes, 10);
+
+      if (hours < 1 || hours > 12 || minutes < 1 || minutes > 59) {
         return alert("Invalid Time");
       }
+
+      let converted_hours = hours;
+
+      if (this.selected_meridiem === "PM" && hours !== 12) {
+        converted_hours += 12;
+      } else if (this.selected_meridiem === "AM" && hours === 12) {
+        converted_hours = 0;
+      }
+
       try {
-        const datetime = `${this.selected_date} ${this.selected_hours
+        const datetime = `${this.selected_date} ${converted_hours.toString().padStart(2, "0")}:${minutes
           .toString()
-          .padStart(2, "0")}:${this.selected_minutes.toString().padStart(2, "0")}:00`;
+          .padStart(2, "0")}:00`;
+
         const response = await api.put("time", { datetime });
 
         if (response == "ok") {

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

@@ -70,7 +70,14 @@ script#admin-general-view-template(type="text/x-template")
       span(v-if="isLoadingTime") Loading...
       span(v-else) {{ current_time }}
     .pure-form
-      input(id="date" type="date" v-model="selected_date")
-      input(id="hours" type="number" v-model="selected_hours" placeholder="HH" maxlength="2" min="0" max="23" style="width:45px")
-      input(id="minutes" type="number" v-model="selected_minutes" placeholder="MM" maxlength="2" min="0" max="59" style="width:48px")
+      input(id="date" type="date" v-model="selected_date" required)
+      input(id="hours" type="number" v-model="selected_hours" placeholder="HH" maxlength="2" min="1" max="12" style="width:45px" required)
+      input(id="minutes" type="number" v-model="selected_minutes" placeholder="MM" maxlength="2" min="0" max="59" style="width:48px" required)
+      select(v-model="selected_meridian" style="width:60px")
+        option(value="AM") AM
+        option(value="PM") PM
       button.pure-button.pure-button-primary(@click="change_date_time", style="margin:5px") Update Date/Time 
+      .tip
+        strong Note:
+        | Internet connected controllers times is set automatically.
+        | Non-internet connected controllers will need to set time manually on every boot up.

src/stylus/style.styl

@@ -1023,6 +1023,10 @@ tt.save
   a
     text-decoration none
   
+  .tip
+    font-style italic
+    font-size 90%
+    line-height 1.5
 
 .modal-mask
   position fixed