Merge branch 'main' into order

src/app/seat-row/seat-row.component.html

@@ -1,3 +1,3 @@
 @for (entry of rowSeatList(); track $index) {
-  <app-seat class="my-1" [seatState]="entry.state" [seatCategory]="entry.seat.row.category"></app-seat>
+  <app-seat class="my-1" [state]="entry.state" [seat]="entry.seat"></app-seat>
 }

src/app/seat-row/seat-row.component.ts

@@ -10,5 +10,4 @@ import {TheaterSeatState} from '../model/theater-seat-state.model';
 })
 export class SeatRowComponent {
   rowSeatList = input.required<{ seat: Sitzplatz, state: TheaterSeatState }[]>();
-
 }

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

src/app/selected-seats.service.ts

@@ -0,0 +1,30 @@
+import {Injectable} from '@angular/core';
+import {Sitzplatz} from '@infinimotion/model-frontend';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class SelectedSeatsService {
+  private selectedSeatsList: Sitzplatz[] = [];
+
+  pushSelectedSeat(selectedSeat: Sitzplatz): void {
+    this.selectedSeatsList.push(selectedSeat);
+    //console.log("Added" + selectedSeat);
+    //console.log(this.selectedSeatsList);
+  }
+
+  removeSelectedSeat(selectedSeat: Sitzplatz): void {
+    let removeId = this.selectedSeatsList.indexOf(selectedSeat);
+
+    if(removeId !== -1) {
+      this.selectedSeatsList.splice(removeId, 1)
+    }
+    //console.log("Removed" + selectedSeat)
+    //console.log(this.selectedSeatsList);
+  }
+
+  getSelectedSeatsList(): Sitzplatz[] {
+    return this.selectedSeatsList;
+  }
+
+}