Implement editing of the schedule

Cobbled together minimum viable system for editing the schedule in a way
that propogates updates to connected clients.

app/api/events/actions.ts

@@ -0,0 +1,70 @@
+"use server";
+import { Schedule } from "@/app/schedule/types";
+import { readFile, writeFile } from "fs/promises";
+import { broadcastUpdate } from "./streams";
+
+export async function createEvent(formData: FormData) {
+	const schedule: Schedule = JSON.parse(await readFile("schedule.json", "utf-8"));
+	const id = formData.get("id") as string;
+	const name = formData.get("name") as string;
+	const description = formData.get("description") as string;
+	const start = formData.get("start") as string;
+	const end = formData.get("end") as string;
+	const location = formData.get("location") as string;
+	schedule.events.push({
+		name,
+		id,
+		description,
+		slots: [
+			{
+				id: `${id}-1`,
+				start,
+				end,
+				locations: [location],
+			}
+		]
+	});
+	broadcastUpdate(schedule);
+	await writeFile("schedule.json", JSON.stringify(schedule, null, "\t"), "utf-8");
+}
+
+export async function modifyEvent(formData: FormData) {
+	const schedule: Schedule = JSON.parse(await readFile("schedule.json", "utf-8"));
+	const id = formData.get("id") as string;
+	const name = formData.get("name") as string;
+	const description = formData.get("description") as string;
+	const start = formData.get("start") as string;
+	const end = formData.get("end") as string;
+	const location = formData.get("location") as string;
+	const index = schedule.events.findIndex(event => event.id === id);
+	if (index === -1) {
+		throw Error("No such event");
+	}
+	schedule.events[index] = {
+		name,
+		id,
+		description,
+		slots: [
+			{
+				id: `${id}-1`,
+				start,
+				end,
+				locations: [location],
+			}
+		]
+	};
+	broadcastUpdate(schedule);
+	await writeFile("schedule.json", JSON.stringify(schedule, null, "\t"), "utf-8");
+}
+
+export async function deleteEvent(formData: FormData) {
+	const schedule: Schedule = JSON.parse(await readFile("schedule.json", "utf-8"));
+	const id = formData.get("id") as string;
+	const index = schedule.events.findIndex(event => event.id === id);
+	if (index === -1) {
+		throw Error("No such event");
+	}
+	schedule.events.splice(index, 1);
+	broadcastUpdate(schedule);
+	await writeFile("schedule.json", JSON.stringify(schedule, null, "\t"), "utf-8");
+}

app/api/events/route.ts

@@ -1,36 +1,4 @@
-import { Schedule } from "@/app/schedule/types";
-
-function sendMessage(
-	stream: WritableStream<string>,
-	message: string,
-) {
-	const writer = stream.getWriter();
-	writer.ready
-		.then(() => writer.write(message))
-		.catch(console.error)
-		.finally(() => writer.releaseLock())
-	;
-}
-
-let streams = new Set<WritableStream<string>>();
-let lastBroadcastData: string | null = null;
-let lastBroadcastId = 0;
-export function broadcastUpdate(schedule: Schedule) {
-	const id = Date.now();
-	const data = JSON.stringify(schedule);
-	lastBroadcastId = id;
-	lastBroadcastData = data;
-	const message = `id: ${id}\nevent: update\ndata: ${data}\n\n`
-	for (const stream of streams) {
-		sendMessage(stream, message);
-	}
-}
-
-setInterval(() => {
-	for (const stream of streams) {
-		sendMessage(stream, "data: keepalive\n\n");
-	}
-}, 10e3)
+import { addStream, deleteStream } from "./streams";
 
 export async function GET(request: Request) {
 	const encoder = new TextEncoder();
@@ -42,21 +10,15 @@ export async function GET(request: Request) {
 		},
 		flush(controller) {
 			console.log(`finished event stream for ${source}`);
-			streams.delete(stream.writable);
+			deleteStream(stream.writable);
 		},
 		// @ts-expect-error experimental API
 		cancel(reason) {
 			console.log(`cancelled event stream for ${source}`);
-			streams.delete(stream.writable);
+			deleteStream(stream.writable);
 		}
 	})
-	streams.add(stream.writable);
-	if (lastBroadcastId) {
-		sendMessage(
-			stream.writable,
-			`id: ${lastBroadcastData}\nevent: update\ndata: ${lastBroadcastData}\n\n`
-		);
-	}
+	addStream(stream.writable);
 	return new Response(
 		stream.readable,
 		{

app/api/events/streams.ts

@@ -0,0 +1,50 @@
+import { Schedule } from "@/app/schedule/types";
+
+function sendMessage(
+	stream: WritableStream<string>,
+	message: string,
+) {
+	const writer = stream.getWriter();
+	writer.ready
+		.then(() => writer.write(message))
+		.catch(console.error)
+		.finally(() => writer.releaseLock())
+	;
+}
+
+declare global {
+	var streams: Set<WritableStream<string>>;
+}
+global.streams = global.streams ?? new Set<WritableStream<string>>();
+
+let keepaliveInterval: ReturnType<typeof setInterval> | null = null
+export function addStream(stream: WritableStream<string>) {
+	if (streams.size === 0) {
+		console.log("Starting keepalive")
+		keepaliveInterval = setInterval(sendKeepalive, 4000)
+	}
+	streams.add(stream);
+}
+export function deleteStream(stream: WritableStream<string>) {
+	streams.delete(stream);
+	if (streams.size === 0) {
+		console.log("Ending keepalive")
+		clearInterval(keepaliveInterval!);
+	}
+}
+
+export function broadcastUpdate(schedule: Schedule) {
+	const id = Date.now();
+	const data = JSON.stringify(schedule);
+	const message = `id: ${id}\nevent: update\ndata: ${data}\n\n`
+	console.log(`broadcasting update from ${process.pid} to ${streams.size} clients`);
+	for (const stream of streams) {
+		sendMessage(stream, message);
+	}
+}
+
+function sendKeepalive() {
+	for (const stream of streams) {
+		sendMessage(stream, "data: keepalive\n\n");
+	}
+}

app/globals.css

@@ -52,3 +52,15 @@ a {
 		border-color: transparent;
 	}
 }
+
+label {
+	display: block;
+}
+
+label>* {
+	margin-inline-start: 0.5rem;
+}
+
+label + label {
+	margin-block-start: 0.5rem;
+}

app/schedule/context.tsx

@@ -16,14 +16,12 @@ export function ScheduleProvider(props: ScheduleProviderProps) {
 		const source = new EventSource("/api/events");
 		source.addEventListener("message", (message) => {
 			console.log("Message", message.data);
-			setSchedule(old => {
-				const copy: Schedule = JSON.parse(JSON.stringify(old));
-				const ts = copy.events[0].slots[0].start;
-				copy.events[0].slots[0].start = new Date(Date.parse(ts) + 36e5).toISOString();
-				return copy;
-			})
 		});
-		source.addEventListener("update", (message) => console.log("Update", message.data));
+		source.addEventListener("update", (message) => {
+			const updatedSchedule: Schedule = JSON.parse(message.data);
+			console.log("Update", updatedSchedule);
+			setSchedule(updatedSchedule);
+		});
 		return () => {
 			console.log("Closing event source")
 			source.close();

app/schedule/page.tsx

@@ -4,6 +4,7 @@ import { readFile } from "fs/promises"
 import { ScheduleProvider } from "./context"
 import { Events } from "@/ui/events";
 import { Locations } from "@/ui/locations";
+import { EventsEdit } from "@/ui/events-edit";
 
 export default async function page() {
 	const schedule: Schedule = JSON.parse(await readFile("schedule.json", "utf-8"));
@@ -16,6 +17,7 @@ export default async function page() {
 				</p>
 				<h2>Schedule</h2>
 				<Timetable />
+				<EventsEdit />
 				<h2>Events</h2>
 				<Events />
 				<h2>Locations</h2>

ui/events-edit.tsx

@@ -0,0 +1,93 @@
+"use client";
+import { createEvent, deleteEvent, modifyEvent } from "@/app/api/events/actions";
+import { useSchedule } from "@/app/schedule/context";
+import Form from "next/form";
+import { useState } from "react";
+
+export function EventsEdit() {
+	const schedule = useSchedule()!;
+	const event = schedule.events[0];
+
+	return <details>
+		<summary>Admin Edit</summary>
+		<h3>Create Event</h3>
+		<Form action={createEvent}>
+			<label>
+				Id:
+				<input type="text" name="id" required />
+			</label>
+			<label>
+				Name:
+				<input type="text" name="name" required />
+			</label>
+			<label>
+				Description:
+				<textarea name="description" />
+			</label>
+			<label>
+				Start:
+				<input type="datetime-local" name="start" defaultValue="2025-07-20T18:00" />
+			</label>
+			<label>
+				End:
+				<input type="datetime-local" name="end" defaultValue="2025-07-20T20:00" />
+			</label>
+			<label>
+				Location
+				<select name="location">
+					{schedule?.locations.map(location => <option key={location.id} value={location.id}>{location.name}</option>)}
+				</select>
+			</label>
+			<button type="submit">Create</button>
+		</Form>
+		<h3>Edit Event</h3>
+		<Form action={modifyEvent}>
+			<label>
+				Event
+				<select name="id" onChange={(event) => {
+					const newEvent = schedule.events.find(e => e.id === event.target.value)!;
+					const form = event.target.form!;
+					for (const element of form.elements as any) {
+						if (element.name === "name") {
+							element.value = newEvent.name;
+						} else if (element.name === "description") {
+							element.value = newEvent.description;
+						} else if (element.name === "start") {
+							element.value = newEvent.slots[0].start.replace("Z", "");
+						} else if (element.name === "end") {
+							element.value = newEvent.slots[0].end.replace("Z", "");
+						} else if (element.name === "location") {
+							element.value = newEvent.slots[0].locations[0];
+						}
+					}
+				}}>
+					{schedule?.events.map(event => <option key={event.id} value={event.id}>{event.name}</option>)}
+				</select>
+			</label>
+			<label>
+				Name:
+				<input type="text" name="name" defaultValue={event.name} />
+			</label>
+			<label>
+				Description:
+				<textarea name="description" defaultValue={event.description} />
+			</label>
+			<label>
+				Start:
+				<input type="datetime-local" name="start" defaultValue={event.slots[0].start.replace("Z", "")} />
+			</label>
+			<label>
+				End:
+				<input type="datetime-local" name="end" defaultValue={event.slots[0].end.replace("Z", "")} />
+			</label>
+			<label>
+				Location
+				<select name="location">
+					{schedule?.locations.map(location => <option key={location.id} value={location.id}>{location.name}</option>)}
+				</select>
+			</label>
+			<button type="submit">Edit</button>
+			<button type="submit" formAction={deleteEvent}>Delete</button>
+		</Form>
+	</details>;
+}