isaaccladandCursor
af764f77fb
Deploy Ladill Queue / deploy (push) Successful in 28s
Add tap-to-enable speech overlay, stop marking announcements played on TTS errors, pick voices by locale, and scope pending announcements to the display's queues. Co-authored-by: Cursor <cursoragent@cursor.com>
65 lines
3.3 KiB
PHP
65 lines
3.3 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en" class="h-full bg-slate-950 text-white">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="csrf-token" content="{{ csrf_token() }}">
|
|
<title>{{ $screen->name }} · Queue Display</title>
|
|
@vite(['resources/css/app.css', 'resources/js/app.js'])
|
|
</head>
|
|
<body class="min-h-screen p-8" x-data="displayBoard({ dataUrl: '{{ $dataUrl }}', playedUrl: '{{ $playedUrl }}', pollMs: {{ $pollMs }}, csrf: '{{ csrf_token() }}' })" x-init="init()">
|
|
<div
|
|
x-cloak
|
|
x-show="!speechReady"
|
|
@click="unlockSpeech()"
|
|
@keydown.enter.prevent="unlockSpeech()"
|
|
tabindex="0"
|
|
class="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"
|
|
>
|
|
<div>
|
|
<p class="text-3xl font-semibold text-white">Tap to enable voice announcements</p>
|
|
<p class="mt-3 text-slate-400">Browsers require one tap before the display can speak ticket calls.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mx-auto max-w-6xl">
|
|
<div class="mb-8 flex items-center justify-between">
|
|
<h1 class="text-4xl font-bold" x-text="payload?.screen?.name ?? '{{ $screen->name }}'"></h1>
|
|
<p class="text-slate-400" x-text="payload?.updated_at ? 'Updated ' + new Date(payload.updated_at).toLocaleTimeString() : ''"></p>
|
|
</div>
|
|
|
|
<div class="mb-10">
|
|
<h2 class="mb-4 text-sm font-semibold uppercase tracking-widest text-indigo-300">Now serving</h2>
|
|
<div class="grid gap-4 md:grid-cols-2">
|
|
<template x-for="item in (payload?.now_serving ?? [])" :key="item.ticket_number + item.counter">
|
|
<div class="rounded-2xl bg-indigo-600 p-8 text-center shadow-lg">
|
|
<p class="text-5xl font-bold" x-text="item.ticket_number"></p>
|
|
<p class="mt-2 text-xl" x-text="item.queue_name"></p>
|
|
<p class="mt-4 text-2xl font-semibold" x-text="'→ ' + (item.counter ?? '')"></p>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid gap-6 md:grid-cols-3">
|
|
<div class="rounded-2xl border border-slate-700 bg-slate-900 p-6 text-center">
|
|
<p class="text-sm uppercase text-slate-400">Waiting</p>
|
|
<p class="mt-2 text-5xl font-bold" x-text="payload?.waiting_count ?? '—'"></p>
|
|
</div>
|
|
<div class="rounded-2xl border border-slate-700 bg-slate-900 p-6 text-center">
|
|
<p class="text-sm uppercase text-slate-400">Est. wait</p>
|
|
<p class="mt-2 text-5xl font-bold" x-text="payload?.estimated_wait_minutes ? payload.estimated_wait_minutes + ' min' : '—'"></p>
|
|
</div>
|
|
<div class="rounded-2xl border border-slate-700 bg-slate-900 p-6">
|
|
<p class="mb-3 text-sm uppercase text-slate-400">Queues</p>
|
|
<template x-for="q in (payload?.queues ?? [])" :key="q.name">
|
|
<p class="text-lg" x-text="q.name + (q.is_paused ? ' (paused)' : '')"></p>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|