feat(options): autoFetch, csvExport processed data

reinzor · Apr 12, 2021 · b2d8f48 · b2d8f48
1 parent 4233528
commit b2d8f48
Show file tree

Hide file tree

Showing 5 changed files with 95 additions and 22 deletions.
diff --git a/src/components/DataSelection.vue b/src/components/DataSelection.vue
@@ -15,7 +15,7 @@
       <b-form-datepicker
         id="from-date"
         class="mb-2 mr-sm-2 mb-sm-0"
-        @input="fetchData()"
+        @input="dateChanged()"
         :value-as-date="true"
         v-model="from"
         :start-weekday="1"
@@ -27,15 +27,18 @@
         v-if="type === Types.RANGE"
         id="to-date"
         class="mb-2 mr-sm-2 mb-sm-0"
-        @input="fetchData()"
+        @input="dateChanged()"
         :value-as-date="true"
         v-model="to"
         :hide-header="true"
       >
       </b-form-datepicker>
-      <span v-if="fetching">
-        <small class="text-muted"><b-spinner small></b-spinner></small>
-      </span>
+      <b-button variant="primary" v-if="fetching">
+        <small><b-spinner small></b-spinner></small>
+      </b-button>
+      <b-button variant="primary" v-else @click="fetchData">
+        <small><b-icon icon="arrow-clockwise" scale="1.2"></b-icon></small>
+      </b-button>
     </b-form>
   </div>
 </template>
@@ -90,10 +93,19 @@ export default {
     }
   },
   created() {
-    this.fetchData()
+    if (globalOptions.autoFetch) {
+      this.fetchData()
+    }
   },
   methods: {
+    dateChanged() {
+      if (globalOptions.autoFetch) {
+        this.fetchData()
+      }
+    },
     fetchData() {
+      this.$emit('data-updated', { name: '', items: [] })
+
       this.fetching = true
       this.error429 = false
       chrome.runtime.sendMessage({ from: this.fromDate, to: this.toDate }, response => {

diff --git a/src/components/DataTable.vue b/src/components/DataTable.vue
@@ -6,7 +6,7 @@
           <b-icon icon="download" aria-hidden="true"></b-icon>
         </template>
         <b-dropdown-item>
-          <download-csv :data="data.items" :name="`${data.name}.csv`">CSV</download-csv>
+          <download-csv :data="csvItems" :name="`${data.name}.csv`">CSV</download-csv>
         </b-dropdown-item>
         <b-dropdown-item @click="print">PDF</b-dropdown-item>
       </b-dropdown>
@@ -103,6 +103,18 @@ export default {
         }
         return undefined
       }, undefined)
+    },
+    csvItems() {
+      return this.data.items.map(item => {
+        let csvItem = Object.assign({}, item)
+        if (globalOptions.csvExportProcessedDistance) {
+          csvItem.distance = this.$options.filters.distance(item.distance, 2, true)
+        }
+        if (globalOptions.csvExportProcessedDuration) {
+          csvItem.duration = this.$options.filters.hhmmss(item.duration)
+        }
+        return csvItem
+      })
     }
   }
 }

diff --git a/src/components/GlobalOptionsModal.vue b/src/components/GlobalOptionsModal.vue
@@ -3,18 +3,48 @@
     <template #modal-title>
       <b-icon icon="gear-fill" variant="primary" aria-hidden="true"></b-icon> Global options
     </template>
-    <label for="group-mode" class="mt-2">Group mode:</label>
-    <b-form-select
-      id="group-mode"
-      v-model="globalOptions.groupMode"
-      :options="globalOptions.groupModeOptions"
-    ></b-form-select>
-    <label for="distance-mode" class="mt-2">Distance mode:</label>
-    <b-form-select
-      id="distance-mode"
-      v-model="globalOptions.distanceMode"
-      :options="globalOptions.distanceModeOptions"
-    ></b-form-select>
+    <b-tabs>
+      <b-tab title="General" active>
+        <label for="group-mode" class="mt-2">Group mode:</label>
+        <b-form-select
+          id="group-mode"
+          v-model="globalOptions.groupMode"
+          :options="globalOptions.groupModeOptions"
+        ></b-form-select>
+        <label for="distance-mode" class="mt-2">Distance mode:</label>
+        <b-form-select
+          id="distance-mode"
+          v-model="globalOptions.distanceMode"
+          :options="globalOptions.distanceModeOptions"
+        ></b-form-select>
+        <label for="auto-fetch" class="mt-2">Auto fetch data:</label>
+        <b-form-checkbox id="auto-fetch" v-model="globalOptions.autoFetch" name="check-button" switch>
+          <small class="text-muted">On page load &amp; date input change</small>
+        </b-form-checkbox>
+      </b-tab>
+      <b-tab title="CSV export">
+        <label for="csv-export-processed-distance" class="mt-2">Export processed distance:</label>
+        <b-form-checkbox
+          id="csv-export-processed-distance"
+          v-model="globalOptions.csvExportProcessedDistance"
+          name="check-button"
+          switch
+        >
+          <b-badge variant="secondary">meters</b-badge><small class="text-muted"> vs </small
+          ><b-badge variant="primary">kilometers / miles</b-badge>
+        </b-form-checkbox>
+        <label for="csv-export-processed-duration" class="mt-2">Export processed duration:</label>
+        <b-form-checkbox
+          id="csv-export-processed-duration"
+          v-model="globalOptions.csvExportProcessedDuration"
+          name="check-button"
+          switch
+        >
+          <b-badge variant="secondary">seconds</b-badge><small class="text-muted"> vs </small
+          ><b-badge variant="primary">hh:mm:ss</b-badge>
+        </b-form-checkbox>
+      </b-tab>
+    </b-tabs>
   </b-modal>
 </template>
 

diff --git a/src/services/global_options.js b/src/services/global_options.js
@@ -6,6 +6,11 @@ class Globaloptions {
     this.distanceMode = 'Kilometers'
     this.distanceModeOptions = ['Kilometers', 'Miles']
 
+    this.autoFetch = true
+
+    this.csvExportProcessedDistance = false
+    this.csvExportProcessedDuration = false
+
     this.load()
   }
 

diff --git a/src/util/filters.js b/src/util/filters.js
@@ -1,3 +1,5 @@
+import moment from 'moment'
+
 import globalOptions from '../services/global_options'
 
 export default {
@@ -7,16 +9,28 @@ export default {
       var fixed = value.toFixed(accuracy)
       return keep ? fixed : +fixed
     })
-    Vue.filter('distance', (meters, decimals) => {
+    Vue.filter('distance', (meters, decimals, asFloat) => {
       if (meters === 0) {
         return ''
       }
       decimals = decimals || 2
+      asFloat = asFloat || false
       const f = Math.pow(10, decimals)
       if (globalOptions.distanceMode === 'Miles') {
-        return `${Math.round((meters / 1609.344) * f) / f} miles`
+        let v = Math.round((meters / 1609.344) * f) / f
+        if (asFloat) {
+          return v
+        }
+        return `${v} miles`
+      }
+      let v = Math.round((meters / 1000) * f) / f
+      if (asFloat) {
+        return v
       }
-      return `${Math.round((meters / 1000) * f) / f} km`
+      return `${v} km`
+    })
+    Vue.filter('hhmmss', seconds => {
+      return moment.utc(seconds * 1000).format('HH:mm:ss')
     })
   }
 }