From cb065c8e39470ad79eebacc6fc34e87a82f1d36e Mon Sep 17 00:00:00 2001
From: Piet Ostendorp <piet@ostendorp-online.de>
Date: Thu, 13 Nov 2025 09:03:32 +0100
Subject: [PATCH] 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                   |  6 +++---
 src/app/order/order.component.ts                     | 12 +++++++++++-
 src/app/seat-selection/seat-selection.component.html |  4 ++--
 src/app/seat-selection/seat-selection.component.ts   |  2 +-
 4 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/src/app/order/order.component.html b/src/app/order/order.component.html
index 951bfdc..4ee64b6 100644
--- a/src/app/order/order.component.html
+++ b/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="filled" matStepperNext class="w-1/2">Buchen</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" [disabled]="totalPrice()==0">Buchen</button>
         </div>
       </form>
     </mat-step>
diff --git a/src/app/order/order.component.ts b/src/app/order/order.component.ts
index 3f3b094..5e66746 100644
--- a/src/app/order/order.component.ts
+++ b/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)} €`;
+  }
 }
diff --git a/src/app/seat-selection/seat-selection.component.html b/src/app/seat-selection/seat-selection.component.html
index 0531616..53562eb 100644
--- a/src/app/seat-selection/seat-selection.component.html
+++ b/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 class="w-2/7 text-right">{{ getPriceDisplay(totalPrice())}}</p>
+  <p>×&thinsp;{{ selectedSeatsByCategory() }}</p>
+  <p class="w-2/7 text-right">{{ getPriceDisplay(totalCategoryPrice()) }}</p>
 </div>
diff --git a/src/app/seat-selection/seat-selection.component.ts b/src/app/seat-selection/seat-selection.component.ts
index 07d4307..9c5ca14 100644
--- a/src/app/seat-selection/seat-selection.component.ts
+++ b/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
   );