Add success snackbar on theater save

Introduces a success snackbar notification when the theater layout is successfully saved in the designer component. Also adds a custom style for the success snackbar in the theme.

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

@@ -1,12 +1,13 @@
 import { Component, inject, OnInit } from '@angular/core';
-import { Kinosaal, Sitzkategorie, Sitzplatz, Sitzreihe } from '@infinimotion/model-frontend';
+import { Kinosaal, Sitzkategorie, Sitzplatz } from '@infinimotion/model-frontend';
 import { TheaterSeatState } from '../model/theater-seat-state.model';
 import { SelectedSeatsService } from '../selected-seats.service';
 import { HttpService } from '../http.service';
-import { first, firstValueFrom } from 'rxjs';
+import { firstValueFrom } from 'rxjs';
 import { TheaterOverlayComponent } from '../theater-overlay/theater-overlay.component';
 import { ActivatedRoute, Router } from '@angular/router';
 import { LoadingService } from '../loading.service';
+import { MatSnackBar } from '@angular/material/snack-bar';
 
 @Component({
   selector: 'app-theater-layout-designer',
@@ -24,6 +25,8 @@ export class TheaterLayoutDesignerComponent implements OnInit {
   protected loading = inject(LoadingService);
   protected router = inject(Router);
 
+  constructor(private snackBar: MatSnackBar) {}
+
   getHallId() {
     return parseInt(this.route.snapshot.paramMap.get('hallId') ?? '-1');
   }
@@ -167,27 +170,50 @@ export class TheaterLayoutDesignerComponent implements OnInit {
 
   async save() {
     this.loading.show();
-    for (let row of TheaterLayoutDesignerComponent.seatsPerRow) {
-      let seatRow;
-      if (!row[0].seat) {
-        continue;
-      } else if (row[0].seat.row.id == 0) {
-        seatRow = await firstValueFrom(this.http.createSeatRow(row[0].seat.row));
-      } else {
-        seatRow = row[0].seat.row;
-      }
 
-      for (const { seat, state } of row) {
-        if (seat != null && seat.id == 0) {
-          seat.row = seatRow;
-          let createdSeat = await firstValueFrom(this.http.createSeat(seat));
-          seat.id = createdSeat.id;
+    try {
+      for (let row of TheaterLayoutDesignerComponent.seatsPerRow) {
+        let seatRow;
+
+        if (!row[0].seat) {
+          continue;
+        } else if (row[0].seat.row.id === 0) {
+          seatRow = await firstValueFrom(
+            this.http.createSeatRow(row[0].seat.row)
+          );
+        } else {
+          seatRow = row[0].seat.row;
+        }
+
+        for (const { seat } of row) {
+          if (seat && seat.id === 0) {
+            seat.row = seatRow;
+            const createdSeat = await firstValueFrom(this.http.createSeat(seat));
+            seat.id = createdSeat.id;
+          }
         }
       }
+
+      this.snackBar.open(
+        'Kinosaal wurde erfolgreich aktualisiert.',
+        'Schließen',
+        {
+          duration: 5000,
+          panelClass: ['success-snackbar'],
+          horizontalPosition: 'right',
+          verticalPosition: 'top'
+        }
+      );
+
+      this.loading.hide();
+
+    } catch (err) {
+      console.error('Fehler beim Speichern des Kinosaals', err);
+      this.loading.showError(err);
     }
-    this.loading.showError('Kinosaal erfolgreich aktualisiert');
   }
 
+
   hallName: string = '';
 
   async navigate() {