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,26 +170,49 @@ export class TheaterLayoutDesignerComponent implements OnInit {
 
   async save() {
     this.loading.show();
+
+    try {
       for (let row of TheaterLayoutDesignerComponent.seatsPerRow) {
         let seatRow;
+
         if (!row[0].seat) {
           continue;
-      } else if (row[0].seat.row.id == 0) {
+        } else if (row[0].seat.row.id === 0) {
-        seatRow = await firstValueFrom(this.http.createSeatRow(row[0].seat.row));
+          seatRow = await firstValueFrom(
+            this.http.createSeatRow(row[0].seat.row)
+          );
         } else {
           seatRow = row[0].seat.row;
         }
 
-      for (const { seat, state } of row) {
+        for (const { seat } of row) {
-        if (seat != null && seat.id == 0) {
+          if (seat && seat.id === 0) {
             seat.row = seatRow;
-          let createdSeat = await firstValueFrom(this.http.createSeat(seat));
+            const createdSeat = await firstValueFrom(this.http.createSeat(seat));
             seat.id = createdSeat.id;
           }
         }
       }
-    this.loading.showError('Kinosaal erfolgreich aktualisiert');
+
+      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);
+    }
+  }
+
 
   hallName: string = '';
 

src/custom-theme.scss

@@ -56,6 +56,12 @@ html.dark {
   ));
 }
 
+.success-snackbar {
+  @include mat.snack-bar-overrides((
+    container-color: #23c503
+  ));
+}
+
 .mat-mdc-snack-bar-label {
   color: white !important;
 }