running-tools

commit d2a3f8a3ff4b2f12c3e39f262b6dde65b2154c5d
parent 2177d8ac863f4de423c8d57980cca7f3ad4ffbf9
Author: ashermorgan <59518073+ashermorgan@users.noreply.github.com>
Date:   Sat, 11 Sep 2021 13:43:04 -0700

Show paces in the race calculator

Diffstat:
M
src/components/TargetTable.vue
 | 
26
+++++++++++++++++++++++++-
M
src/views/RaceCalculator.vue
 | 
2
+-

2 files changed, 26 insertions(+), 2 deletions(-)
diff --git a/src/components/TargetTable.vue b/src/components/TargetTable.vue
@@ -7,6 +7,8 @@
 
           <th>Time</th>
 
+          <th v-if="showPace">Pace</th>
+
           <th>
             <button class="icon" title="Edit Targets" @click="inEditMode=true" v-blur>
               <img alt="" src="@/assets/edit.svg">
@@ -22,9 +24,14 @@
             {{ distanceUnits[item.distanceUnit].symbol }}
           </td>
 
-          <td colspan="2" :class="item.result === 'time' ? 'result' : ''">
+          <td :colspan="showPace ? 1 : 2" :class="item.result === 'time' ? 'result' : ''">
             {{ formatDuration(item.time, 0, 2) }}
           </td>
+
+          <td v-if="showPace" colspan="2">
+            {{ formatDuration(getPace(item), 0, 0) }}
+            / mi
+          </td>
         </tr>
 
         <tr v-if="results.length === 0" class="empty-message">
@@ -147,6 +154,14 @@ export default {
       type: String,
       default: null,
     },
+
+    /**
+     * Whether to show result paces
+     */
+    showPace: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   data() {
@@ -239,6 +254,15 @@ export default {
           .sort((a, b) => a.time - b.time),
       ];
     },
+
+    /**
+     * Get the pace of a result
+     * @param {Object} result The result
+     */
+    getPace(result) {
+      return result.time / unitUtils.convertDistance(result.distanceValue, result.distanceUnit,
+        'miles');
+    },
   },
 
   /**
diff --git a/src/views/RaceCalculator.vue b/src/views/RaceCalculator.vue
@@ -20,7 +20,7 @@
     <h2>Equivalent Race Results:</h2>
 
     <target-table class="output" :calculate-result="predictTime" :default-targets="defaultTargets"
-      storage-key="race-calculator-targets"/>
+      storage-key="race-calculator-targets" show-pace/>
   </div>
 </template>