Close button added

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]
 })

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

@@ -159,11 +159,11 @@
   <app-context-menu [project]="project" [server]="server"></app-context-menu>
 </div>
 
-<!-- <div id="zoom-buttons">
+<div id="zoom-buttons">
   <button class="zoom-button" (click)="zoomIn()">+</button>
   <button class="zoom-button" (click)="resetZoom()"><mat-icon>adjust</mat-icon></button>
   <button class="zoom-button" (click)="zoomOut()">-</button>
-</div> -->
+</div>
 
 <app-progress></app-progress>
 <app-project-map-shortcuts *ngIf="project" [project]="project" [server]="server"></app-project-map-shortcuts>

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']);
+        });
+      }
     });
   }
 

src/app/components/projects/confirmation-bottomsheet/confirmation-bottomsheet.component.html

@@ -0,0 +1,7 @@
+<div class="dialogWrapper">
+    <div class="title">{{message}}</div>
+    <div>
+        <button mat-button (click)="onNoClick()">No</button>
+        <button mat-button (click)="onYesClick()">Yes</button>
+    </div>
+</div>

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;
+}

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<ConfirmationBottomSheetComponent>) {}
+
+    ngOnInit() {}
+
+    onNoClick(): void {
+        this.bottomSheetRef.dismiss(false);
+    }
+
+    onYesClick(): void {
+        this.bottomSheetRef.dismiss(true);
+    }
+}

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