feat: change display

web/src/app.css

@@ -18,7 +18,7 @@
   --secondary-foreground: oklch(0.208 0.042 265.755);
   --muted: oklch(0.968 0.007 247.896);
   --muted-foreground: oklch(0.554 0.046 257.417);
-  --accent: oklch(0.968 0.007 247.896);
+  --accent: oklch(85.488% 0.01474 254.732);
   --accent-foreground: oklch(0.208 0.042 265.755);
   --destructive: oklch(0.577 0.245 27.325);
   --border: oklch(0.929 0.013 255.508);

web/src/lib/AppSidebar.svelte

@@ -67,6 +67,14 @@
 						title: "Roe",
 						url: "/room/Roe",
 					},
+					{
+						title: "Empfang 1",
+						url: "/room/Empfang%201",
+					},
+					{
+						title: "Empfang 2",
+						url: "/room/Empfang%202",
+					},
 				],
 			},
 			// {

web/src/lib/sidebar.svelte.ts

@@ -0,0 +1,3 @@
+export const sidebarState = $state({
+	open: false
+});

web/src/routes/(manage)/+layout.svelte

@@ -11,7 +11,7 @@
 	import ConnectionLostDialog from '$lib/ConnectionLostDialog.svelte';
 	import { onMount } from 'svelte';
 	import { browser } from '$app/environment';
-	import { sidebarState } from "$lib/sidebar.svelte.ts";
+	import { sidebarState } from "$lib/sidebar.svelte";
 	
 	let { children } = $props();
 

web/src/routes/(manage)/room/[slug]/+page.svelte

@@ -4,7 +4,7 @@
 	import * as InputOTP from "$lib/components/ui/input-otp";
 	import { eventTarget } from "$lib/ws.svelte";
 	import { toast } from "svelte-sonner";
-	import { sidebarState } from "$lib/sidebar.svelte.ts";
+	import { sidebarState } from "$lib/sidebar.svelte";
 
 	const slug = $derived(page.params.slug);
 
@@ -14,8 +14,8 @@
 
 	let isInvalid = $state(false);
 
-	const TICKET_INPUT_REGEX = "^[A-B]{0,1}[0-9]{0,2}$";
+	const TICKET_INPUT_REGEX = "^[A-E]{0,1}[0-9]{0,2}$";
-	const TICKET_REGEX = /^[A-B]\d{2}$/;
+	const TICKET_REGEX = /^[A-E]\d{2}$/;
 
 	async function submit() {
 		if(!TICKET_REGEX.test(nextTicket)) {

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

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { eventTarget } from "$lib/ws.svelte";
 	import { onMount } from "svelte";
+	import { fade } from "svelte/transition";
 
 	interface CallEntry {
 		num: string;
@@ -11,53 +12,73 @@
 	};
 
 	let calls = $state<CallEntry[]>([]);
+	let newCalls = $state<CallEntry[]>([]);
 
 	let connected = $state(false);
 
 	onMount(() => {
 		eventTarget.addEventListener("display", (e) => {
 			const detail = (e as CustomEvent).detail;
+			const _newCalls = detail.tickets.filter((call: CallEntry) => !calls.find(c => c.num === call.num));
+			newCalls.push(..._newCalls);
 			calls = detail.tickets ?? [];
 			connected = true;
+			setTimeout(() => {
+				newCalls = newCalls.filter(c => _newCalls.includes(c));
+			}, 10000);
 		});
 
 		eventTarget.dispatchEvent(new CustomEvent("send", { detail: { type: "display" } }));
 	})
 	
 	const ENTRIES = {A: 1, B: 2, C: 1, D: 2, E: 1};
+
+	const ENTRIES_PER_TABLE = 10;
 </script>
 
-<div class="p-4 flex items-center justify-center gap-4 text-5xl">
+{#if newCalls.length > 0}
+	<div class="fixed top-0 left-0 w-full h-full backdrop-blur-md z-50" transition:fade>
+		<div class="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-9xl font-bold bg-background text-foreground p-4 rounded-md flex flex-col gap-10">
+			{#each newCalls as call (call.num)}
+				<span class="mx-4">{call.num} &rarr; {call.ticket.room}</span>
+			{/each}
+		</div>
+	</div>
+{/if}
+
+<div class="p-4 flex justify-around gap-4 text-5xl">
 <!--	<h1 class="text-6xl font-bold">Aufruf</h1> -->
 	{#if connected}
-		<table>
+		<table class="self-start">
 			<tbody>
 				<tr>
 					<th class="pr-4 font-bold">Wartenr.</th>
-					<th class="pr-4 font-bold">-&gt;</th>
+					<th class="pr-4 font-bold">&rarr;</th>
 					<th class="pr-4 font-bold">Raum</th>
 				</tr>
-				{#each calls.filter(c => c.num.startsWith("A")) as call (call.num)}
+				{#each calls.slice(0, ENTRIES_PER_TABLE) as call (call.num)}
 					<tr>
 						<td class="call">{call.num}</td>
-						<td class="call">-&gt;</td>
+						<td class="call">&rarr;</td>
 						<td class="call">{call.ticket.status === "no-show" ? "Empfang " + ENTRIES[call.num[0]] : call.ticket.room}</td>
 					</tr>
 				{/each}
 			</tbody>
 		</table>
 
-		<table>
+		<div class="fixed h-full w-1 bg-black top-0 left-1/2 -translate-x-1/2"></div>
+
+		<table class="self-start">
 			<tbody>
 				<tr>
 					<th class="pr-4 font-bold">Wartenr.</th>
-					<th class="pr-4 font-bold">-&gt;</th>
+					<th class="pr-4 font-bold">&rarr;</th>
 					<th class="pr-4 font-bold">Raum</th>
 				</tr>
-				{#each calls.filter(c => c.num.startsWith("B")) as call (call.num)}
+				{#each calls.slice(ENTRIES_PER_TABLE) as call (call.num)}
 					<tr>
 						<td class="call">{call.num}</td>
-						<td class="call">-&gt;</td>
+						<td class="call">&rarr;</td>
 						<td class="call">{call.ticket.status === "no-show" ? "Empfang " + ENTRIES[call.num[0]] : call.ticket.room}</td>
 					</tr>
 				{/each}
@@ -69,14 +90,19 @@
 <style>
 	.call {
 		animation: flash 5s ease-in-out;
+		animation-delay: 10s;
 	}
 
 	@keyframes flash {
 		0% { opacity: 0; }
 		10% { opacity: 1; }
 		20% { opacity: 0; }
-		40% { opacity: 1; }
+		30% { opacity: 1; }
+		40% { opacity: 0; }
+		50% { opacity: 1; }
 		60% { opacity: 0; }
+		70% { opacity: 1; }
+		80% { opacity: 0; }
 		100% { opacity: 1; }
 	}