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) {