generated from bisco/codex-bootstrap
636 lines
19 KiB
TypeScript
636 lines
19 KiB
TypeScript
import { DatePipe } from '@angular/common';
|
|
import { HttpErrorResponse } from '@angular/common/http';
|
|
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 { ActivatedRoute, RouterLink } from '@angular/router';
|
|
import { MatButtonModule } from '@angular/material/button';
|
|
import { MatCardModule } from '@angular/material/card';
|
|
import { MatFormFieldModule } from '@angular/material/form-field';
|
|
import { MatInputModule } from '@angular/material/input';
|
|
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
|
|
|
import {
|
|
CheckInConfirmResponse,
|
|
CheckInPreviewResponse,
|
|
ShowsApiService,
|
|
} from '../services/shows-api.service';
|
|
|
|
type UiState =
|
|
| 'idle'
|
|
| 'preview_loading'
|
|
| 'preview_success'
|
|
| 'confirm_loading'
|
|
| 'confirm_success'
|
|
| 'invalid_token'
|
|
| 'pending_reservation'
|
|
| 'already_checked_in'
|
|
| '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: [
|
|
DatePipe,
|
|
ReactiveFormsModule,
|
|
RouterLink,
|
|
MatButtonModule,
|
|
MatCardModule,
|
|
MatFormFieldModule,
|
|
MatInputModule,
|
|
MatProgressSpinnerModule,
|
|
],
|
|
template: `
|
|
<section class="page">
|
|
<header class="page-header">
|
|
<p class="eyebrow">Accoglienza staff</p>
|
|
<h1>Controllo accessi</h1>
|
|
<p class="supporting">Usa questa pagina per verificare rapidamente il QR code o il token della prenotazione e registrare l'ingresso senza incertezze.</p>
|
|
</header>
|
|
|
|
<div class="checkin-grid">
|
|
<mat-card class="side-card">
|
|
<mat-card-content>
|
|
<p class="side-label">Ingresso sala</p>
|
|
<h2>Uno strumento pensato per accogliere bene, anche nei momenti piu' intensi.</h2>
|
|
<ul class="side-list">
|
|
<li>Inquadra il QR code se la fotocamera del dispositivo e' disponibile.</li>
|
|
<li>Inserisci il token a mano se la scansione non e' praticabile.</li>
|
|
<li>Conferma l'ingresso solo quando i dati a schermo corrispondono alla prenotazione del pubblico.</li>
|
|
</ul>
|
|
</mat-card-content>
|
|
</mat-card>
|
|
|
|
<mat-card class="content-card">
|
|
<mat-card-content>
|
|
<section class="scanner-panel">
|
|
<div class="scanner-copy">
|
|
<h2>Scansione con fotocamera</h2>
|
|
<p>Nei browser compatibili il token viene letto automaticamente dal QR code, anche quando contiene l'intero link di check-in.</p>
|
|
</div>
|
|
|
|
<div class="actions scanner-actions">
|
|
@if (cameraState() === 'active') {
|
|
<button mat-stroked-button type="button" (click)="stopScanner()">Ferma fotocamera</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>Avvio fotocamera...</span>
|
|
} @else {
|
|
<span>Usa fotocamera</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>Token opaco</mat-label>
|
|
<input matInput formControlName="token" autocomplete="off" />
|
|
@if (tokenForm.controls.token.touched && tokenForm.controls.token.hasError('required')) {
|
|
<mat-error>Il token e' obbligatorio.</mat-error>
|
|
}
|
|
</mat-form-field>
|
|
|
|
<div class="actions">
|
|
<button mat-flat-button type="submit" [disabled]="isBusy()">
|
|
@if (state() === 'preview_loading') {
|
|
<mat-progress-spinner mode="indeterminate" diameter="18"></mat-progress-spinner>
|
|
<span>Verifica in corso...</span>
|
|
} @else {
|
|
<span>Controlla prenotazione</span>
|
|
}
|
|
</button>
|
|
<a mat-button routerLink="/">Inizio</a>
|
|
<a mat-button routerLink="/shows">Spettacoli</a>
|
|
</div>
|
|
</form>
|
|
|
|
@if (previewData() && shouldShowPreview()) {
|
|
<section class="preview-panel" aria-live="polite">
|
|
<h2>Dati per l'ingresso</h2>
|
|
<dl>
|
|
<div><dt>Spettacolo</dt><dd>{{ previewData()!.show_title }}</dd></div>
|
|
<div><dt>Spazio</dt><dd>{{ previewData()!.venue_name }}</dd></div>
|
|
<div><dt>Inizio</dt><dd>{{ previewData()!.starts_at | date: 'EEEE d MMMM, HH:mm' }}</dd></div>
|
|
<div><dt>Posti</dt><dd>{{ previewData()!.party_size }}</dd></div>
|
|
<div><dt>Prenotazione</dt><dd>#{{ previewData()!.reservation_id }}</dd></div>
|
|
</dl>
|
|
<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>Registrazione in corso...</span>
|
|
} @else if (state() === 'confirm_success') {
|
|
<span>Ingresso registrato</span>
|
|
} @else {
|
|
<span>Registra ingresso</span>
|
|
}
|
|
</button>
|
|
</section>
|
|
}
|
|
|
|
@if (state() === 'confirm_success' && confirmData()) {
|
|
<p class="success-message" aria-live="polite">
|
|
Ingresso registrato alle {{ confirmData()!.checked_in_at | date: 'HH:mm' }}.
|
|
</p>
|
|
}
|
|
|
|
@if (state() === 'invalid_token') {
|
|
<p class="error-message" aria-live="assertive">Il token inserito non e' valido.</p>
|
|
}
|
|
@if (state() === 'pending_reservation') {
|
|
<p class="error-message" aria-live="assertive">La prenotazione non e' ancora stata confermata dal pubblico.</p>
|
|
}
|
|
@if (state() === 'already_checked_in') {
|
|
<p class="error-message" aria-live="assertive">Questa prenotazione risulta gia' registrata in ingresso.</p>
|
|
}
|
|
@if (state() === 'unauthorized') {
|
|
<p class="error-message" aria-live="assertive">Non sei autorizzato. Accedi a <code>/admin</code> con un account staff, lascia ricaricare la pagina con quella sessione e poi riprova.</p>
|
|
}
|
|
@if (state() === 'error') {
|
|
<p class="error-message" aria-live="assertive">Non siamo riusciti a completare la verifica. Riprova tra poco.</p>
|
|
}
|
|
</mat-card-content>
|
|
</mat-card>
|
|
</div>
|
|
</section>
|
|
`,
|
|
styles: [`
|
|
.page-header {
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.supporting {
|
|
max-width: 50ch;
|
|
}
|
|
|
|
.checkin-grid {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
|
|
gap: 20px;
|
|
align-items: start;
|
|
}
|
|
|
|
.side-card,
|
|
.content-card {
|
|
border-radius: var(--azionelab-radius-lg);
|
|
border: 1px solid var(--azionelab-border);
|
|
background: var(--azionelab-surface-strong);
|
|
box-shadow: var(--azionelab-shadow);
|
|
}
|
|
|
|
.side-card {
|
|
background:
|
|
linear-gradient(180deg, rgba(255, 252, 248, 0.98), rgba(247, 238, 227, 0.94));
|
|
}
|
|
|
|
.side-label {
|
|
margin: 0 0 10px;
|
|
font-size: 0.78rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
color: var(--azionelab-accent);
|
|
}
|
|
|
|
.side-card h2 {
|
|
margin: 0;
|
|
}
|
|
|
|
.side-list {
|
|
display: grid;
|
|
gap: 12px;
|
|
margin: 18px 0 0;
|
|
padding-left: 18px;
|
|
color: var(--azionelab-ink-soft);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.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%;
|
|
}
|
|
|
|
.actions {
|
|
display: flex;
|
|
gap: 10px;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.scanner-actions {
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
button[mat-flat-button],
|
|
button[mat-stroked-button] {
|
|
min-width: 150px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.preview-panel {
|
|
margin-top: 18px;
|
|
border-top: 1px solid var(--azionelab-border);
|
|
padding-top: 16px;
|
|
}
|
|
|
|
.preview-panel h2 {
|
|
margin: 0 0 12px;
|
|
font-size: 1.15rem;
|
|
}
|
|
|
|
.preview-panel dl {
|
|
display: grid;
|
|
gap: 10px;
|
|
margin: 0 0 16px;
|
|
}
|
|
|
|
.preview-panel dt {
|
|
font-size: 0.8rem;
|
|
text-transform: uppercase;
|
|
color: var(--azionelab-muted);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.preview-panel dd {
|
|
margin: 2px 0 0;
|
|
}
|
|
|
|
.success-message {
|
|
margin: 16px 0 0;
|
|
color: #2e7d32;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.error-message {
|
|
margin: 16px 0 0;
|
|
color: #b3261e;
|
|
font-weight: 500;
|
|
}
|
|
|
|
@media (max-width: 760px) {
|
|
.checkin-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
`],
|
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
})
|
|
export class CheckInPlaceholderPageComponent {
|
|
private readonly destroyRef = inject(DestroyRef);
|
|
private readonly formBuilder = inject(FormBuilder);
|
|
private readonly route = inject(ActivatedRoute);
|
|
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]],
|
|
});
|
|
|
|
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
|
|
? 'Apri la fotocamera per scansionare un QR code, oppure continua con l\'inserimento manuale del token.'
|
|
: 'La scansione con fotocamera non e\' disponibile in questo browser. Puoi comunque inserire il token manualmente.',
|
|
);
|
|
|
|
constructor() {
|
|
this.destroyRef.onDestroy(() => this.stopScanner());
|
|
const tokenFromQuery = this.route.snapshot.queryParamMap.get('token')?.trim() ?? '';
|
|
if (tokenFromQuery) {
|
|
this.tokenForm.controls.token.setValue(tokenFromQuery);
|
|
this.tokenForm.controls.token.markAsTouched();
|
|
this.preview();
|
|
}
|
|
}
|
|
|
|
protected preview(): void {
|
|
if (this.tokenForm.invalid) {
|
|
this.tokenForm.markAllAsTouched();
|
|
return;
|
|
}
|
|
|
|
const token = this.tokenForm.controls.token.value.trim();
|
|
if (!token) {
|
|
this.tokenForm.controls.token.setErrors({ required: true });
|
|
return;
|
|
}
|
|
|
|
this.state.set('preview_loading');
|
|
this.previewData.set(null);
|
|
this.confirmData.set(null);
|
|
|
|
this.showsApi.previewCheckIn(token)
|
|
.pipe(takeUntilDestroyed(this.destroyRef))
|
|
.subscribe({
|
|
next: (response) => {
|
|
this.previewData.set(response);
|
|
this.state.set('preview_success');
|
|
},
|
|
error: (error: HttpErrorResponse) => this.setErrorState(error),
|
|
});
|
|
}
|
|
|
|
protected confirm(): void {
|
|
const token = this.tokenForm.controls.token.value.trim();
|
|
if (!token) {
|
|
this.state.set('invalid_token');
|
|
return;
|
|
}
|
|
|
|
this.state.set('confirm_loading');
|
|
|
|
this.showsApi.confirmCheckIn(token)
|
|
.pipe(takeUntilDestroyed(this.destroyRef))
|
|
.subscribe({
|
|
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('La scansione con fotocamera non e\' disponibile in questo browser. Puoi comunque inserire il token manualmente.');
|
|
return;
|
|
}
|
|
|
|
this.stopScanner();
|
|
this.cameraState.set('starting');
|
|
this.cameraMessage.set('Avvio della fotocamera in corso...');
|
|
|
|
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('Inquadra il QR code del visitatore.');
|
|
this.scheduleScan();
|
|
} catch (error) {
|
|
this.stopScanner();
|
|
|
|
if (error instanceof DOMException && (error.name === 'NotAllowedError' || error.name === 'SecurityError')) {
|
|
this.cameraState.set('denied');
|
|
this.cameraMessage.set('L\'accesso alla fotocamera e\' stato negato. Puoi continuare con l\'inserimento manuale del token.');
|
|
return;
|
|
}
|
|
|
|
this.cameraState.set('error');
|
|
this.cameraMessage.set('Non siamo riusciti ad avviare la fotocamera. Puoi continuare con l\'inserimento manuale del token.');
|
|
}
|
|
}
|
|
|
|
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('Fotocamera fermata. Puoi riavviare la scansione oppure continuare con l\'inserimento manuale del token.');
|
|
}
|
|
}
|
|
|
|
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('La scansione non e\' disponibile in questo momento. Inserisci il token manualmente.');
|
|
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 acquisito. Verifica del token in corso...');
|
|
this.stopScanner();
|
|
this.preview();
|
|
return;
|
|
}
|
|
} catch {
|
|
this.cameraState.set('error');
|
|
this.cameraMessage.set('La scansione non e\' andata a buon fine. Inserisci il token manualmente.');
|
|
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');
|
|
return;
|
|
}
|
|
|
|
if (error.status === 404) {
|
|
this.state.set('invalid_token');
|
|
return;
|
|
}
|
|
|
|
if (error.status === 409 && error.error?.status === 'reservation_not_confirmed') {
|
|
this.state.set('pending_reservation');
|
|
return;
|
|
}
|
|
|
|
if (error.status === 409 && error.error?.status === 'already_checked_in') {
|
|
this.state.set('already_checked_in');
|
|
return;
|
|
}
|
|
|
|
this.state.set('error');
|
|
}
|
|
}
|