Client - check distance and duration before adding workout w/o gpx
This commit is contained in:
parent
aa1a1fcd91
commit
3462f1a91f
@ -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>
|
||||||
|
@ -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",
|
||||||
|
@ -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",
|
||||||
|
@ -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
|
||||||
},
|
},
|
||||||
|
@ -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,
|
||||||
|
Loading…
Reference in New Issue
Block a user