Portal: 12-hour schedule times and dynamicAudio default on
Use TimeInput for Block start/end and show the day timeline axis with AM/PM, so no 24-hour time is displayed in the schedule UI. New Blocks now default dynamicAudio to true in the modal and server-side when the field is absent; existing stored Blocks are untouched.
This commit is contained in:
NeilClack
@@ -2,10 +2,12 @@
|
||||
import { enhance } from '$app/forms';
|
||||
import type { SubmitFunction } from '@sveltejs/kit';
|
||||
import ProclamationBrowser from './ProclamationBrowser.svelte';
|
||||
import TimeInput from '$lib/components/TimeInput.svelte';
|
||||
import {
|
||||
MINUTE_STEP,
|
||||
formatTime,
|
||||
hmToMinutes,
|
||||
isOvernight,
|
||||
toHm,
|
||||
validateBlock,
|
||||
type BlockSibling
|
||||
} from '$lib/schedule-utils';
|
||||
@@ -26,7 +28,7 @@
|
||||
initialStartMinutes = 9 * 60,
|
||||
initialEndMinutes = 10 * 60,
|
||||
initialProclamationIds = [],
|
||||
initialDynamicAudio = false,
|
||||
initialDynamicAudio = true,
|
||||
categories = [],
|
||||
groups = [],
|
||||
proclamations = [],
|
||||
@@ -56,58 +58,38 @@
|
||||
} = $props();
|
||||
|
||||
let step = $state<'details' | 'browse'>('details');
|
||||
let startHour = $state('9');
|
||||
let startMinute = $state('0');
|
||||
let startPeriod = $state<'AM' | 'PM'>('AM');
|
||||
let endHour = $state('10');
|
||||
let endMinute = $state('0');
|
||||
let endPeriod = $state<'AM' | 'PM'>('AM');
|
||||
// Seeded from the props in the effect below whenever the modal opens.
|
||||
let startMinutes = $state(9 * 60);
|
||||
let endMinutes = $state(10 * 60);
|
||||
let startValid = $state(true);
|
||||
let endValid = $state(true);
|
||||
let selectedIds = $state<string[]>([]);
|
||||
let dynamicAudio = $state(false);
|
||||
let dynamicAudio = $state(true);
|
||||
let error = $state('');
|
||||
|
||||
const hourOptions = Array.from({ length: 12 }, (_, i) => String(i + 1));
|
||||
const periodOptions: ('AM' | 'PM')[] = ['AM', 'PM'];
|
||||
|
||||
function minuteOptions(current: string): string[] {
|
||||
const base = Array.from({ length: 60 / MINUTE_STEP }, (_, i) => String(i * MINUTE_STEP));
|
||||
if (base.includes(current)) return base;
|
||||
return [...base, current].sort((a, b) => Number(a) - Number(b));
|
||||
function setStart(hm: string) {
|
||||
const minutes = hmToMinutes(hm);
|
||||
if (minutes !== null) startMinutes = minutes;
|
||||
}
|
||||
|
||||
function to12Hour(totalMinutes: number): { hour: number; minute: number; period: 'AM' | 'PM' } {
|
||||
const hours24 = Math.floor(totalMinutes / 60) % 24;
|
||||
return {
|
||||
hour: hours24 % 12 === 0 ? 12 : hours24 % 12,
|
||||
minute: totalMinutes % 60,
|
||||
period: hours24 < 12 ? 'AM' : 'PM'
|
||||
};
|
||||
}
|
||||
|
||||
function to24Hour(hour12: string, minute: string, period: 'AM' | 'PM'): number {
|
||||
const hours = (Number(hour12) % 12) + (period === 'PM' ? 12 : 0);
|
||||
return (hours * 60 + Number(minute)) | 0;
|
||||
function setEnd(hm: string) {
|
||||
const minutes = hmToMinutes(hm);
|
||||
if (minutes !== null) endMinutes = minutes;
|
||||
}
|
||||
|
||||
// Re-seed the fields whenever the modal is (re)opened.
|
||||
$effect(() => {
|
||||
if (!open) return;
|
||||
const start = to12Hour(initialStartMinutes);
|
||||
startHour = String(start.hour);
|
||||
startMinute = String(start.minute);
|
||||
startPeriod = start.period;
|
||||
const end = to12Hour(initialEndMinutes);
|
||||
endHour = String(end.hour);
|
||||
endMinute = String(end.minute);
|
||||
endPeriod = end.period;
|
||||
startMinutes = initialStartMinutes;
|
||||
endMinutes = initialEndMinutes;
|
||||
startValid = true;
|
||||
endValid = true;
|
||||
selectedIds = [...initialProclamationIds];
|
||||
dynamicAudio = initialDynamicAudio;
|
||||
error = '';
|
||||
step = 'details';
|
||||
});
|
||||
|
||||
const startMinutes = $derived(to24Hour(startHour, startMinute, startPeriod));
|
||||
const endMinutes = $derived(to24Hour(endHour, endMinute, endPeriod));
|
||||
const overnight = $derived(
|
||||
startMinutes !== endMinutes && isOvernight({ startMinutes, endMinutes })
|
||||
);
|
||||
@@ -122,6 +104,7 @@
|
||||
);
|
||||
|
||||
function validate(): string | null {
|
||||
if (!startValid || !endValid) return 'Enter a valid start and end time.';
|
||||
const result = validateBlock(
|
||||
{ startMinutes, endMinutes, proclamationIds: selectedIds },
|
||||
siblings,
|
||||
@@ -228,81 +211,19 @@
|
||||
{#if step === 'details'}
|
||||
<div class="grid gap-6 md:grid-cols-[minmax(0,1fr)_16rem]">
|
||||
<div class="flex flex-col gap-4">
|
||||
<div>
|
||||
<span class="mb-1 block text-sm font-medium text-slate-700 dark:text-slate-300"
|
||||
>Start time</span
|
||||
>
|
||||
<div class="flex items-center gap-2">
|
||||
<select
|
||||
aria-label="Start hour"
|
||||
onchange={(e) => (startHour = e.currentTarget.value)}
|
||||
class="rounded-md border border-slate-300 bg-white px-2 py-2 text-sm text-slate-900 shadow-sm focus:border-indigo-500 focus:outline-none dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
>
|
||||
{#each hourOptions as hour (hour)}
|
||||
<option value={hour} selected={startHour === hour}>{hour}</option>
|
||||
{/each}
|
||||
</select>
|
||||
<span class="text-slate-400">:</span>
|
||||
<select
|
||||
aria-label="Start minute"
|
||||
onchange={(e) => (startMinute = e.currentTarget.value)}
|
||||
class="rounded-md border border-slate-300 bg-white px-2 py-2 text-sm text-slate-900 shadow-sm focus:border-indigo-500 focus:outline-none dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
>
|
||||
{#each minuteOptions(startMinute) as minute (minute)}
|
||||
<option value={minute} selected={startMinute === minute}>
|
||||
{minute.padStart(2, '0')}
|
||||
</option>
|
||||
{/each}
|
||||
</select>
|
||||
<select
|
||||
aria-label="Start period"
|
||||
onchange={(e) => (startPeriod = e.currentTarget.value as 'AM' | 'PM')}
|
||||
class="rounded-md border border-slate-300 bg-white px-2 py-2 text-sm text-slate-900 shadow-sm focus:border-indigo-500 focus:outline-none dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
>
|
||||
{#each periodOptions as period (period)}
|
||||
<option value={period} selected={startPeriod === period}>{period}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<TimeInput
|
||||
label="Start time"
|
||||
value={toHm(startMinutes)}
|
||||
onchange={setStart}
|
||||
onvalidity={(valid) => (startValid = valid)}
|
||||
/>
|
||||
|
||||
<div>
|
||||
<span class="mb-1 block text-sm font-medium text-slate-700 dark:text-slate-300"
|
||||
>End time</span
|
||||
>
|
||||
<div class="flex items-center gap-2">
|
||||
<select
|
||||
aria-label="End hour"
|
||||
onchange={(e) => (endHour = e.currentTarget.value)}
|
||||
class="rounded-md border border-slate-300 bg-white px-2 py-2 text-sm text-slate-900 shadow-sm focus:border-indigo-500 focus:outline-none dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
>
|
||||
{#each hourOptions as hour (hour)}
|
||||
<option value={hour} selected={endHour === hour}>{hour}</option>
|
||||
{/each}
|
||||
</select>
|
||||
<span class="text-slate-400">:</span>
|
||||
<select
|
||||
aria-label="End minute"
|
||||
onchange={(e) => (endMinute = e.currentTarget.value)}
|
||||
class="rounded-md border border-slate-300 bg-white px-2 py-2 text-sm text-slate-900 shadow-sm focus:border-indigo-500 focus:outline-none dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
>
|
||||
{#each minuteOptions(endMinute) as minute (minute)}
|
||||
<option value={minute} selected={endMinute === minute}>
|
||||
{minute.padStart(2, '0')}
|
||||
</option>
|
||||
{/each}
|
||||
</select>
|
||||
<select
|
||||
aria-label="End period"
|
||||
onchange={(e) => (endPeriod = e.currentTarget.value as 'AM' | 'PM')}
|
||||
class="rounded-md border border-slate-300 bg-white px-2 py-2 text-sm text-slate-900 shadow-sm focus:border-indigo-500 focus:outline-none dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
|
||||
>
|
||||
{#each periodOptions as period (period)}
|
||||
<option value={period} selected={endPeriod === period}>{period}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<TimeInput
|
||||
label="End time"
|
||||
value={toHm(endMinutes)}
|
||||
onchange={setEnd}
|
||||
onvalidity={(valid) => (endValid = valid)}
|
||||
/>
|
||||
|
||||
<div>
|
||||
<div class="flex items-center justify-between gap-2">
|
||||
|
||||
Reference in New Issue
Block a user