From 41c67ae6ec8ac3769c167053f8fa82487f1fe837 Mon Sep 17 00:00:00 2001 From: Piotr Pekala Date: Thu, 3 Oct 2019 07:16:57 -0700 Subject: [PATCH] Bottom sheet for imported projects --- src/app/app.module.ts | 7 +++-- .../project-map/project-map.component.ts | 18 ++++++++++--- .../navigation-dialog.component.html | 7 +++++ .../navigation-dialog.component.scss | 17 ++++++++++++ .../navigation-dialog.component.ts | 23 ++++++++++++++++ .../components/projects/projects.component.ts | 27 ++++++++++++++++--- src/app/material.imports.ts | 6 +++-- 7 files changed, 94 insertions(+), 11 deletions(-) create mode 100644 src/app/components/projects/navigation-dialog/navigation-dialog.component.html create mode 100644 src/app/components/projects/navigation-dialog/navigation-dialog.component.scss create mode 100644 src/app/components/projects/navigation-dialog/navigation-dialog.component.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index d7da9ede..4641877b 100644 --- a/src/app/app.module.ts +++ b/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] }) diff --git a/src/app/components/project-map/project-map.component.ts b/src/app/components/project-map/project-map.component.ts index 8ccea4f0..14732ed9 100644 --- a/src/app/components/project-map/project-map.component.ts +++ b/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.router.navigate(['/server', this.server.id, 'project', 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]); + }); + } }); } }); diff --git a/src/app/components/projects/navigation-dialog/navigation-dialog.component.html b/src/app/components/projects/navigation-dialog/navigation-dialog.component.html new file mode 100644 index 00000000..93169d50 --- /dev/null +++ b/src/app/components/projects/navigation-dialog/navigation-dialog.component.html @@ -0,0 +1,7 @@ +
+
Do you want to navigate to {{projectMessage}}?
+
+ + +
+
diff --git a/src/app/components/projects/navigation-dialog/navigation-dialog.component.scss b/src/app/components/projects/navigation-dialog/navigation-dialog.component.scss new file mode 100644 index 00000000..c8a87a35 --- /dev/null +++ b/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; +} diff --git a/src/app/components/projects/navigation-dialog/navigation-dialog.component.ts b/src/app/components/projects/navigation-dialog/navigation-dialog.component.ts new file mode 100644 index 00000000..52264ab0 --- /dev/null +++ b/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) {} + + ngOnInit() {} + + onNoClick(): void { + this.bottomSheetRef.dismiss(false); + } + + onYesClick(): void { + this.bottomSheetRef.dismiss(true); + } +} diff --git a/src/app/components/projects/projects.component.ts b/src/app/components/projects/projects.component.ts index e17c6c99..06b035a8 100644 --- a/src/app/components/projects/projects.component.ts +++ b/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 { MatSort, MatSortable, MatDialog } from '@angular/material'; +import { ActivatedRoute, ParamMap, Router } from '@angular/router'; +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]); + }); + } + }); + } }); } } diff --git a/src/app/material.imports.ts b/src/app/material.imports.ts index ac93b2a2..267561d2 100644 --- a/src/app/material.imports.ts +++ b/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 ];