Bottom sheet for imported projects

src/app/app.module.ts

@@ -239,6 +239,7 @@ import { ChooseNameDialogComponent } from './components/projects/choose-name-dia
 import { PacketCaptureService } from './services/packet-capture.service';
 import { StartCaptureOnStartedLinkActionComponent } from './components/project-map/context-menu/actions/start-capture-on-started-link/start-capture-on-started-link.component';
 import { LockActionComponent } from './components/project-map/context-menu/actions/lock-action/lock-action.component';
+import { NavigationDialogComponent } from './components/projects/navigation-dialog/navigation-dialog.component';
 
 if (environment.production) {
   Raven.config('https://b2b1cfd9b043491eb6b566fd8acee358@sentry.io/842726', {
@@ -403,7 +404,8 @@ if (environment.production) {
     QemuImageCreatorComponent,
     ChooseNameDialogComponent,
     StartCaptureOnStartedLinkActionComponent,
-    LockActionComponent
+    LockActionComponent,
+    NavigationDialogComponent
   ],
   imports: [
     BrowserModule,
@@ -521,7 +523,8 @@ if (environment.production) {
     ConfiguratorDialogNatComponent,
     ConfiguratorDialogTracengComponent,
     QemuImageCreatorComponent,
-    ChooseNameDialogComponent
+    ChooseNameDialogComponent,
+    NavigationDialogComponent
   ],
   bootstrap: [AppComponent]
 })

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

@@ -53,7 +53,7 @@ import { MapLinkNodeToLinkNodeConverter } from '../../cartography/converters/map
 import { ProjectMapMenuComponent } from './project-map-menu/project-map-menu.component';
 import { ToasterService } from '../../services/toaster.service';
 import { ImportProjectDialogComponent } from '../projects/import-project-dialog/import-project-dialog.component';
-import { MatDialog } from '@angular/material';
+import { MatDialog, MatBottomSheet } from '@angular/material';
 import { AddBlankProjectDialogComponent } from '../projects/add-blank-project-dialog/add-blank-project-dialog.component';
 import { SaveProjectDialogComponent } from '../projects/save-project-dialog/save-project-dialog.component';
 import { MapNodesDataSource, MapLinksDataSource, MapDrawingsDataSource, MapSymbolsDataSource, Indexed } from '../../cartography/datasources/map-datasource';
@@ -61,6 +61,7 @@ import { MapSettingsService } from '../../services/mapsettings.service';
 import { EditProjectDialogComponent } from '../projects/edit-project-dialog/edit-project-dialog.component';
 import { EthernetLinkWidget } from '../../cartography/widgets/links/ethernet-link';
 import { SerialLinkWidget } from '../../cartography/widgets/links/serial-link';
+import { NavigationDialogComponent } from '../projects/navigation-dialog/navigation-dialog.component';
 
 
 @Component({
@@ -137,7 +138,8 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
     private mapSymbolsDataSource: MapSymbolsDataSource,
     private mapSettingsService: MapSettingsService,
     private ethernetLinkWidget: EthernetLinkWidget,
-    private serialLinkWidget: SerialLinkWidget
+    private serialLinkWidget: SerialLinkWidget,
+    private bottomSheet: MatBottomSheet
   ) {}
 
   ngOnInit() {
@@ -510,8 +512,16 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
     dialogRef.afterClosed().subscribe(() => {
       subscription.unsubscribe();
       if (uuid) {
-        this.projectService.open(this.server, uuid).subscribe(() => {
+        this.bottomSheet.open(NavigationDialogComponent);
-          this.router.navigate(['/server', this.server.id, 'project', uuid]);
+        let bottomSheetRef = this.bottomSheet._openedBottomSheetRef;
+        bottomSheetRef.instance.projectMessage = 'imported project';
+        
+        const bottomSheetSubscription = bottomSheetRef.afterDismissed().subscribe((result: boolean) => {
+          if (result) {
+            this.projectService.open(this.server, uuid).subscribe(() => {
+              this.router.navigate(['/server', this.server.id, 'project', uuid]);
+            });
+          }
         });
       }
     });

src/app/components/projects/navigation-dialog/navigation-dialog.component.html

@@ -0,0 +1,7 @@
+<div class="dialogWrapper">
+    <div class="title"> Do you want to navigate to {{projectMessage}}?</div>
+    <div>
+        <button mat-button (click)="onNoClick()">No</button>
+        <button mat-button (click)="onYesClick()">Yes</button>
+    </div>
+</div>

src/app/components/projects/navigation-dialog/navigation-dialog.component.scss

@@ -0,0 +1,17 @@
+.dialogWrapper {
+    background-color: #263238;
+    padding: 10px 20px;
+    margin-bottom: -8px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+mat-bottom-sheet-container {
+    background: #263238;
+}
+
+.title {
+    margin-right: 10px;
+    margin-left: 10px;
+}

src/app/components/projects/navigation-dialog/navigation-dialog.component.ts

@@ -0,0 +1,23 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA, MatBottomSheetRef } from '@angular/material';
+
+@Component({
+  selector: 'app-navigation-dialog',
+  templateUrl: 'navigation-dialog.component.html',
+  styleUrls: ['navigation-dialog.component.scss']
+})
+export class NavigationDialogComponent implements OnInit {
+    projectMessage: string = '';
+
+    constructor(private bottomSheetRef: MatBottomSheetRef<NavigationDialogComponent>) {}
+
+    ngOnInit() {}
+
+    onNoClick(): void {
+        this.bottomSheetRef.dismiss(false);
+    }
+
+    onYesClick(): void {
+        this.bottomSheetRef.dismiss(true);
+    }
+}

src/app/components/projects/projects.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
-import { ActivatedRoute, ParamMap } from '@angular/router';
+import { ActivatedRoute, ParamMap, Router } from '@angular/router';
-import { MatSort, MatSortable, MatDialog } from '@angular/material';
+import { MatSort, MatSortable, MatDialog, MatBottomSheet } from '@angular/material';
 
 import { DataSource } from '@angular/cdk/collections';
 
@@ -17,6 +17,7 @@ import { ProgressService } from '../../common/progress/progress.service';
 import { ImportProjectDialogComponent } from './import-project-dialog/import-project-dialog.component';
 import { AddBlankProjectDialogComponent } from './add-blank-project-dialog/add-blank-project-dialog.component';
 import { ChooseNameDialogComponent } from './choose-name-dialog/choose-name-dialog.component';
+import { NavigationDialogComponent } from './navigation-dialog/navigation-dialog.component';
 
 @Component({
   selector: 'app-projects',
@@ -40,7 +41,9 @@ export class ProjectsComponent implements OnInit {
     private projectService: ProjectService,
     private settingsService: SettingsService,
     private progressService: ProgressService,
-    public dialog: MatDialog
+    public dialog: MatDialog,
+    private router: Router,
+    private bottomSheet: MatBottomSheet
   ) {}
 
   ngOnInit() {
@@ -133,15 +136,33 @@ export class ProjectsComponent implements OnInit {
   }
 
   importProject() {
+    let uuid: string = '';
     const dialogRef = this.dialog.open(ImportProjectDialogComponent, {
       width: '400px',
       autoFocus: false
     });
     let instance = dialogRef.componentInstance;
     instance.server = this.server;
+    const subscription = dialogRef.componentInstance.onImportProject.subscribe((projectId: string) => {
+      uuid = projectId;
+    });
 
     dialogRef.afterClosed().subscribe(() => {
       this.refresh();
+      subscription.unsubscribe();
+      if (uuid) {
+        this.bottomSheet.open(NavigationDialogComponent);
+        let bottomSheetRef = this.bottomSheet._openedBottomSheetRef;
+        bottomSheetRef.instance.projectMessage = 'imported project';
+        
+        const bottomSheetSubscription = bottomSheetRef.afterDismissed().subscribe((result: boolean) => {
+          if (result) {
+            this.projectService.open(this.server, uuid).subscribe(() => {
+              this.router.navigate(['/server', this.server.id, 'project', uuid]);
+            });
+          }
+        });
+      }
     });
   }
 }

src/app/material.imports.ts

@@ -21,7 +21,8 @@ import {
   MatRadioModule,
   MatGridListModule,
   MatTabsModule,
-  MatTreeModule
+  MatTreeModule,
+  MatBottomSheetModule
 } from '@angular/material';
 
 export const MATERIAL_IMPORTS = [
@@ -47,5 +48,6 @@ export const MATERIAL_IMPORTS = [
   MatRadioModule,
   MatGridListModule,
   MatTabsModule,
-  MatTreeModule
+  MatTreeModule,
+  MatBottomSheetModule
 ];