chore: init

web/src/routes/display/+page.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+	import { eventTarget } from "$lib/ws.svelte";
+	import { onMount } from "svelte";
+
+	interface CallEntry {
+		num: string;
+		ticket: {
+			status: "called" | "completed" | "no-show";
+			room?: string;
+		}
+	};
+
+	let calls = $state<CallEntry[]>([]);
+
+	let connected = $state(false);
+
+	onMount(() => {
+		eventTarget.addEventListener("display", (e) => {
+			const detail = (e as CustomEvent).detail;
+			calls = detail.tickets ?? [];
+			connected = true;
+		});
+
+		eventTarget.dispatchEvent(new CustomEvent("send", { detail: { type: "display" } }));
+	})
+</script>
+
+<div class="p-4 flex flex-col items-center gap-4 text-3xl">
+	<h1 class="text-6xl font-bold">Aufruf</h1>
+	{#if connected}
+		<table>
+			<tbody>
+				<tr>
+					<th class="pr-4 font-bold">Ticket</th>
+					<th class="pr-4 font-bold">Raum</th>
+				</tr>
+				{#each calls as call (call.num)}
+					<tr>
+						<td class="call">{call.num}</td>
+						<td class="call">{call.ticket.status === "no-show" ? "Empfang " + (call.num.startsWith("A") ? "1" : "2") : call.ticket.room}</td>
+					</tr>
+				{/each}
+			</tbody>
+		</table>
+	{/if}
+</div>
+
+<style>
+	.call {
+		animation: flash 1s ease-in-out;
+	}
+
+	@keyframes flash {
+		0% { opacity: 0; }
+		20% { opacity: 1; }
+		40% { opacity: 0; }
+		100% { opacity: 1; }
+	}
+
+	th, td {
+		padding: 0.5rem 1rem;
+		text-align: center;
+		background-color: var(--accent);
+		border: 2px solid var(--background);
+	}
+</style>