From b4ff7be877b36e993ae005f446d5401a6c91f064 Mon Sep 17 00:00:00 2001
From: Jeroen De Meerleer <me@jeroened.be>
Date: Tue, 4 May 2021 20:54:07 +0200
Subject: [PATCH] Added stop button

---
 src/App.vue              |  7 +++----
 src/components/Timer.vue | 13 +++++++++++--
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 83c815c..1f3c234 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,7 +2,7 @@
   <div id="app">
     <p class="error" v-if="wakeLockAvailable == false">Wake lock not available</p>
     <Settings v-if="time == 0" v-on:set-time="setTime" v-on:set-playsound="setPlaySound"/>
-    <Timer v-if="time != 0" v-bind:time="time" v-bind:playsound="playsound"/>
+    <Timer v-if="time != 0" v-bind:time="time" v-bind:playsound="playsound" v-on:set-time="setTime" v-on:set-playsound="setPlaySound"/>
   </div>
 </template>
 
@@ -36,9 +36,8 @@ export default {
       } else {
         return false;
       }
-    }
-  }
-
+    },
+  },
 }
 </script>
 
diff --git a/src/components/Timer.vue b/src/components/Timer.vue
index fd640e5..d6e1992 100644
--- a/src/components/Timer.vue
+++ b/src/components/Timer.vue
@@ -1,5 +1,6 @@
 <template>
   <div class="timer">
+    <div class="end" v-on:click="resetTime()">X</div>
     <p v-if="warning == false" class="timeleft reverse">{{ countDown.toString() }}</p>
     <p v-if="(warning == true) || (typeof warning == 'undefined')" class="timeout reverse">
       <img src="joker.png" alt="joker">
@@ -35,9 +36,10 @@ export default {
       wakeLock: null,
     }
   },
-  mounted: function() {
-  },
   methods: {
+    resetTime: function() {
+      this.$emit('set-time', 0);
+    },
     timeleft: function(){
       this.countDown--;
       if(this.countDown == 0) {
@@ -115,6 +117,13 @@ export default {
     transform: scale(-1, -1);
   }
 
+  .end {
+    display: block;
+    position: absolute;
+    right: 1px;
+    top: 1px;
+    font-size: 32px;
+  }
 }
 
 </style>
\ No newline at end of file