Replace ng2-toast with material snacbar, Fixes: #75

src/app/app.component.html

@@ -1,2 +1 @@
-<router-outlet></router-outlet>
-<ng2-toasty></ng2-toasty>
+<router-outlet></router-outlet>

src/app/app.component.ts

@@ -2,7 +2,6 @@ import { Component, OnInit } from '@angular/core';
 import {Http} from "@angular/http";
 import {MatIconRegistry} from "@angular/material";
 import {DomSanitizer} from "@angular/platform-browser";
-import {ToastyConfig} from "ng2-toasty";
 
 @Component({
   selector: 'app-root',
@@ -12,9 +11,7 @@ import {ToastyConfig} from "ng2-toasty";
   ]
 })
 export class AppComponent implements OnInit {
-    constructor(http: Http, iconReg: MatIconRegistry, sanitizer: DomSanitizer, toastyConfig: ToastyConfig) {
-      toastyConfig.theme = 'material';
-
+    constructor(http: Http, iconReg: MatIconRegistry, sanitizer: DomSanitizer) {
       iconReg.addSvgIcon('gns3', sanitizer.bypassSecurityTrustResourceUrl('./assets/gns3_icon.svg'));
   }
 

src/app/app.module.ts

@@ -17,12 +17,12 @@ import {
   MatTableModule,
   MatDialogModule,
   MatProgressBarModule,
-  MatProgressSpinnerModule
+  MatProgressSpinnerModule,
+  MatSnackBarModule
 } from '@angular/material';
 
 import { D3Service } from 'd3-ng2-service';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
-import { ToastyModule } from 'ng2-toasty';
 
 import { AppRoutingModule } from './app-routing.module';
 
@@ -42,7 +42,7 @@ import { ProjectsComponent } from './projects/projects.component';
 import { DefaultLayoutComponent } from './default-layout/default-layout.component';
 import { ProgressDialogComponent } from './shared/progress-dialog/progress-dialog.component';
 import { AppComponent } from './app.component';
-//import { MapComponent } from './cartography/map/map.component';
+
 import { CreateSnapshotDialogComponent, ProjectMapComponent } from './project-map/project-map.component';
 import { ServersComponent, AddServerDialogComponent } from './servers/servers.component';
 import { NodeContextMenuComponent } from './shared/node-context-menu/node-context-menu.component';
@@ -52,6 +52,7 @@ import { ApplianceComponent } from './appliance/appliance.component';
 import { ApplianceListDialogComponent } from './appliance/appliance-list-dialog/appliance-list-dialog.component';
 import { NodeSelectInterfaceComponent } from './shared/node-select-interface/node-select-interface.component';
 import { CartographyModule } from './cartography/cartography.module';
+import { ToasterService } from './shared/services/toaster.service';
 
 
 @NgModule({
@@ -73,7 +74,6 @@ import { CartographyModule } from './cartography/cartography.module';
   ],
   imports: [
     NgbModule.forRoot(),
-    ToastyModule.forRoot(),
     BrowserModule,
     HttpModule,
     HttpClientModule,
@@ -91,6 +91,7 @@ import { CartographyModule } from './cartography/cartography.module';
     MatDialogModule,
     MatProgressBarModule,
     MatProgressSpinnerModule,
+    MatSnackBarModule,
     CdkTableModule,
     CartographyModule
   ],
@@ -106,7 +107,8 @@ import { CartographyModule } from './cartography/cartography.module';
     IndexedDbService,
     HttpServer,
     SnapshotService,
-    ProgressDialogService
+    ProgressDialogService,
+    ToasterService
   ],
   entryComponents: [
     AddServerDialogComponent,

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

@@ -19,20 +19,20 @@ import { MapComponent } from "../cartography/map/map.component";
 import { ServerService } from "../shared/services/server.service";
 import { ProjectService } from '../shared/services/project.service';
 import { Server } from "../shared/models/server";
-import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from "@angular/material";
+import { MAT_DIALOG_DATA, MatDialog, MatDialogRef, MatSnackBar } from "@angular/material";
 import { SnapshotService } from "../shared/services/snapshot.service";
 import { Snapshot } from "../shared/models/snapshot";
 import { ProgressDialogService } from "../shared/progress-dialog/progress-dialog.service";
 import { ProgressDialogComponent } from "../shared/progress-dialog/progress-dialog.component";
-import { ToastyService } from "ng2-toasty";
 import { Drawing } from "../cartography/shared/models/drawing.model";
 import { NodeContextMenuComponent } from "../shared/node-context-menu/node-context-menu.component";
-import {Appliance} from "../shared/models/appliance";
-import {NodeService} from "../shared/services/node.service";
-import {Symbol} from "../shared/models/symbol";
-import {NodeSelectInterfaceComponent} from "../shared/node-select-interface/node-select-interface.component";
-import {Port} from "../shared/models/port";
-import {LinkService} from "../shared/services/link.service";
+import { Appliance } from "../shared/models/appliance";
+import { NodeService } from "../shared/services/node.service";
+import { Symbol } from "../shared/models/symbol";
+import { NodeSelectInterfaceComponent } from "../shared/node-select-interface/node-select-interface.component";
+import { Port } from "../shared/models/port";
+import { LinkService } from "../shared/services/link.service";
+import { ToasterService } from '../shared/services/toaster.service';
 
 
 @Component({
@@ -69,7 +69,7 @@ export class ProjectMapComponent implements OnInit {
               private linkService: LinkService,
               private dialog: MatDialog,
               private progressDialogService: ProgressDialogService,
-              private toastyService: ToastyService) {
+              private toaster: ToasterService) {
   }
 
   ngOnInit() {
@@ -238,17 +238,11 @@ export class ProjectMapComponent implements OnInit {
         const progress = this.progressDialogService.open();
 
         const subscription = creation.subscribe((created_snapshot: Snapshot) => {
-          this.toastyService.success({
-              'title': 'Snapshot created',
-              'msg': `Snapshot '${snapshot.name}' has been created.`
-          });
+          this.toaster.success(`Snapshot '${snapshot.name}' has been created.`);
           progress.close();
         }, (response) => {
           const error = response.json();
-          this.toastyService.error({
-            'title': 'Cannot create snapshot',
-            'msg': error.message
-          });
+          this.toaster.error(`Cannot create snapshot: ${error.message}`);
           progress.close();
         });
 

src/app/shared/services/toaster.service.spec.ts

@@ -0,0 +1,32 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { ToasterService } from './toaster.service';
+import { MatSnackBar } from '@angular/material';
+
+class MockedSnackBar {
+  public open(message: string, ignored: any, options: any) {}
+}
+
+describe('ToasterService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [ToasterService, {provide: MatSnackBar, useClass: MockedSnackBar}]
+    });
+  });
+
+  it('should be created', inject([ToasterService], (service: ToasterService) => {
+    expect(service).toBeTruthy();
+  }));
+
+  it('should open when success', inject([ToasterService, MatSnackBar], (service: ToasterService, snackBar: MatSnackBar) => {
+    const spy = spyOn(snackBar, 'open');
+    service.success("message");
+    expect(snackBar.open).toHaveBeenCalledWith("message", null, { duration: 2000 });
+  }));
+
+  it('should open when error', inject([ToasterService, MatSnackBar], (service: ToasterService, snackBar: MatSnackBar) => {
+    const spy = spyOn(snackBar, 'open');
+    service.error("message");
+    expect(snackBar.open).toHaveBeenCalledWith("message", null, { duration: 2000 });
+  }));
+});

src/app/shared/services/toaster.service.ts

@@ -0,0 +1,15 @@
+import { Injectable } from '@angular/core';
+import { MatSnackBar } from '@angular/material';
+
+@Injectable()
+export class ToasterService {
+  constructor(private snackbar: MatSnackBar) { }
+
+  public error(message: string) {
+    this.snackbar.open(message, null, { duration: 2000 });
+  }
+
+  public success(message: string) {
+    this.snackbar.open(message, null, { duration: 2000 });
+  }
+}