Client - display converted distance/speed in workouts (wip)

fittrackee_client/src/components/Workout/WorkoutCard.vue

@@ -87,7 +87,13 @@
         </div>
         <div class="data">
           <i class="fa fa-road" aria-hidden="true" />
-          <span v-if="workout">{{ workout.distance }} km</span>
+          <Distance
+            v-if="workout.id"
+            :distance="workout.distance"
+            :digits="3"
+            unitFrom="km"
+            :useImperialUnits="useImperialUnits"
+          />
         </div>
         <div class="data elevation" v-if="workout && workout.with_gpx">
           <img
@@ -96,15 +102,37 @@
             :alt="$t('workouts.ELEVATION')"
           />
           <div class="data-values">
-            <span>{{ workout.min_alt }}/</span>
-            <span>{{ workout.max_alt }} m </span>
+            <Distance
+              v-if="workout.id"
+              :distance="workout.min_alt"
+              unitFrom="m"
+              :displayUnit="false"
+              :useImperialUnits="useImperialUnits"
+            />/
+            <Distance
+              v-if="workout.id"
+              :distance="workout.max_alt"
+              unitFrom="m"
+              :useImperialUnits="useImperialUnits"
+            />
           </div>
         </div>
         <div class="data altitude" v-if="workout && workout.with_gpx">
           <i class="fa fa-location-arrow" aria-hidden="true" />
           <div class="data-values">
-            <span>+ {{ workout.ascent }}/</span>
-            <span>- {{ workout.descent }} m </span>
+            +<Distance
+              v-if="workout.id"
+              :distance="workout.ascent"
+              unitFrom="m"
+              :displayUnit="false"
+              :useImperialUnits="useImperialUnits"
+            />/-
+            <Distance
+              v-if="workout.id"
+              :distance="workout.descent"
+              unitFrom="m"
+              :useImperialUnits="useImperialUnits"
+            />
           </div>
         </div>
       </div>
@@ -127,6 +155,7 @@
 
   interface Props {
     user: IUserProfile
+    useImperialUnits: boolean
     workout?: IWorkout
     sport?: ISport
   }
@@ -137,7 +166,7 @@
 
   const store = useStore()
 
-  const { user, workout, sport } = toRefs(props)
+  const { user, workout, sport, useImperialUnits } = toRefs(props)
   const locale: ComputedRef<Locale> = computed(
     () => store.getters[ROOT_STORE.GETTERS.LOCALE]
   )

fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutData.vue

@@ -13,16 +13,34 @@
     <div class="workout-data">
       <i class="fa fa-road" aria-hidden="true" />
       {{ $t('workouts.DISTANCE') }}:
-      <span>{{ workoutObject.distance }} km</span>
+      <Distance
+        :distance="workoutObject.distance"
+        :digits="3"
+        unitFrom="km"
+        :strong="true"
+        :useImperialUnits="useImperialUnits"
+      />
       <WorkoutRecord :workoutObject="workoutObject" recordType="FD" />
     </div>
     <div class="workout-data">
       <i class="fa fa-tachometer" aria-hidden="true" />
       {{ $t('workouts.AVERAGE_SPEED') }}:
-      <span>{{ workoutObject.aveSpeed }} km/h</span
-      ><WorkoutRecord :workoutObject="workoutObject" recordType="AS" /><br />
+      <Distance
+        :distance="workoutObject.aveSpeed"
+        unitFrom="km"
+        :speed="true"
+        :strong="true"
+        :useImperialUnits="useImperialUnits"
+      />
+      <WorkoutRecord :workoutObject="workoutObject" recordType="AS" /><br />
       {{ $t('workouts.MAX_SPEED') }}:
-      <span>{{ workoutObject.maxSpeed }} km/h</span>
+      <Distance
+        :distance="workoutObject.maxSpeed"
+        unitFrom="km"
+        :speed="true"
+        :strong="true"
+        :useImperialUnits="useImperialUnits"
+      />
       <WorkoutRecord :workoutObject="workoutObject" recordType="MS" />
     </div>
     <div
@@ -35,18 +53,39 @@
         :alt="$t('workouts.ELEVATION')"
       />
       {{ $t('workouts.MIN_ALTITUDE') }}:
-      <span>{{ workoutObject.minAlt }} m</span><br />
+      <Distance
+        :distance="workoutObject.minAlt"
+        unitFrom="m"
+        :strong="true"
+        :useImperialUnits="useImperialUnits"
+      /><br />
       {{ $t('workouts.MAX_ALTITUDE') }}:
-      <span>{{ workoutObject.maxAlt }} m</span>
+      <Distance
+        :distance="workoutObject.maxAlt"
+        unitFrom="m"
+        :strong="true"
+        :useImperialUnits="useImperialUnits"
+      />
     </div>
     <div
       class="workout-data"
       v-if="workoutObject.ascent !== null && workoutObject.descent !== null"
     >
       <i class="fa fa-location-arrow" aria-hidden="true" />
-      {{ $t('workouts.ASCENT') }}: <span>{{ workoutObject.ascent }} m</span
-      ><br />
-      {{ $t('workouts.DESCENT') }}: <span>{{ workoutObject.descent }} m</span>
+      {{ $t('workouts.ASCENT') }}:
+      <Distance
+        :distance="workoutObject.ascent"
+        unitFrom="m"
+        :strong="true"
+        :useImperialUnits="useImperialUnits"
+      /><br />
+      {{ $t('workouts.DESCENT') }}:
+      <Distance
+        :distance="workoutObject.descent"
+        unitFrom="m"
+        :strong="true"
+        :useImperialUnits="useImperialUnits"
+      />
     </div>
     <WorkoutWeather :workoutObject="workoutObject" />
   </div>
@@ -61,10 +100,11 @@
 
   interface Props {
     workoutObject: IWorkoutObject
+    useImperialUnits: boolean
   }
   const props = defineProps<Props>()
 
-  const { workoutObject } = toRefs(props)
+  const { workoutObject, useImperialUnits } = toRefs(props)
   const withPause = computed(
     () =>
       props.workoutObject.pauses !== '0:00:00' &&

fittrackee_client/src/components/Workout/WorkoutDetail/index.vue

@@ -20,7 +20,10 @@
           :workoutData="workoutData"
           :markerCoordinates="markerCoordinates"
         />
-        <WorkoutData :workoutObject="workoutObject" />
+        <WorkoutData
+          :workoutObject="workoutObject"
+          :useImperialUnits="authUser.imperial_units"
+        />
       </template>
     </Card>
   </div>
@@ -68,7 +71,7 @@
   const route = useRoute()
   const store = useStore()
 
-  const { markerCoordinates, workoutData } = toRefs(props)
+  const { authUser, markerCoordinates, workoutData } = toRefs(props)
   const workout: ComputedRef<IWorkout> = computed(
     () => props.workoutData.workout
   )

fittrackee_client/src/components/Workout/WorkoutSegments.vue

@@ -15,8 +15,13 @@
               }"
               >{{ $t('workouts.SEGMENT', 1) }} {{ index + 1 }}</router-link
             >
-            ({{ $t('workouts.DISTANCE') }}: {{ segment.distance }} km,
-            {{ $t('workouts.DURATION') }}: {{ segment.duration }})
+            ({{ $t('workouts.DISTANCE') }}:
+            <Distance
+              :distance="segment.distance"
+              unitFrom="km"
+              :strong="true"
+              :useImperialUnits="useImperialUnits"
+            />, {{ $t('workouts.DURATION') }}: {{ segment.duration }})
           </li>
         </ul>
       </template>
@@ -31,10 +36,11 @@
 
   interface Props {
     segments: IWorkoutSegment[]
+    useImperialUnits: boolean
   }
   const props = defineProps<Props>()
 
-  const { segments } = toRefs(props)
+  const { segments, useImperialUnits } = toRefs(props)
 </script>
 
 <style lang="scss" scoped>