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

src/app/seat/seat.component.html

@@ -1,12 +1,12 @@
-<button class="mx-1 hover:opacity-50">
-  <mat-icon [ngStyle]="getSeatStateColor()" style="font-size: 30px; width: 30px; height: 30px">
-    @if(seatCategory().id ==1){
+<button (click)="updateSelectedSeats(this.seat())" [disabled]="state() == TheaterSeatState.BOOKED || state() == TheaterSeatState.RESERVED" class="mx-1 hover:opacity-50">
+  <mat-icon [ngStyle]="{'opacity': selected ? '0.5' : '1', color: getSeatStateColor() }" style="font-size: 30px; width: 30px; height: 30px">
+    @if(this.seat().row.category.id ==1){
       event_seat
     }
-    @if(seatCategory().id == 2){
+    @if(this.seat().row.category.id == 2){
       weekend
     }
-    @if(seatCategory().id == 3){
+    @if(this.seat().row.category.id == 3){
       chair
     }
   </mat-icon>

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;
 }