diff --git a/src/app/theater-overlay/theater-overlay.component.html b/src/app/theater-overlay/theater-overlay.component.html
index 78bd5b8..d7599bd 100644
--- a/src/app/theater-overlay/theater-overlay.component.html
+++ b/src/app/theater-overlay/theater-overlay.component.html
@@ -4,7 +4,7 @@
- @if (!performance && (loading.loading$ | async)){
+ @if (!performance() && (loading.loading$ | async)){
-
+
diff --git a/src/app/theater-overlay/theater-overlay.component.ts b/src/app/theater-overlay/theater-overlay.component.ts
index f588044..d85cb6d 100644
--- a/src/app/theater-overlay/theater-overlay.component.ts
+++ b/src/app/theater-overlay/theater-overlay.component.ts
@@ -1,14 +1,16 @@
-import {Component, DestroyRef, inject, OnDestroy, OnInit, signal} from '@angular/core';
-import {HttpService} from '../http.service';
-import {LoadingService} from '../loading.service';
-import {catchError, filter, forkJoin, interval, of, startWith, switchMap, tap} from 'rxjs';
-import {Sitzkategorie, Sitzplatz, Vorstellung} from '@infinimotion/model-frontend';
-import {TheaterSeatState} from '../model/theater-seat-state.model';
-import {ActivatedRoute} from '@angular/router';
-import {SelectedSeatsService} from '../selected-seats.service';
+import { Component, DestroyRef, inject, OnDestroy, OnInit, signal } from '@angular/core';
+import { HttpService } from '../http.service';
+import { LoadingService } from '../loading.service';
+import { catchError, filter, finalize, forkJoin, from, fromEvent, interval, merge, of, startWith, switchMap, tap } from 'rxjs';
+import { Bestellung, Eintrittskarte, Sitzkategorie, Sitzplatz, Vorstellung } from '@infinimotion/model-frontend';
+import { TheaterSeatState } from '../model/theater-seat-state.model';
+import { ActivatedRoute, Router } from '@angular/router';
+import { SelectedSeatsService } from '../selected-seats.service';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { MatSnackBar, MatSnackBarRef, TextOnlySnackBar } from '@angular/material/snack-bar';
-const POLLING_INTERVAL_MS = 5000;
+const POLLING_INTERVAL_MS = 5 * 1000;
+const INACTIVITY_TIMEOUT_MS = 2 * 60 * 1000;
@Component({
selector: 'app-theater-overlay',
@@ -19,79 +21,294 @@ const POLLING_INTERVAL_MS = 5000;
export class TheaterOverlayComponent implements OnInit, OnDestroy {
private http = inject(HttpService);
private route = inject(ActivatedRoute);
+ private router = inject(Router);
private destroyRef = inject(DestroyRef);
private selectedSeatService = inject(SelectedSeatsService);
readonly loading = inject(LoadingService);
- showId!: number;
- orderId?: string;
- seatsPerRow = signal<{ seat: Sitzplatz | null, state: TheaterSeatState | null }[][]>([]);
- performance: Vorstellung | undefined;
+ showId?: number | null;
+ orderId?: number;
+ orderCode?: string | null;
+ isResuming = false;
+ resumeWithCancel = false;
+ tickets: Eintrittskarte[] | undefined;
+ order: Bestellung | undefined;
+ blockedSeats: Sitzplatz[] | undefined;
seatCategories: Sitzkategorie[] = [];
+ snackBarRef: MatSnackBarRef
| undefined
+
+ performance = signal(undefined);
+ seatsPerRow = signal<{ seat: Sitzplatz | null, state: TheaterSeatState | null }[][]>([]);
private isPollingEnabled = signal(true);
private isInitialLoad = signal(true);
+ private lastActivityTimestamp = signal(Date.now());
+ private inactivityTimeoutReached = signal(false);
+ private isRequestInProgress = signal(false);
+ private isStepTwoOrHigher = signal(false);
+
+ constructor(private snackBar: MatSnackBar) {}
ngOnInit() {
this.showId = Number(this.route.snapshot.paramMap.get('performanceId')!);
- this.orderId = this.route.snapshot.queryParams['paramName'];
- this.selectedSeatService.clearSelection();
- this.selectedSeatService.setSeatSelectable(true);
+ this.orderCode = this.route.snapshot.paramMap.get('orderId');
- this.startAutoRefresh();
+ if (this.orderCode) {
+ // Checkout fortsetzen
+ this.isResuming = true;
+
+ this.loadExistingOrder(this.orderCode);
+
+ this.route.queryParams.subscribe(params => {
+ if (params['action'] === 'cancel') {
+ this.resumeWithCancel = true;
+ }
+ });
+ } else if (this.showId) {
+ // Neuer Checkout
+ this.isResuming = false;
+
+ this.selectedSeatService.clearSelection();
+ this.selectedSeatService.setSeatSelectable(true);
+
+ this.setupActivityTracking();
+ this.startAutoRefresh();
+ this.startInactivityCheck();
+
+ } else {
+ // Fallback
+ console.error('Ungültige Checkout-Route');
+ this.router.navigate(['/performances']);
+ }
}
ngOnDestroy() {
this.isPollingEnabled.set(false);
+ console.info('[TheaterOverlay] Stopped auto-refresh polling');
+
+ if(this.snackBarRef) {
+ this.snackBar.dismiss();
+ }
+ }
+
+ private setupActivityTracking() {
+ console.info('[TheaterOverlay] Setting up activity tracking');
+ const events$ = merge(
+ fromEvent(document, 'mousemove'),
+ fromEvent(document, 'mousedown'),
+ fromEvent(document, 'keypress'),
+ fromEvent(document, 'scroll'),
+ fromEvent(document, 'touchstart')
+ );
+
+ events$.pipe(
+ takeUntilDestroyed(this.destroyRef)
+ ).subscribe(() => {
+ this.lastActivityTimestamp.set(Date.now());
+ });
+
+ fromEvent(document, 'visibilitychange').pipe(
+ takeUntilDestroyed(this.destroyRef)
+ ).subscribe(() => {
+ if (!this.isStepTwoOrHigher()) {
+ if (document.hidden) {
+ console.info('[TheaterOverlay] Tab hidden - pausing polling');
+ this.pausePolling();
+ } else {
+ // Nur in Schritt 1 reaktivieren
+ if (!this.inactivityTimeoutReached()) {
+ console.info('[TheaterOverlay] Tab visible - resumed polling');
+ this.isPollingEnabled.set(true);
+ this.refreshSeats();
+ }
+ }
+ }
+ });
+ }
+
+ private startInactivityCheck() {
+ interval(10000).pipe(
+ filter(() => this.isPollingEnabled()),
+ filter(() => !this.isStepTwoOrHigher()), // Kein Timeout ab Schritt 2
+ takeUntilDestroyed(this.destroyRef)
+ ).subscribe(() => {
+ const inactiveDuration = Date.now() - this.lastActivityTimestamp();
+
+ if (inactiveDuration >= INACTIVITY_TIMEOUT_MS && !this.inactivityTimeoutReached()) {
+ console.info('[TheaterOverlay] Inactivity timeout reached');
+ this.handleInactivityTimeout();
+ }
+ });
+ }
+
+ private handleInactivityTimeout() {
+ this.inactivityTimeoutReached.set(true);
+ this.pausePolling();
+ this.showInactivitySnackBar();
+ }
+
+ private showInactivitySnackBar() {
+
+ this.snackBarRef = this.snackBar.open(
+ 'Sitzplatzaktuallisierung wegen Inaktivität gestoppt.',
+ 'Fortsetzen',
+ {
+ duration: 0,
+ panelClass: ['timeout-snackbar'],
+ horizontalPosition: 'center',
+ verticalPosition: 'bottom'
+ }
+ );
+
+ this.snackBarRef.afterDismissed().subscribe(() => {
+ this.lastActivityTimestamp.set(Date.now());
+ this.inactivityTimeoutReached.set(false);
+ this.resumePolling();
+ this.refreshSeats();
+ });
}
private startAutoRefresh() {
+ console.info('[TheaterOverlay] Starting auto-refresh polling');
interval(POLLING_INTERVAL_MS).pipe(
- startWith(0),
+ startWith(POLLING_INTERVAL_MS),
filter(() => this.isPollingEnabled()),
filter(() => !this.selectedSeatService.committed()),
+ filter(() => !document.hidden), // Nicht pollen, wenn Tab nicht sichtbar
+ filter(() => !this.inactivityTimeoutReached()), // Nicht pollen nach Timeout
+ filter(() => !this.isRequestInProgress()), // Nicht pollen, wenn Request läuft
+ filter(() => !this.isStepTwoOrHigher()), // Nicht pollen ab Schritt 2
switchMap(() => this.loadPerformanceAndSeats()),
takeUntilDestroyed(this.destroyRef)
).subscribe();
}
private loadPerformanceAndSeats() {
- if (this.isInitialLoad()) {
+ const isInitial = this.isInitialLoad();
+
+ if (isInitial) {
this.loading.show();
}
+ this.isRequestInProgress.set(true);
+
return forkJoin({
- performance: this.http.getPerformaceById(this.showId),
- seats: this.http.getSeatsByShowId(this.showId)
+ performance: this.http.getPerformaceById(this.showId!),
+ seats: this.http.getSeatsByShowId(this.showId!)
}).pipe(
tap(({ performance, seats }) => {
- this.performance = performance;
+ this.performance.set(performance);
+
+ if (this.blockedSeats && !this.equalSeats(this.blockedSeats, seats.reserved)) {
+ console.info('[TheaterOverlay] External booking detected. Checking for conflicts.');
+
+ const conflicts = this.getConflictingSeats(seats.reserved);
+ if (conflicts.length > 0) {
+ console.info('[TheaterOverlay] Conflicts! Updating shopping cart.');
+ conflicts.forEach(seat => this.selectedSeatService.removeSelectedSeat(seat));
+ this.selectedSeatService.setConflict(true);
+ }
+
+ this.selectedSeatService.selectedSeats
+ }
+
+ this.blockedSeats = seats.reserved;
this.seatsPerRow.set(this.converter(seats));
- if (this.isInitialLoad()) {
+ if (isInitial) {
this.loading.hide();
- this.isInitialLoad.set(false);
}
}),
catchError(err => {
- if (this.isInitialLoad()) {
+ if (isInitial) {
this.loading.showError(err);
} else {
console.warn('Fehler beim Aktualisieren der Sitze:', err);
}
- if (this.isInitialLoad()) {
- this.loading.hide();
+ return of({ performance: null, seats: { seats: [], reserved: [], booked: [] } });
+ }),
+ finalize(() => {
+ if (isInitial) {
this.isInitialLoad.set(false);
}
-
- return of({ performance: null, seats: { seats: [], reserved: [], booked: [] } });
+ this.isRequestInProgress.set(false);
})
);
}
- converter(resp: { seats: Sitzplatz[], reserved: Sitzplatz[], booked: Sitzplatz[] }): {
+ private loadExistingOrder(orderCode: string) {
+ this.loading.show();
+ const ticketFilter = [`eq;order.code;string;${orderCode}`];
+
+ this.http.getTicketsByFilter(ticketFilter).pipe(
+ switchMap(tickets => {
+ this.tickets = tickets;
+
+ if (!tickets.length) {
+ return from(this.router.navigate(
+ ['/checkout/order'],
+ { queryParams: { error: 'invalid', code: orderCode } }
+ ));
+ }
+
+ this.order = tickets[0].order;
+
+ if (this.order.booked || this.order.cancelled) {
+ return from(this.router.navigate(
+ ['/checkout/order'],
+ { queryParams: { error: 'completed', code: orderCode } }
+ ));
+ }
+
+ this.showId = this.tickets[0].show.id;
+
+ this.selectedSeatService.clearSelection();
+ this.tickets.forEach(t => this.selectedSeatService.pushSelectedSeat(t.seat));
+ this.selectedSeatService.setSeatSelectable(false);
+
+ return this.loadPerformanceAndSeats();
+ }),
+ catchError(err => {
+ console.error('Fehler beim Laden der Bestellung', err);
+
+ return from(this.router.navigate(
+ ['/checkout/order'],
+ { queryParams: { error: 'invalid', code: orderCode } }
+ ));
+ }),
+ finalize(() => {
+ this.loading.hide();
+ }),
+ takeUntilDestroyed(this.destroyRef)
+ ).subscribe();
+ }
+
+
+ private equalSeats(a: Sitzplatz[], b: Sitzplatz[]): boolean {
+ if (a === b) return true;
+ if (a == null || b == null) return false;
+ if (a.length !== b.length) return false;
+
+ // Arrays kopieren und sortieren
+ const sortedA = [...a].sort((a, b) => a.id - b.id);
+ const sortedB = [...b].sort((a, b) => a.id - b.id);
+
+ for (let i = 0; i < sortedA.length; ++i) {
+ if (sortedA[i].id !== sortedB[i].id) return false;
+ }
+ return true;
+ }
+
+ private getConflictingSeats(blockedSeats: Sitzplatz[]): Sitzplatz[] {
+ const blockedIds = new Set(blockedSeats.map(bs => bs.id));
+ return this.selectedSeatService.selectedSeats().filter(
+ selectedSeat => blockedIds.has(selectedSeat.id)
+ );
+ }
+
+ private converter(resp: { seats: Sitzplatz[], reserved: Sitzplatz[], booked: Sitzplatz[] }): {
seat: Sitzplatz | null,
state: TheaterSeatState | null
}[][] {
@@ -163,16 +380,36 @@ export class TheaterOverlayComponent implements OnInit, OnDestroy {
return filledRows;
}
- refreshSeats(): void {
+ private refreshSeats(): void {
+ console.info('[TheaterOverlay] Manual refresh triggered');
this.loadPerformanceAndSeats().subscribe();
}
- pausePolling(): void { //TODO: Ab Stepper Schritt 2 Polling pausieren
+ private pausePolling(): void {
+ console.info('[TheaterOverlay] Polling paused');
this.isPollingEnabled.set(false);
}
- resumePolling(): void {
- this.isPollingEnabled.set(true);
+ private resumePolling(): void {
+ console.info('[TheaterOverlay] Resume polling attempted');
+ if (!this.inactivityTimeoutReached() && !this.isStepTwoOrHigher()) {
+ this.isPollingEnabled.set(true);
+ }
+ }
+
+ setStepTwoOrHigher(isStep2OrHigher: boolean): void {
+ this.isStepTwoOrHigher.set(isStep2OrHigher);
+
+ if (isStep2OrHigher) {
+ console.info('[TheaterOverlay] Moving to step 2+ - disabling polling');
+ this.pausePolling();
+ } else {
+ console.info('[TheaterOverlay] Back to step 1 - reactivating polling');
+ this.lastActivityTimestamp.set(Date.now());
+ this.inactivityTimeoutReached.set(false);
+ this.isPollingEnabled.set(true);
+ this.refreshSeats();
+ }
}
}
diff --git a/src/custom-theme.scss b/src/custom-theme.scss
index 6eddae9..9862129 100644
--- a/src/custom-theme.scss
+++ b/src/custom-theme.scss
@@ -42,17 +42,25 @@ html.dark {
background: linear-gradient(to right, #6366f1, #db2777) !important;
}
-@include mat.snack-bar-overrides((
- container-color: red,
-));
+
+.error-snackbar {
+ @include mat.snack-bar-overrides((
+ container-color: red,
+ ));
+}
+.timeout-snackbar {
+ @include mat.snack-bar-overrides((
+ container-color: #ff9900
+ ));
+}
-.error-snackbar .mat-mdc-snack-bar-label {
+.mat-mdc-snack-bar-label {
color: white !important;
}
-.error-snackbar .mat-mdc-button {
+.mat-mdc-button {
color: white !important;
}