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

@@ -25,9 +25,7 @@
 
           @for (seatCategory of seatCategories(); track $index) {
             <div class="h-2"></div>
-            <app-seat-selection
+            <app-seat-selection [seatCategory]="seatCategory"></app-seat-selection>
-              [seatCategory]="seatCategory"
-            ></app-seat-selection>
           }
           @empty {
             <app-no-seats-in-hall></app-no-seats-in-hall>

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>×&thinsp;{{selectedSeatsByCategory()}}</p>
-  <p class="w-2/7 text-right">25.00 €</p>
+  <p class="w-2/7 text-right">{{ getPriceDisplay(totalPrice())}}</p>
 </div>

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)} €`;
   }
 }
-