Toaster - ng2-toasty, Fixes: #8

.angular-cli.json

@@ -20,6 +20,7 @@
       "prefix": "app",
       "styles": [
         "../node_modules/bootstrap/dist/css/bootstrap.min.css",
+        "../node_modules/ng2-toasty/bundles/style-material.css",
         "styles.css",
         "theme.scss"
       ],

package-lock.json

@@ -6219,6 +6219,11 @@
         "inherits": "2.0.3"
       }
     },
+    "ng2-toasty": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/ng2-toasty/-/ng2-toasty-4.0.3.tgz",
+      "integrity": "sha1-6njvjRh1fUHrq6Eb2fkKVD9Y/Xo="
+    },
     "no-case": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/no-case/-/no-case-2.3.2.tgz",

package.json

@@ -28,6 +28,7 @@
     "bootstrap": "^4.0.0-beta",
     "core-js": "^2.4.1",
     "d3-ng2-service": "^1.16.0",
+    "ng2-toasty": "^4.0.3",
     "npm-check-updates": "^2.13.0",
     "rxjs": "^5.4.1",
     "zone.js": "^0.8.14"

src/app/app.component.html

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

src/app/app.component.ts

@@ -2,6 +2,7 @@ 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',
@@ -11,7 +12,9 @@ import {DomSanitizer} from "@angular/platform-browser";
   ]
 })
 export class AppComponent implements OnInit {
-    constructor(http: Http, iconReg: MatIconRegistry, sanitizer: DomSanitizer) {
+    constructor(http: Http, iconReg: MatIconRegistry, sanitizer: DomSanitizer, toastyConfig: ToastyConfig) {
+      toastyConfig.theme = 'material';
+
       iconReg.addSvgIcon('gns3', sanitizer.bypassSecurityTrustResourceUrl('./assets/gns3_icon.svg'));
   }
 

src/app/app.module.ts

@@ -2,26 +2,7 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { HttpModule } from '@angular/http';
 import { FormsModule } from '@angular/forms';
-
+import { CdkTableModule } from "@angular/cdk/table";
-import { D3Service } from 'd3-ng2-service';
-import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
-
-import { AppRoutingModule } from './app-routing.module';
-
-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 { ProjectsComponent } from './projects/projects.component';
-
-import { VersionService } from './shared/services/version.service';
-import { ProjectService } from './shared/services/project.service';
-import { SymbolService } from "./shared/services/symbol.service";
-import { ServerService } from "./shared/services/server.service";
-import { IndexedDbService } from "./shared/services/indexed-db.service";
-import { HttpServer } from "./shared/services/http-server.service";
-import { DefaultLayoutComponent } from './default-layout/default-layout.component';
-
 
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import {
@@ -36,11 +17,31 @@ import {
   MatDialogModule, MatProgressBarModule
 } from '@angular/material';
 
-import {CdkTableModule} from "@angular/cdk/table";
+import { D3Service } from 'd3-ng2-service';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { ToastyModule } from 'ng2-toasty';
+
+import { AppRoutingModule } from './app-routing.module';
+
+
+import { VersionService } from './shared/services/version.service';
+import { ProjectService } from './shared/services/project.service';
+import { SymbolService } from "./shared/services/symbol.service";
+import { ServerService } from "./shared/services/server.service";
+import { IndexedDbService } from "./shared/services/indexed-db.service";
+import { HttpServer } from "./shared/services/http-server.service";
 import { SnapshotService } from "./shared/services/snapshot.service";
-import { ProgressDialogComponent } from './shared/progress-dialog/progress-dialog.component';
 import { ProgressDialogService } from "./shared/progress-dialog/progress-dialog.service";
 
+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';
+
+
 @NgModule({
   declarations: [
     AppComponent,
@@ -55,6 +56,7 @@ import {ProgressDialogService} from "./shared/progress-dialog/progress-dialog.se
   ],
   imports: [
     NgbModule.forRoot(),
+    ToastyModule.forRoot(),
     BrowserModule,
     HttpModule,
     AppRoutingModule,

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

@@ -24,6 +24,7 @@ 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";
 
 
 @Component({
@@ -50,7 +51,8 @@ export class ProjectMapComponent implements OnInit {
               private symbolService: SymbolService,
               private snapshotService: SnapshotService,
               private dialog: MatDialog,
-              private progressDialogService: ProgressDialogService) {
+              private progressDialogService: ProgressDialogService,
+              private toastyService: ToastyService) {
   }
 
   ngOnInit() {
@@ -170,10 +172,17 @@ 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.`
-        }, () => {
+          });
+          progress.close();
+        }, (response) => {
+          const error = response.json();
+          this.toastyService.error({
+            'title': 'Cannot create snapshot',
+            'msg': error.message
+          });
           progress.close();
         });
 

src/app/servers/servers.component.ts

@@ -66,7 +66,7 @@ export class AddServerDialogComponent {
 
   constructor(
     public dialogRef: MatDialogRef<AddServerDialogComponent>,
-    @Inject(MAT_DIALOG_DATA) public data: any, serverService: ServerService) {
+    @Inject(MAT_DIALOG_DATA) public data: any) {
   }
 
   onAddClick(): void {