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

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)