96 lines
2.6 KiB
Svelte
96 lines
2.6 KiB
Svelte
<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>
|