Manage door

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">
+         <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">
-          <ButtonPrimary> Otvor </ButtonPrimary>
+          Otvor
-        </a>
+        </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">
-        <RouterLink :to="{ name: 'About' }">
+          Zatvor
-          <ButtonSecondary> Zatvor </ButtonSecondary>
+        </button>
-        </RouterLink>
+        <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">
-          <ButtonTerciary> Podrž </ButtonTerciary>
+          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>