Changed the time/timezone dialog to for the virtual keyboard

scripts/install.sh

@@ -27,7 +27,13 @@ if $UPDATE_AVR; then
     ./installer/scripts/avr109-flash.py src/avr/bbctrl-avr-firmware.hex
 fi
 
-# Update config.txt
+# Set a default time-zone, if one has not been set
+timedatectl | grep 'Time zone: Etc/UTC' >/dev/null
+if [ $? -eq 0 ]; then
+    timedatectl set-timezone America/Los_Angeles
+fi
+
+# Update /boot/config.txt
 ./installer/scripts/edit-boot-config \
     disable_overscan=1 \
     framebuffer_width=1280 \

src/svelte-components/src/components/TextFieldWithOptions.svelte

@@ -46,7 +46,7 @@
         bind:value
         on:focusin={() => showMenu(true)}
         on:focusout={() => showMenu(false)}
-        use={[[virtualKeyboardChange, (newValue) => (value = newValue)]]}
+        use={[virtualKeyboardChange((v) => (value = v))]}
         {...$$restProps}
     >
         <div slot="trailingIcon">

src/svelte-components/src/dialogs/ChangeHostnameDialog.svelte

@@ -78,10 +78,7 @@
     <Content id="change-hostname-dialog-content">
         <TextField
             bind:value={hostname}
-            use={[
+            use={[InitialFocus, virtualKeyboardChange((v) => (hostname = v))]}
-                InitialFocus,
-                [virtualKeyboardChange, (newValue) => (hostname = newValue)],
-            ]}
             label="New Hostname"
             spellcheck="false"
             variant="filled"

src/svelte-components/src/dialogs/ManualHomeAxisDialog.svelte

@@ -37,10 +37,7 @@
             label="Absolute"
             type="number"
             bind:value
-            use={[
+            use={[InitialFocus, virtualKeyboardChange((v) => (value = v))]}
-                InitialFocus,
-                [virtualKeyboardChange, (newValue) => (value = newValue)],
-            ]}
             variant="filled"
             style="width: 100%;"
         />

src/svelte-components/src/dialogs/SetAxisPositionDialog.svelte

@@ -49,10 +49,7 @@
             label="Position"
             type="number"
             bind:value
-            use={[
+            use={[InitialFocus, virtualKeyboardChange((v) => (value = v))]}
-                InitialFocus,
-                [virtualKeyboardChange, (newValue) => (value = newValue)],
-            ]}
             spellcheck="false"
             variant="filled"
             style="width: 100%;"

src/svelte-components/src/dialogs/SetTimeDialog.svelte

@@ -7,6 +7,7 @@
     } from "@smui/dialog";
     import Button, { Label } from "@smui/button";
     import TextField from "@smui/textfield";
+    import Select, { Option } from "@smui/select";
     import CircularProgress from "@smui/circular-progress";
     import VirtualList from "svelte-tiny-virtual-list";
     import * as api from "$lib/api";
@@ -20,7 +21,12 @@
     };
 
     export let open = false;
-    let value = "";
+    let year = "";
+    let month = "";
+    let day = "";
+    let hour = "";
+    let minute = "";
+    let am = true;
     let wasOpen = false;
     let loading = true;
     let timezones: Timezone[] = [];
@@ -43,7 +49,14 @@
 
         parseTimezones(result.timezones);
         parseTimeinfo(result.timeinfo);
-        value = getDateTimeValueString();
+
+        const date = new Date();
+        year = date.getFullYear().toString();
+        month = (date.getMonth() + 1).toString();
+        day = date.getDate().toString();
+        hour = date.getHours().toString();
+        minute = date.getMinutes().toString();
+        am = date.getHours() >= 12;
 
         loading = false;
     }
@@ -61,7 +74,7 @@
                     break;
 
                 case "NTP synchronized":
-                    networkTimeSynchronized = value === "yes";
+                    networkTimeSynchronized = false;
                     break;
             }
         }
@@ -98,28 +111,15 @@
         });
     }
 
-    function getDateTimeValueString() {
-        const date = new Date();
-
-        const year = date.getFullYear().toString().padStart(2, "0");
-        const month = (date.getMonth() + 1).toString().padStart(2, "0");
-        const day = date.getDate().toString().padStart(2, "0");
-        const hour = date.getHours().toString().padStart(2, "0");
-        const minute = date.getMinutes().toString().padStart(2, "0");
-
-        return `${year}-${month}-${day}T${hour}:${minute}:00`;
-    }
-
     async function onConfirm() {
-        const date = new Date(value);
+        const YY = year.toString().padStart(2, "0");
-        const year = date.getFullYear().toString().padStart(2, "0");
+        const MM = month.toString().padStart(2, "0");
-        const month = (date.getMonth() + 1).toString().padStart(2, "0");
+        const DD = day.toString().padStart(2, "0");
-        const day = date.getDate().toString().padStart(2, "0");
+        const hh = hour.toString().padStart(2, "0");
-        const hour = date.getHours().toString().padStart(2, "0");
+        const mm = minute.toString().padStart(2, "0");
-        const minute = date.getMinutes().toString().padStart(2, "0");
 
         await api.PUT("time", {
-            datetime: `${year}-${month}-${day} ${hour}:${minute}:00`,
+            datetime: `${YY}-${MM}-${DD} ${hh}:${mm}:00`,
             timezone: timezones[selectedTimezoneIndex].value,
         });
     }
@@ -131,7 +131,7 @@
     aria-labelledby="set-time-dialog-title"
     aria-describedby="set-time-dialog-content"
 >
-    <Title id="set-time-dialog-title">Adjust Clock & Timezone</Title>
+    <Title id="set-time-dialog-title">Change Time & Timezone</Title>
 
     <Content id="set-time-dialog-content">
         {#if loading}
@@ -149,40 +149,70 @@
                 </p>
             {:else}
                 <p>
-                    Because this controller is not connected to the internet,
+                    Any time the controller is turned off, the time will need to
-                    you can manually set the time.
+                    be reset. If you connect the controller to the internet, the
+                    time will be managed automatically.
                 </p>
 
-                <p>
-                    Note: any time the controller is turned off, the time will
-                    need to be reset. If you connect the controller to the
-                    internet, the time will be managed automatically.
-                </p>
-
-                <Label>Date & Time</Label>
                 <TextField
-                    bind:value
+                    bind:value={year}
                     use={[
                         InitialFocus,
-                        [
+                        virtualKeyboardChange((v) => (year = v)),
-                            virtualKeyboardChange,
-                            (newValue) => (value = newValue),
-                        ],
                     ]}
-                    label="Time"
+                    label="Year"
-                    type="datetime-local"
+                    type="number"
                     variant="filled"
-                    style="width: 100%;"
+                    style="width: 70px;"
                 />
+                <TextField
+                    bind:value={month}
+                    use={[virtualKeyboardChange((v) => (month = v))]}
+                    label="Month"
+                    type="number"
+                    variant="filled"
+                    style="width: 70px;"
+                />
+                <TextField
+                    bind:value={day}
+                    use={[virtualKeyboardChange((v) => (day = v))]}
+                    label="Day"
+                    type="number"
+                    variant="filled"
+                    style="width: 70px;"
+                />
+
+                <span style="display: inline-block; width: 20px;" />
+
+                <TextField
+                    bind:value={hour}
+                    use={[virtualKeyboardChange((v) => (hour = v))]}
+                    label="Hour"
+                    type="number"
+                    variant="filled"
+                    style="width: 70px;"
+                />
+                <TextField
+                    bind:value={minute}
+                    use={[virtualKeyboardChange((v) => (minute = v))]}
+                    label="Minute"
+                    type="number"
+                    variant="filled"
+                    style="width: 70px;"
+                />
+
+                <Select
+                    label=""
+                    bind:value={am}
+                    style="width: 90px;"
+                    variant="filled"
+                >
+                    <Option value={true}>AM</Option>
+                    <Option value={false}>PM</Option>
+                </Select>
             {/if}
 
-            <p>
+            <div class="timezones-container" style="margin-top: 30px;">
-                To display your local time correctly, the controller must know
-                what timezone it is in.
-            </p>
-
-            <div class="timezones-container" style="margin-top: 20px;">
-                <Label>Select your timezone</Label>
                 <VirtualList
                     width="100%"
                     height={itemHeight * 6}

src/svelte-components/src/dialogs/WifiConnectionDialog.svelte

@@ -65,10 +65,7 @@
                 bind:value={password}
                 use={[
                     InitialFocus,
-                    [
+                    virtualKeyboardChange((v) => (password = v)),
-                        virtualKeyboardChange,
-                        (newValue) => (password = newValue),
-                    ],
                 ]}
                 label="Password"
                 spellcheck="false"

src/svelte-components/src/lib/CustomActions.ts

@@ -1,4 +1,7 @@
-export function virtualKeyboardChange(node: HTMLElement, cb: (value: any) => void) {
+import type { HTMLActionEntry } from "@smui/common/internal";
+
+export function virtualKeyboardChange(cb: (v: any) => void): HTMLActionEntry {
+    const func = (node: HTMLElement, cb: (value: any) => void) => {
         const input = node.querySelector("input");
         if (!input) {
             console.error("Could not find the textfield's <input>:", node);
@@ -6,4 +9,7 @@ export function virtualKeyboardChange(node: HTMLElement, cb: (value: any) => voi
         }
 
         input.addEventListener("keyup", () => cb(input.value));
+    };
+
+    return [ func, cb ];
 }