seats are now selectable. returns list of selected seats. colors might not work anymore. 😢😢

src/app/seat/seat.component.ts

@@ -1,6 +1,7 @@
-import {Component, input} from '@angular/core';
+import {Component, inject, input, OnInit, output} from '@angular/core';
 import {TheaterSeatState} from '../model/theater-seat-state.model';
-import {Sitzkategorie} from '@infinimotion/model-frontend';
+import {Sitzkategorie, Sitzplatz} from '@infinimotion/model-frontend';
+import {SelectedSeatsService} from '../selected-seats.service';
 
 @Component({
   selector: 'app-seat',
@@ -8,19 +9,36 @@ import {Sitzkategorie} from '@infinimotion/model-frontend';
   templateUrl: './seat.component.html',
   styleUrl: './seat.component.css'
 })
-export class SeatComponent {
-  seatState = input.required<TheaterSeatState>();
-  seatCategory = input.required<Sitzkategorie>();
+export class SeatComponent{
+  seat = input.required<Sitzplatz>();
+  state = input.required<TheaterSeatState>()
+
+  selected: boolean = false;
+
+  private seatService = inject(SelectedSeatsService)
 
   getSeatStateColor(): any {
-    switch (this.seatState()) {
+    switch (this.state()) {
       case TheaterSeatState.RESERVED:
-        return {'color': 'orange'};
+        return 'orange';
       case TheaterSeatState.BOOKED:
-        return {'color': 'red'};
+        return 'red';
       default:
       case TheaterSeatState.AVAILABLE:
-        return {'color': 'black'};
+        return 'black';
     }
   }
+
+  updateSelectedSeats(selectedSeat: Sitzplatz) : void {
+    if(!this.selected){
+      this.seatService.pushSelectedSeat(selectedSeat);
+    } else {
+      this.seatService.removeSelectedSeat(selectedSeat);
+    }
+
+    this.selected = !this.selected;
+    //console.log(this.selected)
+  }
+
+  protected readonly TheaterSeatState = TheaterSeatState;
 }