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