From e62d9465abea7bfb720a93b9d8c932bb6fb5c39c Mon Sep 17 00:00:00 2001
From: UnchartedBull <timon.gaebelein@icloud.com>
Date: Wed, 12 Feb 2020 17:59:29 +0100
Subject: [PATCH 1/2] working

---
 src/app/control/control.component.html | 13 ++++++++-
 src/app/control/control.component.scss | 38 ++++++++++++++++++++++++
 src/app/control/control.component.ts   | 40 ++++++++++++++++++++++++--
 src/assets/confirm.svg                 |  1 +
 4 files changed, 88 insertions(+), 4 deletions(-)
 create mode 100644 src/assets/confirm.svg

diff --git a/src/app/control/control.component.html b/src/app/control/control.component.html
index ba09abdc8..bf48000c2 100644
--- a/src/app/control/control.component.html
+++ b/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>
diff --git a/src/app/control/control.component.scss b/src/app/control/control.component.scss
index c4782c94c..f4a58c866 100755
--- a/src/app/control/control.component.scss
+++ b/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;
+    }
+}
diff --git a/src/app/control/control.component.ts b/src/app/control/control.component.ts
index 472d613bc..26cbe0f62 100644
--- a/src/app/control/control.component.ts
+++ b/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;
+}
diff --git a/src/assets/confirm.svg b/src/assets/confirm.svg
new file mode 100644
index 000000000..11d1b710b
--- /dev/null
+++ b/src/assets/confirm.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><switch><g fill="#44bd32"><path d="M50 2.5a47.5 47.5 0 100 95 47.5 47.5 0 000-95zm21.3 42.1L50.2 65.8A7.4 7.4 0 0145 68a7 7 0 01-5.2-2.2L28.7 54.7a7.4 7.4 0 1110.5-10.5L45 50l15.9-16c2.9-2.9 7.6-2.9 10.5 0s2.8 7.8-.1 10.6z"/></g></switch></svg>
\ No newline at end of file

From 9f94a1856ceee87335a922edace4bffe28c7e1b3 Mon Sep 17 00:00:00 2001
From: UnchartedBull <timon.gaebelein@icloud.com>
Date: Wed, 12 Feb 2020 19:50:10 +0100
Subject: [PATCH 2/2] Switch hold and click on file view

---
 src/app/app.module.ts              | 7 -------
 src/app/files/files.component.html | 2 +-
 2 files changed, 1 insertion(+), 8 deletions(-)

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 2c3a4f9e3..3be5463ca 100644
--- a/src/app/app.module.ts
+++ b/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 = {
diff --git a/src/app/files/files.component.html b/src/app/files/files.component.html
index dc36d7cf0..d8b031416 100644
--- a/src/app/files/files.component.html
+++ b/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">