MaysWind
464 lines
21 KiB
Vue
464 lines
21 KiB
Vue
<template>
|
|
<f7-sheet swipe-to-close swipe-handler=".swipe-handler" class="date-time-selection-sheet" style="height:auto"
|
|
:opened="show" @sheet:open="onSheetOpen" @sheet:closed="onSheetClosed">
|
|
<f7-toolbar>
|
|
<div class="swipe-handler"></div>
|
|
<div class="left">
|
|
<f7-link :text="tt('Now')" @click="setCurrentTime"></f7-link>
|
|
</div>
|
|
<div class="right">
|
|
<f7-link :text="tt('Done')" @click="confirm"></f7-link>
|
|
</div>
|
|
</f7-toolbar>
|
|
<f7-page-content class="padding-bottom">
|
|
<div class="block block-outline no-margin no-padding">
|
|
<date-time-picker ref="datetimepicker"
|
|
datetime-picker-class="justify-content-center"
|
|
:is-dark-mode="isDarkMode"
|
|
:enable-time-picker="false"
|
|
v-model="dateTime"
|
|
v-show="mode === 'date'">
|
|
</date-time-picker>
|
|
</div>
|
|
<div class="block block-outline no-margin no-padding padding-vertical-half" v-show="mode === 'time'">
|
|
<div id="time-picker-container" class="time-picker-container">
|
|
<div class="picker picker-inline picker-3d">
|
|
<div class="picker-columns">
|
|
<div class="picker-column" v-if="!is24Hour && isMeridiemIndicatorFirst">
|
|
<div class="picker-items picker-items-meridiem-indicator-first"
|
|
@scroll="onPickerColumnScroll('picker-items-meridiem-indicator-first', 'picker-meridiem-indicator', false)">
|
|
<div :class="{ 'picker-item': true, 'picker-meridiem-indicator': true, 'picker-item-selected': currentMeridiemIndicator === item.value }"
|
|
:key="item.value" :data-value="item.value"
|
|
@click="currentMeridiemIndicator = item.value; scrollToSelectedItem('picker-items-meridiem-indicator-first', 'picker-meridiem-indicator', item.value)"
|
|
v-for="item in meridiemItems">
|
|
<span>{{ item.name }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="picker-column">
|
|
<div class="picker-items picker-items-hour"
|
|
@scroll="onPickerColumnScroll('picker-items-hour', 'picker-hour', false)"
|
|
@scrollend="onPickerColumnScroll('picker-items-hour', 'picker-hour', true)">
|
|
<div :class="{ 'picker-item': true, 'picker-hour': true, 'picker-item-selected': currentHour === item.value }"
|
|
:key="`${item.itemsIndex}_${item.value}`" :data-items-index="item.itemsIndex" :data-value="item.value"
|
|
@click="currentHour = item.value; scrollToSelectedItem('picker-items-hour', 'picker-hour', item.value)"
|
|
v-for="item in hourItems">
|
|
<span :style="getTimerPickerItemStyle(item.value, currentHour, item.itemsIndex, hourItems)">{{ item.value }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="picker-column picker-column-divider">:</div>
|
|
<div class="picker-column">
|
|
<div class="picker-items picker-items-minute"
|
|
@scroll="onPickerColumnScroll('picker-items-minute', 'picker-minute', false)"
|
|
@scrollend="onPickerColumnScroll('picker-items-minute', 'picker-minute', true)">
|
|
<div :class="{ 'picker-item': true, 'picker-minute': true, 'picker-item-selected': currentMinute === item.value }"
|
|
:key="`${item.itemsIndex}_${item.value}`" :data-items-index="item.itemsIndex" :data-value="item.value"
|
|
@click="currentMinute = item.value; scrollToSelectedItem('picker-items-minute', 'picker-minute', item.value)"
|
|
v-for="item in minuteItems">
|
|
<span :style="getTimerPickerItemStyle(item.value, currentMinute, item.itemsIndex, minuteItems)">{{ item.value }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="picker-column picker-column-divider">:</div>
|
|
<div class="picker-column">
|
|
<div class="picker-items picker-items-second"
|
|
@scroll="onPickerColumnScroll('picker-items-second', 'picker-second', false)"
|
|
@scrollend="onPickerColumnScroll('picker-items-second', 'picker-second', true)">
|
|
<div :class="{ 'picker-item': true, 'picker-second': true, 'picker-item-selected': currentSecond === item.value }"
|
|
:key="`${item.itemsIndex}_${item.value}`" :data-items-index="item.itemsIndex" :data-value="item.value"
|
|
@click="currentSecond = item.value; scrollToSelectedItem('picker-items-second', 'picker-second', item.value)"
|
|
v-for="item in secondItems">
|
|
<span :style="getTimerPickerItemStyle(item.value, currentSecond, item.itemsIndex, secondItems)">{{ item.value }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="picker-column" v-if="!is24Hour && !isMeridiemIndicatorFirst">
|
|
<div class="picker-items picker-items-meridiem-indicator-last"
|
|
@scroll="onPickerColumnScroll('picker-items-meridiem-indicator-last', 'picker-meridiem-indicator', false)">
|
|
<div :class="{ 'picker-item': true, 'picker-meridiem-indicator': true, 'picker-item-selected': currentMeridiemIndicator === item.value }"
|
|
:key="item.value" :data-value="item.value"
|
|
@click="currentMeridiemIndicator = item.value; scrollToSelectedItem('picker-items-meridiem-indicator-last', 'picker-meridiem-indicator', item.value)"
|
|
v-for="item in meridiemItems">
|
|
<span>{{ item.name }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="picker-center-highlight"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<input id="time-picker-input" style="display: none" type="text" :readonly="true"/>
|
|
<div class="margin-top text-align-center">
|
|
<div class="display-flex padding-horizontal justify-content-space-between">
|
|
<div class="align-self-center">{{ displayTime }}</div>
|
|
<f7-button outline :text="tt(switchButtonTitle)" @click="switchMode"></f7-button>
|
|
</div>
|
|
</div>
|
|
</f7-page-content>
|
|
</f7-sheet>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import DateTimePicker from '@/components/common/DateTimePicker.vue';
|
|
import { ref, computed, nextTick, useTemplateRef, watch } from 'vue';
|
|
|
|
import { useI18n } from '@/locales/helpers.ts';
|
|
import { useI18nUIComponents } from '@/lib/ui/mobile.ts';
|
|
import { type TimePickerValue, useDateTimeSelectionBase } from '@/components/base/DateTimeSelectionBase.ts';
|
|
|
|
import { useEnvironmentsStore } from '@/stores/environment.ts';
|
|
|
|
import { isDefined } from '@/lib/common.ts';
|
|
import {
|
|
getHourIn12HourFormat,
|
|
getTimezoneOffsetMinutes,
|
|
getBrowserTimezoneOffsetMinutes,
|
|
getLocalDatetimeFromUnixTime,
|
|
getActualUnixTimeForStore,
|
|
getCurrentUnixTime,
|
|
getUnixTimeFromLocalDatetime,
|
|
getAMOrPM,
|
|
getCombinedDateAndTimeValues
|
|
} from '@/lib/datetime.ts';
|
|
|
|
type DateTimePickerType = InstanceType<typeof DateTimePicker>;
|
|
|
|
const props = defineProps<{
|
|
modelValue: number;
|
|
initMode?: string;
|
|
show: boolean;
|
|
}>();
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'update:modelValue', value: number): void;
|
|
(e: 'update:show', value: boolean): void;
|
|
}>();
|
|
|
|
const { tt, formatUnixTimeToLongDateTime } = useI18n();
|
|
const { showToast } = useI18nUIComponents();
|
|
|
|
const {
|
|
is24Hour,
|
|
isHourTwoDigits,
|
|
isMinuteTwoDigits,
|
|
isSecondTwoDigits,
|
|
isMeridiemIndicatorFirst,
|
|
meridiemItems,
|
|
getDisplayTimeValue,
|
|
generateAllHours,
|
|
generateAllMinutesOrSeconds
|
|
} = useDateTimeSelectionBase();
|
|
|
|
const environmentsStore = useEnvironmentsStore();
|
|
|
|
const datetimepicker = useTemplateRef<DateTimePickerType>('datetimepicker');
|
|
|
|
let resetTimePickerItemPositionItemsClass: string | undefined = undefined;
|
|
let resetTimePickerItemPositionItemClass: string | undefined = undefined;
|
|
let resetTimePickerItemPositionItemsLastOffsetTop: number | undefined = undefined;
|
|
let resetTimePickerItemPositionCheckedFrames: number | undefined = undefined;
|
|
|
|
const mode = ref<string>(props.initMode || 'time');
|
|
const dateTime = ref<Date>(getLocalDatetimeFromUnixTime(props.modelValue || getCurrentUnixTime()));
|
|
const timePickerContainerHeight = ref<number | undefined>(undefined);
|
|
const timePickerItemHeight = ref<number | undefined>(undefined);
|
|
|
|
const hourItems = computed<TimePickerValue[]>(() => generateAllHours(3, isHourTwoDigits.value));
|
|
const minuteItems = computed<TimePickerValue[]>(() => generateAllMinutesOrSeconds(3, isMinuteTwoDigits.value));
|
|
const secondItems = computed<TimePickerValue[]>(() => generateAllMinutesOrSeconds(3, isSecondTwoDigits.value));
|
|
|
|
const currentMeridiemIndicator = computed<string>({
|
|
get: () => {
|
|
return getAMOrPM(dateTime.value.getHours())
|
|
},
|
|
set: (value: string) => {
|
|
dateTime.value = getCombinedDateAndTimeValues(dateTime.value, currentHour.value, currentMinute.value, currentSecond.value, value, is24Hour.value);
|
|
}
|
|
});
|
|
const currentHour = computed<string>({
|
|
get: () => {
|
|
return getDisplayTimeValue(is24Hour.value ? dateTime.value.getHours() : getHourIn12HourFormat(dateTime.value.getHours()), isHourTwoDigits.value);
|
|
},
|
|
set: (value: string) => {
|
|
dateTime.value = getCombinedDateAndTimeValues(dateTime.value, value, currentMinute.value, currentSecond.value, currentMeridiemIndicator.value, is24Hour.value);
|
|
}
|
|
});
|
|
const currentMinute = computed<string>({
|
|
get: () => {
|
|
return getDisplayTimeValue(dateTime.value.getMinutes(), isMinuteTwoDigits.value);
|
|
},
|
|
set: (value: string) => {
|
|
dateTime.value = getCombinedDateAndTimeValues(dateTime.value, currentHour.value, value, currentSecond.value, currentMeridiemIndicator.value, is24Hour.value);
|
|
}
|
|
});
|
|
const currentSecond = computed<string>({
|
|
get: () => {
|
|
return getDisplayTimeValue(dateTime.value.getSeconds(), isSecondTwoDigits.value);
|
|
},
|
|
set: (value: string) => {
|
|
dateTime.value = getCombinedDateAndTimeValues(dateTime.value, currentHour.value, currentMinute.value, value, currentMeridiemIndicator.value, is24Hour.value);
|
|
}
|
|
});
|
|
|
|
const isDarkMode = computed<boolean>(() => environmentsStore.framework7DarkMode || false);
|
|
const displayTime = computed<string>(() => formatUnixTimeToLongDateTime(getActualUnixTimeForStore(getUnixTimeFromLocalDatetime(dateTime.value), getTimezoneOffsetMinutes(), getBrowserTimezoneOffsetMinutes())));
|
|
const switchButtonTitle = computed<string>(() => mode.value === 'time' ? 'Date' : 'Time');
|
|
|
|
function switchMode(): void {
|
|
if (mode.value === 'time') {
|
|
mode.value = 'date';
|
|
} else {
|
|
mode.value = 'time';
|
|
}
|
|
}
|
|
|
|
function setCurrentTime(): void {
|
|
dateTime.value = getLocalDatetimeFromUnixTime(getCurrentUnixTime());
|
|
|
|
if (mode.value === 'time') {
|
|
scrollAllTimeSelectedItems();
|
|
}
|
|
}
|
|
|
|
function confirm(): void {
|
|
if (!dateTime.value) {
|
|
return;
|
|
}
|
|
|
|
const unixTime = getUnixTimeFromLocalDatetime(dateTime.value);
|
|
|
|
if (unixTime < 0) {
|
|
showToast('Date is too early');
|
|
return;
|
|
}
|
|
|
|
emit('update:modelValue', unixTime);
|
|
emit('update:show', false);
|
|
}
|
|
|
|
function getTimerPickerItemStyle(textualValue: string, textualCurrentValue: string, itemsIndex: number, values: TimePickerValue[]): string {
|
|
if (!timePickerContainerHeight.value || !timePickerItemHeight.value) {
|
|
return '';
|
|
}
|
|
|
|
const minValue = parseInt(values[0].value);
|
|
const maxValue = parseInt(values[values.length - 1].value);
|
|
const value = parseInt(textualValue, 10);
|
|
const currentValue = parseInt(textualCurrentValue, 10);
|
|
let valueDiff = value - currentValue;
|
|
|
|
if (Math.abs(valueDiff) >= 5) {
|
|
if (itemsIndex === 0 && maxValue - 5 < value && currentValue < minValue + 5) {
|
|
valueDiff = value - (maxValue + currentValue + 1);
|
|
} else if (itemsIndex === 2 && maxValue - 5 < currentValue && value < minValue + 5) {
|
|
valueDiff = (maxValue + value + 1) - currentValue;
|
|
}
|
|
}
|
|
|
|
const angle = -24 * valueDiff;
|
|
|
|
if (angle > 180) {
|
|
return '';
|
|
}
|
|
if (angle < -180) {
|
|
return '';
|
|
}
|
|
|
|
return `transform: translate3d(0, ${-valueDiff * timePickerItemHeight.value}px, -100px) rotateX(${angle}deg)`;
|
|
}
|
|
|
|
function initTimePickerStyle(): void {
|
|
const timePickerContainerElement = document.getElementById('time-picker-container');
|
|
const pickerItems = timePickerContainerElement?.querySelectorAll('.picker-item');
|
|
const firstPickerItem = pickerItems ? pickerItems[0] : null;
|
|
|
|
if (timePickerContainerElement) {
|
|
timePickerContainerHeight.value = timePickerContainerElement.offsetHeight as number;
|
|
}
|
|
|
|
if (firstPickerItem && 'offsetHeight' in firstPickerItem) {
|
|
timePickerItemHeight.value = firstPickerItem.offsetHeight as number;
|
|
}
|
|
|
|
if (timePickerContainerElement && firstPickerItem && 'offsetHeight' in firstPickerItem) {
|
|
timePickerContainerElement.style.setProperty('--f7-picker-scroll-padding', `${(timePickerContainerElement.offsetHeight - (firstPickerItem.offsetHeight as number)) / 2}px`);
|
|
}
|
|
}
|
|
|
|
function scrollAllTimeSelectedItems(): void {
|
|
scrollToSelectedItem('picker-items-hour', 'picker-hour', currentHour.value);
|
|
scrollToSelectedItem('picker-items-minute', 'picker-minute', currentMinute.value);
|
|
scrollToSelectedItem('picker-items-second', 'picker-second', currentSecond.value);
|
|
scrollToSelectedItem('picker-items-meridiem-indicator-first', 'picker-meridiem-indicator', currentMeridiemIndicator.value);
|
|
scrollToSelectedItem('picker-items-meridiem-indicator-last', 'picker-meridiem-indicator', currentMeridiemIndicator.value);
|
|
}
|
|
|
|
function scrollTimeSelectedItems(itemsClass: string, itemClass: string): void {
|
|
switch (resetTimePickerItemPositionItemClass) {
|
|
case 'picker-hour':
|
|
scrollToSelectedItem(itemsClass, itemClass, currentHour.value);
|
|
break;
|
|
case 'picker-minute':
|
|
scrollToSelectedItem(itemsClass, itemClass, currentMinute.value);
|
|
break;
|
|
case 'picker-second':
|
|
scrollToSelectedItem(itemsClass, itemClass, currentSecond.value);
|
|
break;
|
|
}
|
|
}
|
|
|
|
function scrollToSelectedItem(itemsClass: string, itemClass: string, value: string): void {
|
|
const itemsElement = document.querySelector(`.${itemsClass}`);
|
|
const itemElements = itemsElement?.querySelectorAll(`.${itemClass}`);
|
|
|
|
if (!itemsElement || !itemElements || !itemElements.length) {
|
|
return;
|
|
}
|
|
|
|
for (let i = 0; i < itemElements.length; i++) {
|
|
const itemElement = itemElements[i];
|
|
|
|
if ('offsetHeight' in itemsElement && 'offsetTop' in itemElement && 'offsetHeight' in itemElement
|
|
&& (!itemElement.hasAttribute('data-items-index') || itemElement.getAttribute('data-items-index') === '1')
|
|
&& itemElement.getAttribute('data-value') === value) {
|
|
itemsElement.scrollTop = (itemElement.offsetTop as number) - ((itemsElement.offsetHeight as number) / 2) + ((itemElement.offsetHeight as number) / 2);
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
function onPickerColumnScroll(itemsClass: string, itemClass: string, scrollEnd: boolean): void {
|
|
const itemsElement = document.querySelector(`.${itemsClass}`);
|
|
const itemElements = itemsElement?.querySelectorAll(`.${itemClass}`);
|
|
const firstPickerElement = itemElements ? itemElements[0] : null;
|
|
|
|
if (!itemsElement || !itemElements || !itemElements.length || !firstPickerElement || !('offsetHeight' in firstPickerElement)) {
|
|
return;
|
|
}
|
|
|
|
const itemHeight = firstPickerElement.offsetHeight as number;
|
|
const scrollTop = itemsElement?.scrollTop || 0;
|
|
const index = Math.round(scrollTop / itemHeight);
|
|
const selectedItem = itemElements[index];
|
|
|
|
if (selectedItem) {
|
|
const value = selectedItem.getAttribute('data-value');
|
|
const itemsIndex = selectedItem.getAttribute('data-items-index');
|
|
|
|
if (value) {
|
|
switch (itemClass) {
|
|
case 'picker-hour':
|
|
currentHour.value = value;
|
|
break;
|
|
case 'picker-minute':
|
|
currentMinute.value = value;
|
|
break;
|
|
case 'picker-second':
|
|
currentSecond.value = value;
|
|
break;
|
|
case 'picker-meridiem-indicator':
|
|
currentMeridiemIndicator.value = value;
|
|
break;
|
|
}
|
|
|
|
if (itemsIndex === '0' || itemsIndex === '2') {
|
|
if (scrollEnd) {
|
|
scrollToSelectedItem(itemsClass, itemClass, value);
|
|
} else {
|
|
if (resetTimePickerItemPositionItemsClass && resetTimePickerItemPositionItemClass
|
|
&& resetTimePickerItemPositionItemsClass !== itemsClass && resetTimePickerItemPositionItemClass !== itemClass) {
|
|
scrollTimeSelectedItems(resetTimePickerItemPositionItemsClass, resetTimePickerItemPositionItemClass);
|
|
resetTimePickerItemPositionItemsClass = undefined;
|
|
resetTimePickerItemPositionItemClass = undefined;
|
|
resetTimePickerItemPositionItemsLastOffsetTop = undefined;
|
|
resetTimePickerItemPositionCheckedFrames = undefined;
|
|
}
|
|
|
|
if (!resetTimePickerItemPositionCheckedFrames && window.requestAnimationFrame) {
|
|
resetTimePickerItemPositionItemsClass = itemsClass;
|
|
resetTimePickerItemPositionItemClass = itemClass;
|
|
resetTimePickerItemPositionItemsLastOffsetTop = itemsElement.scrollTop;
|
|
resetTimePickerItemPositionCheckedFrames = 1;
|
|
window.requestAnimationFrame(delayCheckAndResetTimePickerItemPosition);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
function delayCheckAndResetTimePickerItemPosition(): void {
|
|
if (!resetTimePickerItemPositionItemsClass || !resetTimePickerItemPositionItemClass || !isDefined(resetTimePickerItemPositionItemsLastOffsetTop) || !isDefined(resetTimePickerItemPositionCheckedFrames)) {
|
|
return;
|
|
}
|
|
|
|
const itemsElement = document.querySelector(`.${resetTimePickerItemPositionItemsClass}`);
|
|
|
|
if (!itemsElement) {
|
|
return;
|
|
}
|
|
|
|
if (itemsElement.scrollTop === resetTimePickerItemPositionItemsLastOffsetTop) {
|
|
resetTimePickerItemPositionCheckedFrames++;
|
|
} else {
|
|
resetTimePickerItemPositionItemsLastOffsetTop = itemsElement.scrollTop;
|
|
resetTimePickerItemPositionCheckedFrames = 0;
|
|
}
|
|
|
|
if (resetTimePickerItemPositionCheckedFrames > 3) {
|
|
scrollTimeSelectedItems(resetTimePickerItemPositionItemsClass, resetTimePickerItemPositionItemClass);
|
|
resetTimePickerItemPositionItemsClass = undefined;
|
|
resetTimePickerItemPositionItemClass = undefined;
|
|
resetTimePickerItemPositionItemsLastOffsetTop = undefined;
|
|
resetTimePickerItemPositionCheckedFrames = undefined;
|
|
return;
|
|
}
|
|
|
|
window.requestAnimationFrame(delayCheckAndResetTimePickerItemPosition);
|
|
}
|
|
|
|
function onSheetOpen(): void {
|
|
mode.value = props.initMode || 'time';
|
|
|
|
if (props.modelValue) {
|
|
dateTime.value = getLocalDatetimeFromUnixTime(props.modelValue);
|
|
}
|
|
|
|
if (mode.value === 'time') {
|
|
nextTick(() => {
|
|
initTimePickerStyle();
|
|
scrollAllTimeSelectedItems();
|
|
});
|
|
}
|
|
|
|
datetimepicker.value?.switchView('calendar');
|
|
}
|
|
|
|
function onSheetClosed(): void {
|
|
emit('update:show', false);
|
|
}
|
|
|
|
watch(mode, (newValue) => {
|
|
if (newValue === 'date') {
|
|
datetimepicker.value?.switchView('calendar');
|
|
} else if (newValue === 'time') {
|
|
nextTick(() => {
|
|
initTimePickerStyle();
|
|
scrollAllTimeSelectedItems();
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
.date-time-selection-sheet .dp__menu {
|
|
border: 0;
|
|
}
|
|
|
|
.date-time-selection-sheet .time-picker-container .picker-columns {
|
|
justify-content: space-evenly;
|
|
}
|
|
</style>
|