feat: change display

feat: apply requested changes
2025-10-09 11:25:14 +02:00 · 2025-10-09 10:36:40 +02:00
11 changed files with 91 additions and 24 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
--- 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/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", () => {
--- 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>
--- 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;
--- a/web/src/routes/display/+page.svelte
+++ b/web/src/routes/display/+page.svelte
@ -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,33 +12,74 @@
 	};

 	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 flex-col items-center gap-4 text-3xl">
-	<h1 class="text-6xl font-bold">Aufruf</h1>
+{#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">Ticket</th>
+					<th class="pr-4 font-bold">Wartenr.</th>
+					<th class="pr-4 font-bold">&rarr;</th>
 					<th class="pr-4 font-bold">Raum</th>
 				</tr>
-				{#each calls 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">{call.ticket.status === "no-show" ? "Empfang " + (call.num.startsWith("A") ? "1" : "2") : call.ticket.room}</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>
+
+		<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">&rarr;</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">&rarr;</td>
+						<td class="call">{call.ticket.status === "no-show" ? "Empfang " + ENTRIES[call.num[0]] : call.ticket.room}</td>
 					</tr>
 				{/each}
 			</tbody>
@ -47,13 +89,20 @@

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

 	@keyframes flash {
 		0% { opacity: 0; }
-		20% { opacity: 1; }
+		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; }
 	}
Author	SHA1	Message	Date
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