Added live record timer

src/components/juggl/JugglRecordsList.vue

@@ -104,6 +104,7 @@ export default {
   data() {
     return {
       iconScale: 1.6,
+      timerDelta: 0,
       requiredFields: [
         {
           key: "project",
@@ -148,8 +149,18 @@ export default {
       return fields;
     }
   },
+  timers: {
+    "increaseTimer": { time: 1000, autostart: true, repeat: true }
+  },
   methods: {
-    getDurationTimestamp: helperService.getDurationTimestamp,
+    getDurationTimestamp: function(duration) {
+      var localDuration = duration;
+      if (this.running) {
+        localDuration += this.timerDelta;
+      }
+
+      return helperService.getDurationTimestamp(localDuration);
+    },
     getProject: function(id) {
       var project = store.getters.getProjectById(id);
 
@@ -164,6 +175,9 @@ export default {
     },
     detailsRecord: function(id) {
       this.$router.push("/record/" + id);
+    },
+    increaseTimer: function() {
+      this.timerDelta++;
     }
   }
 };

src/main.js

@@ -3,9 +3,12 @@ import App from "./App.vue";
 import router from "./router";
 import store from "./store";
 import { BootstrapVue, BootstrapVueIcons } from "bootstrap-vue";
+import VueTimers from 'vue-timers'
 
 Vue.config.productionTip = false;
 
+Vue.use(VueTimers);
+
 // Install BootstrapVue
 Vue.use(BootstrapVue);
 Vue.use(BootstrapVueIcons);

src/views/Changelog.vue

@@ -6,7 +6,7 @@
     <ul>
       <li>Added credits page</li>
       <li>Created basic footer</li>
-      <li>Added live timer in record list</li>
+      <li>Added live record timer</li>
     </ul>
     <BaseTitle size="small">
       27.07.2021