diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 6e94648d..f6452a5a 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -248,6 +248,7 @@ import { DragDropModule } from '@angular/cdk/drag-drop'; import { PageNotFoundComponent } from './components/page-not-found/page-not-found.component'; import { AlignHorizontallyActionComponent } from './components/project-map/context-menu/actions/align-horizontally/align-horizontally.component'; import { AlignVerticallyActionComponent } from './components/project-map/context-menu/actions/align_vertically/align-vertically.component'; +import { ConfirmationBottomSheetComponent } from './components/projects/confirmation-bottomsheet/confirmation-bottomsheet.component'; if (environment.production) { Raven.config('https://b2b1cfd9b043491eb6b566fd8acee358@sentry.io/842726', { @@ -418,7 +419,8 @@ if (environment.production) { ScreenshotDialogComponent, PageNotFoundComponent, AlignHorizontallyActionComponent, - AlignVerticallyActionComponent + AlignVerticallyActionComponent, + ConfirmationBottomSheetComponent ], imports: [ BrowserModule, @@ -541,7 +543,8 @@ if (environment.production) { QemuImageCreatorComponent, ChooseNameDialogComponent, NavigationDialogComponent, - ScreenshotDialogComponent + ScreenshotDialogComponent, + ConfirmationBottomSheetComponent ], bootstrap: [AppComponent] }) diff --git a/src/app/components/project-map/project-map.component.html b/src/app/components/project-map/project-map.component.html index c60fcfcc..0fa2d1b6 100644 --- a/src/app/components/project-map/project-map.component.html +++ b/src/app/components/project-map/project-map.component.html @@ -159,11 +159,11 @@ - + diff --git a/src/app/components/project-map/project-map.component.ts b/src/app/components/project-map/project-map.component.ts index e7c83336..4835ffb4 100644 --- a/src/app/components/project-map/project-map.component.ts +++ b/src/app/components/project-map/project-map.component.ts @@ -62,6 +62,7 @@ import { EditProjectDialogComponent } from '../projects/edit-project-dialog/edit 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'; +import { ConfirmationBottomSheetComponent } from '../projects/confirmation-bottomsheet/confirmation-bottomsheet.component'; @Component({ @@ -771,14 +772,28 @@ export class ProjectMapComponent implements OnInit, OnDestroy { } public closeProject() { - this.projectService.close(this.server, this.project.project_id).subscribe(() => { - this.router.navigate(['/server', this.server.id, 'projects']); + this.bottomSheet.open(ConfirmationBottomSheetComponent); + let bottomSheetRef = this.bottomSheet._openedBottomSheetRef; + bottomSheetRef.instance.message = 'Do you want to close the project?'; + const bottomSheetSubscription = bottomSheetRef.afterDismissed().subscribe((result: boolean) => { + if (result) { + this.projectService.close(this.server, this.project.project_id).subscribe(() => { + this.router.navigate(['/server', this.server.id, 'projects']); + }); + } }); } public deleteProject() { - this.projectService.delete(this.server, this.project.project_id).subscribe(() => { - this.router.navigate(['/server', this.server.id, 'projects']); + this.bottomSheet.open(ConfirmationBottomSheetComponent); + let bottomSheetRef = this.bottomSheet._openedBottomSheetRef; + bottomSheetRef.instance.message = 'Do you want to delete the project?'; + const bottomSheetSubscription = bottomSheetRef.afterDismissed().subscribe((result: boolean) => { + if (result) { + this.projectService.delete(this.server, this.project.project_id).subscribe(() => { + this.router.navigate(['/server', this.server.id, 'projects']); + }); + } }); } diff --git a/src/app/components/projects/confirmation-bottomsheet/confirmation-bottomsheet.component.html b/src/app/components/projects/confirmation-bottomsheet/confirmation-bottomsheet.component.html new file mode 100644 index 00000000..5eafa7cd --- /dev/null +++ b/src/app/components/projects/confirmation-bottomsheet/confirmation-bottomsheet.component.html @@ -0,0 +1,7 @@ +
+
{{message}}
+
+ + +
+
diff --git a/src/app/components/projects/confirmation-bottomsheet/confirmation-bottomsheet.component.scss b/src/app/components/projects/confirmation-bottomsheet/confirmation-bottomsheet.component.scss new file mode 100644 index 00000000..c8a87a35 --- /dev/null +++ b/src/app/components/projects/confirmation-bottomsheet/confirmation-bottomsheet.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/confirmation-bottomsheet/confirmation-bottomsheet.component.ts b/src/app/components/projects/confirmation-bottomsheet/confirmation-bottomsheet.component.ts new file mode 100644 index 00000000..21e14195 --- /dev/null +++ b/src/app/components/projects/confirmation-bottomsheet/confirmation-bottomsheet.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-confirmation-bottomsheet', + templateUrl: 'confirmation-bottomsheet.component.html', + styleUrls: ['confirmation-bottomsheet.component.scss'] +}) +export class ConfirmationBottomSheetComponent implements OnInit { + message: 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 06b035a8..0cdae130 100644 --- a/src/app/components/projects/projects.component.ts +++ b/src/app/components/projects/projects.component.ts @@ -18,6 +18,7 @@ import { ImportProjectDialogComponent } from './import-project-dialog/import-pro 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'; +import { ConfirmationBottomSheetComponent } from './confirmation-bottomsheet/confirmation-bottomsheet.component'; @Component({ selector: 'app-projects', @@ -80,8 +81,15 @@ export class ProjectsComponent implements OnInit { } delete(project: Project) { - this.projectService.delete(this.server, project.project_id).subscribe(() => { - this.projectDatabase.remove(project); + this.bottomSheet.open(ConfirmationBottomSheetComponent); + let bottomSheetRef = this.bottomSheet._openedBottomSheetRef; + bottomSheetRef.instance.message = 'Do you want to delete the project?'; + const bottomSheetSubscription = bottomSheetRef.afterDismissed().subscribe((result: boolean) => { + if (result) { + this.projectService.delete(this.server, project.project_id).subscribe(() => { + this.refresh(); + }); + } }); } @@ -100,17 +108,17 @@ export class ProjectsComponent implements OnInit { } close(project: Project) { - this.progressService.activate(); - - this.projectService.close(this.server, project.project_id).subscribe( - () => { - this.refresh(); - }, - () => {}, - () => { - this.progressService.deactivate(); + this.bottomSheet.open(ConfirmationBottomSheetComponent); + let bottomSheetRef = this.bottomSheet._openedBottomSheetRef; + bottomSheetRef.instance.message = 'Do you want to close the project?'; + const bottomSheetSubscription = bottomSheetRef.afterDismissed().subscribe((result: boolean) => { + if (result) { + this.projectService.close(this.server, project.project_id).subscribe(() => { + this.refresh(); + this.progressService.deactivate(); + }); } - ); + }); } duplicate(project: Project) {