Timer changed to web worker

dist/timerWorker.js

@@ -0,0 +1,22 @@
+let timer = undefined
+let timeStamp = 0
+
+onmessage = function (e) {
+  switch (e.data) {
+    case 'start': {
+      timer = setInterval(() => {
+        timeStamp += 1
+        postMessage(timeStamp)
+      }, 1000)
+    } break
+    case 'stop': {
+      clearInterval(timer)
+    } break
+    case 'reset': {
+      timeStamp = 0
+    } break
+    default: {
+      throw new Error(`Action "${e.data}" not recognized by the timer worker. Only "start", "stop", and "reset" actions are allowed.`)
+    }
+  }
+}

public/timerWorker.js

@@ -0,0 +1,22 @@
+let timer = undefined
+let timeStamp = 0
+
+onmessage = function (e) {
+  switch (e.data) {
+    case 'start': {
+      timer = setInterval(() => {
+        timeStamp += 1
+        postMessage(timeStamp)
+      }, 1000)
+    } break
+    case 'stop': {
+      clearInterval(timer)
+    } break
+    case 'reset': {
+      timeStamp = 0
+    } break
+    default: {
+      throw new Error(`Action "${e.data}" not recognized by the timer worker. Only "start", "stop", and "reset" actions are allowed.`)
+    }
+  }
+}

src/layouts/components/navbar/TheNavbarVertical.vue

@@ -58,7 +58,12 @@
 
           <NotificationDropDown/>
 
-          <Timer v-if="hasPermission('activity.time-entry.create')" @Timer="OpenTimer" @startTime="startTime" ref="timer"/>
+          <Timer
+            v-if="hasPermission('activity.time-entry.create')"
+            @Timer="OpenTimer"
+            @startTime="startTime"
+            ref="timer"
+          />
 
           <profile-drop-down />
 

src/layouts/components/timer/Timer.vue

@@ -1,13 +1,20 @@
 <template>
   <div class="flex items-baseline timer mr-5 hidden md:block">
     <div class="flex gap-2 items-center">
-      <vs-button color="primary" type="filled" @click="start" v-show="!is_start" icon="play_arrow alarm">
-        {{formattedElapsedTime.replace(/,/g, '')}}
+      <vs-button
+        color="primary"
+        type="filled"
+        @click="(turnedOn) ? stop() : start()"
+        :icon="(turnedOn) ? 'pause alarm' : 'play_arrow alarm'"
+      >
+        {{ formattedElapsedTime.replace(/,/g, '') }}
       </vs-button>
-      <vs-button @click="stop" color="primary" type="filled" icon="pause alarm" v-show="is_start">
-        {{formattedElapsedTime.replace(/,/g, '')}}
-      </vs-button>
-      <feather-icon v-show="!is_start && time_stamp > 0" icon="RefreshCwIcon" svg-classes="w-6 h-6 text-primary cursor-pointer" @click="reset"></feather-icon>
+      <feather-icon
+        v-show="!turnedOn && time_stamp > 0"
+        icon="RefreshCwIcon"
+        svg-classes="w-6 h-6 text-primary cursor-pointer"
+        @click="reset"
+      />
     </div>
   </div>
 </template>
@@ -19,32 +26,36 @@ import momentDurationFormatSetup from 'moment-duration-format'
 
 export default {
   name: "Timer",
+
   mixins: [Mixin],
+
   props: {
     time:{
       type: Number,
       default: 0
     }
   },
+
   data() {
     return {
-      _timer       : null,
-      is_start     : false,
-      time_stamp   : this.time,
-      time_normal  : undefined
+      turnedOn    : false,
+      time_stamp  : this.time,
+      time_normal : undefined,
+      timerWorker : undefined,
     };
   },
+
   computed: {
     formattedElapsedTime: {
       get() {
           let time_stamp = this.time_stamp / 3600
           let duration   = moment.duration(time_stamp, "hours").format("HH:mm:ss")
-          if(!duration.includes(':') || this.time_stamp === 0){
-            const date = new Date(null);
-            date.setSeconds(this.time_stamp);
-            const utc = date.toUTCString();
-            return utc.substr(utc.indexOf(":") - 2, 8);
-          }else {
+          if (!duration.includes(':') || this.time_stamp === 0) {
+            const date = new Date(null)
+            date.setSeconds(this.time_stamp)
+            const utc = date.toUTCString()
+            return utc.substr(utc.indexOf(":") - 2, 8)
+          } else {
             return time_stamp < 1 ? '00:' + duration : duration
           }
       },
@@ -53,23 +64,45 @@ export default {
       }
     }
   },
+
   methods: {
     start() {
-      this._timer = setInterval(() => this.time_stamp += 1, 1000);
-      this.is_start = true
+      this.timerWorker.postMessage('start')
+      this.turnedOn = true
       this.$emit('startTime')
     },
+
     stop() {
-      clearInterval(this._timer);
-      this.$emit('Timer', this.formattedElapsedTime.replace(/,/g, ''),this.time_stamp)
-      this.is_start = false
+      this.timerWorker.postMessage('stop')
+      this.$emit('Timer', this.formattedElapsedTime.replace(/,/g, ''), this.time_stamp)
+      this.turnedOn = false
     },
+
     reset() {
-      this.time_stamp = 0;
+      this.timerWorker.postMessage('reset')
+      this.time_stamp = 0
       this.formattedElapsedTime = 0
-    }
-  }
-};
+    },
+
+    onTimerWorkerUpdated(e) {
+      this.time_stamp = e.data
+    },
+
+    onTimerWorkerFailed(e) {
+      console.error(e.data)
+    },
+  },
+
+  mounted() {
+    this.timerWorker = new Worker('../timerWorker.js')
+    this.timerWorker.onmessage = this.onTimerWorkerUpdated
+    this.timerWorker.onerror = this.onTimerWorkerFailed
+  },
+
+  unmounted() {
+    this.timerWorker.terminate()
+  },
+}
 </script>
 
 <style>

src/views/pages/login/LoginFirebase.vue

@@ -196,6 +196,7 @@ export default {
       }
     },
   },
+
   mounted() {
     if(this.$route.params.code)
       this.codeParamsVerify()