isaacclad/ladill-queue
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix public display not showing queue stats and ticket data.
Deploy Ladill Queue / deploy (push) Successful in 43s
Details

Browse Source 
Server-render initial payload, poll with same-origin relative URLs, fall back to branch queues when none assigned, and improve contrast so stats remain visible if custom CSS is missing.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
isaacclad
2026-06-29 22:51:29 +00:00
co-authored by Cursor
parent 2243ccf95a
commit 326769204d
5 changed files with 125 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/qms/display/public.blade.php
+48 -35
View File
@@ -1,15 +1,25 @@
@php
$p = $initialPayload;
@endphp
<!DOCTYPE html>
<html lang="en" class="h-full">
<html lang="en" class="h-full bg-slate-950">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<meta name="theme-color" content="#020617">
<title>{{ $screen->name }} · Queue Display</title>
@vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body
class="qms-display qms-display__grid-bg"
x-data="displayBoard({ dataUrl: '{{ $dataUrl }}', playedUrl: '{{ $playedUrl }}', pollMs: {{ $pollMs }}, csrf: '{{ csrf_token() }}' })"
class="qms-display qms-display__grid-bg min-h-full bg-slate-950 text-slate-100"
x-data="displayBoard(@js([
'dataUrl' => $dataUrl,
'playedUrl' => $playedUrl,
'pollMs' => $pollMs,
'csrf' => csrf_token(),
'initial' => $initialPayload,
]))"
x-init="init()"
>
{{-- Voice unlock — required by browsers before TTS --}}
@@ -19,7 +29,7 @@
@click="unlockSpeech()"
@keydown.enter.prevent="unlockSpeech()"
tabindex="0"
class="qms-display__unlock fixed inset-0 z-50 flex cursor-pointer items-center justify-center p-8 text-center outline-none"
class="qms-display__unlock fixed inset-0 z-50 flex cursor-pointer items-center justify-center bg-slate-950/95 p-8 text-center outline-none"
role="button"
aria-label="Enable voice announcements"
>
@@ -34,31 +44,34 @@
</div>
</div>
<div
x-show="pollError"
x-cloak
class="fixed left-1/2 top-4 z-40 max-w-lg -translate-x-1/2 rounded-xl border border-rose-400/30 bg-rose-950/90 px-4 py-3 text-sm text-rose-100 shadow-lg"
x-text="pollError"
></div>
<div class="flex min-h-screen flex-col">
{{-- Header --}}
<header class="border-b border-white/10 bg-slate-950/60 backdrop-blur-md">
<header class="border-b border-white/10 bg-slate-950/80 backdrop-blur-md">
<div class="mx-auto flex max-w-7xl flex-wrap items-center justify-between gap-4 px-6 py-5 lg:px-10">
<div class="min-w-0">
<p
class="text-xs font-semibold uppercase tracking-[0.2em] text-indigo-300"
x-text="payload?.screen?.organization_name ?? '{{ $screen->organization?->name ?? 'Queue display' }}'"
></p>
<h1
class="mt-1 truncate text-2xl font-semibold tracking-tight text-white lg:text-3xl"
x-text="payload?.screen?.name ?? '{{ $screen->name }}'"
></h1>
<p
class="mt-1 text-sm text-slate-400"
x-show="payload?.screen?.branch_name"
x-text="payload?.screen?.branch_name"
></p>
<p class="text-xs font-semibold uppercase tracking-[0.2em] text-indigo-300">
{{ $p['screen']['organization_name'] ?? $screen->organization?->name ?? 'Queue display' }}
</p>
<h1 class="mt-1 truncate text-2xl font-semibold tracking-tight text-white lg:text-3xl">
{{ $p['screen']['name'] ?? $screen->name }}
</h1>
@if (! empty($p['screen']['branch_name']))
<p class="mt-1 text-sm text-slate-400">{{ $p['screen']['branch_name'] }}</p>
@endif
</div>
<div class="text-right">
<div class="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-3 py-1.5 text-xs font-medium text-emerald-300">
<span class="qms-display__live-dot h-2 w-2 rounded-full bg-emerald-400"></span>
Live
</div>
<p class="mt-2 font-mono text-4xl font-semibold tabular-nums tracking-tight text-white" x-text="clock"></p>
<p class="mt-2 font-mono text-4xl font-semibold tabular-nums tracking-tight text-white" x-text="clock">--:--</p>
<p class="text-sm text-slate-400" x-text="dateLabel"></p>
</div>
</div>
@@ -93,39 +106,39 @@
class="qms-display__stat flex flex-1 flex-col items-center justify-center rounded-3xl px-8 py-16 text-center"
x-show="!(payload?.now_serving ?? []).length"
>
<div class="flex h-14 w-14 items-center justify-center rounded-2xl bg-white/5 ring-1 ring-white/10">
<svg class="h-7 w-7 text-slate-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
</svg>
<div class="flex h-14 w-14 items-center justify-center rounded-2xl bg-white/5 ring-1 ring-white/10">
<svg class="h-7 w-7 text-slate-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
</svg>
</div>
<p class="mt-5 text-2xl font-semibold text-white">Please wait</p>
<p class="mt-2 max-w-sm text-slate-400">Your ticket number will appear here when it is called.</p>
</div>
<p class="mt-5 text-2xl font-semibold text-white">Please wait</p>
<p class="mt-2 max-w-sm text-slate-400">Your ticket number will appear here when it is called.</p>
</div>
</section>
{{-- Stats sidebar --}}
<aside class="grid w-full gap-4 lg:w-80 lg:shrink-0">
<div class="qms-display__stat rounded-2xl p-6 text-center">
<div class="qms-display__stat rounded-2xl bg-slate-900/80 p-6 text-center ring-1 ring-white/10">
<p class="text-xs font-semibold uppercase tracking-[0.2em] text-slate-400">Waiting</p>
<p class="mt-2 text-5xl font-bold tabular-nums text-white" x-text="payload?.waiting_count ?? '—'"></p>
<p class="mt-2 text-5xl font-bold tabular-nums text-slate-50" x-text="formatCount(payload?.waiting_count)">{{ $p['waiting_count'] ?? 0 }}</p>
<p class="mt-1 text-sm text-slate-500">customers in queue</p>
</div>
<div class="qms-display__stat rounded-2xl p-6 text-center">
<div class="qms-display__stat rounded-2xl bg-slate-900/80 p-6 text-center ring-1 ring-white/10">
<p class="text-xs font-semibold uppercase tracking-[0.2em] text-slate-400">Estimated wait</p>
<p class="mt-2 text-5xl font-bold tabular-nums text-white">
<span x-text="payload?.estimated_wait_minutes ? payload.estimated_wait_minutes : '—'"></span>
<p class="mt-2 text-5xl font-bold tabular-nums text-slate-50">
<span x-text="formatWait(payload?.estimated_wait_minutes)">{{ $p['estimated_wait_minutes'] ?? '—' }}</span>
<span class="text-2xl font-medium text-slate-400" x-show="payload?.estimated_wait_minutes">min</span>
</p>
<p class="mt-1 text-sm text-slate-500">based on today’s average</p>
</div>
<div class="qms-display__stat rounded-2xl p-6">
<div class="qms-display__stat rounded-2xl bg-slate-900/80 p-6 ring-1 ring-white/10">
<p class="text-xs font-semibold uppercase tracking-[0.2em] text-slate-400">Service queues</p>
<ul class="mt-4 space-y-2">
<template x-for="q in (payload?.queues ?? [])" :key="q.name">
<template x-for="q in (payload?.queues ?? [])" :key="q.name + (q.prefix ?? '')">
<li class="flex items-center justify-between gap-3 rounded-xl bg-white/5 px-3 py-2.5 ring-1 ring-white/5">
<span class="truncate font-medium text-white" x-text="q.name"></span>
<span class="truncate font-medium text-slate-100" x-text="q.name"></span>
<span
class="shrink-0 rounded-full px-2 py-0.5 text-xs font-semibold"
:class="q.is_paused ? 'bg-amber-500/15 text-amber-300' : 'bg-emerald-500/15 text-emerald-300'"
@@ -140,7 +153,7 @@
</main>
{{-- Footer --}}
<footer class="border-t border-white/10 bg-slate-950/60 px-6 py-4 lg:px-10">
<footer class="border-t border-white/10 bg-slate-950/80 px-6 py-4 lg:px-10">
<div class="mx-auto flex max-w-7xl flex-wrap items-center justify-between gap-3 text-xs text-slate-500">
<p>Powered by Ladill Queue</p>
<p x-show="payload?.updated_at" x-text="payload?.updated_at ? 'Updated ' + new Date(payload.updated_at).toLocaleTimeString() : ''"></p>