From 3e08d05a05c2bfe3cbc347cdb546ecc38253683e Mon Sep 17 00:00:00 2001
From: Nicola Carminati <nicola.carminati@cms.it>
Date: Thu, 3 May 2018 12:57:27 +0200
Subject: [PATCH] Added swipe-up gesture on footer

---
 Step/wwwroot/src/_base/gestures.js      |  7 +++--
 Step/wwwroot/src/modules/app-footer.ts  |  5 ++++
 Step/wwwroot/src/modules/app-footer.vue | 34 +++++++++++++------------
 3 files changed, 26 insertions(+), 20 deletions(-)

diff --git a/Step/wwwroot/src/_base/gestures.js b/Step/wwwroot/src/_base/gestures.js
index 5f93feb5..1063a458 100644
--- a/Step/wwwroot/src/_base/gestures.js
+++ b/Step/wwwroot/src/_base/gestures.js
@@ -39,10 +39,10 @@ function swipedetect(el, callback, onmovecallback, onstart, onstop) {
         distX = touchobj.pageX - lastXswipe;
         distY = touchobj.pageY - lastYswipe;
 
-        if (Math.abs(distY) >= threshold && Math.abs(distX) < restraint) {
+        if (Math.abs(distY) >= threshold && Math.abs(distX) < restraint && swipedir != 'left' && swipedir != 'right' ) {
             swipedir = (distY < 0) ? 'up' : 'down'
         }
-        if (Math.abs(distX) >= threshold && Math.abs(distY) < restraint) {
+        if (Math.abs(distX) >= threshold && Math.abs(distY) < restraint && swipedir != 'up' && swipedir != 'down' ) {
             swipedir = (distX < 0) ? 'left' : 'right'
         }
 
@@ -55,8 +55,7 @@ function swipedetect(el, callback, onmovecallback, onstart, onstop) {
     }, false)
 
     touchsurface.addEventListener('touchend', function(e) {
-        var touchobj = e.changedTouches[0]
-
+        var touchobj = e.changedTouches[0];
         if (onstop) onstop(e);
 
         handleswipe(swipedir)
diff --git a/Step/wwwroot/src/modules/app-footer.ts b/Step/wwwroot/src/modules/app-footer.ts
index c4835276..7e2118cb 100644
--- a/Step/wwwroot/src/modules/app-footer.ts
+++ b/Step/wwwroot/src/modules/app-footer.ts
@@ -22,6 +22,11 @@ export default class AppFooter extends Vue {
     appModelActions.MainViewToggle(this.$store);
   }
 
+  OpenMainView(direction) {
+    if (direction && direction == "up" && !this.$store.isMainViewLiftedUp)
+      appModelActions.MainViewLiftUp(this.$store);
+  }
+
   openProgram(path: string) {
     this.$router.push(path);
     appModelActions.MainViewLiftDown(this.$store);
diff --git a/Step/wwwroot/src/modules/app-footer.vue b/Step/wwwroot/src/modules/app-footer.vue
index 530fcd5a..2adf0599 100644
--- a/Step/wwwroot/src/modules/app-footer.vue
+++ b/Step/wwwroot/src/modules/app-footer.vue
@@ -1,22 +1,24 @@
 <template>
 
   <footer>
-    <div class="container">
-      <button @click="openProgram('/production')" :title="'footer_tooltip_production' | localize('Production')"
-              :disabled="!isAreaEnabled('production')" v-if="isAreaVisible('production')" class="oval main-production" :class="{ big:isInPath('production') && !state.isMainViewLiftedUp}"> </button>
-      <button @click="openProgram('/tooling')" :title="'footer_tooltip_tooling' | localize('Tooling')"
-              :disabled="!isAreaEnabled('tooling')" v-if="isAreaVisible('tooling')" class="oval tools-manager" :class="{ big:isInPath('tooling') && !state.isMainViewLiftedUp}"></button>
-      <button @click="openProgram('/report')" :title="'footer_tooltip_report' | localize('Report')"
-              :disabled="!isAreaEnabled('report')" v-if="isAreaVisible('report')" class="oval report-manager" :class="{ big:isInPath('report') && !state.isMainViewLiftedUp}"></button>
-      <button @click="openProgram('/alarms')" :title="'footer_tooltip_alarms' | localize('Alarms')"
-              :disabled="!isAreaEnabled('alarms')" v-if="isAreaVisible('alarms')" class="oval alarms-manager" :class="{ big:isInPath('alarms') && !state.isMainViewLiftedUp}"></button>
-      <button @click="openProgram('/maintenance')" :title="'footer_tooltip_maintenance' | localize('Maintenance')"
-              :disabled="!isAreaEnabled('maintenance')" v-if="isAreaVisible('maintenance')" class="oval maintenance-manager" :class="{ big:isInPath('maintenance') && !state.isMainViewLiftedUp}"></button>
-      <button @click="openProgram('/utilities')" :title="'footer_tooltip_utilities' | localize('Utilities')"
-              :disabled="!isAreaEnabled('utilities')" v-if="isAreaVisible('utilities')" class="oval utilities" :class="{ big:isInPath('utilities') && !state.isMainViewLiftedUp}"></button>
-      <button @click="openProgram('/test/header')" :title="'footer_tooltip_scada' | localize('Scada')"
-              :disabled="!isAreaEnabled('scada')" v-if="isAreaVisible('scada')" class="oval scada" :class="{ big:isInPath('/test/header') && !state.isMainViewLiftedUp}"></button>
-    </div>
+      <vue-gesture :type="'swipeup'" :call="OpenMainView">     
+        <div class="container">
+            <button @click="openProgram('/production')" :title="'footer_tooltip_production' | localize('Production')"
+                    :disabled="!isAreaEnabled('production')" v-if="isAreaVisible('production')" class="oval main-production" :class="{ big:isInPath('production') && !state.isMainViewLiftedUp}"> </button>
+            <button @click="openProgram('/tooling')" :title="'footer_tooltip_tooling' | localize('Tooling')"
+                    :disabled="!isAreaEnabled('tooling')" v-if="isAreaVisible('tooling')" class="oval tools-manager" :class="{ big:isInPath('tooling') && !state.isMainViewLiftedUp}"></button>
+            <button @click="openProgram('/report')" :title="'footer_tooltip_report' | localize('Report')"
+                    :disabled="!isAreaEnabled('report')" v-if="isAreaVisible('report')" class="oval report-manager" :class="{ big:isInPath('report') && !state.isMainViewLiftedUp}"></button>
+            <button @click="openProgram('/alarms')" :title="'footer_tooltip_alarms' | localize('Alarms')"
+                    :disabled="!isAreaEnabled('alarms')" v-if="isAreaVisible('alarms')" class="oval alarms-manager" :class="{ big:isInPath('alarms') && !state.isMainViewLiftedUp}"></button>
+            <button @click="openProgram('/maintenance')" :title="'footer_tooltip_maintenance' | localize('Maintenance')"
+                    :disabled="!isAreaEnabled('maintenance')" v-if="isAreaVisible('maintenance')" class="oval maintenance-manager" :class="{ big:isInPath('maintenance') && !state.isMainViewLiftedUp}"></button>
+            <button @click="openProgram('/utilities')" :title="'footer_tooltip_utilities' | localize('Utilities')"
+                    :disabled="!isAreaEnabled('utilities')" v-if="isAreaVisible('utilities')" class="oval utilities" :class="{ big:isInPath('utilities') && !state.isMainViewLiftedUp}"></button>
+            <button @click="openProgram('/test/header')" :title="'footer_tooltip_scada' | localize('Scada')"
+                    :disabled="!isAreaEnabled('scada')" v-if="isAreaVisible('scada')" class="oval scada" :class="{ big:isInPath('/test/header') && !state.isMainViewLiftedUp}"></button>
+        </div>
+    </vue-gesture>
     <div class="machine-area">
       <button class="under" @mouseup="toggleMainView()" :class="{'pressed':state.isMainViewLiftedUp}" :title="'footer_tooltip_under_hood' | localize('Open/Close Under-the-hood area')">
         <img src="assets/icons/png/siemens-logo.png" v-if="isSiemens()">