88 lines
1.9 KiB
Vue
88 lines
1.9 KiB
Vue
<script setup lang="ts">
|
|
import { SettingsBottomScreenNumberInput as NumberInput } from "#components";
|
|
import { useIntervalFn } from "@vueuse/core";
|
|
|
|
const store = useSettingsStore();
|
|
const { assets } = useAssets();
|
|
const { onRender } = useScreen();
|
|
|
|
const now = ref(new Date());
|
|
|
|
useIntervalFn(() => {
|
|
now.value = new Date();
|
|
}, 1000);
|
|
|
|
const monthRef = useTemplateRef<InstanceType<typeof NumberInput>>("month");
|
|
const dayRef = useTemplateRef<InstanceType<typeof NumberInput>>("day");
|
|
const yearRef = useTemplateRef<InstanceType<typeof NumberInput>>("year");
|
|
|
|
const animateIntro = async () => {
|
|
await Promise.all([
|
|
monthRef.value?.animateIntro(),
|
|
dayRef.value?.animateIntro(),
|
|
yearRef.value?.animateIntro(),
|
|
]);
|
|
};
|
|
|
|
const animateOutro = async () => {
|
|
await Promise.all([
|
|
monthRef.value?.animateOutro(),
|
|
dayRef.value?.animateOutro(),
|
|
yearRef.value?.animateOutro(),
|
|
]);
|
|
};
|
|
|
|
onMounted(() => {
|
|
animateIntro();
|
|
});
|
|
|
|
const handleCancel = async () => {
|
|
await animateOutro();
|
|
store.closeSubMenu();
|
|
};
|
|
|
|
const handleConfirm = async () => {
|
|
await animateOutro();
|
|
store.closeSubMenu();
|
|
};
|
|
|
|
onRender((ctx) => {
|
|
assets.images.home.topScreen.background.draw(ctx, 0, 0);
|
|
});
|
|
|
|
defineOptions({ render: () => null });
|
|
</script>
|
|
|
|
<template>
|
|
<NumberInput
|
|
ref="month"
|
|
:model-value="now.getMonth() + 1"
|
|
:title="$t('settings.clock.date.month')"
|
|
:x="1 * 16 - 1"
|
|
:disabled="true"
|
|
/>
|
|
<NumberInput
|
|
ref="day"
|
|
:model-value="now.getDate()"
|
|
:title="$t('settings.clock.date.day')"
|
|
:x="5 * 16 - 1"
|
|
:disabled="true"
|
|
/>
|
|
<NumberInput
|
|
ref="year"
|
|
:model-value="now.getFullYear()"
|
|
:title="$t('settings.clock.date.year')"
|
|
:digits="4"
|
|
:x="9 * 16 - 1"
|
|
:disabled="true"
|
|
/>
|
|
|
|
<CommonButtons
|
|
:y-offset="0"
|
|
:b-label="$t('common.cancel')"
|
|
:a-label="$t('common.confirm')"
|
|
@activate-b="handleCancel"
|
|
@activate-a="handleConfirm"
|
|
/>
|
|
</template>
|