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

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 @@
                     }}):
                   </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>

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

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

fittrackee_client/src/store/modules/root/mutations.ts

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

fittrackee_client/src/store/modules/root/types.ts

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