cfp/nextup
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: change display

Browse Source
This commit is contained in:
Jannik
2025-10-09 11:25:14 +02:00
parent 6208305464
commit eaef1f5302
6 changed files with 52 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/app.css
View File

@ -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);

8
web/src/lib/AppSidebar.svelte
View File

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

3
web/src/lib/sidebar.svelte.ts Normal file
View File

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

2
web/src/routes/(manage)/+layout.svelte
View File

@ -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();

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

@ -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_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)) {

46
web/src/routes/display/+page.svelte
View File

@ -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; }
}