From 02be8a37a56df0382995b0dbf783dbe75c5ec689 Mon Sep 17 00:00:00 2001
From: Hornwitser <github@hornwitser.no>
Date: Fri, 14 Mar 2025 18:19:58 +0100
Subject: [PATCH] Implement editing of time slots

Render the timeslots as an editable table of times with associated
event.  When the event it's linked to is edited the time slot is removed
from the original event it belonged to and added to the possibly new
event it now belongs to.  This gives a somewhat intutive editing
experience when editing time slots linked to events with multiple times.
---
 assets/global.css            |   4 +-
 components/ScheduleTable.vue | 676 +++++++++++++++++++++++++++++++++++
 pages/edit.vue               |  43 +++
 3 files changed, 721 insertions(+), 2 deletions(-)
 create mode 100644 components/ScheduleTable.vue

diff --git a/assets/global.css b/assets/global.css
index f7a3fca..4512628 100644
--- a/assets/global.css
+++ b/assets/global.css
@@ -53,7 +53,7 @@ a {
 	}
 }
 
-button, input, textarea {
+button, input, textarea, select {
 	font-family: inherit;
 	font-size: inherit;
 }
@@ -71,7 +71,7 @@ label>* {
 	margin-inline-start: 0.5rem;
 }
 
-:is(p, form, fieldset, pre) + :is(p, form, fieldset, pre) {
+:is(p, form, fieldset, pre, ul) + :is(p, form, fieldset, pre, ul) {
 	margin-block-start: 0.5rem;
 }
 
diff --git a/components/ScheduleTable.vue b/components/ScheduleTable.vue
new file mode 100644
index 0000000..989fc58
--- /dev/null
+++ b/components/ScheduleTable.vue
@@ -0,0 +1,676 @@
+<template>
+	<div>
+		<Timetable :schedule="schedulePreview" />
+		<table>
+			<thead>
+				<tr>
+					<th>start</th>
+					<th>end</th>
+					<th>duration</th>
+					<th>event</th>
+					<th>s</th>
+					<th>location</th>
+					<th v-if="edit"></th>
+				</tr>
+			</thead>
+			<tbody>
+				<template v-if="edit">
+					<tr
+						v-for="es in eventSlots"
+						:key='es.slot?.id ?? es.start.toMillis()'
+						:class='{
+							removed: es.type === "slot" && removed.has(es.id),
+							gap: es.type === "gap",
+						}'
+					>
+						<template v-if="es.type === 'gap'">
+							<td colspan="2">
+								{{ gapFormat(es) }}
+								gap
+							</td>
+							<td>
+								<input
+									type="time"
+									v-model="newEventDuration"
+								>
+							</td>
+							<td>
+									<input
+										type="text"
+										v-model="newEventName"
+									>
+							</td>
+							<td></td>
+							<td>
+								<select
+									v-model="newEventLocation"
+								>
+									<option
+										v-for="location in schedule.locations"
+										:key="location.id"
+										:value="location.id"
+										:selected="location.id === newEventLocation"
+									>{{ location.name }}</option>
+								</select>
+							</td>
+							<td>
+								Add at
+								<button
+									type="button"
+									@click="newEventSlot({ start: es.start })"
+								>Start</button>
+								<button
+									type="button"
+									@click="newEventSlot({ end: es.end })"
+								>End</button>
+							</td>
+						</template>
+						<template v-else-if='edit'>
+							<td>
+								<input
+									type="datetime-local"
+									:value="es.start.toFormat('yyyy-LL-dd\'T\'HH:mm')"
+									@blur="editEventSlot(es, { start: ($event as any).target.value })"
+								>
+							</td>
+							<td>
+								<input
+									type="time"
+									:value="es.end.toFormat('HH:mm')"
+									@input="editEventSlot(es, { end: ($event as any).target.value })"
+								>
+							</td>
+							<td>
+								<input
+									type="time"
+									:value='dropDay(es.end.diff(es.start)).toFormat("hh:mm")'
+									@input="editEventSlot(es, { duration: ($event as any).target.value })"
+								>
+							</td>
+							<td>
+								<input
+									type="text"
+									:value="es.name"
+									@input="editEventSlot(es, { name: ($event as any).target.value })"
+								>
+							</td>
+							<td>{{ status(es) }}</td>
+							<td>
+								<select
+									:value="es.location"
+									@change="editEventSlot(es, { location: ($event as any).target.value })"
+								>
+									<option
+										v-for="location in schedule.locations"
+										:key="location.id"
+										:value="location.id"
+										:selected="location.id === es.location"
+									>{{ location.name }}</option>
+								</select>
+							</td>
+							<td>
+								<button
+									:disabled="removed.has(es.id)"
+									type="button"
+									@click="delEventSlot(es)"
+								>Remove</button>
+								<button
+									v-if="changes.some(c => c.data.id === es.id)"
+									type="button"
+									@click="revertEventSlot(es.id)"
+								>Revert</button>
+							</td>
+						</template>
+					</tr>
+					<tr>
+						<td>
+							<input
+								type="datetime-local"
+								v-model="newEventStart"
+							>
+						</td>
+						<td>
+							<input
+								type="time"
+								v-model="newEventEnd"
+							>
+						</td>
+						<td>
+							<input
+								type="time"
+								v-model="newEventDuration"
+							>
+						</td>
+						<td>
+								<input
+									type="text"
+									v-model="newEventName"
+								>
+						</td>
+						<td colspan="2">
+							<button
+								type="button"
+								@click="newEventSlot()"
+							>Add Event</button>
+						</td>
+					</tr>
+				</template>
+				<template v-else>
+					<tr
+						v-for="es in eventSlots"
+						:key='es.slot?.id ?? es.start.toMillis()'
+						:class='{
+							gap: es.type === "gap",
+						}'
+					>
+						<template v-if="es.type === 'gap'">
+							<td colspan="2">
+								{{ gapFormat(es) }}
+								gap
+							</td>
+						</template>
+						<template v-else>
+							<td>{{ es.start.toFormat("yyyy-LL-dd HH:mm") }}</td>
+							<td>{{ es.end.toFormat("HH:mm") }}</td>
+							<td>{{ es.end.diff(es.start).toFormat('hh:mm') }}</td>
+							<td>{{ es.name }}</td>
+							<td>{{ status(es) }}</td>
+							<td>{{ es.location }}</td>
+						</template>
+					</tr>
+				</template>
+			</tbody>
+		</table>
+		<p v-if="changes.length">
+			Changes are not save yet.
+			<button
+				type="button"
+				@click="saveEventSlots"
+			>Save Changes</button>
+		</p>
+		<details>
+			<summary>Debug</summary>
+			<b>EventSlot changes</b>
+			<ol>
+				<li v-for="change in changes">
+					<pre><code>{{ JSON.stringify((({ event, slot, ...data }) => ({ op: change.op, data }))(change.data as any), undefined, "  ") }}</code></pre>
+				</li>
+			</ol>
+			<b>ScheduleEvent changes</b>
+			<ol>
+				<li v-for="change in scheduleChanges">
+					<pre><code>{{ JSON.stringify((({ event, slot, ...data }) => ({ op: change.op, data }))(change.data as any), undefined, "  ") }}</code></pre>
+				</li>
+			</ol>
+		</details>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import { DateTime, Duration } from 'luxon';
+import type { ChangeRecord, Schedule, ScheduleEvent, ScheduleLocation, TimeSlot } from '~/shared/types/schedule';
+import { applyChangeArray } from '~/shared/utils/changes';
+import { enumerate, pairs } from '~/shared/utils/functions';
+
+const props = defineProps<{
+	edit?: boolean,
+	location?: string,
+}>();
+
+interface EventSlot {
+	type: "slot",
+	id: string,
+	event?: ScheduleEvent,
+	slot?: TimeSlot,
+	origLocation: string,
+	name: string,
+	location: string,
+	start: DateTime,
+	end: DateTime,
+}
+
+interface Gap {
+	type: "gap",
+	id?: undefined,
+	event?: undefined,
+	slot?: undefined,
+	name?: undefined,
+	location?: string,
+	start: DateTime,
+	end: DateTime,
+}
+
+function toId(name: string) {
+	return name.toLowerCase().replace(/[^a-z0-9]+/g, "-");
+}
+
+function status(eventSlot: EventSlot) {
+	if (
+		!eventSlot.event
+		|| eventSlot.event.name !== eventSlot.name
+	) {
+		const event = schedule.value.events.find(event => event.name === eventSlot.name);
+		return event ? "L" : "N";
+	}
+	return eventSlot.event.slots.length === 1 ? "" : eventSlot.event.slots.length;
+}
+
+// Filter out set records where a del record exists for the same id.
+function filterSetOps<T extends { op: "set" | "del", data: { id: string }}>(changes: T[]) {
+	const deleteIds = new Set(changes.filter(c => c.op === "del").map(c => c.data.id));
+	return changes.filter(c => c.op !== "set" || !deleteIds.has(c.data.id));
+}
+
+function findEvent(
+	eventSlot: EventSlot,
+	changes: ChangeRecord<ScheduleEvent>[],
+	schedule: Schedule,
+) {
+	let setEvent = changes.find(
+		c => c.op === "set" && c.data.name === eventSlot.name
+	)?.data as ScheduleEvent | undefined;
+	if (!setEvent && eventSlot.event && eventSlot.event.name === eventSlot.name) {
+		setEvent = eventSlot.event;
+	}
+	if (!setEvent) {
+		setEvent = schedule.events.find(e => e.name === eventSlot.name);
+	}
+	let delEvent;
+	if (eventSlot.event) {
+		delEvent = changes.find(
+			c => c.op === "set" && c.data.name === eventSlot.event!.name
+		)?.data as ScheduleEvent | undefined;
+		if (!delEvent) {
+			delEvent = schedule.events.find(e => e.name === eventSlot.event!.name);
+		}
+	}
+	return { setEvent, delEvent };
+}
+
+function removeSlotLocation(event: ScheduleEvent, oldSlot: TimeSlot, location: string) {
+	// If location is an exact match remove the whole slot
+	if (oldSlot.locations.length === 1 && oldSlot.locations[0] === location) {
+		return {
+			...event,
+			slots: event.slots.filter(s => s.id !== oldSlot.id),
+		};
+	}
+	// Otherwise filter out location
+	return {
+		...event,
+		slots: event.slots.map(
+			s => s.id !== oldSlot.id ? s : {
+				...s,
+				locations: s.locations.filter(l => l !== location)
+			}
+		),
+	};
+}
+
+function mergeSlot(event: ScheduleEvent, eventSlot: EventSlot): ScheduleEvent {
+	const oldSlot = event.slots.find(s => s.id === eventSlot.id);
+	const nextId = Math.max(-1, ...event.slots.map(s => {
+		const id = /-(\d+)$/.exec(s.id)?.[1];
+		return id ? parseInt(id) : 0;
+	})) + 1;
+	const start = eventSlot.start.toUTC().toISO({ suppressSeconds: true })!;
+	const end = eventSlot.end.toUTC().toISO({ suppressSeconds: true })!;
+
+	// Edit slot in-place if possible
+	if (
+		oldSlot
+		&& oldSlot.id === eventSlot.id
+		&& (
+			oldSlot.locations.length <= 1
+			|| oldSlot.start === start && oldSlot.end === end
+		)
+	) {
+		return {
+			...event,
+			slots: event.slots.map(s => {
+				if (s.id !== oldSlot.id)
+					return s;
+				const locations = new Set(s.locations);
+				locations.delete(eventSlot.origLocation)
+				locations.add(eventSlot.location);
+				return {
+					...s,
+					locations: [...locations],
+					start,
+					end,
+				};
+			}),
+		};
+	}
+
+	// Else remove old slot if it exist and insert a new one
+	if (oldSlot) {
+		event = removeSlotLocation(event, oldSlot, eventSlot.origLocation);
+	}
+
+	return {
+		...event,
+		slots: [...event.slots, {
+			id: oldSlot ? oldSlot.id : `${event.id}-${nextId}`,
+			locations: [eventSlot.location],
+			start,
+			end,
+		}],
+	};
+}
+
+const scheduleChanges = computed(() => {
+	let eventChanges: ChangeRecord<ScheduleEvent>[] = [];
+	for (const change of filterSetOps(changes.value)) {
+		if (change.op === "set") {
+			let { setEvent, delEvent } = findEvent(change.data, eventChanges, schedule.value);
+			if (delEvent && delEvent !== setEvent) {
+				eventChanges = removeSlot(eventChanges, delEvent, change.data);
+			}
+			if (!setEvent) {
+				setEvent = {
+					id: toId(change.data.name),
+					name: change.data.name,
+					crew: true,
+					slots: [],
+				};
+			}
+
+			eventChanges = replaceChange({
+				op: "set",
+				data: mergeSlot(setEvent, change.data),
+			}, eventChanges);
+
+		} else if (change.op === "del") {
+			let { delEvent } = findEvent(change.data, eventChanges, schedule.value);
+			if (delEvent) {
+				eventChanges = removeSlot(eventChanges, delEvent, change.data);
+			}
+		}
+	}
+	return eventChanges;
+});
+
+const schedulePreview = computed(() => {
+	const events = [...schedule.value.events]
+	applyChangeArray(scheduleChanges.value, events);
+	return {
+		...schedule.value,
+		events,
+	};
+});
+
+function removeSlot(eventChanges: ChangeRecord<ScheduleEvent>[], event: ScheduleEvent, eventSlot: EventSlot) {
+	let oldSlot = event.slots.find(s => s.id === eventSlot.id);
+	if (oldSlot) {
+		eventChanges = replaceChange({
+			op: "set",
+			data: removeSlotLocation(event, oldSlot, eventSlot.origLocation),
+		}, eventChanges);
+	}
+	return eventChanges;
+}
+
+const { data: session } = await useAccountSession();
+const schedule = await useSchedule();
+const runtimeConfig = useRuntimeConfig();
+const timezone = computed(
+	() => session.value?.account?.timezone ?? runtimeConfig.public.defaultTimezone
+);
+
+type EventSlotChange = { op: "set" | "del", data: EventSlot } ;
+
+const changes = ref<EventSlotChange[]>([]);
+const removed = computed(() => new Set(changes.value.filter(c => c.op === "del").map(c => c.data.id)));
+
+function replaceChange<T extends { op: "set" | "del", data: { id: string  }}>(
+	change: T,
+	changes: T[],
+) {
+	const index = changes.findIndex(item => (
+		item.op === change.op && item.data.id === change.data.id
+	));
+	const copy = [...changes];
+	if (index !== -1)
+		copy.splice(index, 1, change);
+	else
+		copy.push(change);
+	return copy;
+}
+function revertChange<T extends { op: "set" | "del", data: { id: string }}>(id: string, changes: T[]) {
+	return changes.filter(change => change.data.id !== id);
+}
+
+const oneDayMs = 24 * 60 * 60 * 1000;
+function dropDay(diff: Duration) {
+	if (diff.toMillis() >= oneDayMs) {
+		return diff.minus({ days: 1 });
+	}
+	return diff;
+}
+
+const newEventStart = ref("");
+const newEventDuration = ref("01:00");
+const newEventEnd = computed({
+	get: () => (
+		DateTime.fromISO(newEventStart.value, { zone: timezone.value })
+			.plus(Duration.fromISOTime(newEventDuration.value))
+			.toFormat("HH:mm")
+	),
+	set: (value: string) => {
+		const start = DateTime.fromISO(newEventStart.value, { zone: timezone.value });
+		const end = endFromTime(start, value);
+		newEventDuration.value = dropDay(end.diff(start)).toFormat("hh:mm");
+	},
+});
+const newEventLocation = ref(props.location);
+watch(() => props.location, () => {
+	newEventLocation.value = props.location;
+});
+
+function endFromTime(start: DateTime, time: string) {
+	let end = start.startOf("day").plus(Duration.fromISOTime(time));
+	if (end.toMillis() <= start.toMillis()) {
+		end = end.plus({ days: 1 });
+	}
+	return end;
+}
+function durationFromTime(time: string) {
+	let duration = Duration.fromISOTime(time);
+	if (duration.toMillis() === 0) {
+		duration = Duration.fromMillis(oneDayMs);
+	}
+	return duration;
+}
+const newEventName = ref("");
+function editEventSlot(
+	eventSlot: EventSlot,
+	edits: {
+		start?: string,
+		end?: string,
+		duration?: string,
+		name?: string,
+		location?: string,
+	}
+) {
+	if (edits.start) {
+		const start = DateTime.fromISO(edits.start, { zone: timezone.value });
+		eventSlot = {
+			...eventSlot,
+			start,
+			end: start.plus(eventSlot.end.diff(eventSlot.start)),
+		};
+	}
+	if (edits.end !== undefined) {
+
+		eventSlot = {
+			...eventSlot,
+			end: endFromTime(eventSlot.start, edits.end),
+		};
+	}
+	if (edits.duration !== undefined) {
+		eventSlot = {
+			...eventSlot,
+			end: eventSlot.start.plus(durationFromTime(edits.duration)),
+		};
+	}
+	if (edits.name !== undefined) {
+		eventSlot = {
+			...eventSlot,
+			name: edits.name,
+		};
+	}
+	if (edits.location !== undefined) {
+		eventSlot = {
+			...eventSlot,
+			location: edits.location,
+		};
+	}
+	const change = { op: "set" as const, data: eventSlot };
+	changes.value = replaceChange(change, changes.value);
+}
+function delEventSlot(eventSlot: EventSlot) {
+	const change = { op: "del" as const, data: eventSlot };
+	changes.value = replaceChange(change, changes.value);
+}
+function revertEventSlot(id: string) {
+	changes.value = revertChange(id, changes.value);
+}
+function newEventSlot(options: { start?: DateTime, end?: DateTime } = {}) {
+	const name = newEventName.value;
+	const location = newEventLocation.value;
+	if (!location) {
+		alert("Invalid location");
+		return;
+	}
+	let start;
+	let end;
+	const duration = durationFromTime(newEventDuration.value);
+	if (!duration.isValid) {
+		alert("Invalid duration");
+		return;
+	}
+	if (options.start) {
+		start = options.start;
+		end = options.start.plus(duration);
+	} else if (options.end) {
+		end = options.end;
+		start = options.end.minus(duration);
+	} else {
+		start = DateTime.fromISO(newEventStart.value, { zone: timezone.value });
+		end = endFromTime(start, newEventEnd.value);
+	}
+	if (!start.isValid || !end.isValid) {
+		alert("Invalid start and/or end time");
+		return;
+	}
+	const change: ChangeRecord<EventSlot> = {
+		op: "set" as const,
+		data: {
+			type: "slot",
+			id: `$new-${Date.now()}`,
+			name,
+			origLocation: location,
+			location,
+			start,
+			end,
+		},
+	};
+	newEventName.value = "";
+	changes.value = replaceChange(change, changes.value);
+}
+async function saveEventSlots() {
+	try {
+		await $fetch("/api/schedule", {
+			method: "PATCH",
+			body: { events: scheduleChanges.value },
+		});
+		changes.value = [];
+	} catch (err: any) {
+		console.error(err);
+		alert(err?.data?.message ?? err.message);
+	}
+}
+
+const oneHourMs = 60 * 60 * 1000;
+function gapFormat(gap: Gap) {
+	let diff = gap.end.diff(gap.start);
+	if (diff.toMillis() % oneHourMs !== 0)
+		diff = diff.shiftTo("hours", "minutes");
+	else
+		diff = diff.shiftTo("hours");
+	return diff.toHuman({ listStyle: "short", unitDisplay: "short" });
+}
+
+const eventSlots = computed(() => {
+	const data: (EventSlot | Gap)[] = [];
+	for (const event of schedule.value.events) {
+		for (const slot of event.slots) {
+			for (const location of slot.locations) {
+				if (props.location !== undefined && location !== props.location)
+					continue;
+				data.push({
+					type: "slot",
+					id: slot.id,
+					event,
+					slot,
+					name: event.name,
+					location,
+					origLocation: location,
+					start: DateTime.fromISO(slot.start, { zone: timezone.value }),
+					end: DateTime.fromISO(slot.end, { zone: timezone.value }),
+				});
+			}
+		}
+	}
+	applyChangeArray(changes.value.filter(change => change.op === "set"), data as EventSlot[]);
+	data.sort((a, b) => a.start.toMillis() - b.start.toMillis() || a.end.toMillis() - b.end.toMillis());
+
+	// Insert gaps
+	let maxEnd = 0;
+	const gaps: [number, Gap][] = []
+	for (const [index, [first, second]] of enumerate(pairs(data))) {
+		maxEnd = Math.max(maxEnd, first.end.toMillis());
+		if (maxEnd < second.start.toMillis()) {
+			gaps.push([index, {
+				type: "gap",
+				location: props.location,
+				start: DateTime.fromMillis(maxEnd),
+				end: second.start,
+			}]);
+		}
+	}
+	gaps.reverse();
+	for (const [index, gap] of gaps) {
+		data.splice(index + 1, 0, gap);
+	}
+	return data;
+});
+</script>
+
+<style scoped>
+label {
+	display: inline;
+	padding-inline-end: 0.75em;
+}
+table {
+	margin-block-start: 1rem;
+	border-spacing: 0;
+}
+table th {
+	text-align: left;
+	border-bottom: 1px solid var(--foreground);
+}
+table :is(th, td) + :is(th, td) {
+	padding-inline-start: 0.4em;
+}
+.gap {
+	height: 1.8em;
+}
+.removed {
+	background-color: color-mix(in oklab, var(--background), rgb(255, 0, 0) 40%);
+}
+.removed :is(td, input) {
+	text-decoration: line-through;
+}
+</style>
diff --git a/pages/edit.vue b/pages/edit.vue
index 9d15202..5310043 100644
--- a/pages/edit.vue
+++ b/pages/edit.vue
@@ -3,15 +3,58 @@
 		<h1>Edit</h1>
 		<h2>Locations</h2>
 		<LocationsTable :edit="isAdmin" />
+		<h2>Schedule</h2>
+		<label>
+			Location Filter:
+			<select
+				v-model="locationFilter"
+			>
+				<option
+					:value="undefined"
+					:selected="locationFilter === undefined"
+				>&lt;All locations&gt;</option>
+				<option
+					v-for="location in schedule.locations"
+					:key="location.id"
+					:value="location.id"
+					:selected="locationFilter === location.id"
+				>{{ location.name }}</option>
+			</select>
+		</label>
+		<ScheduleTable :edit="true" :location="locationFilter" />
 	</main>
 </template>
 
 <script lang="ts" setup>
+import type { LocationQueryValue } from 'vue-router';
+
 definePageMeta({
 	middleware: ["authenticated"],
 	allowedAccountTypes: ["crew", "admin"],
 });
 
+const schedule = await useSchedule();
+
+function queryToString(item?: null | LocationQueryValue | LocationQueryValue[]) {
+	if (item === null)
+		return "";
+	if (item instanceof Array)
+		return queryToString(item[0])
+	return item;
+}
+
+const route = useRoute();
+const locationFilter = computed({
+	get: () => queryToString(route.query.location),
+	set: (value: string | undefined) => navigateTo({
+		path: route.path,
+		query: {
+			...route.query,
+			location: value,
+		},
+	}),
+});
+
 const { data: session } = await useAccountSession();
 const isAdmin = computed(() => session.value?.account.type === "admin")
 </script>