Custom Actions Closing and Confirmation working

src/app/app.module.ts

@@ -39,13 +39,6 @@ import { NgxSpinnerModule } from 'ngx-spinner';
 import * as Hammer from 'hammerjs';
 import { RoundProgressModule } from 'angular-svg-round-progressbar';
 
-export class MyHammerConfig extends HammerGestureConfig {
-  overrides = {
-    press: { pointers: 1, time: 501, threshold: 15 },
-    swipe: { pointers: 1, direction: Hammer.DIRECTION_LEFT, threshold: 20, velocity: 0.4 }
-  } as any;
-}
-
 @Injectable()
 export class HammerConfig extends HammerGestureConfig {
   overrides = {

src/app/control/control.component.html

@@ -60,7 +60,8 @@
     </div>
     <div class="control__custom">
         <div class="control__custom-action" *ngFor="let customAction of customActions"
-            [style.border-color]="customAction.color" (click)="executeGCode(customAction.command)" matRipple
+            [style.border-color]="customAction.color"
+            (click)="doAction(customAction.command, customAction.exit, customAction.confirm)" matRipple
             [matRippleUnbounded]="false">
             <fa-icon [icon]="['fas', customAction.icon]" class="control__custom-action-icon"
                 [styles]="{color: customAction.color}">
@@ -87,3 +88,13 @@
         </tr>
     </table>
 </div>
+
+<div class="confirm__wrapper" *ngIf="actionToConfirm">
+    <div class="confirm">
+        <h1>Are you sure?</h1>
+        <p class="confirm__sub-heading">Do you want to execute the following GCode?</p>
+        <p class="confirm__gcode">{{ actionToConfirm.command }}</p>
+        <img class="confirm__icon" src="assets/confirm.svg" (click)="doActionConfirm()">
+        <img class="confirm__icon" src="assets/cancel.svg" (click)="doActionNoConfirm()">
+    </div>
+</div>

src/app/control/control.component.scss

@@ -189,3 +189,41 @@
 .top-bar__next-icon {
     vertical-align: -3vh;
 }
+
+.confirm {
+    position: fixed;
+    top: 22vh;
+    width: 64vw;
+    margin-left: 15vw;
+    background-color: #5a6675;
+    border-radius: 2vw;
+    padding: 3vh 3vw;
+    z-index: 10;
+
+    &__sub-heading {
+        font-size: 2.4vw;
+        padding-top: 2vh;
+    }
+
+    &__gcode {
+        font-size: 2.2vw;
+        padding: 2vh 1.5vw;
+        font-family: 'Cousine', monospace;
+    }
+
+    &__icon {
+        height: 15vh;
+        margin-top: 5vh;
+        margin-left: 15vw;
+    }
+
+    &__wrapper {
+        position: fixed;
+        z-index: 2;
+        background-color: rgba(0, 0, 0, .7);
+        left: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+    }
+}

src/app/control/control.component.ts

@@ -2,8 +2,9 @@ import { Component, SecurityContext } from '@angular/core';
 import { PrinterService } from '../printer.service';
 import { ConfigService } from '../config/config.service';
 import { OctoprintService } from '../octoprint.service';
-import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
+import { SafeResourceUrl } from '@angular/platform-browser';
 import { PsuControlService } from '../plugin-service/psu-control.service';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-control',
@@ -15,12 +16,14 @@ export class ControlComponent {
   public customActions = [];
   public showHelp = false;
   public iFrameURL: SafeResourceUrl = 'about:blank';
+  public actionToConfirm: ActionToConfirm;
 
   constructor(
     private printerService: PrinterService,
     private octoprintService: OctoprintService,
     private configService: ConfigService,
-    private psuControlService: PsuControlService) {
+    private psuControlService: PsuControlService,
+    private router: Router) {
     this.customActions = this.configService.getCustomActions();
   }
 
@@ -37,7 +40,33 @@ export class ControlComponent {
     );
   }
 
-  public executeGCode(command: string): void {
+  public doAction(command: string, exit: boolean, confirm: boolean) {
+    console.log(command, exit, confirm);
+    if (confirm) {
+      this.actionToConfirm = {
+        command,
+        exit
+      };
+    } else {
+      this.executeGCode(command);
+      if (exit) {
+        this.router.navigate(['/main-screen']);
+      }
+    }
+  }
+
+  public doActionConfirm() {
+    this.executeGCode(this.actionToConfirm.command);
+    if (this.actionToConfirm.exit) {
+      this.router.navigate(['/main-screen']);
+    }
+  }
+
+  public doActionNoConfirm() {
+    this.actionToConfirm = null;
+  }
+
+  private executeGCode(command: string): void {
     switch (command) {
       case '[!DISCONNECT]': this.disconnectPrinter(); break;
       case '[!STOPDASHBOARD]': this.stopOctoDash(); break;
@@ -109,3 +138,8 @@ export class ControlComponent {
     }, 500);
   }
 }
+
+interface ActionToConfirm {
+  command: string;
+  exit: boolean;
+}

src/app/files/files.component.html

@@ -46,7 +46,7 @@
                 {{ content.name }}
             </span>
         </div>
-        <div *ngIf="content.type === 'file'" (press)="openDetails(content.path)" (click)="loadFile(content.path)"
+        <div *ngIf="content.type === 'file'" (click)="openDetails(content.path)" (press)="loadFile(content.path)"
             matRipple [matRippleUnbounded]="false">
             <img src="assets/object.svg" class="files__icon" />
             <div class="files__info">