feat: use SVG for arrow

feat: improve connection handling
feat: change display
2025-12-01 21:01:11 +01:00 · 2025-11-30 18:19:03 +01:00 · 2025-10-09 11:25:14 +02:00 · 2025-10-09 10:36:40 +02:00
15 changed files with 312 additions and 106 deletions
--- a/6
+++ b/6
@ -22,9 +22,9 @@ COPY --from=install /temp/dev/node_modules node_modules
 COPY . .

 # [optional] tests & build
-ENV NODE_ENV=production
-RUN bun test
-RUN bun run build
+#ENV NODE_ENV=production
+#RUN bun test
+#RUN bun run build

 # copy production dependencies and source code into final image
 FROM base AS release
--- a/web/Dockerfile
+++ b/web/Dockerfile
@ -1,7 +1,7 @@
 FROM node:22-alpine AS builder
 WORKDIR /app
 COPY package*.json ./
-RUN npm ci
+RUN npm i
 COPY . .
 RUN npm run build
 RUN npm prune --production
@ -13,4 +13,4 @@ COPY --from=builder /app/node_modules node_modules/
 COPY package.json .
 EXPOSE 3000
 ENV NODE_ENV=production
-CMD [ "node", "build" ]
+CMD [ "node", "build" ]
--- a/web/bun.lock
+++ b/web/bun.lock
@ -3,6 +3,9 @@
  "workspaces": {
    "": {
      "name": "web",
+      "dependencies": {
+        "runed": "^0.37.0",
+      },
      "devDependencies": {
        "@internationalized/date": "^3.8.1",
        "@lucide/svelte": "^0.544.0",
@ -229,6 +232,8 @@

    "deepmerge": ["deepmerge@4.3.1", "", {}, "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A=="],

+    "dequal": ["dequal@2.0.3", "", {}, "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA=="],
+
    "detect-libc": ["detect-libc@2.1.1", "", {}, "sha512-ecqj/sy1jcK1uWrwpR67UhYrIFQ+5WlGxth34WquCbamhFA6hkkwiu37o6J5xCHdo1oixJRfVRw+ywV+Hq/0Aw=="],

    "devalue": ["devalue@5.3.2", "", {}, "sha512-UDsjUbpQn9kvm68slnrs+mfxwFkIflOhkanmyabZ8zOYk8SMEIbJ3TK+88g70hSIeytu4y18f0z/hYHMTrXIWw=="],
@ -289,6 +294,8 @@

    "locate-character": ["locate-character@3.0.0", "", {}, "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA=="],

+    "lz-string": ["lz-string@1.5.0", "", { "bin": { "lz-string": "bin/bin.js" } }, "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ=="],
+
    "magic-string": ["magic-string@0.30.19", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.5" } }, "sha512-2N21sPY9Ws53PZvsEpVtNuSW+ScYbQdp4b9qUaL+9QkHUrGFKo56Lg9Emg5s9V/qrtNBmiR01sYhUOwu3H+VOw=="],

    "minipass": ["minipass@7.1.2", "", {}, "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw=="],
@ -319,7 +326,7 @@

    "rollup": ["rollup@4.52.2", "", { "dependencies": { "@types/estree": "1.0.8" }, "optionalDependencies": { "@rollup/rollup-android-arm-eabi": "4.52.2", "@rollup/rollup-android-arm64": "4.52.2", "@rollup/rollup-darwin-arm64": "4.52.2", "@rollup/rollup-darwin-x64": "4.52.2", "@rollup/rollup-freebsd-arm64": "4.52.2", "@rollup/rollup-freebsd-x64": "4.52.2", "@rollup/rollup-linux-arm-gnueabihf": "4.52.2", "@rollup/rollup-linux-arm-musleabihf": "4.52.2", "@rollup/rollup-linux-arm64-gnu": "4.52.2", "@rollup/rollup-linux-arm64-musl": "4.52.2", "@rollup/rollup-linux-loong64-gnu": "4.52.2", "@rollup/rollup-linux-ppc64-gnu": "4.52.2", "@rollup/rollup-linux-riscv64-gnu": "4.52.2", "@rollup/rollup-linux-riscv64-musl": "4.52.2", "@rollup/rollup-linux-s390x-gnu": "4.52.2", "@rollup/rollup-linux-x64-gnu": "4.52.2", "@rollup/rollup-linux-x64-musl": "4.52.2", "@rollup/rollup-openharmony-arm64": "4.52.2", "@rollup/rollup-win32-arm64-msvc": "4.52.2", "@rollup/rollup-win32-ia32-msvc": "4.52.2", "@rollup/rollup-win32-x64-gnu": "4.52.2", "@rollup/rollup-win32-x64-msvc": "4.52.2", "fsevents": "~2.3.2" }, "bin": { "rollup": "dist/bin/rollup" } }, "sha512-I25/2QgoROE1vYV+NQ1En9T9UFB9Cmfm2CJ83zZOlaDpvz29wGQSZXWKw7MiNXau7wYgB/T9fVIdIuEQ+KbiiA=="],

-    "runed": ["runed@0.31.1", "", { "dependencies": { "esm-env": "^1.0.0" }, "peerDependencies": { "svelte": "^5.7.0" } }, "sha512-v3czcTnO+EJjiPvD4dwIqfTdHLZ8oH0zJheKqAHh9QMViY7Qb29UlAMRpX7ZtHh7AFqV60KmfxaJ9QMy+L1igQ=="],
+    "runed": ["runed@0.37.0", "", { "dependencies": { "dequal": "^2.0.3", "esm-env": "^1.0.0", "lz-string": "^1.5.0" }, "peerDependencies": { "@sveltejs/kit": "^2.21.0", "svelte": "^5.7.0", "zod": "^4.1.0" }, "optionalPeers": ["@sveltejs/kit", "zod"] }, "sha512-zphHjvLZEpcJiV3jezT96SnNwePaUIEd1HEMuPGZ6DwOMao9S2ZAUCYJPKquRM5J22AwAOpGj0KmxOkQdkBfwQ=="],

    "sade": ["sade@1.8.1", "", { "dependencies": { "mri": "^1.1.0" } }, "sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A=="],

@ -385,6 +392,8 @@

    "@tailwindcss/oxide-wasm32-wasi/tslib": ["tslib@2.8.1", "", { "bundled": true }, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],

+    "bits-ui/runed": ["runed@0.31.1", "", { "dependencies": { "esm-env": "^1.0.0" }, "peerDependencies": { "svelte": "^5.7.0" } }, "sha512-v3czcTnO+EJjiPvD4dwIqfTdHLZ8oH0zJheKqAHh9QMViY7Qb29UlAMRpX7ZtHh7AFqV60KmfxaJ9QMy+L1igQ=="],
+
    "mode-watcher/runed": ["runed@0.25.0", "", { "dependencies": { "esm-env": "^1.0.0" }, "peerDependencies": { "svelte": "^5.7.0" } }, "sha512-7+ma4AG9FT2sWQEA0Egf6mb7PBT2vHyuHail1ie8ropfSjvZGtEAx8YTmUjv/APCsdRRxEVvArNjALk9zFSOrg=="],

    "mode-watcher/svelte-toolbelt": ["svelte-toolbelt@0.7.1", "", { "dependencies": { "clsx": "^2.1.1", "runed": "^0.23.2", "style-to-object": "^1.0.8" }, "peerDependencies": { "svelte": "^5.0.0" } }, "sha512-HcBOcR17Vx9bjaOceUvxkY3nGmbBmCBBbuWLLEWO6jtmWH8f/QoWmbyUfQZrpDINH39en1b8mptfPQT9VKQ1xQ=="],
--- a/web/package.json
+++ b/web/package.json
@ -31,5 +31,8 @@
 		"tw-animate-css": "^1.4.0",
 		"typescript": "^5.0.0",
 		"vite": "^7.0.4"
+	},
+	"dependencies": {
+		"runed": "^0.37.0"
 	}
 }
--- a/web/src/app.css
+++ b/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);
--- a/web/src/app.html
+++ b/web/src/app.html
@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en" class="dark">
+<html lang="en">
 	<head>
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
--- a/web/src/lib/AppSidebar.svelte
+++ b/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",
+					},
 				],
 			},
 			// {
--- a/web/src/lib/ConnectionLostDialog2.svelte
+++ b/web/src/lib/ConnectionLostDialog2.svelte
@ -0,0 +1,13 @@
+<script lang="ts">
+  import { browser } from "$app/environment";
+  import * as AlertDialog from "$lib/components/ui/alert-dialog/index.js";
+  import { onMount } from "svelte";
+
+  onMount(() => {
+    if (!browser) return;
+
+    setTimeout(() => {
+      location.reload();
+    }, 2000);
+  });
+</script>
--- a/web/src/lib/sidebar.svelte.ts
+++ b/web/src/lib/sidebar.svelte.ts
@ -0,0 +1,3 @@
+export const sidebarState = $state({
+	open: false
+});
--- a/web/src/lib/ws.svelte.ts
+++ b/web/src/lib/ws.svelte.ts
@ -21,7 +21,7 @@ eventTarget.addEventListener("send", (e) => {
 });

 export function connectWS() {
-	ws = new WebSocket(`ws://localhost:3000`);
+	ws = new WebSocket(`ws://${location.hostname}:3000`);
 	console.log("Connecting to WebSocket...");

 	ws.addEventListener("open", () => {
@ -54,4 +54,4 @@ export function connectWS() {
 		console.log("Received message:", data);
 		eventTarget.dispatchEvent(new CustomEvent(data.type, { detail: data }));
 	});
-}
+}
--- a/web/src/routes/(manage)/+layout.svelte
+++ b/web/src/routes/(manage)/+layout.svelte
@ -11,6 +11,7 @@
 	import ConnectionLostDialog from '$lib/ConnectionLostDialog.svelte';
 	import { onMount } from 'svelte';
 	import { browser } from '$app/environment';
+	import { sidebarState } from "$lib/sidebar.svelte";
 	
 	let { children } = $props();

@ -40,7 +41,7 @@

 <Toaster position="bottom-right" theme="dark" richColors={true} />

-<Sidebar.Provider>
+<Sidebar.Provider bind:open={sidebarState.open}>
 	<AppSidebar />
 	<Sidebar.Inset>
 		<!-- <header class="flex h-16 shrink-0 items-center gap-2 px-4"> -->
--- a/web/src/routes/(manage)/log/+page.svelte
+++ b/web/src/routes/(manage)/log/+page.svelte
@ -3,6 +3,7 @@
 	import { eventTarget } from "$lib/ws.svelte";
 	import { TicketCheckIcon, TicketIcon, TicketSlashIcon, TicketXIcon } from "@lucide/svelte";
 	import { onMount } from "svelte";
+	import { sidebarState } from "$lib/sidebar.svelte.ts";

 	type LogAction = "called" | "completed" | "no-show";
 	const colors = {
@ -40,7 +41,9 @@
 	})
 </script>

-<h1 class="text-2xl font-bold">Log</h1>
+<h1 class="text-2xl font-bold" onclick={() => {
+	sidebarState.open = !sidebarState.open;
+}}>Log</h1>

 <Table.Root>
 	<Table.Header>
@ -65,4 +68,4 @@
 			</Table.Row>
 		{/each}
 	</Table.Body>
-</Table.Root>
+</Table.Root>
--- a/web/src/routes/(manage)/room/[slug]/+page.svelte
+++ b/web/src/routes/(manage)/room/[slug]/+page.svelte
@ -4,6 +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";

 	const slug = $derived(page.params.slug);

@ -13,8 +14,8 @@

 	let isInvalid = $state(false);

-	const TICKET_INPUT_REGEX = "^[A-B]{0,1}[0-9]{0,2}$";
-	const TICKET_REGEX = /^[A-B]\d{2}$/;
+	const TICKET_INPUT_REGEX = "^[A-E]{0,1}[0-9]{0,2}$";
+	const TICKET_REGEX = /^[A-E]\d{2}$/;

 	async function submit() {
 		if(!TICKET_REGEX.test(nextTicket)) {
@ -82,7 +83,9 @@
 	})
 </script>

-<h1 class="text-2xl font-bold">Raum {slug}</h1>
+<h1 class="text-2xl font-bold" onclick={() => {
+	sidebarState.open = !sidebarState.open;
+}}>Raum {slug}</h1>
 <div style="display: flex; align-items: center; gap: 1rem;">
 	<InputOTP.Root maxlength={3} pattern={TICKET_INPUT_REGEX} bind:value={nextTicket} onkeypress={(e) => {
 		isInvalid = false;
@ -132,4 +135,4 @@
 	#ticket {
 		display: flex;
 	}
-</style>
+</style>
--- a/web/src/routes/display/+layout.svelte
+++ b/web/src/routes/display/+layout.svelte
@ -1,49 +1,42 @@
 <script>
-	import Spinner from '$lib/Spinner.svelte';
-	import { connectWS, wsState } from '$lib/ws.svelte';
-	import { onMount } from 'svelte';
-	import '../../app.css';
-	import { browser } from '$app/environment';
-	import ConnectionLostDialog from '$lib/ConnectionLostDialog.svelte';
-	
-	let { children } = $props();
-	
-	onMount(() => {
-		if(!browser) return;
+  import { connectWS, wsState } from "$lib/ws.svelte";
+  import { onMount } from "svelte";
+  import "../../app.css";
+  import { browser } from "$app/environment";
+  import ConnectionLostDialog2 from "$lib/ConnectionLostDialog2.svelte";

-		connectWS();
-		console.log("Connecting to WebSocket...");
-	})
+  let { children } = $props();
+
+  onMount(() => {
+    if (!browser) return;
+
+    connectWS();
+    console.log("Connecting to WebSocket...");
+  });
 </script>

 {#if wsState.closed}
-	<ConnectionLostDialog />
+  <ConnectionLostDialog2 />
 {/if}

-{#if !wsState.connected && !wsState.closed}
-	<div id="blocker">
-		<Spinner />
-
-		<h2 class="text-2xl">Verbindung herstellen...</h2>
-	</div>
-{/if}
+{#if !wsState.connected && !wsState.closed}{/if}

 {@render children?.()}

 <style>
-	#blocker {
-		position: fixed;
-		z-index: 9999;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-		background-color: rgba(0, 0, 0, 0.3);
-		backdrop-filter: blur(5px);
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		flex-direction: column;
-		gap: 1rem;
-	}
+  #blocker {
+    position: fixed;
+    z-index: 9999;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.3);
+    backdrop-filter: blur(5px);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    gap: 1rem;
+  }
 </style>
--- a/web/src/routes/display/+page.svelte
+++ b/web/src/routes/display/+page.svelte
@ -1,66 +1,236 @@
 <script lang="ts">
-	import { eventTarget } from "$lib/ws.svelte";
-	import { onMount } from "svelte";
+  import { eventTarget, wsState } from "$lib/ws.svelte";
+  import { PersistedState } from "runed";
+  import { onMount } from "svelte";
+  import { fade } from "svelte/transition";

-	interface CallEntry {
-		num: string;
-		ticket: {
-			status: "called" | "completed" | "no-show";
-			room?: string;
-		}
-	};
+  interface CallEntry {
+    num: string;
+    ticket: {
+      status: "called" | "completed" | "no-show";
+      room?: string;
+    };
+  }

-	let calls = $state<CallEntry[]>([]);
+  let persisted: PersistedState<CallEntry[]> = new PersistedState("calls", []);
+  let calls = $state<CallEntry[]>($state.snapshot(persisted.current));
+  let newCalls = $state<CallEntry[]>([]);
+  let firstLoad = true;

-	let connected = $state(false);
+  let connected = $state(false);

-	onMount(() => {
-		eventTarget.addEventListener("display", (e) => {
-			const detail = (e as CustomEvent).detail;
-			calls = detail.tickets ?? [];
-			connected = true;
-		});
+  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)
+      );
+      calls = detail.tickets ?? [];
+      persisted.current = calls;
+      connected = true;
+      if (!firstLoad) {
+        newCalls.push(..._newCalls);
+        setTimeout(() => {
+          newCalls = newCalls.filter((c) => _newCalls.includes(c));
+        }, 10000);
+      }
+      firstLoad = false;
+    });

-		eventTarget.dispatchEvent(new CustomEvent("send", { detail: { type: "display" } }));
-	})
+    eventTarget.dispatchEvent(
+      new CustomEvent("send", { detail: { type: "display" } })
+    );
+  });
+
+  const ENTRIES: Record<string, number> = { A: 1, B: 2, C: 1, D: 2, E: 1 };
+
+  const ENTRIES_PER_TABLE = 10;
 </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}
+{#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}
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="48"
+            height="48"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="lucide lucide-arrow-right-icon lucide-arrow-right"
+            ><path d="M5 12h14" /><path d="m12 5 7 7-7 7" /></svg
+          >
+          {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> -->
+  <table class="self-start">
+    <tbody>
+      <tr>
+        <th class="pr-4 font-bold">Warte Nr.</th>
+        <th class="pr-4 font-bold">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="48"
+            height="48"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="lucide lucide-arrow-right-icon lucide-arrow-right"
+            ><path d="M5 12h14" /><path d="m12 5 7 7-7 7" /></svg
+          >
+        </th>
+        <th class="pr-4 font-bold">Raum</th>
+      </tr>
+      {#each calls.slice(0, ENTRIES_PER_TABLE) as call (call.num)}
+        <tr>
+          <td class="call">{call.num}</td>
+          <td class="call">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="48"
+              height="48"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              class="lucide lucide-arrow-right-icon lucide-arrow-right"
+              ><path d="M5 12h14" /><path d="m12 5 7 7-7 7" /></svg
+            >
+          </td>
+          <td class="call"
+            >{call.ticket.status === "no-show"
+              ? "Empfang " + ENTRIES[call.num[0]]
+              : call.ticket.room}</td
+          >
+        </tr>
+      {/each}
+    </tbody>
+  </table>
+
+  <div
+    class="fixed h-full w-1 top-0 left-1/2 -translate-x-1/2 {wsState.closed
+      ? 'bg-red-800'
+      : !wsState.connected
+        ? 'bg-amber-800'
+        : 'bg-black'}"
+  ></div>
+
+  <table class="self-start">
+    <tbody>
+      <tr>
+        <th class="pr-4 font-bold">Warte Nr.</th>
+        <th class="pr-4 font-bold">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="48"
+            height="48"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="lucide lucide-arrow-right-icon lucide-arrow-right"
+            ><path d="M5 12h14" /><path d="m12 5 7 7-7 7" /></svg
+          >
+        </th>
+        <th class="pr-4 font-bold">Raum</th>
+      </tr>
+      {#each calls.slice(ENTRIES_PER_TABLE) as call (call.num)}
+        <tr>
+          <td class="call">{call.num}</td>
+          <td class="call">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="48"
+              height="48"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              class="lucide lucide-arrow-right-icon lucide-arrow-right"
+              ><path d="M5 12h14" /><path d="m12 5 7 7-7 7" /></svg
+            >
+          </td>
+          <td class="call"
+            >{call.ticket.status === "no-show"
+              ? "Empfang " + ENTRIES[call.num[0]]
+              : call.ticket.room}</td
+          >
+        </tr>
+      {/each}
+    </tbody>
+  </table>
 </div>

 <style>
-	.call {
-		animation: flash 1s ease-in-out;
-	}
+  .call {
+    animation: flash 5s ease-in-out;
+    animation-delay: 10s;
+  }

-	@keyframes flash {
-		0% { opacity: 0; }
-		20% { opacity: 1; }
-		40% { opacity: 0; }
-		100% { opacity: 1; }
-	}
+  @keyframes flash {
+    0% {
+      opacity: 0;
+    }
+    10% {
+      opacity: 1;
+    }
+    20% {
+      opacity: 0;
+    }
+    30% {
+      opacity: 1;
+    }
+    40% {
+      opacity: 0;
+    }
+    50% {
+      opacity: 1;
+    }
+    60% {
+      opacity: 0;
+    }
+    70% {
+      opacity: 1;
+    }
+    80% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }

-	th, td {
-		padding: 0.5rem 1rem;
-		text-align: center;
-		background-color: var(--accent);
-		border: 2px solid var(--background);
-	}
+  th,
+  td {
+    padding: 0.5rem 1rem;
+    text-align: center;
+    background-color: var(--accent);
+    border: 2px solid var(--background);
+  }
 </style>
Author	SHA1	Message	Date
Jannik	00dae2ba6b	feat: use SVG for arrow	2025-12-01 21:01:11 +01:00
Jannik	7d00d1b314	feat: improve connection handling	2025-11-30 18:19:03 +01:00
Jannik	eaef1f5302	feat: change display	2025-10-09 11:25:14 +02:00
Jannik	6208305464	feat: apply requested changes	2025-10-09 10:36:40 +02:00