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

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)