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

Compare commits

base: cfp:7679f138b6e2cf52e15296e8fcd52b3f123cd257
Branches Tags
cfp:main
..
compare: cfp:eaef1f5302ca7ef5bc102edbe042b19f0ad82cdf
Branches Tags
cfp:main

2 Commits
7679f138b6 ... eaef1f5302

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
11 changed files with 91 additions and 24 deletions
Expand all files Collapse all files

6
Dockerfile
View File

@ -22,9 +22,9 @@ COPY --from=install /temp/dev/node_modules node_modules
COPY . . COPY . .
# [optional] tests & build # [optional] tests & build
ENV NODE_ENV=production #ENV NODE_ENV=production
RUN bun test #RUN bun test
RUN bun run build #RUN bun run build
# copy production dependencies and source code into final image # copy production dependencies and source code into final image
FROM base AS release FROM base AS release

4
web/Dockerfile
View File

@ -1,7 +1,7 @@
FROM node:22-alpine AS builder FROM node:22-alpine AS builder
WORKDIR /app WORKDIR /app
COPY package*.json ./ COPY package*.json ./
RUN npm ci RUN npm i
COPY . . COPY . .
RUN npm run build RUN npm run build
RUN npm prune --production RUN npm prune --production
@ -13,4 +13,4 @@ COPY --from=builder /app/node_modules node_modules/
COPY package.json . COPY package.json .
EXPOSE 3000 EXPOSE 3000
ENV NODE_ENV=production ENV NODE_ENV=production
CMD [ "node", "build" ] CMD [ "node", "build" ]

2
web/src/app.css
View File

@ -18,7 +18,7 @@
--secondary-foreground: oklch(0.208 0.042 265.755); --secondary-foreground: oklch(0.208 0.042 265.755);
--muted: oklch(0.968 0.007 247.896); --muted: oklch(0.968 0.007 247.896);
--muted-foreground: oklch(0.554 0.046 257.417); --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); --accent-foreground: oklch(0.208 0.042 265.755);
--destructive: oklch(0.577 0.245 27.325); --destructive: oklch(0.577 0.245 27.325);
--border: oklch(0.929 0.013 255.508); --border: oklch(0.929 0.013 255.508);

2
web/src/app.html
View File

@ -1,5 +1,5 @@
<!doctype html> <!doctype html>
<html lang="en" class="dark"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />

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

@ -67,6 +67,14 @@
title: "Roe", title: "Roe",
url: "/room/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
});

4
web/src/lib/ws.svelte.ts
View File

@ -21,7 +21,7 @@ eventTarget.addEventListener("send", (e) => {
}); });
export function connectWS() { export function connectWS() {
ws = new WebSocket(`ws://localhost:3000`); ws = new WebSocket(`ws://${location.hostname}:3000`);
console.log("Connecting to WebSocket..."); console.log("Connecting to WebSocket...");
ws.addEventListener("open", () => { ws.addEventListener("open", () => {
@ -54,4 +54,4 @@ export function connectWS() {
console.log("Received message:", data); console.log("Received message:", data);
eventTarget.dispatchEvent(new CustomEvent(data.type, { detail: data })); eventTarget.dispatchEvent(new CustomEvent(data.type, { detail: data }));
}); });
} }

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

@ -11,6 +11,7 @@
import ConnectionLostDialog from '$lib/ConnectionLostDialog.svelte'; import ConnectionLostDialog from '$lib/ConnectionLostDialog.svelte';
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import { browser } from '$app/environment'; import { browser } from '$app/environment';
import { sidebarState } from "$lib/sidebar.svelte";
let { children } = $props(); let { children } = $props();
@ -40,7 +41,7 @@
<Toaster position="bottom-right" theme="dark" richColors={true} /> <Toaster position="bottom-right" theme="dark" richColors={true} />
<Sidebar.Provider> <Sidebar.Provider bind:open={sidebarState.open}>
<AppSidebar /> <AppSidebar />
<Sidebar.Inset> <Sidebar.Inset>
<!-- <header class="flex h-16 shrink-0 items-center gap-2 px-4"> --> <!-- <header class="flex h-16 shrink-0 items-center gap-2 px-4"> -->

7
web/src/routes/(manage)/log/+page.svelte
View File

@ -3,6 +3,7 @@
import { eventTarget } from "$lib/ws.svelte"; import { eventTarget } from "$lib/ws.svelte";
import { TicketCheckIcon, TicketIcon, TicketSlashIcon, TicketXIcon } from "@lucide/svelte"; import { TicketCheckIcon, TicketIcon, TicketSlashIcon, TicketXIcon } from "@lucide/svelte";
import { onMount } from "svelte"; import { onMount } from "svelte";
import { sidebarState } from "$lib/sidebar.svelte.ts";
type LogAction = "called" | "completed" | "no-show"; type LogAction = "called" | "completed" | "no-show";
const colors = { const colors = {
@ -40,7 +41,9 @@
}) })
</script> </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.Root>
<Table.Header> <Table.Header>
@ -65,4 +68,4 @@
</Table.Row> </Table.Row>
{/each} {/each}
</Table.Body> </Table.Body>
</Table.Root> </Table.Root>

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

@ -4,6 +4,7 @@
import * as InputOTP from "$lib/components/ui/input-otp"; import * as InputOTP from "$lib/components/ui/input-otp";
import { eventTarget } from "$lib/ws.svelte"; import { eventTarget } from "$lib/ws.svelte";
import { toast } from "svelte-sonner"; import { toast } from "svelte-sonner";
import { sidebarState } from "$lib/sidebar.svelte";
const slug = $derived(page.params.slug); const slug = $derived(page.params.slug);
@ -13,8 +14,8 @@
let isInvalid = $state(false); let isInvalid = $state(false);
const TICKET_INPUT_REGEX = "^[A-B]{0,1}[0-9]{0,2}$"; const TICKET_INPUT_REGEX = "^[A-E]{0,1}[0-9]{0,2}$";
const TICKET_REGEX = /^[A-B]\d{2}$/; const TICKET_REGEX = /^[A-E]\d{2}$/;
async function submit() { async function submit() {
if(!TICKET_REGEX.test(nextTicket)) { if(!TICKET_REGEX.test(nextTicket)) {
@ -82,7 +83,9 @@
}) })
</script> </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;"> <div style="display: flex; align-items: center; gap: 1rem;">
<InputOTP.Root maxlength={3} pattern={TICKET_INPUT_REGEX} bind:value={nextTicket} onkeypress={(e) => { <InputOTP.Root maxlength={3} pattern={TICKET_INPUT_REGEX} bind:value={nextTicket} onkeypress={(e) => {
isInvalid = false; isInvalid = false;
@ -132,4 +135,4 @@
#ticket { #ticket {
display: flex; display: flex;
} }
</style> </style>

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

@ -1,6 +1,7 @@
<script lang="ts"> <script lang="ts">
import { eventTarget } from "$lib/ws.svelte"; import { eventTarget } from "$lib/ws.svelte";
import { onMount } from "svelte"; import { onMount } from "svelte";
import { fade } from "svelte/transition";
interface CallEntry { interface CallEntry {
num: string; num: string;
@ -11,33 +12,74 @@
}; };
let calls = $state<CallEntry[]>([]); let calls = $state<CallEntry[]>([]);
let newCalls = $state<CallEntry[]>([]);
let connected = $state(false); let connected = $state(false);
onMount(() => { onMount(() => {
eventTarget.addEventListener("display", (e) => { eventTarget.addEventListener("display", (e) => {
const detail = (e as CustomEvent).detail; 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 ?? []; calls = detail.tickets ?? [];
connected = true; connected = true;
setTimeout(() => {
newCalls = newCalls.filter(c => _newCalls.includes(c));
}, 10000);
}); });
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_PER_TABLE = 10;
</script> </script>
<div class="p-4 flex flex-col items-center gap-4 text-3xl"> {#if newCalls.length > 0}
<h1 class="text-6xl font-bold">Aufruf</h1> <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} {#if connected}
<table> <table class="self-start">
<tbody> <tbody>
<tr> <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> <th class="pr-4 font-bold">Raum</th>
</tr> </tr>
{#each calls as call (call.num)} {#each calls.slice(0, ENTRIES_PER_TABLE) as call (call.num)}
<tr> <tr>
<td class="call">{call.num}</td> <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> </tr>
{/each} {/each}
</tbody> </tbody>
@ -47,13 +89,20 @@
<style> <style>
.call { .call {
animation: flash 1s ease-in-out; animation: flash 5s ease-in-out;
animation-delay: 10s;
} }
@keyframes flash { @keyframes flash {
0% { opacity: 0; } 0% { opacity: 0; }
20% { opacity: 1; } 10% { opacity: 1; }
20% { opacity: 0; }
30% { opacity: 1; }
40% { opacity: 0; } 40% { opacity: 0; }
50% { opacity: 1; }
60% { opacity: 0; }
70% { opacity: 1; }
80% { opacity: 0; }
100% { opacity: 1; } 100% { opacity: 1; }
} }