Client - add elevation when adding/editing a workout without gpx file

This commit is contained in:
Sam 2022-12-14 16:43:44 +01:00
parent c611f41519
commit 0c0138b867
4 changed files with 131 additions and 27 deletions

View File

@ -37,7 +37,7 @@
</div>
</div>
<div class="form-item">
<label> {{ $t('workouts.SPORT', 1) }}: </label>
<label> {{ $t('workouts.SPORT', 1) }}*: </label>
<select
id="sport"
required
@ -57,7 +57,7 @@
<div class="form-item" v-if="isCreation && withGpx">
<label for="gpxFile">
{{ $t('workouts.GPX_FILE') }}
{{ $t('workouts.ZIP_ARCHIVE_DESCRIPTION') }}:
{{ $t('workouts.ZIP_ARCHIVE_DESCRIPTION') }}*:
</label>
<input
id="gpxFile"
@ -105,7 +105,7 @@
<div v-if="!withGpx">
<div class="workout-date-duration">
<div class="form-item">
<label>{{ $t('workouts.WORKOUT_DATE') }}:</label>
<label>{{ $t('workouts.WORKOUT_DATE') }}*:</label>
<div class="workout-date-time">
<input
id="workout-date"
@ -129,7 +129,7 @@
</div>
</div>
<div class="form-item">
<label>{{ $t('workouts.DURATION') }}:</label>
<label>{{ $t('workouts.DURATION') }}*:</label>
<div>
<input
id="workout-duration-hour"
@ -181,11 +181,12 @@
</div>
</div>
</div>
<div class="workout-data">
<div class="form-item">
<label>
{{ $t('workouts.DISTANCE') }} ({{
authUser.imperial_units ? 'mi' : 'km'
}}):
}})*:
</label>
<input
:class="{ errored: isDistanceInvalid() }"
@ -199,6 +200,41 @@
v-model="workoutForm.workoutDistance"
/>
</div>
<div class="form-item">
<label>
{{ $t('workouts.ASCENT') }} ({{
authUser.imperial_units ? 'ft' : 'm'
}}):
</label>
<input
:class="{ errored: isElevationInvalid() }"
name="workout-ascent"
type="number"
min="0"
step="0.01"
@invalid="invalidateForm"
:disabled="loading"
v-model="workoutForm.workoutAscent"
/>
</div>
<div class="form-item">
<label>
{{ $t('workouts.DESCENT') }} ({{
authUser.imperial_units ? 'ft' : 'm'
}}):
</label>
<input
:class="{ errored: isElevationInvalid() }"
name="workout-descent"
type="number"
min="0"
step="0.01"
@invalid="invalidateForm"
:disabled="loading"
v-model="workoutForm.workoutDescent"
/>
</div>
</div>
</div>
<div class="form-item">
<label> {{ $t('workouts.NOTES') }}: </label>
@ -305,6 +341,8 @@
workoutDurationMinutes: '',
workoutDurationSeconds: '',
workoutDistance: '',
workoutAscent: '',
workoutDescent: '',
})
const withGpx = ref(
props.workout.id ? props.workout.with_gpx : props.isCreation
@ -343,14 +381,30 @@
const duration = workout.duration.split(':')
workoutForm.workoutDistance = `${
authUser.value.imperial_units
? convertDistance(workout.distance, 'km', 'mi', 2)
: parseFloat(workout.distance.toFixed(2))
? convertDistance(workout.distance, 'km', 'mi', 3)
: parseFloat(workout.distance.toFixed(3))
}`
workoutForm.workoutDate = workoutDateTime.workout_date
workoutForm.workoutTime = workoutDateTime.workout_time
workoutForm.workoutDurationHour = duration[0]
workoutForm.workoutDurationMinutes = duration[1]
workoutForm.workoutDurationSeconds = duration[2]
workoutForm.workoutAscent =
workout.ascent === null
? ''
: `${
authUser.value.imperial_units
? convertDistance(workout.ascent, 'm', 'ft', 2)
: parseFloat(workout.ascent.toFixed(2))
}`
workoutForm.workoutDescent =
workout.descent === null
? ''
: `${
authUser.value.imperial_units
? convertDistance(workout.descent, 'm', 'ft', 2)
: parseFloat(workout.descent.toFixed(2))
}`
}
}
function isDistanceInvalid() {
@ -359,6 +413,11 @@
function isDurationInvalid() {
return payloadErrorMessages.value.includes('workouts.INVALID_DURATION')
}
function isElevationInvalid() {
return payloadErrorMessages.value.includes(
'workouts.INVALID_ASCENT_OR_DESCENT'
)
}
function formatPayload(payload: IWorkoutForm) {
payloadErrorMessages.value = []
payload.title = workoutForm.title
@ -376,6 +435,24 @@
payloadErrorMessages.value.push('workouts.INVALID_DISTANCE')
}
payload.workout_date = `${workoutForm.workoutDate} ${workoutForm.workoutTime}`
payload.ascent =
workoutForm.workoutAscent === ''
? null
: authUser.value.imperial_units
? convertDistance(+workoutForm.workoutAscent, 'ft', 'm', 2)
: +workoutForm.workoutAscent
payload.descent =
workoutForm.workoutDescent === ''
? null
: authUser.value.imperial_units
? convertDistance(+workoutForm.workoutDescent, 'ft', 'm', 2)
: +workoutForm.workoutDescent
if (
(payload.ascent !== null && payload.descent === null) ||
(payload.ascent === null && payload.descent !== null)
) {
payloadErrorMessages.value.push('workouts.INVALID_ASCENT_OR_DESCENT')
}
}
function updateWorkout() {
const payload: IWorkoutForm = {
@ -388,10 +465,17 @@
} else {
formatPayload(payload)
}
if (payloadErrorMessages.value.length > 0) {
store.commit(
ROOT_STORE.MUTATIONS.SET_ERROR_MESSAGES,
payloadErrorMessages.value
)
} else {
store.dispatch(WORKOUTS_STORE.ACTIONS.EDIT_WORKOUT, {
workoutId: props.workout.id,
data: payload,
})
}
} else {
if (withGpx.value) {
if (!gpxFile) {
@ -536,6 +620,22 @@
}
}
}
.workout-data {
display: flex;
flex-direction: row;
justify-content: space-between;
.form-item {
width: 30%;
}
@media screen and (max-width: $medium-limit) {
flex-direction: column;
.form-item {
width: initial;
}
}
}
}
}
}

View File

@ -16,6 +16,7 @@
"FROM": "from",
"GPX_FILE": ".gpx file",
"HIDE_FILTERS": "hide filters",
"INVALID_ASCENT_OR_DESCENT": "Both elevation values must be provided and be greater than or equal to 0.",
"INVALID_DISTANCE": "The distance must be greater than 0",
"INVALID_DURATION": "The duration must be greater than 0 seconds",
"LATEST_WORKOUTS": "Latest workouts",

View File

@ -16,6 +16,7 @@
"FROM": "à partir de",
"GPX_FILE": "fichier .gpx",
"HIDE_FILTERS": "masquer les filtres",
"INVALID_ASCENT_OR_DESCENT": "Les 2 valeurs pour l'élévation doit être fournies et être supérieures ou égales à 0.",
"INVALID_DISTANCE": "La distance doit être supérieure à 0",
"INVALID_DURATION": "La durée doit être supérieure à 0 secondes",
"LATEST_WORKOUTS": "Séances récentes",

View File

@ -116,6 +116,8 @@ export interface IWorkoutForm {
distance?: number
duration?: number
file?: Blob
ascent?: number | null
descent?: number | null
}
export interface IWorkoutPayload {