infinimotion/frontend
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update routing and UI for performance checkout

Browse Source 
Changed route paths and parameters for performance checkout to use '/performance/:performanceId/checkout' instead of '/selection/performance/:id'. Updated related components to use new route and param names. Improved UI spacing and styling in several components for better layout and consistency.
This commit is contained in:
Piet Ostendorp
2025-11-18 21:00:29 +01:00
parent 4408bc9b84
commit 78144d7447
11 changed files with 21 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/app-routing-module.ts
View File

@@ -27,7 +27,7 @@ const routes: Routes = [
canActivate: [AuthGuard], canActivate: [AuthGuard],
data: { roles: ['admin'] }, // Array von erlaubten Rollen. Derzeit gäbe es 'admin' und 'employee' data: { roles: ['admin'] }, // Array von erlaubten Rollen. Derzeit gäbe es 'admin' und 'employee'
}, },
{ path: 'selection/performance/:id', component: TheaterOverlayComponent}, { path: 'performance/:performanceId/checkout', component: TheaterOverlayComponent},
], ],
}, },

2
src/app/movie-performance/movie-performance.component.html
View File

@@ -1,6 +1,6 @@
<a [routerLink]="route" class="bg-gray-200 m-2 flex flex-col items-center justify-between rounded-md overflow-hidden text-xl shadow-lg transform transition-all duration-300 hover:scale-105"> <a [routerLink]="route" class="bg-gray-200 m-2 flex flex-col items-center justify-between rounded-md overflow-hidden text-xl shadow-lg transform transition-all duration-300 hover:scale-105">
<div class="bg-gradient-to-r from-indigo-500 to-pink-600 w-full text-center text-white font-medium rounded-t-md py-0.5 px-2"> <div class="bg-linear-to-r from-indigo-500 to-pink-600 w-full text-center text-white font-medium rounded-t-md py-0.5 px-2">
<p>{{ hall() }}</p> <p>{{ hall() }}</p>
</div> </div>

2
src/app/movie-performance/movie-performance.component.ts
View File

@@ -15,7 +15,7 @@ export class MoviePerformanceComponent implements OnInit {
route: string = ''; route: string = '';
ngOnInit() { ngOnInit() {
this.route = `../selection/performance/${this.id()}`; this.route = `../performance/${this.id()}/checkout`;
} }
startTime = computed(() => startTime = computed(() =>

2
src/app/performance-info/performance-info.component.html
View File

@@ -13,7 +13,7 @@
<h3 class="opacity-75">{{ getStartTimeString() }} • {{ performance().hall.name }}</h3> <h3 class="opacity-75">{{ getStartTimeString() }} • {{ performance().hall.name }}</h3>
<h1 class="font-semibold mb-0.5">{{ movie().title }}</h1> <h1 class="font-semibold mb-0.5">{{ movie().title }}</h1>
<div class="flex items-center"> <div class="flex items-center">
<app-movie-rating [rating]="movie().rating" class="rounded-sm shadow-xs px-1 py-0.25 text-sm"></app-movie-rating> <app-movie-rating [rating]="movie().rating" class="rounded-sm shadow-xs px-1 py-px text-sm"></app-movie-rating>
<app-movie-duration [duration]="movie().duration" [showIcon]="false" class="ml-1.5 opacity-75"></app-movie-duration> <app-movie-duration [duration]="movie().duration" [showIcon]="false" class="ml-1.5 opacity-75"></app-movie-duration>
</div> </div>
</div> </div>

2
src/app/purchase-failed/purchase-failed.component.html
View File

@@ -6,6 +6,6 @@
<p class="text-center">Leider konnten Ihre Sitzplätze nicht gekauft werden. Dies kann passieren, wenn andere Nutzer zeitgleich versucht haben, dieselben Sitzplätze zu kaufen.</p> <p class="text-center">Leider konnten Ihre Sitzplätze nicht gekauft werden. Dies kann passieren, wenn andere Nutzer zeitgleich versucht haben, dieselben Sitzplätze zu kaufen.</p>
<button mat-button matButton="filled" class="error-button mt-4 w-80">Erneut versuchen</button> <button mat-button matButton="filled" class="error-button mt-4 w-80">Erneut versuchen</button>
<button routerLink="/schedule" mat-button matButton="outlined" color="accent" class="error-button w-80">Zurück zur Programmauswahl</button> <button routerLink="/schedule" mat-button matButton="outlined" color="accent" class="error-button w-80 mt-1">Zurück zur Programmauswahl</button>
</div> </div>

6
src/app/purchase-success/purchase-success.component.html
View File

@@ -2,10 +2,10 @@
<h1 class="text-xl font-bold">Vielen Dank für Ihren Einkauf!</h1> <h1 class="text-xl font-bold">Vielen Dank für Ihren Einkauf!</h1>
<p class="text-center">Ihre Sitzplätze wurden erfolgreich gebucht.</p> <p class="text-center">Ihre Sitzplätze wurden erfolgreich gebucht.</p>
<app-ticket-list [tickets]="tickets()" class="w-8/10"></app-ticket-list> <app-ticket-list [tickets]="tickets()" class="w-8/10 my-4"></app-ticket-list>
<button mat-button disabled="true" matButton="filled" class="success-button w-80 mt-2">Tickets herunterladen</button> <button mat-button disabled="true" matButton="filled" class="success-button w-80 mt-4">Tickets herunterladen</button>
<button routerLink="/schedule" mat-button matButton="outlined" color="accent" class="success-button w-80">Zurück zur Programmauswahl</button> <button routerLink="/schedule" mat-button matButton="outlined" color="accent" class="success-button w-80 mt-1">Zurück zur Programmauswahl</button>
</div> </div>

2
src/app/reservation-failed/reservation-failed.component.html
View File

@@ -6,6 +6,6 @@
<p class="text-center">Leider konnten Ihre Sitzplätze nicht reserviert werden. Dies kann passieren, wenn andere Nutzer gleichzeitig versucht haben, dieselben Sitzplätze zu reservieren.</p> <p class="text-center">Leider konnten Ihre Sitzplätze nicht reserviert werden. Dies kann passieren, wenn andere Nutzer gleichzeitig versucht haben, dieselben Sitzplätze zu reservieren.</p>
<button mat-button matButton="filled" class="error-button mt-4 w-80">Erneut versuchen</button> <button mat-button matButton="filled" class="error-button mt-4 w-80">Erneut versuchen</button>
<button routerLink="/schedule" mat-button matButton="outlined" color="accent" class="error-button w-80">Zurück zur Programmauswahl</button> <button routerLink="/schedule" mat-button matButton="outlined" color="accent" class="error-button w-80 mt-1">Zurück zur Programmauswahl</button>
</div> </div>

8
src/app/reservation-success/reservation-success.component.html
View File

@@ -1,17 +1,15 @@
<div class="bg-green-200 rounded-md shadow-sm w-full h-fit p-6 py-8 items-center justify-center flex flex-col space-y-2"> <div class="bg-green-200 rounded-md shadow-sm w-full h-fit p-6 py-8 items-center justify-center flex flex-col space-y-2">
<h1 class="text-xl font-bold">Reservierung erfolgreich!</h1> <h1 class="text-xl font-bold">Reservierung erfolgreich!</h1>
<!-- <p class="text-center">Ihre Sitzplätze wurden reserviert. </p> -->
<p class="text-center">Ihre Sitzplätze wurden erfolgreich reserviert. Bitte nennen sie den folgenden Code an der Kasse, um Ihre Reservierung in eine Buchung umzuwandeln.</p> <p class="text-center">Ihre Sitzplätze wurden erfolgreich reserviert. Bitte nennen sie den folgenden Code an der Kasse, um Ihre Reservierung in eine Buchung umzuwandeln.</p>
<div class="bg-white text-5xl font-mono rounded-md shadow-sm w-fit h-fit p-4 py-2 my-4"> <div class="bg-white text-5xl font-mono rounded-md shadow-sm w-fit h-fit p-4 py-2 my-4">
<strong>{{ order().code }}</strong> <strong>{{ order().code }}</strong>
</div> </div>
<button routerLink="/schedule" mat-button matButton="filled" class="success-button mt-4 w-80">Zurück zur Programmauswahl</button> <button [disabled]="true" mat-button matButton="filled" color="accent" class="success-button mt-2 w-80">Tickets jetzt online bezahlen</button>
<button [disabled]="true" mat-button matButton="outlined" color="accent" class="success-button w-80">Tickets jetzt online bezahlen</button> <button routerLink="/schedule" mat-button matButton="outlined" class="success-button mb-4 w-80 mt-1">Zurück zur Programmauswahl</button>
<div class="text-green-500 cursor-pointer w-fit mt-1" (click)="cancelReservation()"> <div class="text-green-500 cursor-pointer w-fit mt-2" (click)="cancelReservation()">
Reservierung stornieren Reservierung stornieren
</div> </div>
</div> </div>

6
src/app/theater-layout/theater-layout.component.html
View File

@@ -3,12 +3,12 @@
Leinwand Leinwand
</p> </p>
</div> </div>
<div> <div class="mb-5">
@for (row of seatsPerRow(); track $index) { @for (row of seatsPerRow(); track $index) {
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<!-- Speaker --> <!-- Speaker -->
<div class="shrink-0 pl-25"> <div class="shrink-0 pl-20">
@if ($index % 4 === 0) { @if ($index % 4 === 0) {
<mat-icon class="material-symbols-outlined opacity-25" style="font-size: 30px; width: 30px; height: 30px"> <mat-icon class="material-symbols-outlined opacity-25" style="font-size: 30px; width: 30px; height: 30px">
speaker speaker
@@ -25,7 +25,7 @@
<app-seat-row class="flex justify-center" [rowSeatList]="row"></app-seat-row> <app-seat-row class="flex justify-center" [rowSeatList]="row"></app-seat-row>
<!-- Speaker --> <!-- Speaker -->
<div class="shrink-0 pr-25"> <div class="shrink-0 pr-20">
@if ($index % 4 === 0) { @if ($index % 4 === 0) {
<mat-icon class="material-symbols-outlined opacity-25 mirrored" style="font-size: 30px; width: 30px; height: 30px"> <mat-icon class="material-symbols-outlined opacity-25 mirrored" style="font-size: 30px; width: 30px; height: 30px">
speaker speaker

6
src/app/theater-overlay/theater-overlay.component.html
View File

@@ -1,8 +1,8 @@
<app-menu-header label="Vorstellungstickets kaufen" icon="local_activity" [backToSchedule]="true"></app-menu-header> <app-menu-header label="Vorstellungstickets kaufen" icon="local_activity" [backToSchedule]="true"></app-menu-header>
<div class="flex justify-between h-100"> <div class="flex h-fit">
<div class="w-7/10 p-10 h-188"> <div class="w-7/10 p-10 h-fit">
<div> <div>
@if (!performance && (loading.loading$ | async)){ @if (!performance && (loading.loading$ | async)){
<div class="w-full h-full flex items-center justify-center mt-70"> <div class="w-full h-full flex items-center justify-center mt-70">
@@ -18,6 +18,6 @@
</div> </div>
</div> </div>
<app-order class="m-10 mr-20 w-3/10" [performance]="performance" [seatCategories]="seatCategories"></app-order> <app-order class="mt-10 mr-30 w-3/10" [performance]="performance" [seatCategories]="seatCategories"></app-order>
</div> </div>

4
src/app/theater-overlay/theater-overlay.component.ts
View File

@@ -25,6 +25,7 @@ export class TheaterOverlayComponent implements OnInit, OnDestroy {
readonly loading = inject(LoadingService); readonly loading = inject(LoadingService);
showId!: number; showId!: number;
orderId?: string;
seatsPerRow = signal<{ seat: Sitzplatz | null, state: TheaterSeatState | null }[][]>([]); seatsPerRow = signal<{ seat: Sitzplatz | null, state: TheaterSeatState | null }[][]>([]);
performance: Vorstellung | undefined; performance: Vorstellung | undefined;
seatCategories: Sitzkategorie[] = []; seatCategories: Sitzkategorie[] = [];
@@ -33,7 +34,8 @@ export class TheaterOverlayComponent implements OnInit, OnDestroy {
private isInitialLoad = signal(true); private isInitialLoad = signal(true);
ngOnInit() { ngOnInit() {
this.showId = Number(this.route.snapshot.paramMap.get('id')!); this.showId = Number(this.route.snapshot.paramMap.get('performanceId')!);
this.orderId = this.route.snapshot.queryParams['paramName'];
this.selectedSeatService.clearSelection(); this.selectedSeatService.clearSelection();
this.selectedSeatService.setSeatSelectable(true); this.selectedSeatService.setSeatSelectable(true);