Client - add elevation when adding/editing a workout without gpx file
This commit is contained in:
Sam
parent
c611f41519
commit
0c0138b867
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -116,6 +116,8 @@ export interface IWorkoutForm {
|
||||
distance?: number
|
||||
duration?: number
|
||||
file?: Blob
|
||||
ascent?: number | null
|
||||
descent?: number | null
|
||||
}
|
||||
|
||||
export interface IWorkoutPayload {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user