Enhance date handling in location and transportation components by introducing utility functions for managing all-day events. Updated all-day toggle logic to utilize new functions for converting local dates to date-only format and setting default times for timed inputs.

This commit is contained in:
Sean Morley
2026-07-28 17:22:42 -04:00
parent cb35d397e7
commit 5d860bde83
4 changed files with 77 additions and 37 deletions

View File

@@ -9,7 +9,14 @@
} from '$lib/types';
import TimezoneSelector from '../TimezoneSelector.svelte';
import { t } from 'svelte-i18n';
import { updateLocalDate, updateUTCDate, validateDateRange, formatUTCDate } from '$lib/dateUtils';
import {
updateLocalDate,
updateUTCDate,
validateDateRange,
formatUTCDate,
toDateOnlyLocal,
toTimedLocalDefault
} from '$lib/dateUtils';
import { onMount } from 'svelte';
import { isAllDay, isVisitAllDay, allDayDatePart, SPORT_TYPE_CHOICES } from '$lib';
import { createEventDispatcher } from 'svelte';
@@ -52,7 +59,7 @@
// Types
// Component state
let allDay: boolean = false;
let allDay: boolean = true;
let localStartDate: string = '';
let localEndDate: string = '';
let fullStartDate: string = '';
@@ -205,15 +212,19 @@
}).utcDate;
}
function handleAllDayToggle() {
if (allDay) {
localStartDate = localStartDate ? localStartDate.split('T')[0] : '';
localEndDate = localEndDate ? localEndDate.split('T')[0] : '';
function handleAllDayToggle(event: Event) {
const nextAllDay = (event.currentTarget as HTMLInputElement).checked;
if (nextAllDay) {
localStartDate = toDateOnlyLocal(localStartDate);
localEndDate = toDateOnlyLocal(localEndDate);
} else {
localStartDate = localStartDate + 'T00:00';
localEndDate = localEndDate + 'T23:59';
localStartDate = toTimedLocalDefault(localStartDate);
localEndDate = toTimedLocalDefault(localEndDate, true);
}
allDay = nextAllDay;
utcStartDate = updateUTCDate({
localDate: localStartDate,
timezone: selectedStartTimezone,
@@ -226,15 +237,17 @@
allDay
}).utcDate;
localStartDate = updateLocalDate({
utcDate: utcStartDate,
timezone: selectedStartTimezone
}).localDate;
if (!allDay) {
localStartDate = updateLocalDate({
utcDate: utcStartDate,
timezone: selectedStartTimezone
}).localDate;
localEndDate = updateLocalDate({
utcDate: utcEndDate,
timezone: selectedStartTimezone
}).localDate;
localEndDate = updateLocalDate({
utcDate: utcEndDate,
timezone: selectedStartTimezone
}).localDate;
}
}
async function addVisit(isAuto: boolean = false) {
@@ -917,7 +930,7 @@
id="all-day-toggle"
type="checkbox"
class="toggle toggle-{typeConfig.color} toggle-sm"
bind:checked={allDay}
checked={allDay}
on:change={handleAllDayToggle}
/>
</div>

View File

@@ -1,7 +1,13 @@
<script lang="ts">
import { createEventDispatcher, onMount } from 'svelte';
import { t, locale } from 'svelte-i18n';
import { updateLocalDate, updateUTCDate, validateDateRange } from '$lib/dateUtils';
import {
updateLocalDate,
updateUTCDate,
validateDateRange,
toDateOnlyLocal,
toTimedLocalDefault
} from '$lib/dateUtils';
import type { Collection, Lodging, MoneyValue } from '$lib/types';
import LocationSearchMap from '../shared/LocationSearchMap.svelte';
@@ -159,19 +165,20 @@
lodging.location = '';
}
function handleAllDayToggle() {
if (allDay) {
localStartDate = localStartDate ? localStartDate.split('T')[0] : '';
localEndDate = localEndDate ? localEndDate.split('T')[0] : '';
// Clear timezone for all-day stays
function handleAllDayToggle(event: Event) {
const nextAllDay = (event.currentTarget as HTMLInputElement).checked;
if (nextAllDay) {
localStartDate = toDateOnlyLocal(localStartDate);
localEndDate = toDateOnlyLocal(localEndDate);
lodging.timezone = null;
} else {
localStartDate = localStartDate ? `${localStartDate}T00:00` : '';
localEndDate = localEndDate ? `${localEndDate}T23:59` : '';
// Restore selected timezone when switching back to timed
localStartDate = toTimedLocalDefault(localStartDate);
localEndDate = toTimedLocalDefault(localEndDate, true);
lodging.timezone = selectedTimezone;
}
allDay = nextAllDay;
syncAndValidateDates(false);
}
@@ -706,7 +713,7 @@
<input
type="checkbox"
class="toggle toggle-primary"
bind:checked={allDay}
checked={allDay}
on:change={handleAllDayToggle}
/>
<span class="label-text">{$t('adventures.all_day')}</span>

View File

@@ -1,7 +1,13 @@
<script lang="ts">
import { createEventDispatcher, onMount } from 'svelte';
import { t, locale } from 'svelte-i18n';
import { updateLocalDate, updateUTCDate, validateDateRange } from '$lib/dateUtils';
import {
updateLocalDate,
updateUTCDate,
validateDateRange,
toDateOnlyLocal,
toTimedLocalDefault
} from '$lib/dateUtils';
import type { Collection, Lodging, Transportation, MoneyValue } from '$lib/types';
import LocationSearchMap from '../shared/LocationSearchMap.svelte';
@@ -224,22 +230,23 @@
transportation.end_code = null;
}
function handleAllDayToggle() {
if (allDay) {
localStartDate = localStartDate ? localStartDate.split('T')[0] : '';
localEndDate = localEndDate ? localEndDate.split('T')[0] : '';
// Clear timezones for all-day transportation
function handleAllDayToggle(event: Event) {
const nextAllDay = (event.currentTarget as HTMLInputElement).checked;
if (nextAllDay) {
localStartDate = toDateOnlyLocal(localStartDate);
localEndDate = toDateOnlyLocal(localEndDate);
transportation.start_timezone = null;
transportation.end_timezone = null;
} else {
localStartDate = localStartDate ? `${localStartDate}T00:00` : '';
localEndDate = localEndDate ? `${localEndDate}T23:59` : '';
// Restore selected timezones when switching back to timed
localStartDate = toTimedLocalDefault(localStartDate);
localEndDate = toTimedLocalDefault(localEndDate, true);
selectedEndTimezone = selectedEndTimezone || selectedStartTimezone;
transportation.start_timezone = selectedStartTimezone;
transportation.end_timezone = selectedEndTimezone;
}
allDay = nextAllDay;
syncAndValidateDates(false);
}
@@ -838,7 +845,7 @@
<input
type="checkbox"
class="toggle toggle-primary"
bind:checked={allDay}
checked={allDay}
on:change={handleAllDayToggle}
/>
<span class="label-text">{$t('adventures.all_day')}</span>

View File

@@ -68,6 +68,19 @@ export function updateUTCDate({
return { utcDate: toUTCDatetime(localDate, timezone, allDay) };
}
/** Strip the time portion from a local date/datetime string for all-day inputs. */
export function toDateOnlyLocal(localDate: string): string {
if (!localDate) return '';
return localDate.split('T')[0];
}
/** Add default start/end times when switching from all-day to timed inputs. */
export function toTimedLocalDefault(localDate: string, end = false): string {
if (!localDate) return '';
const datePart = toDateOnlyLocal(localDate);
return end ? `${datePart}T23:59` : `${datePart}T00:00`;
}
/**
* Validate date ranges using UTC comparison
*/