Added calculated duration of new timestamps

src/components/forms/FormRecordDetails.vue

@@ -21,6 +21,7 @@
         placeholder="Choose a start date"
         :max="times.end.date"
         dark
+        @input="() => updateCurrentDuration()"
       >
       </b-form-datepicker>
     </b-form-group>
@@ -32,6 +33,7 @@
         required
         placeholder="Choose a start time"
         dark
+        @input="() => updateCurrentDuration()"
       >
       </b-form-timepicker>
     </b-form-group>
@@ -47,6 +49,7 @@
         placeholder="Choose an end date"
         :min="times.start.date"
         dark
+        @input="() => updateCurrentDuration()"
       >
       </b-form-datepicker>
     </b-form-group>
@@ -59,6 +62,7 @@
         show-seconds
         placeholder="Choose an end time"
         dark
+        @input="() => updateCurrentDuration()"
       >
       </b-form-timepicker>
     </b-form-group>
@@ -67,17 +71,30 @@
       label="Duration [seconds]"
       label-for="duration"
     >
+      <b-input-group>
+        <b-input-group-prepend
+          is-text
+          :class="{ disabled: !times.finished || !times.editableDuration }"
+        >
+          <b-form-checkbox
+            class="mr-n2"
+            v-model="times.editableDuration"
+            @input="() => updateCurrentDuration()"
+          >
+          </b-form-checkbox>
+        </b-input-group-prepend>
         <b-form-input
           id="duration"
           v-model="times.duration"
           type="number"
-        :required="times.finished"
+          :required="times.finished && !times.editableDuration"
-        :disabled="!times.finished"
+          :disabled="!times.finished || !times.editableDuration"
           placeholder="Choose a duration"
           min="0"
           dark
         >
         </b-form-input>
+      </b-input-group>
     </b-form-group>
     <b-form-invalid-feedback :state="!failed">
       Something went wrong.
@@ -117,7 +134,8 @@ export default {
         start: { date: undefined, time: undefined },
         end: { date: undefined, time: undefined },
         finished: false,
-        duration: 0
+        duration: 0,
+        editableDuration: false
       },
       selectableProjects: [],
       failed: false,
@@ -156,6 +174,12 @@ export default {
       }
 
       return result;
+    },
+    exactCalcDuration: function() {
+      return helperService.calcDurationInSeconds(
+        this.resultRecord.start_time,
+        this.resultRecord.end_time
+      );
     }
   },
   methods: {
@@ -185,6 +209,11 @@ export default {
     },
     deleteRecord: function() {
       store.dispatch("removeRecord", this.record.record_id);
+    },
+    updateCurrentDuration: function() {
+      if (!this.times.editableDuration) {
+        this.times.duration = this.exactCalcDuration;
+      }
     }
   },
   created: function() {

src/services/helper.service.js

@@ -146,5 +146,9 @@ export const helperService = {
       ":" +
       dateTime.getSeconds()
     );
+  },
+
+  calcDurationInSeconds(start, end = new Date()) {
+    return (new Date(end).getTime() - new Date(start).getTime()) / 1000;
   }
 };

src/services/juggl.service.js

@@ -145,8 +145,7 @@ function processRecords(data) {
     rec.running = rec.end_time === null;
 
     if (rec.running) {
-      rec.duration =
+      rec.duration = helperService.calcDurationInSeconds(rec.start_time);
-        (new Date().getTime() - new Date(rec.start_time).getTime()) / 1000;
     }
   });
   return data;

src/style/theme.sass

@@ -114,11 +114,11 @@ header.b-calendar-grid-caption, .b-calendar-grid-weekdays *, header.b-calendar-h
 .b-form-datepicker label:not(.text-muted), .b-form-timepicker label:not(.text-muted)
     color: $font-primary !important
 
-input:disabled, .b-form-timepicker[aria-disabled=true], .b-form-datepicker[aria-disabled=true]
+input:disabled, .b-form-timepicker[aria-disabled=true], .b-form-datepicker[aria-disabled=true], .input-group-prepend.disabled *
     color: $font-inactive !important
     border-color: $background-primary !important
 
-input
+input, .input-group-prepend *
     color: $font-primary !important
     border-color: $grey !important
     background-color: $background-primary !important