Client - use imperial units when adding workout w/o gpx

fittrackee_client/src/components/Common/Distance.vue

@@ -6,7 +6,7 @@
 </template>
 
 <script setup lang="ts">
-  import { toRefs, withDefaults } from 'vue'
+  import { ComputedRef, computed, toRefs, withDefaults } from 'vue'
 
   import { TUnit } from '@/types/units'
   import { units, convertDistance } from '@/utils/units'
@@ -36,12 +36,21 @@
     unitFrom,
     useImperialUnits,
   } = toRefs(props)
-  const unitTo: TUnit = useImperialUnits.value
+  const unitTo: ComputedRef<TUnit> = computed(() =>
-    ? units[unitFrom.value].defaultTarget
+    useImperialUnits.value
-    : unitFrom.value
+      ? units[unitFrom.value].defaultTarget
-  const convertedDistance = useImperialUnits.value
+      : unitFrom.value
-    ? convertDistance(distance.value, unitFrom.value, unitTo, digits.value)
+  )
-    : distance
+  const convertedDistance = computed(() =>
+    useImperialUnits.value
+      ? convertDistance(
+          distance.value,
+          unitFrom.value,
+          unitTo.value,
+          digits.value
+        )
+      : distance.value
+  )
 </script>
 
 <style lang="scss" scoped>

fittrackee_client/src/components/Workout/WorkoutEdition.vue

@@ -173,7 +173,11 @@
                   </div>
                 </div>
                 <div class="form-item">
-                  <label>{{ $t('workouts.DISTANCE') }} (km):</label>
+                  <label>
+                    {{ $t('workouts.DISTANCE') }} ({{
+                      authUser.imperial_units ? 'mi' : 'km'
+                    }}):
+                  </label>
                   <input
                     name="workout-distance"
                     type="number"
@@ -239,6 +243,7 @@
   import { formatWorkoutDate, getDateWithTZ } from '@/utils/dates'
   import { getReadableFileSize } from '@/utils/files'
   import { translateSports } from '@/utils/sports'
+  import { convertDistance } from '@/utils/units'
 
   interface Props {
     authUser: IUserProfile
@@ -257,7 +262,7 @@
   const store = useStore()
   const router = useRouter()
 
-  const { workout, isCreation, loading } = toRefs(props)
+  const { authUser, workout, isCreation, loading } = toRefs(props)
   const translatedSports: ComputedRef<ISport[]> = computed(() =>
     translateSports(
       props.sports,
@@ -324,7 +329,11 @@
         'yyyy-MM-dd'
       )
       const duration = workout.duration.split(':')
-      workoutForm.workoutDistance = `${workout.distance}`
+      workoutForm.workoutDistance = `${
+        authUser.value.imperial_units
+          ? convertDistance(workout.distance, 'km', 'mi', 2)
+          : workout.distance
+      }`
       workoutForm.workoutDate = workoutDateTime.workout_date
       workoutForm.workoutTime = workoutDateTime.workout_time
       workoutForm.workoutDurationHour = duration[0]
@@ -334,7 +343,9 @@
   }
   function formatPayload(payload: IWorkoutForm) {
     payload.title = workoutForm.title
-    payload.distance = +workoutForm.workoutDistance
+    payload.distance = authUser.value.imperial_units
+      ? convertDistance(+workoutForm.workoutDistance, 'mi', 'km', 3)
+      : +workoutForm.workoutDistance
     payload.duration =
       +workoutForm.workoutDurationHour * 3600 +
       +workoutForm.workoutDurationMinutes * 60 +