bisco/azionelab
1
0
Fork 0
generated from bisco/codex-bootstrap
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(operations): improve reservation and check-in flows

Browse Source
This commit is contained in:
bisco
2026-04-29 19:23:42 +02:00
parent 6c5b5d99bc
commit 5cad1871e7
10 changed files with 627 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

315
frontend/src/app/pages/check-in-placeholder-page.component.ts
View File

@@ -1,6 +1,14 @@
import { DatePipe } from '@angular/common';
import { HttpErrorResponse } from '@angular/common/http';
import { ChangeDetectionStrategy, Component, DestroyRef, inject, signal } from '@angular/core';
import {
ChangeDetectionStrategy,
Component,
DestroyRef,
ElementRef,
ViewChild,
inject,
signal,
} from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
import { RouterLink } from '@angular/router';
@@ -10,7 +18,11 @@ import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { CheckInPreviewResponse, ShowsApiService } from '../services/shows-api.service';
import {
CheckInConfirmResponse,
CheckInPreviewResponse,
ShowsApiService,
} from '../services/shows-api.service';
type UiState =
| 'idle'
@@ -24,6 +36,18 @@ type UiState =
| 'unauthorized'
| 'error';
type CameraState = 'ready' | 'starting' | 'active' | 'unsupported' | 'denied' | 'error';
type DetectedBarcode = {
rawValue?: string;
};
type BarcodeDetectorInstance = {
detect(source: HTMLCanvasElement): Promise<DetectedBarcode[]>;
};
type BarcodeDetectorConstructor = new (options?: { formats?: string[] }) => BarcodeDetectorInstance;
@Component({
standalone: true,
imports: [
@@ -41,11 +65,49 @@ type UiState =
<header class="page-header">
<p class="eyebrow">Staff check-in</p>
<h1>Token validation</h1>
<p class="supporting">Enter an opaque token to preview admission data and confirm entrance.</p>
<p class="supporting">Enter a token manually or scan a QR code to preview admission data and confirm entrance.</p>
</header>
<mat-card class="content-card">
<mat-card-content>
<section class="scanner-panel">
<div class="scanner-copy">
<h2>Camera scan</h2>
<p>Optional on supported browsers. If the QR contains a full check-in URL, the token is extracted automatically.</p>
</div>
<div class="actions scanner-actions">
@if (cameraState() === 'active') {
<button mat-stroked-button type="button" (click)="stopScanner()">Stop camera</button>
} @else {
<button
mat-stroked-button
type="button"
(click)="startScanner()"
[disabled]="cameraState() === 'unsupported' || cameraState() === 'starting'"
>
@if (cameraState() === 'starting') {
<mat-progress-spinner mode="indeterminate" diameter="18"></mat-progress-spinner>
<span>Starting camera...</span>
} @else {
<span>Use camera</span>
}
</button>
}
</div>
@if (cameraState() === 'active') {
<div class="camera-frame">
<video #scannerVideo autoplay playsinline muted></video>
<canvas #scannerCanvas class="scanner-canvas" aria-hidden="true"></canvas>
</div>
}
@if (cameraMessage()) {
<p class="camera-message">{{ cameraMessage() }}</p>
}
</section>
<form [formGroup]="tokenForm" (ngSubmit)="preview()" novalidate>
<mat-form-field appearance="outline" class="full-width">
<mat-label>Opaque token</mat-label>
@@ -69,19 +131,22 @@ type UiState =
</div>
</form>
@if (state() === 'preview_success' && previewData()) {
@if (previewData() && shouldShowPreview()) {
<section class="preview-panel" aria-live="polite">
<h2>Admission preview</h2>
<dl>
<div><dt>Show</dt><dd>{{ previewData()!.show_title }}</dd></div>
<div><dt>Venue</dt><dd>{{ previewData()!.venue_name }}</dd></div>
<div><dt>Starts at</dt><dd>{{ previewData()!.starts_at | date: 'EEEE d MMMM, HH:mm' }}</dd></div>
<div><dt>Party size</dt><dd>{{ previewData()!.party_size }}</dd></div>
<div><dt>Reservation</dt><dd>#{{ previewData()!.reservation_id }}</dd></div>
</dl>
<button mat-flat-button type="button" (click)="confirm()" [disabled]="isBusy()">
<button mat-flat-button type="button" (click)="confirm()" [disabled]="isBusy() || state() === 'confirm_success'">
@if (state() === 'confirm_loading') {
<mat-progress-spinner mode="indeterminate" diameter="18"></mat-progress-spinner>
<span>Confirming...</span>
} @else if (state() === 'confirm_success') {
<span>Checked in</span>
} @else {
<span>Confirm check-in</span>
}
@@ -89,8 +154,10 @@ type UiState =
</section>
}
@if (state() === 'confirm_success') {
<p class="success-message" aria-live="polite">Check-in confirmed successfully.</p>
@if (state() === 'confirm_success' && confirmData()) {
<p class="success-message" aria-live="polite">
Check-in confirmed at {{ confirmData()!.checked_in_at | date: 'HH:mm' }}.
</p>
}
@if (state() === 'invalid_token') {
@@ -148,6 +215,48 @@ type UiState =
box-shadow: var(--azionelab-shadow);
}
.scanner-panel {
display: grid;
gap: 14px;
margin-bottom: 18px;
padding-bottom: 18px;
border-bottom: 1px solid var(--azionelab-border);
}
.scanner-copy h2 {
margin: 0 0 6px;
font-size: 1.15rem;
}
.scanner-copy p,
.camera-message {
margin: 0;
color: var(--azionelab-muted);
line-height: 1.5;
}
.camera-message {
font-size: 0.95rem;
}
.camera-frame {
overflow: hidden;
border-radius: 8px;
border: 1px solid var(--azionelab-border);
background: #151515;
}
.camera-frame video {
display: block;
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
}
.scanner-canvas {
display: none;
}
.full-width {
width: 100%;
}
@@ -159,7 +268,12 @@ type UiState =
flex-wrap: wrap;
}
button[mat-flat-button] {
.scanner-actions {
justify-content: flex-start;
}
button[mat-flat-button],
button[mat-stroked-button] {
min-width: 150px;
display: inline-flex;
align-items: center;
@@ -213,6 +327,20 @@ export class CheckInPlaceholderPageComponent {
private readonly destroyRef = inject(DestroyRef);
private readonly formBuilder = inject(FormBuilder);
private readonly showsApi = inject(ShowsApiService);
private readonly barcodeDetectorCtor = (globalThis as { BarcodeDetector?: BarcodeDetectorConstructor }).BarcodeDetector;
private readonly scannerSupported =
!!this.barcodeDetectorCtor &&
typeof navigator !== 'undefined' &&
!!navigator.mediaDevices &&
typeof navigator.mediaDevices.getUserMedia === 'function';
private detector: BarcodeDetectorInstance | null = null;
private scannerStream: MediaStream | null = null;
private scanFrameId: number | null = null;
private scanInFlight = false;
@ViewChild('scannerVideo') private scannerVideo?: ElementRef<HTMLVideoElement>;
@ViewChild('scannerCanvas') private scannerCanvas?: ElementRef<HTMLCanvasElement>;
protected readonly tokenForm = this.formBuilder.nonNullable.group({
token: ['', [Validators.required]],
@@ -220,6 +348,17 @@ export class CheckInPlaceholderPageComponent {
protected readonly state = signal<UiState>('idle');
protected readonly previewData = signal<CheckInPreviewResponse | null>(null);
protected readonly confirmData = signal<CheckInConfirmResponse | null>(null);
protected readonly cameraState = signal<CameraState>(this.scannerSupported ? 'ready' : 'unsupported');
protected readonly cameraMessage = signal(
this.scannerSupported
? 'Open the camera to scan a QR code, or keep using manual token entry.'
: 'Camera scanning is not available in this browser. Manual token entry still works.',
);
constructor() {
this.destroyRef.onDestroy(() => this.stopScanner());
}
protected preview(): void {
if (this.tokenForm.invalid) {
@@ -235,6 +374,7 @@ export class CheckInPlaceholderPageComponent {
this.state.set('preview_loading');
this.previewData.set(null);
this.confirmData.set(null);
this.showsApi.previewCheckIn(token)
.pipe(takeUntilDestroyed(this.destroyRef))
@@ -259,17 +399,174 @@ export class CheckInPlaceholderPageComponent {
this.showsApi.confirmCheckIn(token)
.pipe(takeUntilDestroyed(this.destroyRef))
.subscribe({
next: () => {
next: (response) => {
this.confirmData.set(response);
this.state.set('confirm_success');
},
error: (error: HttpErrorResponse) => this.setErrorState(error),
});
}
protected async startScanner(): Promise<void> {
if (!this.scannerSupported || !this.barcodeDetectorCtor) {
this.cameraState.set('unsupported');
this.cameraMessage.set('Camera scanning is not available in this browser. Manual token entry still works.');
return;
}
this.stopScanner();
this.cameraState.set('starting');
this.cameraMessage.set('Starting camera...');
try {
this.scannerStream = await navigator.mediaDevices.getUserMedia({
video: { facingMode: { ideal: 'environment' } },
audio: false,
});
this.detector = new this.barcodeDetectorCtor({ formats: ['qr_code'] });
this.cameraState.set('active');
this.cameraMessage.set('Point the camera at the visitor QR code.');
this.scheduleScan();
} catch (error) {
this.stopScanner();
if (error instanceof DOMException && (error.name === 'NotAllowedError' || error.name === 'SecurityError')) {
this.cameraState.set('denied');
this.cameraMessage.set('Camera access was denied. You can continue with manual token entry.');
return;
}
this.cameraState.set('error');
this.cameraMessage.set('Could not start the camera. You can continue with manual token entry.');
}
}
protected stopScanner(): void {
if (this.scanFrameId !== null) {
cancelAnimationFrame(this.scanFrameId);
this.scanFrameId = null;
}
if (this.scannerStream) {
for (const track of this.scannerStream.getTracks()) {
track.stop();
}
this.scannerStream = null;
}
if (this.scannerVideo?.nativeElement) {
this.scannerVideo.nativeElement.pause();
this.scannerVideo.nativeElement.srcObject = null;
}
this.detector = null;
this.scanInFlight = false;
if (this.scannerSupported && this.cameraState() === 'active') {
this.cameraState.set('ready');
this.cameraMessage.set('Camera stopped. You can scan again or continue with manual token entry.');
}
}
protected isBusy(): boolean {
return this.state() === 'preview_loading' || this.state() === 'confirm_loading';
}
protected shouldShowPreview(): boolean {
return (
this.state() === 'preview_success'
|| this.state() === 'confirm_loading'
|| this.state() === 'confirm_success'
);
}
private scheduleScan(): void {
this.scanFrameId = requestAnimationFrame(() => {
void this.scanFrame();
});
}
private async scanFrame(): Promise<void> {
if (this.cameraState() !== 'active' || !this.detector) {
return;
}
const video = this.scannerVideo?.nativeElement;
const canvas = this.scannerCanvas?.nativeElement;
if (!video || !canvas || this.scanInFlight) {
this.scheduleScan();
return;
}
if (!this.scannerStream && !video.srcObject) {
this.scheduleScan();
return;
}
if (video.srcObject !== this.scannerStream) {
video.srcObject = this.scannerStream;
await video.play();
}
if (video.readyState < HTMLMediaElement.HAVE_CURRENT_DATA || video.videoWidth === 0) {
this.scheduleScan();
return;
}
const context = canvas.getContext('2d');
if (!context) {
this.cameraState.set('error');
this.cameraMessage.set('Camera scan is not available right now. Please enter the token manually.');
this.stopScanner();
return;
}
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
context.drawImage(video, 0, 0, canvas.width, canvas.height);
this.scanInFlight = true;
try {
const barcodes = await this.detector.detect(canvas);
const rawValue = barcodes[0]?.rawValue ?? '';
const token = this.extractToken(rawValue);
if (token) {
this.tokenForm.controls.token.setValue(token);
this.tokenForm.controls.token.markAsTouched();
this.cameraMessage.set('QR captured. Validating token...');
this.stopScanner();
this.preview();
return;
}
} catch {
this.cameraState.set('error');
this.cameraMessage.set('Camera scan failed. Please enter the token manually.');
this.stopScanner();
return;
} finally {
this.scanInFlight = false;
}
this.scheduleScan();
}
private extractToken(rawValue: string): string {
const trimmedValue = rawValue.trim();
if (!trimmedValue) {
return '';
}
try {
const parsedUrl = new URL(trimmedValue);
return parsedUrl.searchParams.get('token')?.trim() ?? trimmedValue;
} catch {
return trimmedValue;
}
}
private setErrorState(error: HttpErrorResponse): void {
if (error.status === 401 || error.status === 403) {
this.state.set('unauthorized');