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

fittrackee_client/src/components/Common/Distance.vue

@@ -0,0 +1,55 @@
+<template>
+  <span class="distance" :class="{ strong }">{{ convertedDistance }}</span>
+  <span v-if="displayUnit" class="unit" :class="{ strong }">
+    {{ unitTo }}{{ speed ? '/h' : '' }}
+  </span>
+</template>
+
+<script setup lang="ts">
+  import { toRefs, withDefaults } from 'vue'
+
+  import { TUnit } from '@/types/units'
+  import { units, convertDistance } from '@/utils/units'
+
+  interface Props {
+    distance: number
+    unitFrom: TUnit
+    useImperialUnits: boolean
+    digits?: number
+    displayUnit?: boolean
+    speed?: boolean
+    strong?: boolean
+  }
+  const props = withDefaults(defineProps<Props>(), {
+    digits: 2,
+    displayUnit: true,
+    speed: false,
+    strong: false,
+  })
+
+  const {
+    digits,
+    displayUnit,
+    distance,
+    speed,
+    strong,
+    unitFrom,
+    useImperialUnits,
+  } = toRefs(props)
+  const unitTo: TUnit = useImperialUnits.value
+    ? units[unitFrom.value].defaultTarget
+    : unitFrom.value
+  const convertedDistance = useImperialUnits.value
+    ? convertDistance(distance.value, unitFrom.value, unitTo, digits.value)
+    : distance
+</script>
+
+<style lang="scss" scoped>
+  @import '~@/scss/base.scss';
+  .unit {
+    padding-left: $default-padding * 0.5;
+  }
+  .strong {
+    font-weight: bold;
+  }
+</style>

fittrackee_client/src/components/Dashboard/Timeline.vue

@@ -5,6 +5,7 @@
       <WorkoutCard
         v-for="index in [...Array(initWorkoutsCount).keys()]"
         :user="user"
+        :useImperialUnits="user.imperial_units"
         :key="index"
       />
     </div>
@@ -18,6 +19,7 @@
             : null
         "
         :user="user"
+        :useImperialUnits="user.imperial_units"
         :key="workout.id"
       />
       <NoWorkouts v-if="workouts.length === 0" />

fittrackee_client/src/components/Dashboard/UserRecords/index.vue

@@ -13,6 +13,7 @@
         :sportTranslatedLabel="sportTranslatedLabel"
         :records="recordsBySport[sportTranslatedLabel]"
         :key="sportTranslatedLabel"
+        :useImperialUnits="user.imperial_units"
       />
     </div>
   </div>
@@ -40,7 +41,8 @@
     getRecordsBySports(
       props.user.records,
       translateSports(props.sports, t),
-      props.user.timezone
+      props.user.timezone,
+      props.user.imperial_units
     )
   )
 </script>

fittrackee_client/src/components/Dashboard/UserStatsCards/index.vue

@@ -5,11 +5,7 @@
       :value="user.nb_workouts"
       :text="$t('workouts.WORKOUT', user.nb_workouts)"
     />
-    <StatCard
-      icon="road"
-      :value="Number(user.total_distance).toFixed(2)"
-      :text="$t('workouts.KM')"
-    />
+    <StatCard icon="road" :value="totalDistance" :text="unitTo" />
     <StatCard
       icon="clock-o"
       :value="totalDuration.days"
@@ -28,7 +24,9 @@
   import { useI18n } from 'vue-i18n'
 
   import StatCard from '@/components/Common/StatCard.vue'
+  import { TUnit } from '@/types/units'
   import { IUserProfile } from '@/types/user'
+  import { convertDistance, units } from '@/utils/units'
   interface Props {
     user: IUserProfile
   }
@@ -41,6 +39,13 @@
     () => props.user.total_duration
   )
   const totalDuration = computed(() => get_duration(userTotalDuration))
+  const defaultUnitFrom: TUnit = 'km'
+  const unitTo: TUnit = user.value.imperial_units
+    ? units[defaultUnitFrom].defaultTarget
+    : defaultUnitFrom
+  const totalDistance = user.value.imperial_units
+    ? convertDistance(user.value.total_distance, defaultUnitFrom, unitTo, 2)
+    : user.value.total_distance
 
   function get_duration(total_duration: ComputedRef<string>) {
     const duration = total_duration.value.match(/day/g)

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>

fittrackee_client/src/components/Workouts/WorkoutsList.vue

@@ -93,7 +93,11 @@
                 <span class="cell-heading">
                   {{ $t('workouts.DISTANCE') }}
                 </span>
-                {{ Number(workout.distance).toFixed(2) }} km
+                <Distance
+                  :distance="workout.distance"
+                  unitFrom="km"
+                  :useImperialUnits="user.imperial_units"
+                />
               </td>
               <td class="text-right">
                 <span class="cell-heading">
@@ -105,25 +109,45 @@
                 <span class="cell-heading">
                   {{ $t('workouts.AVE_SPEED') }}
                 </span>
-                {{ workout.ave_speed }} km/h
+                <Distance
+                  :distance="workout.ave_speed"
+                  unitFrom="km"
+                  :speed="true"
+                  :useImperialUnits="user.imperial_units"
+                />
               </td>
               <td class="text-right">
                 <span class="cell-heading">
                   {{ $t('workouts.MAX_SPEED') }}
                 </span>
-                {{ workout.max_speed }} km/h
+                <Distance
+                  :distance="workout.max_speed"
+                  unitFrom="km"
+                  :speed="true"
+                  :useImperialUnits="user.imperial_units"
+                />
               </td>
               <td class="text-right">
                 <span class="cell-heading">
                   {{ $t('workouts.ASCENT') }}
                 </span>
-                <span v-if="workout.with_gpx">{{ workout.ascent }} m</span>
+                <Distance
+                  v-if="workout.with_gpx"
+                  :distance="workout.ascent"
+                  unitFrom="m"
+                  :useImperialUnits="user.imperial_units"
+                />
               </td>
               <td class="text-right">
                 <span class="cell-heading">
                   {{ $t('workouts.DESCENT') }}
                 </span>
-                <span v-if="workout.with_gpx">{{ workout.descent }} m</span>
+                <Distance
+                  v-if="workout.with_gpx"
+                  :distance="workout.descent"
+                  unitFrom="m"
+                  :useImperialUnits="user.imperial_units"
+                />
               </td>
             </tr>
           </tbody>