diff --git a/fittrackee_client/src/components/Workout/WorkoutEdition.vue b/fittrackee_client/src/components/Workout/WorkoutEdition.vue index 9f88b45e..7dfba842 100644 --- a/fittrackee_client/src/components/Workout/WorkoutEdition.vue +++ b/fittrackee_client/src/components/Workout/WorkoutEdition.vue @@ -135,6 +135,7 @@ id="workout-duration-hour" name="workout-duration-hour" class="workout-duration" + :class="{ errored: isDurationInvalid() }" type="text" placeholder="HH" minlength="1" @@ -150,6 +151,7 @@ id="workout-duration-minutes" name="workout-duration-minutes" class="workout-duration" + :class="{ errored: isDurationInvalid() }" type="text" pattern="^([0-5][0-9])$" minlength="2" @@ -165,6 +167,7 @@ id="workout-duration-seconds" name="workout-duration-seconds" class="workout-duration" + :class="{ errored: isDurationInvalid() }" type="text" pattern="^([0-5][0-9])$" minlength="2" @@ -185,6 +188,7 @@ }}): import { ComputedRef, + Ref, computed, reactive, ref, @@ -306,6 +311,7 @@ ) let gpxFile: File | null = null const formErrors = ref(false) + const payloadErrorMessages: Ref = ref([]) onMounted(() => { if (props.workout.id) { @@ -347,15 +353,28 @@ 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) { + payloadErrorMessages.value = [] payload.title = workoutForm.title - payload.distance = authUser.value.imperial_units - ? convertDistance(+workoutForm.workoutDistance, 'mi', 'km', 3) - : +workoutForm.workoutDistance payload.duration = +workoutForm.workoutDurationHour * 3600 + +workoutForm.workoutDurationMinutes * 60 + +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}` } function updateWorkout() { @@ -384,7 +403,17 @@ store.dispatch(WORKOUTS_STORE.ACTIONS.ADD_WORKOUT, payload) } else { 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; } } + + .errored { + outline: 2px solid var(--input-error-color); + } } diff --git a/fittrackee_client/src/locales/en/workouts.json b/fittrackee_client/src/locales/en/workouts.json index 50c9d31a..850ab565 100644 --- a/fittrackee_client/src/locales/en/workouts.json +++ b/fittrackee_client/src/locales/en/workouts.json @@ -16,6 +16,8 @@ "FROM": "from", "GPX_FILE": ".gpx file", "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", "LOAD_MORE_WORKOUT": "Load more workouts", "MAX_ALTITUDE": "max. altitude", diff --git a/fittrackee_client/src/locales/fr/workouts.json b/fittrackee_client/src/locales/fr/workouts.json index 572171ab..de3d863f 100644 --- a/fittrackee_client/src/locales/fr/workouts.json +++ b/fittrackee_client/src/locales/fr/workouts.json @@ -16,6 +16,8 @@ "FROM": "à partir de", "GPX_FILE": "fichier .gpx", "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", "LOAD_MORE_WORKOUT": "Charger les séances suivantes", "MAX_ALTITUDE": "altitude max", diff --git a/fittrackee_client/src/store/modules/root/mutations.ts b/fittrackee_client/src/store/modules/root/mutations.ts index 2cd76d38..8913aa08 100644 --- a/fittrackee_client/src/store/modules/root/mutations.ts +++ b/fittrackee_client/src/store/modules/root/mutations.ts @@ -11,7 +11,7 @@ export const mutations: MutationTree & TRootMutations = { }, [ROOT_STORE.MUTATIONS.SET_ERROR_MESSAGES]( state: IRootState, - errorMessages: string + errorMessages: string | string[] ) { state.errorMessages = errorMessages }, diff --git a/fittrackee_client/src/store/modules/root/types.ts b/fittrackee_client/src/store/modules/root/types.ts index 309e1280..145a0cfa 100644 --- a/fittrackee_client/src/store/modules/root/types.ts +++ b/fittrackee_client/src/store/modules/root/types.ts @@ -60,7 +60,7 @@ export type TRootMutations = { [ROOT_STORE.MUTATIONS.EMPTY_ERROR_MESSAGES](state: S): void [ROOT_STORE.MUTATIONS.SET_ERROR_MESSAGES]( state: S, - errorMessages: string + errorMessages: string | string[] ): void [ROOT_STORE.MUTATIONS.UPDATE_APPLICATION_CONFIG]( state: S,