From bd56f3242e65821d2b0a781a1213c87d713fa470 Mon Sep 17 00:00:00 2001 From: Piet Ostendorp Date: Sat, 15 Nov 2025 16:34:20 +0100 Subject: [PATCH] Handle empty seats and rows in theater layout Updated seat and row data structures to allow null values for seats and states, enabling the display of empty seat spaces and rows. Adjusted rendering logic and styles to visually represent gaps in seating, and enhanced the converter to fill missing seats and rows with placeholders. --- src/app/seat-row/seat-row.component.css | 7 ++- src/app/seat-row/seat-row.component.html | 7 ++- src/app/seat-row/seat-row.component.ts | 2 +- .../theater-layout.component.ts | 2 +- .../theater-overlay.component.ts | 56 ++++++++++++++++--- 5 files changed, 63 insertions(+), 11 deletions(-) diff --git a/src/app/seat-row/seat-row.component.css b/src/app/seat-row/seat-row.component.css index 8b13789..4cf8c8e 100644 --- a/src/app/seat-row/seat-row.component.css +++ b/src/app/seat-row/seat-row.component.css @@ -1 +1,6 @@ - +.empty-seat-space { + width: 30px; + /* Keine Ahnung, wo die zusätzlichen 6.5px herkommen müssen. Wir sonst dünner angezeigt */ + height: 36.5px; + /* height: 30px; */ +} diff --git a/src/app/seat-row/seat-row.component.html b/src/app/seat-row/seat-row.component.html index 869b536..5ef657e 100644 --- a/src/app/seat-row/seat-row.component.html +++ b/src/app/seat-row/seat-row.component.html @@ -1,3 +1,8 @@ @for (entry of rowSeatList(); track $index) { - + + @if (entry.seat != null && entry.state != null) { + + } @else { +
+ } } diff --git a/src/app/seat-row/seat-row.component.ts b/src/app/seat-row/seat-row.component.ts index ec4c001..6afab92 100644 --- a/src/app/seat-row/seat-row.component.ts +++ b/src/app/seat-row/seat-row.component.ts @@ -9,5 +9,5 @@ import {TheaterSeatState} from '../model/theater-seat-state.model'; styleUrl: './seat-row.component.css' }) export class SeatRowComponent { - rowSeatList = input.required<{ seat: Sitzplatz, state: TheaterSeatState }[]>(); + rowSeatList = input.required<{ seat: Sitzplatz | null, state: TheaterSeatState | null }[]>(); } diff --git a/src/app/theater-layout/theater-layout.component.ts b/src/app/theater-layout/theater-layout.component.ts index d05fbce..1478459 100644 --- a/src/app/theater-layout/theater-layout.component.ts +++ b/src/app/theater-layout/theater-layout.component.ts @@ -10,7 +10,7 @@ import {TheaterSeatState} from '../model/theater-seat-state.model'; styleUrl: './theater-layout.component.css' }) export class TheaterLayoutComponent { - seatsPerRow = input.required<{ seat: Sitzplatz, state: TheaterSeatState }[][]>(); + seatsPerRow = input.required<{ seat: Sitzplatz | null, state: TheaterSeatState | null }[][]>(); protected selectedSeatsService = inject(SelectedSeatsService); } diff --git a/src/app/theater-overlay/theater-overlay.component.ts b/src/app/theater-overlay/theater-overlay.component.ts index 5a3e55c..68621eb 100644 --- a/src/app/theater-overlay/theater-overlay.component.ts +++ b/src/app/theater-overlay/theater-overlay.component.ts @@ -25,7 +25,7 @@ export class TheaterOverlayComponent implements OnInit, OnDestroy { readonly loading = inject(LoadingService); showId!: number; - seatsPerRow = signal<{ seat: Sitzplatz, state: TheaterSeatState }[][]>([]); + seatsPerRow = signal<{ seat: Sitzplatz | null, state: TheaterSeatState | null }[][]>([]); performance: Vorstellung | undefined; seatCategories: Sitzkategorie[] = []; @@ -90,12 +90,13 @@ export class TheaterOverlayComponent implements OnInit, OnDestroy { } converter(resp: { seats: Sitzplatz[], reserved: Sitzplatz[], booked: Sitzplatz[] }): { - seat: Sitzplatz, - state: TheaterSeatState + seat: Sitzplatz | null, + state: TheaterSeatState | null }[][] { - let rows: { seat: Sitzplatz, state: TheaterSeatState }[][] = []; + let rows: { seat: Sitzplatz | null, state: TheaterSeatState | null }[][] = []; const categoryMap = new Map(); + // Sitzplätze sammeln resp.seats.forEach(seat => { if (!rows[seat.row.position]) { rows[seat.row.position] = []; @@ -114,9 +115,50 @@ export class TheaterOverlayComponent implements OnInit, OnDestroy { this.seatCategories = Array.from(categoryMap.values()).sort((a, b) => a.id - b.id); - rows = rows.filter(row => row.length > 0).sort((a, b) => a[0].seat.row.position - b[0].seat.row.position); - rows.forEach(row => row.sort((a, b) => a.seat.position - b.seat.position)); - return rows; + rows = rows.filter(row => row && row.length > 0).sort((a, b) => a[0].seat!.row.position - b[0].seat!.row.position); + + if (rows.length === 0) { + return []; + } + + // Leere Plätze auffüllen + const filledSeats: { seat: Sitzplatz | null, state: TheaterSeatState | null }[][] = []; + + rows.forEach(row => { + row.sort((a, b) => a.seat!.position - b.seat!.position) + + const minPos = row[0].seat!.position; + const maxPos = row[row.length - 1].seat!.position; + const filledRow: { seat: Sitzplatz | null, state: TheaterSeatState | null }[] = []; + + for (let pos = minPos; pos <= maxPos; pos++) { + const existingSeat = row.find(s => s.seat!.position === pos); + if (existingSeat) { + filledRow.push(existingSeat); + } else { + filledRow.push({ seat: null, state: null }); + } + } + + filledSeats.push(filledRow); + }); + + // Leere Reihen auffüllen + const minRowPos = rows[0][0].seat!.row.position; + const maxRowPos = rows[rows.length - 1][0].seat!.row.position; + const filledRows: { seat: Sitzplatz | null, state: TheaterSeatState | null }[][] = []; + + let processedIndex = 0; + for (let rowPos = minRowPos; rowPos <= maxRowPos; rowPos++) { + if (processedIndex < filledSeats.length && filledSeats[processedIndex][0].seat!.row.position === rowPos) { + filledRows.push(filledSeats[processedIndex]); + processedIndex++; + } else { + filledRows.push([{ seat: null, state: null }]); + } + } + + return filledRows; } refreshSeats(): void {