From a41d8a81fa4e211c62e98cd9e261224fbe44b2a4 Mon Sep 17 00:00:00 2001
From: Jaro <jaro@ttx.sk>
Date: Fri, 5 Nov 2021 06:03:12 +0100
Subject: [PATCH] Manage door

---
 src/components/Hero.vue | 47 ++++++++++++++++++++++++++++++++---------
 1 file changed, 37 insertions(+), 10 deletions(-)

diff --git a/src/components/Hero.vue b/src/components/Hero.vue
index 5932165..bc6969a 100644
--- a/src/components/Hero.vue
+++ b/src/components/Hero.vue
@@ -6,7 +6,7 @@
       <img
         class="w-800px h-600px border-gray-500 border-5 rounded-3xl object-cover object-center rounded"
         alt="Main camera" 
-        :src="mjpegSrc[clickMJ % 2]" @click="clickMJ++"
+        :src="mjpegSrc[clickMJ % 2]" @click="clickMain()"
       />
     </div>
     <div
@@ -19,20 +19,21 @@
       <img
         class="w-400px h-300px mb-8 border-gray-500 border-5 rounded-3xl object-cover object-center rounded"
         alt="Main camera" 
-        :src="previewSrc[clickPW % 2]" @click="clickPW++"
+        :src="previewSrc[clickPW % 2]" @click="clickPreview()"
       />
       <p class="mb-8">
 	 Ovládanie dverí
       </p>
       <div class="flex justify-center">
-        <a href="https://vuejs.org/v2/guide/" target="_blank">
-          <ButtonPrimary> Otvor </ButtonPrimary>
-        </a>
-
-        <RouterLink :to="{ name: 'About' }">
-          <ButtonSecondary> Zatvor </ButtonSecondary>
-        </RouterLink>
-          <ButtonTerciary> Podrž </ButtonTerciary>
+         <button @click="openDoor()" class="inline-flex px-6 py-2 ml-4 text-lg text-gray-700 bg-gray-200 border-0 rounded focus:outline-none hover:bg-gray-100">
+          Otvor
+        </button>
+        <button @click="closeDoor()" class="inline-flex px-6 py-2 ml-4 text-lg text-gray-700 bg-gray-200 border-0 rounded focus:outline-none hover:bg-gray-100">
+          Zatvor
+        </button>
+        <button @click="pulseDoor()" class="inline-flex px-6 py-2 ml-4 text-lg text-gray-700 bg-gray-200 border-0 rounded focus:outline-none hover:bg-gray-100">
+          Podrž
+        </button>
 
       </div>
     </div>
@@ -58,5 +59,31 @@ export default defineComponent({
 
     return { appName, previewSrc, mjpegSrc, clickMJ, clickPW };
   },
+  methods: {
+    clickPreview() {
+      console.log('Click preview',this.clickPW);
+      //stop
+      this.clickMJ = 1;
+      this.$nextTick(() => {
+        // The whole view is rendered, so I can safely access or query
+        // the DOM. ¯\_(ツ)_/¯
+        this.clickPW++;
+      })
+    },
+    clickMain() {
+      console.log('Click main',this.clickMJ);
+      this.clickMJ++;
+      
+    },
+    openDoor() {
+      console.log('Open Door');
+    },
+    closeDoor() {
+      console.log('Close Door');
+    },
+    pulseDoor() {
+      console.log('Send pulse to Door');
+    }
+  }
 });
 </script>