Make total ticket price dynamic

Refactored price display logic to use computed total price and formatted output in order and seat selection components. Disabled reservation and booking buttons when no seats are selected. Improved clarity by renaming totalPrice to totalCategoryPrice in seat selection.

src/app/order/order.component.html

@@ -41,13 +41,13 @@
             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 €
+            {{ getPriceDisplay(totalPrice()) }}
           </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="outlined" matStepperNext [disabled]="totalPrice()==0" class="w-1/2">Reservieren</button>
-          <button mat-button matButton="filled" matStepperNext class="w-1/2">Buchen</button>
+          <button mat-button matButton="filled" matStepperNext class="w-1/2" [disabled]="totalPrice()==0">Buchen</button>
         </div>
       </form>
     </mat-step>

src/app/order/order.component.ts

@@ -1,6 +1,7 @@
+import { SelectedSeatsService } from './../selected-seats.service';
 import { LoadingService } from './../loading.service';
 import { Sitzkategorie, Vorstellung } from '@infinimotion/model-frontend';
-import { Component, inject, input } from '@angular/core';
+import { Component, computed, inject, input } from '@angular/core';
 import { FormBuilder, Validators } from '@angular/forms';
 
 @Component({
@@ -15,6 +16,7 @@ export class OrderComponent {
 
   private _formBuilder = inject(FormBuilder);
   loadingService = inject(LoadingService);
+  private selectedSeatsService = inject(SelectedSeatsService);
 
   firstFormGroup = this._formBuilder.group({
     firstCtrl: ['', Validators.required],
@@ -22,4 +24,12 @@ export class OrderComponent {
   secondFormGroup = this._formBuilder.group({
     secondCtrl: ['', Validators.required],
   });
+
+  totalPrice = computed(() =>
+    this.selectedSeatsService.getSelectedSeatsList().reduce((sum, seat) => sum + seat.row.category.price, 0)
+  );
+
+  getPriceDisplay(price: number): string {
+    return `${(price / 100).toFixed(2)} €`;
+  }
 }

src/app/seat-selection/seat-selection.component.html

@@ -6,6 +6,6 @@
     </mat-icon>
     <p>{{ getPriceDisplay(seatCategory().price) }}</p>
   </div>
-  <p>×&thinsp;{{selectedSeatsByCategory()}}</p>
+  <p>×&thinsp;{{ selectedSeatsByCategory() }}</p>
-  <p class="w-2/7 text-right">{{ getPriceDisplay(totalPrice())}}</p>
+  <p class="w-2/7 text-right">{{ getPriceDisplay(totalCategoryPrice()) }}</p>
 </div>

src/app/seat-selection/seat-selection.component.ts

@@ -17,7 +17,7 @@ export class SeatSelectionComponent {
     this.SelectedSeatsService.getSelectedSeatsByCategory(this.seatCategory().id).length
   );
 
-  totalPrice = computed(() =>
+  totalCategoryPrice = computed(() =>
     this.selectedSeatsByCategory() * this.seatCategory().price
   );