enhance(client): improve clock widgets

2 files changed, 92 insertions, 5 deletions

diff --git a/packages/client/src/widgets/clock.vue b/packages/client/src/widgets/clock.vue
index fbd2f9e899..3b40674e4f 100644
--- a/packages/client/src/widgets/clock.vue
+++ b/packages/client/src/widgets/clock.vue
@@ -1,17 +1,20 @@
 <template>
 <MkContainer :naked="widgetProps.transparent" :show-header="false" class="mkw-clock">
 	<div class="vubelbmv">
-		<MkAnalogClock class="clock" :thickness="widgetProps.thickness"/>
+		<div v-if="widgetProps.showLabel" class="label abbrev">{{ tzAbbrev }}</div>
+		<MkAnalogClock class="clock" :thickness="widgetProps.thickness" :offset="tzOffset" :numbers="widgetProps.numbers" :twentyfour="widgetProps.twentyFour"/>
+		<div v-if="widgetProps.showLabel" class="label offset">{{ tzOffsetLabel }}</div>
 	</div>
 </MkContainer>
 </template>
 
 <script lang="ts" setup>
 import { } from 'vue';
-import { GetFormResultType } from '@/scripts/form';
 import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
+import { GetFormResultType } from '@/scripts/form';
 import MkContainer from '@/components/ui/container.vue';
 import MkAnalogClock from '@/components/analog-clock.vue';
+import { timezones } from '@/scripts/timezones';
 
 const name = 'clock';
 
@@ -24,11 +27,34 @@ const widgetPropsDef = {
 		type: 'radio' as const,
 		default: 0.1,
 		options: [{
-			value: 0.1, label: 'thin'
+			value: 0.1, label: 'thin',
 		}, {
-			value: 0.2, label: 'medium'
+			value: 0.2, label: 'medium',
 		}, {
-			value: 0.3, label: 'thick'
+			value: 0.3, label: 'thick',
+		}],
+	},
+	numbers: {
+		type: 'boolean' as const,
+		default: false,
+	},
+	twentyFour: {
+		type: 'boolean' as const,
+		default: false,
+	},
+	showLabel: {
+		type: 'boolean' as const,
+		default: true,
+	},
+	timezone: {
+		type: 'enum' as const,
+		default: null,
+		enum: [...timezones.map((tz) => ({
+			label: tz.name,
+			value: tz.name.toLowerCase(),
+		})), {
+			label: '(auto)',
+			value: null,
 		}],
 	},
 };
@@ -47,6 +73,16 @@ const { widgetProps, configure } = useWidgetPropsManager(name,
 	emit,
 );
 
+const tzAbbrev = $computed(() => (widgetProps.timezone === null
+	? timezones.find((tz) => tz.name.toLowerCase() === Intl.DateTimeFormat().resolvedOptions().timeZone.toLowerCase())?.abbrev
+	: timezones.find((tz) => tz.name.toLowerCase() === widgetProps.timezone)?.abbrev) ?? '?');
+
+const tzOffset = $computed(() => widgetProps.timezone === null
+	? 0 - new Date().getTimezoneOffset()
+	: timezones.find((tz) => tz.name.toLowerCase() === widgetProps.timezone)?.offset ?? 0);
+
+const tzOffsetLabel = $computed(() => (tzOffset >= 0 ? '+' : '-') + Math.floor(tzOffset / 60).toString().padStart(2, '0') + ':' + (tzOffset % 60).toString().padStart(2, '0'));
+
 defineExpose<WidgetComponentExpose>({
 	name,
 	configure,
@@ -57,6 +93,23 @@ defineExpose<WidgetComponentExpose>({
 <style lang="scss" scoped>
 .vubelbmv {
 	padding: 8px;
+	position: relative;
+
+	> .label {
+		opacity: 0.7;
+
+		&.abbrev {
+			position: absolute;
+			top: 14px;
+			left: 14px;
+		}
+
+		&.offset {
+			position: absolute;
+			bottom: 14px;
+			right: 14px;
+		}
+	}
 
 	> .clock {
 		height: 150px;
diff --git a/packages/client/src/widgets/digital-clock.vue b/packages/client/src/widgets/digital-clock.vue
index 743c5657b4..0091674216 100644
--- a/packages/client/src/widgets/digital-clock.vue
+++ b/packages/client/src/widgets/digital-clock.vue
@@ -1,5 +1,6 @@
 <template>
 <div class="mkw-digitalClock _monospace" :class="{ _panel: !widgetProps.transparent }" :style="{ fontSize: `${widgetProps.fontSize}em` }">
+	<div v-if="widgetProps.showLabel" class="label">{{ tzAbbrev }}</div>
 	<div class="time">
 		<span v-text="hh"></span>
 		<span class="colon" :class="{ showColon }">:</span>
@@ -9,6 +10,7 @@
 		<span v-if="widgetProps.showMs" class="colon" :class="{ showColon }">:</span>
 		<span v-if="widgetProps.showMs" v-text="ms"></span>
 	</div>
+	<div v-if="widgetProps.showLabel" class="label">{{ tzOffsetLabel }}</div>
 </div>
 </template>
 
@@ -16,6 +18,7 @@
 import { onUnmounted, ref, watch } from 'vue';
 import { useWidgetPropsManager, Widget, WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget';
 import { GetFormResultType } from '@/scripts/form';
+import { timezones } from '@/scripts/timezones';
 
 const name = 'digitalClock';
 
@@ -33,6 +36,21 @@ const widgetPropsDef = {
 		type: 'boolean' as const,
 		default: true,
 	},
+	showLabel: {
+		type: 'boolean' as const,
+		default: true,
+	},
+	timezone: {
+		type: 'enum' as const,
+		default: null,
+		enum: [...timezones.map((tz) => ({
+			label: tz.name,
+			value: tz.name.toLowerCase(),
+		})), {
+			label: '(auto)',
+			value: null,
+		}],
+	},
 };
 
 type WidgetProps = GetFormResultType<typeof widgetPropsDef>;
@@ -49,6 +67,16 @@ const { widgetProps, configure } = useWidgetPropsManager(name,
 	emit,
 );
 
+const tzAbbrev = $computed(() => (widgetProps.timezone === null
+	? timezones.find((tz) => tz.name.toLowerCase() === Intl.DateTimeFormat().resolvedOptions().timeZone.toLowerCase())?.abbrev
+	: timezones.find((tz) => tz.name.toLowerCase() === widgetProps.timezone)?.abbrev) ?? '?');
+
+const tzOffset = $computed(() => widgetProps.timezone === null
+	? 0 - new Date().getTimezoneOffset()
+	: timezones.find((tz) => tz.name.toLowerCase() === widgetProps.timezone)?.offset ?? 0);
+
+const tzOffsetLabel = $computed(() => (tzOffset >= 0 ? '+' : '-') + Math.floor(tzOffset / 60).toString().padStart(2, '0') + ':' + (tzOffset % 60).toString().padStart(2, '0'));
+
 let intervalId;
 const hh = ref('');
 const mm = ref('');
@@ -67,6 +95,7 @@ watch(showColon, (v) => {
 
 const tick = () => {
 	const now = new Date();
+	now.setMinutes(now.getMinutes() + (new Date().getTimezoneOffset() + tzOffset));
 	hh.value = now.getHours().toString().padStart(2, '0');
 	mm.value = now.getMinutes().toString().padStart(2, '0');
 	ss.value = now.getSeconds().toString().padStart(2, '0');
@@ -98,6 +127,11 @@ defineExpose<WidgetComponentExpose>({
 	padding: 16px 0;
 	text-align: center;
 
+	> .label {
+		font-size: 65%;
+		opacity: 0.7;
+	}
+
 	> .time {
 		> .colon {
 			opacity: 0;