Merge pull request #533 from GNS3/Show-errors-&-warnings-as-notifications

Show errors & warnings as notifications

src/app/components/project-map/project-map.component.html

@@ -87,6 +87,9 @@
           <mat-checkbox [ngModel]="isTopologySummaryVisible" (change)="toggleShowTopologySummary($event.checked)">
             Show topology/servers summary
           </mat-checkbox>
+          <mat-checkbox [ngModel]="notificationsVisibility" (change)="toggleNotifications($event.checked)">
+            Show notifications
+          </mat-checkbox>
         </div>
       </mat-menu>
 

src/app/components/project-map/project-map.component.ts

@@ -82,6 +82,7 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
   public isConsoleVisible: boolean = false;
   public isTopologySummaryVisible: boolean = false;
   public isInterfaceLabelVisible: boolean = false;
+  public notificationsVisibility: boolean = false;
 
   tools = {
     selection: true,
@@ -222,6 +223,21 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
       })
     );
 
+    this.subscriptions.push(this.projectWebServiceHandler.errorNotificationEmitter.subscribe((message) => {
+      this.showMessage({
+          type: 'error',
+          message: message
+      });
+    }));
+
+    this.subscriptions.push(this.projectWebServiceHandler.warningNotificationEmitter.subscribe((message) => {
+        this.showMessage({
+            type: 'warning',
+            message: message
+        });
+    }));
+
+    this.notificationsVisibility = localStorage.getItem('notificationsVisibility') === 'true' ? true : false;
     this.addKeyboardListeners();
   }
 
@@ -454,6 +470,22 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
     this.mapSettingsService.toggleTopologySummary(this.isTopologySummaryVisible);
   }
 
+  public toggleNotifications(visible: boolean) {
+    this.notificationsVisibility = visible;
+    if (this.notificationsVisibility) {
+      localStorage.setItem('notificationsVisibility', 'true');
+    } else {
+      localStorage.removeItem('notificationsVisibility');
+    }
+  }
+
+  private showMessage(msg) {
+    if (this.notificationsVisibility) {
+      if (msg.type === 'error') this.toasterService.error(msg.message);
+      if (msg.type === 'warning') this.toasterService.warning(msg.message);
+    }
+  }
+
   public hideMenu() {
     this.projectMapMenuComponent.resetDrawToolChoice()
     this.isProjectMapMenuVisible = false;

src/app/services/toaster.service.ts

@@ -9,12 +9,21 @@ export class ToasterService {
     MatSnackBarHorizontalPosition: 'center',
     MatSnackBarVerticalPosition: 'bottom'
   };
+
+  snackBarConfigForWarning = {
+    duration: 2000,
+    panelClass: ['snackabar-warning'],
+    MatSnackBarHorizontalPosition: 'center',
+    MatSnackBarVerticalPosition: 'bottom'
+  };
+
   snackBarConfigForError = {
     duration: 2000,
     panelClass: ['snackabar-error'],
     MatSnackBarHorizontalPosition: 'center',
     MatSnackBarVerticalPosition: 'bottom'
   };
+
   constructor(
     private snackbar: MatSnackBar,
     private zone: NgZone) {}
@@ -25,6 +34,12 @@ export class ToasterService {
     });
   }
 
+  public warning(message: string) {
+    this.zone.run(() => {
+      this.snackbar.open(message, 'Close', this.snackBarConfigForWarning);
+    });
+  }
+
   public success(message: string) {
     this.zone.run(() => {
       this.snackbar.open(message, 'Close', this.snackBarConfigForSuccess);

src/styles.css

@@ -11,6 +11,11 @@ a.table-link {
   color: white!important;
 }
 
+.snackbar-warning {
+  background: rgb(197, 199, 64)!important;
+  color: white!important;
+}
+
 .snackbar-error {
   background: #B00020!important;
   color: white!important;