muehe/onefinity-firmware
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Changed the time/timezone dialog to for the virtual keyboard

Browse Source
This commit is contained in:
David Carley
2022-09-11 02:40:36 +00:00
parent 5acdc5f00f
commit ef152954c7
8 changed files with 103 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
scripts/install.sh
View File

@@ -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 \

2
src/svelte-components/src/components/TextFieldWithOptions.svelte
View File

@@ -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">

5
src/svelte-components/src/dialogs/ChangeHostnameDialog.svelte
View File

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

5
src/svelte-components/src/dialogs/ManualHomeAxisDialog.svelte
View File

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

5
src/svelte-components/src/dialogs/SetAxisPositionDialog.svelte
View File

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

124
src/svelte-components/src/dialogs/SetTimeDialog.svelte
View File

@@ -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 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");
const YY = year.toString().padStart(2, "0");
const MM = month.toString().padStart(2, "0");
const DD = day.toString().padStart(2, "0");
const hh = hour.toString().padStart(2, "0");
const mm = minute.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,
you can manually set the time.
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>
<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,
(newValue) => (value = newValue),
],
virtualKeyboardChange((v) => (year = v)),
]}
label="Time"
type="datetime-local"
label="Year"
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>
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>
<div class="timezones-container" style="margin-top: 30px;">
<VirtualList
width="100%"
height={itemHeight * 6}

5
src/svelte-components/src/dialogs/WifiConnectionDialog.svelte
View File

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

22
src/svelte-components/src/lib/CustomActions.ts
View File

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