From 31108859dae299372d031b6b13e6da4c9c1fe1d3 Mon Sep 17 00:00:00 2001
From: Piet Ostendorp <piet@ostendorp-online.de>
Date: Thu, 13 Nov 2025 02:14:40 +0100
Subject: [PATCH] Display dynamic seat count and total price per category

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.
---
 src/app/order/order.component.html                |  4 +---
 .../seat-selection/seat-selection.component.html  |  4 ++--
 .../seat-selection/seat-selection.component.ts    | 15 ++++++++++++---
 3 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/app/order/order.component.html b/src/app/order/order.component.html
index 4f31b79..951bfdc 100644
--- a/src/app/order/order.component.html
+++ b/src/app/order/order.component.html
@@ -25,9 +25,7 @@
 
           @for (seatCategory of seatCategories(); track $index) {
             <div class="h-2"></div>
-            <app-seat-selection
-              [seatCategory]="seatCategory"
-            ></app-seat-selection>
+            <app-seat-selection [seatCategory]="seatCategory"></app-seat-selection>
           }
           @empty {
             <app-no-seats-in-hall></app-no-seats-in-hall>
diff --git a/src/app/seat-selection/seat-selection.component.html b/src/app/seat-selection/seat-selection.component.html
index 853700b..0531616 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;2</p>
-  <p class="w-2/7 text-right">25.00 €</p>
+  <p>×&thinsp;{{selectedSeatsByCategory()}}</p>
+  <p class="w-2/7 text-right">{{ getPriceDisplay(totalPrice())}}</p>
 </div>
diff --git a/src/app/seat-selection/seat-selection.component.ts b/src/app/seat-selection/seat-selection.component.ts
index e9f0f8d..07d4307 100644
--- a/src/app/seat-selection/seat-selection.component.ts
+++ b/src/app/seat-selection/seat-selection.component.ts
@@ -1,4 +1,5 @@
-import { Component, input } from '@angular/core';
+import { SelectedSeatsService } from './../selected-seats.service';
+import { Component, computed, inject, input } from '@angular/core';
 import { Sitzkategorie } from '@infinimotion/model-frontend';
 
 @Component({
@@ -9,10 +10,18 @@ import { Sitzkategorie } from '@infinimotion/model-frontend';
 })
 export class SeatSelectionComponent {
   seatCategory = input.required<Sitzkategorie>();
-  amount: number = 1;
+
+  SelectedSeatsService = inject(SelectedSeatsService);
+
+  selectedSeatsByCategory = computed(() =>
+    this.SelectedSeatsService.getSelectedSeatsByCategory(this.seatCategory().id).length
+  );
+
+  totalPrice = computed(() =>
+    this.selectedSeatsByCategory() * this.seatCategory().price
+  );
 
   getPriceDisplay(price: number): string {
     return `${(price / 100).toFixed(2)} €`;
   }
 }
-