feat: improve connection handling
This commit is contained in:
11
web/bun.lock
11
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=="],
|
||||
|
||||
@ -31,5 +31,8 @@
|
||||
"tw-animate-css": "^1.4.0",
|
||||
"typescript": "^5.0.0",
|
||||
"vite": "^7.0.4"
|
||||
},
|
||||
"dependencies": {
|
||||
"runed": "^0.37.0"
|
||||
}
|
||||
}
|
||||
|
||||
13
web/src/lib/ConnectionLostDialog2.svelte
Normal file
13
web/src/lib/ConnectionLostDialog2.svelte
Normal file
@ -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>
|
||||
@ -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>
|
||||
|
||||
@ -1,115 +1,164 @@
|
||||
<script lang="ts">
|
||||
import { eventTarget } from "$lib/ws.svelte";
|
||||
import { onMount } from "svelte";
|
||||
import { fade } from "svelte/transition";
|
||||
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 newCalls = $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;
|
||||
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);
|
||||
});
|
||||
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" } }));
|
||||
})
|
||||
|
||||
const ENTRIES = {A: 1, B: 2, C: 1, D: 2, E: 1};
|
||||
eventTarget.dispatchEvent(
|
||||
new CustomEvent("send", { detail: { type: "display" } })
|
||||
);
|
||||
});
|
||||
|
||||
const ENTRIES_PER_TABLE = 10;
|
||||
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 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} → {call.ticket.room}</span>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
<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} → {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 class="self-start">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th class="pr-4 font-bold">Wartenr.</th>
|
||||
<th class="pr-4 font-bold">→</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">→</td>
|
||||
<td class="call">{call.ticket.status === "no-show" ? "Empfang " + ENTRIES[call.num[0]] : call.ticket.room}</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
<!-- <h1 class="text-6xl font-bold">Aufruf</h1> -->
|
||||
<table class="self-start">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th class="pr-4 font-bold">Wartenr.</th>
|
||||
<th class="pr-4 font-bold">→</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">→</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>
|
||||
<tr>
|
||||
<th class="pr-4 font-bold">Wartenr.</th>
|
||||
<th class="pr-4 font-bold">→</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">→</td>
|
||||
<td class="call">{call.ticket.status === "no-show" ? "Empfang " + ENTRIES[call.num[0]] : call.ticket.room}</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
{/if}
|
||||
<table class="self-start">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th class="pr-4 font-bold">Wartenr.</th>
|
||||
<th class="pr-4 font-bold">→</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">→</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 5s ease-in-out;
|
||||
animation-delay: 10s;
|
||||
}
|
||||
.call {
|
||||
animation: flash 5s ease-in-out;
|
||||
animation-delay: 10s;
|
||||
}
|
||||
|
||||
@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; }
|
||||
}
|
||||
@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>
|
||||
|
||||
Reference in New Issue
Block a user