infinimotion/frontend
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

seat coloring based on seatState 🦏

Browse Source
This commit is contained in:
Marcel-Anker
2025-11-06 20:55:12 +01:00
parent ad71111581
commit 689d8fe39a
3 changed files with 16 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/app/seat/seat.component.html
View File

@@ -1,5 +1,5 @@
<button class="mx-1 hover:opacity-50"> <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){ @if(seatCategory().id ==1){
event_seat event_seat
} }
@@ -9,7 +9,6 @@
@if(seatCategory().id == 3){ @if(seatCategory().id == 3){
chair chair
} }
</mat-icon> </mat-icon>
</button> </button>

12
src/app/seat/seat.component.ts
View File

@@ -11,4 +11,16 @@ import {Sitzkategorie} from '@infinimotion/model-frontend';
export class SeatComponent { export class SeatComponent {
seatState = input.required<TheaterSeatState>(); seatState = input.required<TheaterSeatState>();
seatCategory = input.required<Sitzkategorie>(); 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'};
}
}
} }

8
src/app/theater-overlay/theater-overlay.component.ts
View File

@@ -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 {HttpService} from '../http.service';
import {LoadingService} from '../loading.service'; import {LoadingService} from '../loading.service';
import {catchError, of, tap} from 'rxjs'; import {catchError, of, tap} from 'rxjs';
@@ -30,10 +30,8 @@ export class TheaterOverlayComponent implements OnInit {
this.loading.show(); this.loading.show();
this.http.getSeatsByShowId(this.showId).pipe( this.http.getSeatsByShowId(this.showId).pipe(
tap((data) => { tap((data) => {
let rows = this.converter(data) this.seatsPerRow = this.converter(data)
this.loading.hide(); this.loading.hide();
this.seatsPerRow = rows
console.log(rows)
}), }),
catchError(err => { catchError(err => {
this.loading.showError(err); this.loading.showError(err);
@@ -52,7 +50,7 @@ export class TheaterOverlayComponent implements OnInit {
if (!rows[seat.row.position]) { if (!rows[seat.row.position]) {
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[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); rows = rows.filter(row => row.length > 0).sort((a, b) => a[0].seat.row.position - b[0].seat.row.position);