Mizah/Sharkey
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

enhance(client): improve clock widgets

Browse source
This commit is contained in:
syuilo 2022-08-05 23:51:15 +09:00
parent bdaa35d11f
commit 2cd70b80a2
4 changed files with 203 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

34
packages/client/src/widgets/digital-clock.vue
View file

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