feat: improve connection handling

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=="],

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"
 	}
 }

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>

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

@@ -1,10 +1,9 @@
 <script>
-	import Spinner from '$lib/Spinner.svelte';
+  import { connectWS, wsState } from "$lib/ws.svelte";
-	import { connectWS, wsState } from '$lib/ws.svelte';
+  import { onMount } from "svelte";
-	import { onMount } from 'svelte';
+  import "../../app.css";
-	import '../../app.css';
+  import { browser } from "$app/environment";
-	import { browser } from '$app/environment';
+  import ConnectionLostDialog2 from "$lib/ConnectionLostDialog2.svelte";
-	import ConnectionLostDialog from '$lib/ConnectionLostDialog.svelte';
 
   let { children } = $props();
 
@@ -13,20 +12,14 @@
 
     connectWS();
     console.log("Connecting to WebSocket...");
-	})
+  });
 </script>
 
 {#if wsState.closed}
-	<ConnectionLostDialog />
+  <ConnectionLostDialog2 />
 {/if}
 
-{#if !wsState.connected && !wsState.closed}
+{#if !wsState.connected && !wsState.closed}{/if}
-	<div id="blocker">
-		<Spinner />
-
-		<h2 class="text-2xl">Verbindung herstellen...</h2>
-	</div>
-{/if}
 
 {@render children?.()}
 

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

@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { eventTarget } from "$lib/ws.svelte";
+  import { eventTarget, wsState } from "$lib/ws.svelte";
+  import { PersistedState } from "runed";
   import { onMount } from "svelte";
   import { fade } from "svelte/transition";
 
@@ -8,37 +9,52 @@
     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);
 
   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));
+      const _newCalls = detail.tickets.filter(
-			newCalls.push(..._newCalls);
+        (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));
+          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 = {A: 1, B: 2, C: 1, D: 2, E: 1};
+  const ENTRIES: Record<string, number> = { A: 1, B: 2, C: 1, D: 2, E: 1 };
 
   const ENTRIES_PER_TABLE = 10;
 </script>
 
 {#if newCalls.length > 0}
-	<div class="fixed top-0 left-0 w-full h-full backdrop-blur-md z-50" transition:fade>
+  <div
-		<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">
+    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}
@@ -48,7 +64,6 @@
 
 <div class="p-4 flex justify-around gap-4 text-5xl">
   <!--	<h1 class="text-6xl font-bold">Aufruf</h1> -->
-	{#if connected}
   <table class="self-start">
     <tbody>
       <tr>
@@ -60,13 +75,23 @@
         <tr>
           <td class="call">{call.num}</td>
           <td class="call">&rarr;</td>
-						<td class="call">{call.ticket.status === "no-show" ? "Empfang " + ENTRIES[call.num[0]] : call.ticket.room}</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 bg-black top-0 left-1/2 -translate-x-1/2"></div>
+  <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>
@@ -79,12 +104,15 @@
         <tr>
           <td class="call">{call.num}</td>
           <td class="call">&rarr;</td>
-						<td class="call">{call.ticket.status === "no-show" ? "Empfang " + ENTRIES[call.num[0]] : call.ticket.room}</td>
+          <td class="call"
+            >{call.ticket.status === "no-show"
+              ? "Empfang " + ENTRIES[call.num[0]]
+              : call.ticket.room}</td
+          >
         </tr>
       {/each}
     </tbody>
   </table>
-	{/if}
 </div>
 
 <style>
@@ -94,19 +122,40 @@
   }
 
   @keyframes flash {
-		0% { opacity: 0; }
+    0% {
-		10% { opacity: 1; }
+      opacity: 0;
-		20% { opacity: 0; }
+    }
-		30% { opacity: 1; }
+    10% {
-		40% { opacity: 0; }
+      opacity: 1;
-		50% { opacity: 1; }
+    }
-		60% { opacity: 0; }
+    20% {
-		70% { opacity: 1; }
+      opacity: 0;
-		80% { opacity: 0; }
+    }
-		100% { opacity: 1; }
+    30% {
+      opacity: 1;
+    }
+    40% {
+      opacity: 0;
+    }
+    50% {
+      opacity: 1;
+    }
+    60% {
+      opacity: 0;
+    }
+    70% {
+      opacity: 1;
+    }
+    80% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
   }
 
-	th, td {
+  th,
+  td {
     padding: 0.5rem 1rem;
     text-align: center;
     background-color: var(--accent);