potsda.mn/mobilizon
10
4
Fork 1
Code Issues 22 Pull requests 1 Projects Releases Wiki Activity

Issue #1511: Date components no longer change their value when the timezone is updated

Browse source
This commit is contained in:
Massedil 2024-11-02 15:32:54 +01:00
parent c0e906023c
commit ae02e28129
1 changed files with 68 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

126
src/views/Event/EditView.vue
View file

@ -743,8 +743,8 @@ const initializeEvent = () => {
end.setUTCHours(now.getUTCHours() + 3); end.setUTCHours(now.getUTCHours() + 3);
event.value.beginsOn = now.toISOString(); beginsOn.value = now;
event.value.endsOn = end.toISOString(); endsOn.value = end;
}; };
const organizerActor = computed({ const organizerActor = computed({
@ -1215,66 +1215,54 @@ const isEventModified = computed((): boolean => {
); );
}); });
const beginsOn = computed({ const beginsOn = ref(new Date());
get(): Date | null { const endsOn = ref(new Date());
if (!event.value.beginsOn) {
return null;
}
// return event.value.beginsOn taking care of timezone
const date = new Date(event.value.beginsOn);
date.setUTCMinutes(date.getUTCMinutes() + tzOffset(date));
return date;
},
set(newBeginsOn: Date | null) {
if (!newBeginsOn) {
event.value.beginsOn = null;
return;
}
// usefull for comparaison const updateEventDateRelatedToTimezone = () => {
newBeginsOn.setUTCSeconds(0); // update event.value.beginsOn taking care of timezone
newBeginsOn.setUTCMilliseconds(0); const dateBeginsOn = new Date(beginsOn.value.getTime());
dateBeginsOn.setUTCMinutes(dateBeginsOn.getUTCMinutes() - tzOffset.value);
event.value.beginsOn = dateBeginsOn.toISOString();
// update event.value.beginsOn taking care of timezone // update event.value.endsOn taking care of timezone
const date = new Date(newBeginsOn.getTime()); const dateEndsOn = new Date(endsOn.value.getTime());
date.setUTCMinutes(date.getUTCMinutes() - tzOffset(newBeginsOn)); dateEndsOn.setUTCMinutes(dateEndsOn.getUTCMinutes() - tzOffset.value);
event.value.beginsOn = date.toISOString(); event.value.endsOn = dateEndsOn.toISOString();
};
// Update endsOn to make sure endsOn is later than beginsOn watch(beginsOn, (newBeginsOn) => {
if (endsOn.value && endsOn.value <= newBeginsOn) { if (!newBeginsOn) {
const newEndsOn = new Date(newBeginsOn); event.value.beginsOn = null;
newEndsOn.setUTCHours(newBeginsOn.getUTCHours() + 1); return;
endsOn.value = newEndsOn; }
}
}, // usefull for comparaison
newBeginsOn.setUTCSeconds(0);
newBeginsOn.setUTCMilliseconds(0);
// update event.value.beginsOn taking care of timezone
updateEventDateRelatedToTimezone();
// Update endsOn to make sure endsOn is later than beginsOn
if (endsOn.value && endsOn.value <= newBeginsOn) {
const newEndsOn = new Date(newBeginsOn);
newEndsOn.setUTCHours(newBeginsOn.getUTCHours() + 1);
endsOn.value = newEndsOn;
}
}); });
const endsOn = computed({ watch(endsOn, (newEndsOn) => {
get(): Date | null { if (!newEndsOn) {
if (!event.value.endsOn) { event.value.endsOn = null;
return null; return;
} }
// return event.value.endsOn taking care of timezone // usefull for comparaison
const date = new Date(event.value.endsOn); newEndsOn.setUTCSeconds(0);
date.setUTCMinutes(date.getUTCMinutes() + tzOffset(date)); newEndsOn.setUTCMilliseconds(0);
return date;
},
set(newEndsOn: Date | null) {
if (!newEndsOn) {
event.value.endsOn = null;
return;
}
// usefull for comparaison // update event.value.endsOn taking care of timezone
newEndsOn.setUTCSeconds(0); updateEventDateRelatedToTimezone();
newEndsOn.setUTCMilliseconds(0);
// update event.value.endsOn taking care of timezone
const date = new Date(newEndsOn.getTime());
date.setUTCMinutes(date.getUTCMinutes() - tzOffset(newEndsOn));
event.value.endsOn = date.toISOString();
},
}); });
const { timezones: rawTimezones, loading: timezoneLoading } = useTimezones(); const { timezones: rawTimezones, loading: timezoneLoading } = useTimezones();
@ -1342,10 +1330,13 @@ const userActualTimezone = computed((): string => {
return browserTimeZone; return browserTimeZone;
}); });
const tzOffset = (date: Date | null): number => { const tzOffset = computed((): number => {
if (!timezone.value || !date) { if (!timezone.value) {
return 0; return 0;
} }
const date = new Date();
// diff between UTC and selected timezone // diff between UTC and selected timezone
// example: Asia/Shanghai is + 8 hours // example: Asia/Shanghai is + 8 hours
const eventUTCOffset = getTimezoneOffset(timezone.value, date); const eventUTCOffset = getTimezoneOffset(timezone.value, date);
@ -1356,7 +1347,12 @@ const tzOffset = (date: Date | null): number => {
// example : offset is 8-1=7 // example : offset is 8-1=7
return (eventUTCOffset - localUTCOffset) / (60 * 1000); return (eventUTCOffset - localUTCOffset) / (60 * 1000);
}; });
watch(tzOffset, () => {
// tzOffset has been changed, we need to update the event dates
updateEventDateRelatedToTimezone();
});
const eventPhysicalAddress = computed({ const eventPhysicalAddress = computed({
get(): IAddress | null { get(): IAddress | null {
@ -1403,6 +1399,20 @@ const { event: fetchedEvent, onResult: onFetchEventResult } = useFetchEvent(
eventId.value eventId.value
); );
// update the date components if the event changed (after fetching it, for example)
watch(event, () => {
if (event.value.beginsOn) {
const date = new Date(event.value.beginsOn);
date.setUTCMinutes(date.getUTCMinutes() + tzOffset.value);
beginsOn.value = date;
}
if (event.value.endsOn) {
const date = new Date(event.value.endsOn);
date.setUTCMinutes(date.getUTCMinutes() + tzOffset.value);
endsOn.value = date;
}
});
watch( watch(
fetchedEvent, fetchedEvent,
() => { () => {