114 lines
2.7 KiB
Vue
114 lines
2.7 KiB
Vue
<script setup lang="ts">
|
|
import { SettingsBottomScreenNumberInput as NumberInput } from "#components";
|
|
|
|
const store = useSettingsStore();
|
|
const confirmationModal = useConfirmationModal();
|
|
|
|
const BIRTHDAY_DAY = 25;
|
|
const BIRTHDAY_MONTH = 4;
|
|
const BIRTHDAY_YEAR = 2002;
|
|
|
|
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 handleActivateB = async () => {
|
|
await animateOutro();
|
|
store.closeSubMenu();
|
|
};
|
|
|
|
const handleActivateA = () => {
|
|
const today = new Date();
|
|
const currentYear = today.getFullYear();
|
|
|
|
const isBirthdayToday =
|
|
today.getMonth() === BIRTHDAY_MONTH - 1 && today.getDate() === BIRTHDAY_DAY;
|
|
|
|
let text: string;
|
|
if (isBirthdayToday) {
|
|
text = $t("settings.user.birthday.confirmation.today");
|
|
} else {
|
|
let nextBirthday = new Date(currentYear, BIRTHDAY_MONTH - 1, BIRTHDAY_DAY);
|
|
if (nextBirthday < today) {
|
|
nextBirthday = new Date(
|
|
currentYear + 1,
|
|
BIRTHDAY_MONTH - 1,
|
|
BIRTHDAY_DAY,
|
|
);
|
|
}
|
|
|
|
const diffTime = nextBirthday.getTime() - today.getTime();
|
|
const daysUntilBirthday = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
|
|
|
|
text = $t("settings.user.birthday.confirmation.future", {
|
|
days: daysUntilBirthday,
|
|
});
|
|
}
|
|
|
|
confirmationModal.open({
|
|
text,
|
|
onClosed: async () => {
|
|
await animateOutro();
|
|
store.closeSubMenu();
|
|
},
|
|
timeout: 2000,
|
|
});
|
|
};
|
|
|
|
defineOptions({ render: () => null });
|
|
</script>
|
|
|
|
<template>
|
|
<!-- date format may change based on the language (d/m/y is superior btw) -->
|
|
<NumberInput
|
|
ref="month"
|
|
:model-value="BIRTHDAY_MONTH"
|
|
:title="$t('settings.user.birthday.month')"
|
|
:x="1 * 16"
|
|
:disabled="true"
|
|
/>
|
|
<NumberInput
|
|
ref="day"
|
|
:model-value="BIRTHDAY_DAY"
|
|
:title="$t('settings.user.birthday.day')"
|
|
:x="5 * 16"
|
|
:disabled="true"
|
|
/>
|
|
<NumberInput
|
|
ref="year"
|
|
:model-value="BIRTHDAY_YEAR"
|
|
:title="$t('settings.user.birthday.year')"
|
|
:digits="4"
|
|
:x="9 * 16"
|
|
:disabled="true"
|
|
/>
|
|
|
|
<CommonButtons
|
|
:y-offset="0"
|
|
:b-label="$t('common.cancel')"
|
|
:a-label="$t('common.confirm')"
|
|
@activate-b="handleActivateB"
|
|
@activate-a="handleActivateA"
|
|
/>
|
|
</template>
|