feat: miles

src/components/DataTable.vue

@@ -24,18 +24,18 @@
           <span v-b-tooltip.hover :title="`${data.value}`">{{ data.value | duration('humanize') }}</span>
         </template>
         <template #cell(distance)="data">
-          <span v-b-tooltip.hover :title="`${data.value}`">{{ data.value | kilometers }}</span>
+          <span v-b-tooltip.hover :title="`${data.value}`">{{ data.value | distance }}</span>
         </template>
       </b-table>
       <small class="text-muted">
         <i>Duration: {{ data.durationSum | duration('asHours') | round(2) }} hours</i>
-        <i v-if="data.distanceSum">, Distance: {{ data.distanceSum | kilometers }}</i>
+        <i v-if="data.distanceSum">, Distance: {{ data.distanceSum | distance }}</i>
       </small>
     </div>
     <hr />
     <p class="text-muted">
       <i>Duration: {{ durationSum | duration('asHours') | round(2) }} hours</i>
-      <i v-if="distanceSum">, Distance: {{ distanceSum | kilometers }}</i>
+      <i v-if="distanceSum">, Distance: {{ distanceSum | distance }}</i>
     </p>
   </b-card-body>
 </template>

src/components/GlobalOptionsModal.vue

@@ -9,6 +9,12 @@
       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-modal>
 </template>
 

src/services/global_options.js

@@ -3,6 +3,9 @@ class Globaloptions {
     this.groupMode = 'None'
     this.groupModeOptions = ['None', 'Week', 'Month']
 
+    this.distanceMode = 'Kilometers'
+    this.distanceModeOptions = ['Kilometers', 'Miles']
+
     this.load()
   }
 

src/util/filters.js

@@ -1,16 +1,21 @@
+import globalOptions from '../services/global_options'
+
 export default {
   install(Vue) {
     Vue.filter('round', (value, accuracy, keep) => {
       if (typeof value !== 'number') return value
       var fixed = value.toFixed(accuracy)
       return keep ? fixed : +fixed
     })
-    Vue.filter('kilometers', (meters, decimals) => {
+    Vue.filter('distance', (meters, decimals) => {
       if (meters === 0) {
         return ''
       }
       decimals = decimals || 2
       const f = Math.pow(10, decimals)
+      if (globalOptions.distanceMode === 'Miles') {
+        return `${Math.round((meters / 1609.344) * f) / f} miles`
+      }
       return `${Math.round((meters / 1000) * f) / f} km`
     })
   }