From 1c6b70d454c2444cd9bb70f9480f44b3e6f397f8 Mon Sep 17 00:00:00 2001
From: Sam <sam@samr1.net>
Date: Sun, 14 Nov 2021 12:12:21 +0100
Subject: [PATCH] Client - display converted distance/speed in workouts (wip)

---
 .../src/components/Common/Distance.vue        |  55 ++++
 .../src/components/Dashboard/Timeline.vue     |   2 +
 .../Dashboard/UserRecords/index.vue           |   4 +-
 .../Dashboard/UserStatsCards/index.vue        |  15 +-
 .../src/components/Workout/WorkoutCard.vue    |  41 ++-
 .../Workout/WorkoutDetail/WorkoutData.vue     |  60 ++++-
 .../Workout/WorkoutDetail/index.vue           |   7 +-
 .../components/Workout/WorkoutSegments.vue    |  12 +-
 .../src/components/Workouts/WorkoutsList.vue  |  34 ++-
 fittrackee_client/src/custom-components.ts    |   2 +
 fittrackee_client/src/types/units.ts          |   1 +
 fittrackee_client/src/utils/records.ts        |  25 +-
 fittrackee_client/src/utils/units.ts          |   4 +
 .../src/views/workouts/Workout.vue            |   1 +
 .../tests/unit/utils/records.spec.ts          | 244 +++++++++++++++++-
 15 files changed, 467 insertions(+), 40 deletions(-)
 create mode 100644 fittrackee_client/src/components/Common/Distance.vue

diff --git a/fittrackee_client/src/components/Common/Distance.vue b/fittrackee_client/src/components/Common/Distance.vue
new file mode 100644
index 00000000..54e50e48
--- /dev/null
+++ b/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>
diff --git a/fittrackee_client/src/components/Dashboard/Timeline.vue b/fittrackee_client/src/components/Dashboard/Timeline.vue
index dab4b582..1109c80e 100644
--- a/fittrackee_client/src/components/Dashboard/Timeline.vue
+++ b/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" />
diff --git a/fittrackee_client/src/components/Dashboard/UserRecords/index.vue b/fittrackee_client/src/components/Dashboard/UserRecords/index.vue
index f8bee650..015dc312 100644
--- a/fittrackee_client/src/components/Dashboard/UserRecords/index.vue
+++ b/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>
diff --git a/fittrackee_client/src/components/Dashboard/UserStatsCards/index.vue b/fittrackee_client/src/components/Dashboard/UserStatsCards/index.vue
index c655223a..6fabf6cc 100644
--- a/fittrackee_client/src/components/Dashboard/UserStatsCards/index.vue
+++ b/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)
diff --git a/fittrackee_client/src/components/Workout/WorkoutCard.vue b/fittrackee_client/src/components/Workout/WorkoutCard.vue
index 628349bd..2bb0bafe 100644
--- a/fittrackee_client/src/components/Workout/WorkoutCard.vue
+++ b/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]
   )
diff --git a/fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutData.vue b/fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutData.vue
index 70acaa71..1bb68b2d 100644
--- a/fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutData.vue
+++ b/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' &&
diff --git a/fittrackee_client/src/components/Workout/WorkoutDetail/index.vue b/fittrackee_client/src/components/Workout/WorkoutDetail/index.vue
index d7dec349..f004812d 100644
--- a/fittrackee_client/src/components/Workout/WorkoutDetail/index.vue
+++ b/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
   )
diff --git a/fittrackee_client/src/components/Workout/WorkoutSegments.vue b/fittrackee_client/src/components/Workout/WorkoutSegments.vue
index 1c7cea41..559fd109 100644
--- a/fittrackee_client/src/components/Workout/WorkoutSegments.vue
+++ b/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>
diff --git a/fittrackee_client/src/components/Workouts/WorkoutsList.vue b/fittrackee_client/src/components/Workouts/WorkoutsList.vue
index 1bb48511..16b150ae 100644
--- a/fittrackee_client/src/components/Workouts/WorkoutsList.vue
+++ b/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>
diff --git a/fittrackee_client/src/custom-components.ts b/fittrackee_client/src/custom-components.ts
index 084be319..9bd2e27c 100644
--- a/fittrackee_client/src/custom-components.ts
+++ b/fittrackee_client/src/custom-components.ts
@@ -1,6 +1,7 @@
 import AlertMessage from '@/components/Common/AlertMessage.vue'
 import Card from '@/components/Common/Card.vue'
 import CustomTextArea from '@/components/Common/CustomTextArea.vue'
+import Distance from '@/components/Common/Distance.vue'
 import Dropdown from '@/components/Common/Dropdown.vue'
 import ErrorMessage from '@/components/Common/ErrorMessage.vue'
 import SportImage from '@/components/Common/Images/SportImage/index.vue'
@@ -11,6 +12,7 @@ export const customComponents = [
   { target: AlertMessage, name: 'AlertMessage' },
   { target: Card, name: 'Card' },
   { target: CustomTextArea, name: 'CustomTextArea' },
+  { target: Distance, name: 'Distance' },
   { target: Dropdown, name: 'Dropdown' },
   { target: ErrorMessage, name: 'ErrorMessage' },
   { target: Loader, name: 'Loader' },
diff --git a/fittrackee_client/src/types/units.ts b/fittrackee_client/src/types/units.ts
index 1548f701..6794e90d 100644
--- a/fittrackee_client/src/types/units.ts
+++ b/fittrackee_client/src/types/units.ts
@@ -10,4 +10,5 @@ export interface IUnit {
   unit: TUnit
   system: TUnitSystem
   multiplier: number
+  defaultTarget: TUnit
 }
diff --git a/fittrackee_client/src/utils/records.ts b/fittrackee_client/src/utils/records.ts
index db9ba352..5698320a 100644
--- a/fittrackee_client/src/utils/records.ts
+++ b/fittrackee_client/src/utils/records.ts
@@ -1,19 +1,31 @@
 import { ITranslatedSport } from '@/types/sports'
+import { TUnit } from '@/types/units'
 import { IRecord, IRecordsBySports } from '@/types/workouts'
 import { formatWorkoutDate, getDateWithTZ } from '@/utils/dates'
+import { convertDistance, units } from '@/utils/units'
 
 export const formatRecord = (
   record: IRecord,
-  tz: string
+  tz: string,
+  useImperialUnits: boolean
 ): Record<string, string | number> => {
+  const unitFrom: TUnit = 'km'
+  const unitTo: TUnit = useImperialUnits
+    ? units[unitFrom].defaultTarget
+    : unitFrom
   let value
   switch (record.record_type) {
     case 'AS':
     case 'MS':
-      value = `${record.value} km/h`
+      value = `${convertDistance(
+        +record.value,
+        unitFrom,
+        unitTo,
+        2
+      )} ${unitTo}/h`
       break
     case 'FD':
-      value = `${record.value} km`
+      value = `${convertDistance(+record.value, unitFrom, unitTo, 2)} ${unitTo}`
       break
     case 'LD':
       value = record.value
@@ -36,7 +48,8 @@ export const formatRecord = (
 export const getRecordsBySports = (
   records: IRecord[],
   translatedSports: ITranslatedSport[],
-  tz: string
+  tz: string,
+  useImperialUnits: boolean
 ): IRecordsBySports =>
   records.reduce((sportList: IRecordsBySports, record) => {
     const sport = translatedSports.find((s) => s.id === record.sport_id)
@@ -48,7 +61,9 @@ export const getRecordsBySports = (
           records: [],
         }
       }
-      sportList[sport.translatedLabel].records.push(formatRecord(record, tz))
+      sportList[sport.translatedLabel].records.push(
+        formatRecord(record, tz, useImperialUnits)
+      )
     }
     return sportList
   }, {})
diff --git a/fittrackee_client/src/utils/units.ts b/fittrackee_client/src/utils/units.ts
index 714af0f2..ec091904 100644
--- a/fittrackee_client/src/utils/units.ts
+++ b/fittrackee_client/src/utils/units.ts
@@ -5,21 +5,25 @@ export const units: Record<string, IUnit> = {
     unit: 'ft',
     system: 'imperial',
     multiplier: 1,
+    defaultTarget: 'm',
   },
   mi: {
     unit: 'mi',
     system: 'imperial',
     multiplier: 5280,
+    defaultTarget: 'km',
   },
   m: {
     unit: 'm',
     system: 'metric',
     multiplier: 1,
+    defaultTarget: 'ft',
   },
   km: {
     unit: 'm',
     system: 'metric',
     multiplier: 1000,
+    defaultTarget: 'mi',
   },
 }
 
diff --git a/fittrackee_client/src/views/workouts/Workout.vue b/fittrackee_client/src/views/workouts/Workout.vue
index 8e1abb10..4743185e 100644
--- a/fittrackee_client/src/views/workouts/Workout.vue
+++ b/fittrackee_client/src/views/workouts/Workout.vue
@@ -22,6 +22,7 @@
           <WorkoutSegments
             v-if="!displaySegment && workoutData.workout.segments.length > 1"
             :segments="workoutData.workout.segments"
+            :useImperialUnits="authUser.imperial_units"
           />
           <WorkoutNotes
             v-if="!displaySegment"
diff --git a/fittrackee_client/tests/unit/utils/records.spec.ts b/fittrackee_client/tests/unit/utils/records.spec.ts
index 60252d13..106b562b 100644
--- a/fittrackee_client/tests/unit/utils/records.spec.ts
+++ b/fittrackee_client/tests/unit/utils/records.spec.ts
@@ -100,7 +100,113 @@ describe('formatRecord', () => {
       assert.deepEqual(
         formatRecord(
           testParams.inputParams.record,
-          testParams.inputParams.timezone
+          testParams.inputParams.timezone,
+          false
+        ),
+        testParams.expected
+      )
+    })
+  })
+})
+
+describe('formatRecord after conversion', () => {
+  const testsParams = [
+    {
+      description: "return formatted record for 'Average speed'",
+      inputParams: {
+        record: {
+          id: 9,
+          record_type: 'AS',
+          sport_id: 1,
+          user: 'admin',
+          value: 18,
+          workout_date: 'Sun, 07 Jul 2019 08:00:00 GMT',
+          workout_id: 'hvYBqYBRa7wwXpaStWR4V2',
+        },
+        timezone: 'Europe/Paris',
+      },
+      expected: {
+        id: 9,
+        record_type: 'AS',
+        value: '11.18 mi/h',
+        workout_date: '2019/07/07',
+        workout_id: 'hvYBqYBRa7wwXpaStWR4V2',
+      },
+    },
+    {
+      description: "return formatted record for 'Farest distance'",
+      inputParams: {
+        record: {
+          id: 10,
+          record_type: 'FD',
+          sport_id: 1,
+          user: 'admin',
+          value: 18,
+          workout_date: 'Sun, 07 Jul 2019 22:00:00 GMT',
+          workout_id: 'hvYBqYBRa7wwXpaStWR4V2',
+        },
+        timezone: 'Europe/Paris',
+      },
+      expected: {
+        id: 10,
+        record_type: 'FD',
+        value: '11.18 mi',
+        workout_date: '2019/07/08',
+        workout_id: 'hvYBqYBRa7wwXpaStWR4V2',
+      },
+    },
+    {
+      description: "return formatted record for 'Longest duration'",
+      inputParams: {
+        record: {
+          id: 11,
+          record_type: 'LD',
+          sport_id: 1,
+          user: 'admin',
+          value: '1:01:00',
+          workout_date: 'Sun, 07 Jul 2019 08:00:00 GMT',
+          workout_id: 'hvYBqYBRa7wwXpaStWR4V2',
+        },
+        timezone: 'Europe/Paris',
+      },
+      expected: {
+        id: 11,
+        record_type: 'LD',
+        value: '1:01:00',
+        workout_date: '2019/07/07',
+        workout_id: 'hvYBqYBRa7wwXpaStWR4V2',
+      },
+    },
+    {
+      description: "return formatted record for 'Max. speed'",
+      inputParams: {
+        record: {
+          id: 12,
+          record_type: 'MS',
+          sport_id: 1,
+          user: 'admin',
+          value: 18,
+          workout_date: 'Sun, 07 Jul 2019 22:00:00 GMT',
+          workout_id: 'hvYBqYBRa7wwXpaStWR4V2',
+        },
+        timezone: 'Europe/Paris',
+      },
+      expected: {
+        id: 12,
+        record_type: 'MS',
+        value: '11.18 mi/h',
+        workout_date: '2019/07/08',
+        workout_id: 'hvYBqYBRa7wwXpaStWR4V2',
+      },
+    },
+  ]
+  testsParams.map((testParams) => {
+    it(testParams.description, () => {
+      assert.deepEqual(
+        formatRecord(
+          testParams.inputParams.record,
+          testParams.inputParams.timezone,
+          true
         ),
         testParams.expected
       )
@@ -121,7 +227,8 @@ describe('formatRecord (invalid record type)', () => {
           workout_date: 'Sun, 07 Jul 2019 22:00:00 GMT',
           workout_id: 'hvYBqYBRa7wwXpaStWR4V2',
         },
-        'Europe/Paris'
+        'Europe/Paris',
+        false
       )
     ).to.throw(
       'Invalid record type, expected: "AS", "FD", "LD", "MD", got: "M"'
@@ -248,7 +355,138 @@ describe('getRecordsBySports', () => {
         getRecordsBySports(
           testParams.input.records,
           translatedSports,
-          testParams.input.tz
+          testParams.input.tz,
+          false
+        ),
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        testParams.expected
+      )
+    })
+  )
+})
+
+describe('getRecordsBySports after conversion', () => {
+  const testsParams = [
+    {
+      description: 'returns empty object if no records',
+      input: {
+        records: [],
+        tz: 'Europe/Paris',
+      },
+      expected: {},
+    },
+    {
+      description: 'returns record grouped by Sport',
+      input: {
+        records: [
+          {
+            id: 9,
+            record_type: 'AS',
+            sport_id: 1,
+            user: 'admin',
+            value: 18,
+            workout_date: 'Sun, 07 Jul 2019 08:00:00 GMT',
+            workout_id: 'hvYBqYBRa7wwXpaStWR4V2',
+          },
+        ],
+        tz: 'Europe/Paris',
+      },
+      expected: {
+        'Cycling (Sport)': {
+          color: null,
+          label: 'Cycling (Sport)',
+          records: [
+            {
+              id: 9,
+              record_type: 'AS',
+              value: '11.18 mi/h',
+              workout_date: '2019/07/07',
+              workout_id: 'hvYBqYBRa7wwXpaStWR4V2',
+            },
+          ],
+        },
+      },
+    },
+    {
+      description: 'returns record grouped by Sport',
+      input: {
+        records: [
+          {
+            id: 9,
+            record_type: 'AS',
+            sport_id: 1,
+            user: 'admin',
+            value: 18,
+            workout_date: 'Sun, 07 Jul 2019 08:00:00 GMT',
+            workout_id: 'hvYBqYBRa7wwXpaStWR4V2',
+          },
+          {
+            id: 10,
+            record_type: 'FD',
+            sport_id: 2,
+            user: 'admin',
+            value: 18,
+            workout_date: 'Sun, 07 Jul 2019 22:00:00 GMT',
+            workout_id: 'n6JcLPQt3QtZWFfiSnYm4C',
+          },
+          {
+            id: 12,
+            record_type: 'MS',
+            sport_id: 1,
+            user: 'admin',
+            value: 18,
+            workout_date: 'Sun, 07 Jul 2019 08:00:00 GMT',
+            workout_id: 'hvYBqYBRa7wwXpaStWR4V2',
+          },
+        ],
+        tz: 'Europe/Paris',
+      },
+      expected: {
+        'Cycling (Sport)': {
+          color: null,
+          label: 'Cycling (Sport)',
+          records: [
+            {
+              id: 9,
+              record_type: 'AS',
+              value: '11.18 mi/h',
+              workout_date: '2019/07/07',
+              workout_id: 'hvYBqYBRa7wwXpaStWR4V2',
+            },
+            {
+              id: 12,
+              record_type: 'MS',
+              value: '11.18 mi/h',
+              workout_date: '2019/07/07',
+              workout_id: 'hvYBqYBRa7wwXpaStWR4V2',
+            },
+          ],
+        },
+        'Cycling (Transport)': {
+          color: '#000000',
+          label: 'Cycling (Transport)',
+          records: [
+            {
+              id: 10,
+              record_type: 'FD',
+              value: '11.18 mi',
+              workout_date: '2019/07/08',
+              workout_id: 'n6JcLPQt3QtZWFfiSnYm4C',
+            },
+          ],
+        },
+      },
+    },
+  ]
+  testsParams.map((testParams) =>
+    it(testParams.description, () => {
+      assert.deepEqual(
+        getRecordsBySports(
+          testParams.input.records,
+          translatedSports,
+          testParams.input.tz,
+          true
         ),
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore