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

This commit is contained in:
Sam 2021-11-14 12:12:21 +01:00
parent 61738ebf85
commit 1c6b70d454
15 changed files with 467 additions and 40 deletions

View File

@ -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>

View File

@ -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" />

View File

@ -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>

View File

@ -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)

View File

@ -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]
)

View File

@ -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' &&

View File

@ -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
)

View File

@ -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>

View File

@ -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>

View File

@ -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' },

View File

@ -10,4 +10,5 @@ export interface IUnit {
unit: TUnit
system: TUnitSystem
multiplier: number
defaultTarget: TUnit
}

View File

@ -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
}, {})

View File

@ -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',
},
}

View File

@ -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"

View File

@ -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