menu header und leere reihen

src/app/theater-layout-designer/theater-layout-designer.component.html

@@ -1,3 +1,5 @@
+<app-menu-header label="Kinosaal-Designer" icon="design_services"></app-menu-header>
+
 @if(getHallId() >= 0) {
 <div
   class="m-auto w-200 h-10 bg-gray-200 mb-22 cursor-pointer"

src/app/theater-layout-designer/theater-layout-designer.component.ts

@@ -73,6 +73,19 @@ export class TheaterLayoutDesignerComponent implements OnInit {
         state: TheaterSeatState.AVAILABLE,
       };
     });
+    this.addRow.splice(0, 0, {
+      seat: {
+        id: -2,
+        position: 1,
+        row: {
+          id: -1,
+          hall: { id: hallId } as Kinosaal,
+          category: { id: -1, name: '', price: -1, icon: 'check_box_outline_blank' },
+          position: -1,
+        },
+      },
+      state: TheaterSeatState.AVAILABLE,
+    });
   }
 
   seatsPerRow() {
@@ -134,7 +147,11 @@ export class TheaterLayoutDesignerComponent implements OnInit {
       state: TheaterSeatState.RESERVED,
     };
     firstSeat.seat!.row.position = rows.length + 1;
+    if (selectedSeat.row.id == -1) {
+      rows.push([{ seat: null, state: null }]);
+    } else {
       rows.push([firstSeat]);
+    }
     TheaterLayoutDesignerComponent.fillRowWithSettings(rows.length - 1, rows[rows.length - 1]);
   }
 
@@ -153,7 +170,7 @@ export class TheaterLayoutDesignerComponent implements OnInit {
     for (let row of TheaterLayoutDesignerComponent.seatsPerRow) {
       let seatRow;
       if (!row[0].seat) {
-        return;
+        continue;
       } else if (row[0].seat.row.id == 0) {
         seatRow = await firstValueFrom(this.http.createSeatRow(row[0].seat.row));
       } else {