Client - use imperial units in workouts filters

fittrackee_client/src/components/Workouts/WorkoutsFilters.vue

@@ -47,7 +47,7 @@
 
         <div class="form-items-group">
           <div class="form-item">
-            <label> {{ $t('workouts.DISTANCE') }} (km): </label>
+            <label> {{ $t('workouts.DISTANCE') }} ({{ toUnit }}): </label>
             <div class="form-inputs-group">
               <input
                 name="distance_from"
@@ -72,7 +72,7 @@
 
         <div class="form-items-group">
           <div class="form-item">
-            <label> {{ $t('workouts.DURATION') }} (km): </label>
+            <label> {{ $t('workouts.DURATION') }} ({{ toUnit }}): </label>
             <div class="form-inputs-group">
               <input
                 name="duration_from"
@@ -97,7 +97,7 @@
 
         <div class="form-items-group">
           <div class="form-item">
-            <label> {{ $t('workouts.AVE_SPEED') }} (km): </label>
+            <label> {{ $t('workouts.AVE_SPEED') }} ({{ toUnit }}): </label>
             <div class="form-inputs-group">
               <input
                 min="0"
@@ -122,7 +122,7 @@
 
         <div class="form-items-group">
           <div class="form-item">
-            <label> {{ $t('workouts.MAX_SPEED') }} (km): </label>
+            <label> {{ $t('workouts.MAX_SPEED') }} ({{ toUnit }}): </label>
 
             <div class="form-inputs-group">
               <input
@@ -167,6 +167,7 @@
   import { ISport } from '@/types/sports'
   import { IUserProfile } from '@/types/user'
   import { translateSports } from '@/utils/sports'
+  import { units } from '@/utils/units'
 
   interface Props {
     authUser: IUserProfile
@@ -181,6 +182,10 @@
   const router = useRouter()
 
   const { authUser } = toRefs(props)
+
+  const toUnit = authUser.value.imperial_units
+    ? units['km'].defaultTarget
+    : 'km'
   const translatedSports: ComputedRef<ISport[]> = computed(() =>
     translateSports(props.sports, t)
   )

fittrackee_client/src/components/Workouts/WorkoutsList.vue

@@ -45,8 +45,9 @@
                   {{ $t('workouts.SPORT', 1) }}
                 </span>
                 <SportImage
+                  v-if="sports.length > 0"
                   :title="
-                    sports.filter((s) => s.id === workout.sport_id)[0]
+                    sports.find((s) => s.id === workout.sport_id)
                       .translatedLabel
                   "
                   :sport-label="getSportLabel(workout, sports)"
@@ -187,6 +188,7 @@
   import { getQuery, sortList, workoutsPayloadKeys } from '@/utils/api'
   import { getDateWithTZ } from '@/utils/dates'
   import { getSportColor, getSportLabel } from '@/utils/sports'
+  import { convertDistance } from '@/utils/units'
   import { defaultOrder } from '@/utils/workouts'
 
   interface Props {
@@ -220,7 +222,10 @@
   })
 
   function loadWorkouts(payload: TWorkoutsPayload) {
-    store.dispatch(WORKOUTS_STORE.ACTIONS.GET_USER_WORKOUTS, payload)
+    store.dispatch(
+      WORKOUTS_STORE.ACTIONS.GET_USER_WORKOUTS,
+      user.value.imperial_units ? getConvertedPayload(payload) : payload
+    )
   }
   function reloadWorkouts(queryParam: string, queryValue: string) {
     const newQuery: LocationQuery = Object.assign({}, route.query)
@@ -248,6 +253,18 @@
     return query
   }
 
+  function getConvertedPayload(payload: TWorkoutsPayload): TWorkoutsPayload {
+    const convertedPayload: TWorkoutsPayload = {
+      ...payload,
+    }
+    Object.entries(convertedPayload).map((entry) => {
+      if (entry[0].match('speed|distance')) {
+        convertedPayload[entry[0]] = convertDistance(+entry[1], 'mi', 'km')
+      }
+    })
+    return convertedPayload
+  }
+
   function onHover(workoutId: string | null) {
     hoverWorkoutId.value = workoutId
   }