116 lines
3.0 KiB
Svelte
116 lines
3.0 KiB
Svelte
<script lang="ts">
|
|
import { eventTarget } from "$lib/ws.svelte";
|
|
import { onMount } from "svelte";
|
|
import { fade } from "svelte/transition";
|
|
|
|
interface CallEntry {
|
|
num: string;
|
|
ticket: {
|
|
status: "called" | "completed" | "no-show";
|
|
room?: string;
|
|
}
|
|
};
|
|
|
|
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>
|
|
|
|
{#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>
|
|
{/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>
|
|
|
|
<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">→</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}
|
|
</div>
|
|
|
|
<style>
|
|
.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; }
|
|
}
|
|
|
|
th, td {
|
|
padding: 0.5rem 1rem;
|
|
text-align: center;
|
|
background-color: var(--accent);
|
|
border: 2px solid var(--background);
|
|
}
|
|
</style>
|