Piet Ostendorp
31108859da
Updated seat-selection component to show the actual number of selected seats and calculate the total price per seat category. Integrated SelectedSeatsService and replaced hardcoded values with computed properties for better accuracy and maintainability.
85 lines
2.4 KiB
HTML
85 lines
2.4 KiB
HTML
<div class="w-full h-full">
|
|
|
|
@if (loadingService.loading$ | async){
|
|
<div class="w-full h-full flex items-center justify-center">
|
|
<mat-progress-spinner
|
|
mode="indeterminate"
|
|
diameter="50"
|
|
></mat-progress-spinner>
|
|
</div>
|
|
}
|
|
@else if (performance()) {
|
|
|
|
<mat-stepper
|
|
orientation="horizontal"
|
|
linear="true"
|
|
#stepper
|
|
>
|
|
<mat-step [stepControl]="firstFormGroup">
|
|
<form [formGroup]="firstFormGroup">
|
|
<ng-template matStepLabel>Warenkorb</ng-template>
|
|
|
|
<app-performance-info class="w-full h-50" [performance]="performance()!"></app-performance-info>
|
|
|
|
<div class="mb-4 mt-2 p-2">
|
|
|
|
@for (seatCategory of seatCategories(); track $index) {
|
|
<div class="h-2"></div>
|
|
<app-seat-selection [seatCategory]="seatCategory"></app-seat-selection>
|
|
}
|
|
@empty {
|
|
<app-no-seats-in-hall></app-no-seats-in-hall>
|
|
}
|
|
|
|
</div>
|
|
|
|
|
|
<mat-divider></mat-divider>
|
|
|
|
<div class="flex justify-between p-2 mt-1 items-baseline">
|
|
<p class="font-semibold text-lg">
|
|
Tickets gesamt:
|
|
</p>
|
|
<p class="font-semibold text-2xl bg-gradient-to-r from-indigo-500 to-pink-600 bg-clip-text text-transparent">
|
|
75,00 €
|
|
</p>
|
|
</div>
|
|
|
|
<div class="flex space-x-5 mt-10">
|
|
<button mat-button matButton="outlined" matStepperNext class="w-1/2">Reservieren</button>
|
|
<button mat-button matButton="filled" matStepperNext class="w-1/2">Buchen</button>
|
|
</div>
|
|
</form>
|
|
</mat-step>
|
|
|
|
<mat-step [stepControl]="secondFormGroup">
|
|
<form [formGroup]="secondFormGroup">
|
|
<ng-template matStepLabel>Anschrift</ng-template>
|
|
<mat-form-field>
|
|
<mat-label>Address</mat-label>
|
|
<input
|
|
matInput
|
|
formControlName="secondCtrl"
|
|
placeholder="Ex. 1 Main St, New York, NY"
|
|
required
|
|
/>
|
|
</mat-form-field>
|
|
<div>
|
|
<button mat-button matStepperPrevious>Back</button>
|
|
<button mat-button matStepperNext>Next</button>
|
|
</div>
|
|
</form>
|
|
</mat-step>
|
|
-
|
|
<mat-step>
|
|
<ng-template matStepLabel>Zahlung</ng-template>
|
|
<p>You are now done.</p>
|
|
<div>
|
|
<button mat-button matStepperPrevious>Back</button>
|
|
<button mat-button (click)="stepper.reset()">Reset</button>
|
|
</div>
|
|
</mat-step>
|
|
</mat-stepper>
|
|
}
|
|
</div>
|