Alexander/FitTrackee
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Client - use imperial units in workouts filters

Browse Source
This commit is contained in:
Sam 2021-11-14 13:59:41 +01:00
parent 9b7f685992
commit 56bdc4a448
2 changed files with 28 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
fittrackee_client/src/components/Workouts/WorkoutsFilters.vue
View File

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

21
fittrackee_client/src/components/Workouts/WorkoutsList.vue
View File

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