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"
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 @@
}}):
</label>
<input
:class="{ errored: isDistanceInvalid() }"
name="workout-distance"
type="number"
min="0"
@ -228,6 +232,7 @@
<script setup lang="ts">
import {
ComputedRef,
Ref,
computed,
reactive,
ref,
@ -306,6 +311,7 @@
)
let gpxFile: File | null = null
const formErrors = ref(false)
const payloadErrorMessages: Ref<string[]> = 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);
}
}
</style>

View File

@ -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",

View File

@ -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",

View File

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