Client - check distance and duration before adding workout w/o gpx

This commit is contained in:
Sam 2022-11-16 09:55:36 +01:00
parent aa1a1fcd91
commit 3462f1a91f
5 changed files with 43 additions and 6 deletions

View File

@ -135,6 +135,7 @@
id="workout-duration-hour" id="workout-duration-hour"
name="workout-duration-hour" name="workout-duration-hour"
class="workout-duration" class="workout-duration"
:class="{ errored: isDurationInvalid() }"
type="text" type="text"
placeholder="HH" placeholder="HH"
minlength="1" minlength="1"
@ -150,6 +151,7 @@
id="workout-duration-minutes" id="workout-duration-minutes"
name="workout-duration-minutes" name="workout-duration-minutes"
class="workout-duration" class="workout-duration"
:class="{ errored: isDurationInvalid() }"
type="text" type="text"
pattern="^([0-5][0-9])$" pattern="^([0-5][0-9])$"
minlength="2" minlength="2"
@ -165,6 +167,7 @@
id="workout-duration-seconds" id="workout-duration-seconds"
name="workout-duration-seconds" name="workout-duration-seconds"
class="workout-duration" class="workout-duration"
:class="{ errored: isDurationInvalid() }"
type="text" type="text"
pattern="^([0-5][0-9])$" pattern="^([0-5][0-9])$"
minlength="2" minlength="2"
@ -185,6 +188,7 @@
}}): }}):
</label> </label>
<input <input
:class="{ errored: isDistanceInvalid() }"
name="workout-distance" name="workout-distance"
type="number" type="number"
min="0" min="0"
@ -228,6 +232,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { import {
ComputedRef, ComputedRef,
Ref,
computed, computed,
reactive, reactive,
ref, ref,
@ -306,6 +311,7 @@
) )
let gpxFile: File | null = null let gpxFile: File | null = null
const formErrors = ref(false) const formErrors = ref(false)
const payloadErrorMessages: Ref<string[]> = ref([])
onMounted(() => { onMounted(() => {
if (props.workout.id) { if (props.workout.id) {
@ -347,15 +353,28 @@
workoutForm.workoutDurationSeconds = duration[2] workoutForm.workoutDurationSeconds = duration[2]
} }
} }
function isDistanceInvalid() {
return payloadErrorMessages.value.includes('workouts.INVALID_DISTANCE')
}
function isDurationInvalid() {
return payloadErrorMessages.value.includes('workouts.INVALID_DURATION')
}
function formatPayload(payload: IWorkoutForm) { function formatPayload(payload: IWorkoutForm) {
payloadErrorMessages.value = []
payload.title = workoutForm.title payload.title = workoutForm.title
payload.distance = authUser.value.imperial_units
? convertDistance(+workoutForm.workoutDistance, 'mi', 'km', 3)
: +workoutForm.workoutDistance
payload.duration = payload.duration =
+workoutForm.workoutDurationHour * 3600 + +workoutForm.workoutDurationHour * 3600 +
+workoutForm.workoutDurationMinutes * 60 + +workoutForm.workoutDurationMinutes * 60 +
+workoutForm.workoutDurationSeconds +workoutForm.workoutDurationSeconds
if (payload.duration <= 0) {
payloadErrorMessages.value.push('workouts.INVALID_DURATION')
}
payload.distance = authUser.value.imperial_units
? convertDistance(+workoutForm.workoutDistance, 'mi', 'km', 3)
: +workoutForm.workoutDistance
if (payload.distance <= 0) {
payloadErrorMessages.value.push('workouts.INVALID_DISTANCE')
}
payload.workout_date = `${workoutForm.workoutDate} ${workoutForm.workoutTime}` payload.workout_date = `${workoutForm.workoutDate} ${workoutForm.workoutTime}`
} }
function updateWorkout() { function updateWorkout() {
@ -384,7 +403,17 @@
store.dispatch(WORKOUTS_STORE.ACTIONS.ADD_WORKOUT, payload) store.dispatch(WORKOUTS_STORE.ACTIONS.ADD_WORKOUT, payload)
} else { } else {
formatPayload(payload) formatPayload(payload)
store.dispatch(WORKOUTS_STORE.ACTIONS.ADD_WORKOUT_WITHOUT_GPX, payload) if (payloadErrorMessages.value.length > 0) {
store.commit(
ROOT_STORE.MUTATIONS.SET_ERROR_MESSAGES,
payloadErrorMessages.value
)
} else {
store.dispatch(
WORKOUTS_STORE.ACTIONS.ADD_WORKOUT_WITHOUT_GPX,
payload
)
}
} }
} }
} }
@ -521,5 +550,9 @@
margin-top: 0; margin-top: 0;
} }
} }
.errored {
outline: 2px solid var(--input-error-color);
}
} }
</style> </style>

View File

@ -16,6 +16,8 @@
"FROM": "from", "FROM": "from",
"GPX_FILE": ".gpx file", "GPX_FILE": ".gpx file",
"HIDE_FILTERS": "hide filters", "HIDE_FILTERS": "hide filters",
"INVALID_DISTANCE": "The distance must be greater than 0",
"INVALID_DURATION": "The duration must be greater than 0 seconds",
"LATEST_WORKOUTS": "Latest workouts", "LATEST_WORKOUTS": "Latest workouts",
"LOAD_MORE_WORKOUT": "Load more workouts", "LOAD_MORE_WORKOUT": "Load more workouts",
"MAX_ALTITUDE": "max. altitude", "MAX_ALTITUDE": "max. altitude",

View File

@ -16,6 +16,8 @@
"FROM": "à partir de", "FROM": "à partir de",
"GPX_FILE": "fichier .gpx", "GPX_FILE": "fichier .gpx",
"HIDE_FILTERS": "masquer les filtres", "HIDE_FILTERS": "masquer les filtres",
"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", "LATEST_WORKOUTS": "Séances récentes",
"LOAD_MORE_WORKOUT": "Charger les séances suivantes", "LOAD_MORE_WORKOUT": "Charger les séances suivantes",
"MAX_ALTITUDE": "altitude max", "MAX_ALTITUDE": "altitude max",

View File

@ -11,7 +11,7 @@ export const mutations: MutationTree<IRootState> & TRootMutations = {
}, },
[ROOT_STORE.MUTATIONS.SET_ERROR_MESSAGES]( [ROOT_STORE.MUTATIONS.SET_ERROR_MESSAGES](
state: IRootState, state: IRootState,
errorMessages: string errorMessages: string | string[]
) { ) {
state.errorMessages = errorMessages state.errorMessages = errorMessages
}, },

View File

@ -60,7 +60,7 @@ export type TRootMutations<S = IRootState> = {
[ROOT_STORE.MUTATIONS.EMPTY_ERROR_MESSAGES](state: S): void [ROOT_STORE.MUTATIONS.EMPTY_ERROR_MESSAGES](state: S): void
[ROOT_STORE.MUTATIONS.SET_ERROR_MESSAGES]( [ROOT_STORE.MUTATIONS.SET_ERROR_MESSAGES](
state: S, state: S,
errorMessages: string errorMessages: string | string[]
): void ): void
[ROOT_STORE.MUTATIONS.UPDATE_APPLICATION_CONFIG]( [ROOT_STORE.MUTATIONS.UPDATE_APPLICATION_CONFIG](
state: S, state: S,