Add schedule page with block editor and proclamation browser

2026-09-11 18:16:06 -05:00
parent 545fb22910
commit 5f4116b8e8
9 changed files with 1280 additions and 0 deletions
@@ -0,0 +1,95 @@
+<script lang="ts">
+	import type { PageProps } from './$types';
+	import DaySchedule from '$lib/components/schedule/DaySchedule.svelte';
+	import BlockModal from '$lib/components/schedule/BlockModal.svelte';
+
+	let { data }: PageProps = $props();
+
+	let modalOpen = $state(false);
+	let modalMode = $state<'create' | 'edit'>('create');
+	let editingId = $state<string | undefined>(undefined);
+	let initialStart = $state(9 * 60);
+	let initialEnd = $state(10 * 60);
+	let initialIds = $state<string[]>([]);
+	let successMessage = $state('');
+	let closeTimer: ReturnType<typeof setTimeout> | undefined;
+
+	function openCreate(startMinutes: number, endMinutes: number) {
+		modalMode = 'create';
+		editingId = undefined;
+		initialStart = startMinutes;
+		initialEnd = endMinutes;
+		initialIds = [];
+		modalOpen = true;
+	}
+
+	function openEdit(block: {
+		id: string;
+		startMinutes: number;
+		endMinutes: number;
+		proclamations: { id: string }[];
+	}) {
+		modalMode = 'edit';
+		editingId = block.id;
+		initialStart = block.startMinutes;
+		initialEnd = block.endMinutes;
+		initialIds = block.proclamations.map((proclamation) => proclamation.id);
+		modalOpen = true;
+	}
+
+	function closeModal() {
+		modalOpen = false;
+	}
+
+	function handleSaved() {
+		modalOpen = false;
+		successMessage = modalMode === 'edit' ? 'Block saved.' : 'Block created.';
+		clearTimeout(closeTimer);
+		closeTimer = setTimeout(() => (successMessage = ''), 1500);
+	}
+</script>
+
+<div>
+	<div class="flex flex-wrap items-end justify-between gap-3">
+		<div>
+			<h1 class="text-2xl font-bold tracking-tight text-slate-900 sm:text-3xl dark:text-slate-100">
+				Schedule
+			</h1>
+			<p class="mt-1 text-sm text-slate-500 sm:text-base dark:text-slate-400">
+				Build your daily listening schedule. Up to 4 blocks per day.
+			</p>
+		</div>
+		<span
+			class="rounded-full bg-slate-100 px-3 py-1 text-sm font-medium text-slate-600 dark:bg-slate-800 dark:text-slate-300"
+		>
+			{data.blocks.length} of 4 blocks
+		</span>
+	</div>
+
+	{#if successMessage}
+		<div
+			class="mt-4 rounded-md border border-green-200 bg-green-50 px-3 py-2 text-sm text-green-700 dark:border-green-900 dark:bg-green-950/50 dark:text-green-300"
+		>
+			{successMessage}
+		</div>
+	{/if}
+
+	<div class="mt-6">
+		<DaySchedule blocks={data.blocks} onCreate={openCreate} onEdit={openEdit} />
+	</div>
+
+	<BlockModal
+		open={modalOpen}
+		mode={modalMode}
+		blockId={editingId}
+		initialStartMinutes={initialStart}
+		initialEndMinutes={initialEnd}
+		initialProclamationIds={initialIds}
+		categories={data.categories}
+		groups={data.groups}
+		proclamations={data.proclamations}
+		existingBlocks={data.blocks}
+		onClose={closeModal}
+		onSaved={handleSaved}
+	/>
+</div>