seat coloring based on seatState 🦏

src/app/seat/seat.component.html

@@ -1,5 +1,5 @@
 <button class="mx-1 hover:opacity-50">
-  <mat-icon style="font-size: 30px; width: 30px; height: 30px">
+  <mat-icon [ngStyle]="getSeatStateColor()" style="font-size: 30px; width: 30px; height: 30px">
     @if(seatCategory().id ==1){
       event_seat
     }
@@ -9,7 +9,6 @@
     @if(seatCategory().id == 3){
       chair
     }
-
   </mat-icon>
 </button>
 

src/app/seat/seat.component.ts

@@ -11,4 +11,16 @@ import {Sitzkategorie} from '@infinimotion/model-frontend';
 export class SeatComponent {
   seatState = input.required<TheaterSeatState>();
   seatCategory = input.required<Sitzkategorie>();
+
+  getSeatStateColor(): any {
+    switch (this.seatState()) {
+      case TheaterSeatState.RESERVED:
+        return {'color': 'orange'};
+      case TheaterSeatState.BOOKED:
+        return {'color': 'red'};
+      default:
+      case TheaterSeatState.AVAILABLE:
+        return {'color': 'black'};
+    }
+  }
 }

src/app/theater-overlay/theater-overlay.component.ts

@@ -1,4 +1,4 @@
-import {Component, inject, input, OnInit} from '@angular/core';
+import {Component, inject, OnInit} from '@angular/core';
 import {HttpService} from '../http.service';
 import {LoadingService} from '../loading.service';
 import {catchError, of, tap} from 'rxjs';
@@ -30,10 +30,8 @@ export class TheaterOverlayComponent implements OnInit {
     this.loading.show();
     this.http.getSeatsByShowId(this.showId).pipe(
       tap((data) => {
-        let rows = this.converter(data)
+        this.seatsPerRow = this.converter(data)
         this.loading.hide();
-        this.seatsPerRow = rows
-        console.log(rows)
       }),
       catchError(err => {
         this.loading.showError(err);
@@ -52,7 +50,7 @@ export class TheaterOverlayComponent implements OnInit {
       if (!rows[seat.row.position]) {
         rows[seat.row.position] = [];
       }
-      let state = resp.booked.find(other => other.id == seat.id) ? TheaterSeatState.BOOKED : resp.booked.find(other => other.id == seat.id) ? TheaterSeatState.RESERVED : TheaterSeatState.AVAILABLE;
+      let state = resp.booked.find(other => other.id == seat.id) ? TheaterSeatState.BOOKED : resp.reserved.find(other => other.id == seat.id) ? TheaterSeatState.RESERVED : TheaterSeatState.AVAILABLE;
       rows[seat.row.position].push({seat: seat, state: state});
     });
     rows = rows.filter(row => row.length > 0).sort((a, b) => a[0].seat.row.position - b[0].seat.row.position);