Client - add elevation when adding/editing a workout without gpx file

fittrackee_client/src/components/Workout/WorkoutEdition.vue

@@ -37,7 +37,7 @@
                 </div>
               </div>
               <div class="form-item">
-                <label> {{ $t('workouts.SPORT', 1) }}: </label>
+                <label> {{ $t('workouts.SPORT', 1) }}*: </label>
                 <select
                   id="sport"
                   required
@@ -57,7 +57,7 @@
               <div class="form-item" v-if="isCreation && withGpx">
                 <label for="gpxFile">
                   {{ $t('workouts.GPX_FILE') }}
-                  {{ $t('workouts.ZIP_ARCHIVE_DESCRIPTION') }}:
+                  {{ $t('workouts.ZIP_ARCHIVE_DESCRIPTION') }}*:
                 </label>
                 <input
                   id="gpxFile"
@@ -105,7 +105,7 @@
               <div v-if="!withGpx">
                 <div class="workout-date-duration">
                   <div class="form-item">
-                    <label>{{ $t('workouts.WORKOUT_DATE') }}:</label>
+                    <label>{{ $t('workouts.WORKOUT_DATE') }}*:</label>
                     <div class="workout-date-time">
                       <input
                         id="workout-date"
@@ -129,7 +129,7 @@
                     </div>
                   </div>
                   <div class="form-item">
-                    <label>{{ $t('workouts.DURATION') }}:</label>
+                    <label>{{ $t('workouts.DURATION') }}*:</label>
                     <div>
                       <input
                         id="workout-duration-hour"
@@ -181,23 +181,59 @@
                     </div>
                   </div>
                 </div>
-                <div class="form-item">
+                <div class="workout-data">
-                  <label>
+                  <div class="form-item">
-                    {{ $t('workouts.DISTANCE') }} ({{
+                    <label>
-                      authUser.imperial_units ? 'mi' : 'km'
+                      {{ $t('workouts.DISTANCE') }} ({{
-                    }}):
+                        authUser.imperial_units ? 'mi' : 'km'
-                  </label>
+                      }})*:
-                  <input
+                    </label>
-                    :class="{ errored: isDistanceInvalid() }"
+                    <input
-                    name="workout-distance"
+                      :class="{ errored: isDistanceInvalid() }"
-                    type="number"
+                      name="workout-distance"
-                    min="0"
+                      type="number"
-                    step="0.001"
+                      min="0"
-                    required
+                      step="0.001"
-                    @invalid="invalidateForm"
+                      required
-                    :disabled="loading"
+                      @invalid="invalidateForm"
-                    v-model="workoutForm.workoutDistance"
+                      :disabled="loading"
-                  />
+                      v-model="workoutForm.workoutDistance"
+                    />
+                  </div>
+                  <div class="form-item">
+                    <label>
+                      {{ $t('workouts.ASCENT') }} ({{
+                        authUser.imperial_units ? 'ft' : 'm'
+                      }}):
+                    </label>
+                    <input
+                      :class="{ errored: isElevationInvalid() }"
+                      name="workout-ascent"
+                      type="number"
+                      min="0"
+                      step="0.01"
+                      @invalid="invalidateForm"
+                      :disabled="loading"
+                      v-model="workoutForm.workoutAscent"
+                    />
+                  </div>
+                  <div class="form-item">
+                    <label>
+                      {{ $t('workouts.DESCENT') }} ({{
+                        authUser.imperial_units ? 'ft' : 'm'
+                      }}):
+                    </label>
+                    <input
+                      :class="{ errored: isElevationInvalid() }"
+                      name="workout-descent"
+                      type="number"
+                      min="0"
+                      step="0.01"
+                      @invalid="invalidateForm"
+                      :disabled="loading"
+                      v-model="workoutForm.workoutDescent"
+                    />
+                  </div>
                 </div>
               </div>
               <div class="form-item">
@@ -305,6 +341,8 @@
     workoutDurationMinutes: '',
     workoutDurationSeconds: '',
     workoutDistance: '',
+    workoutAscent: '',
+    workoutDescent: '',
   })
   const withGpx = ref(
     props.workout.id ? props.workout.with_gpx : props.isCreation
@@ -343,14 +381,30 @@
       const duration = workout.duration.split(':')
       workoutForm.workoutDistance = `${
         authUser.value.imperial_units
-          ? convertDistance(workout.distance, 'km', 'mi', 2)
+          ? convertDistance(workout.distance, 'km', 'mi', 3)
-          : parseFloat(workout.distance.toFixed(2))
+          : parseFloat(workout.distance.toFixed(3))
       }`
       workoutForm.workoutDate = workoutDateTime.workout_date
       workoutForm.workoutTime = workoutDateTime.workout_time
       workoutForm.workoutDurationHour = duration[0]
       workoutForm.workoutDurationMinutes = duration[1]
       workoutForm.workoutDurationSeconds = duration[2]
+      workoutForm.workoutAscent =
+        workout.ascent === null
+          ? ''
+          : `${
+              authUser.value.imperial_units
+                ? convertDistance(workout.ascent, 'm', 'ft', 2)
+                : parseFloat(workout.ascent.toFixed(2))
+            }`
+      workoutForm.workoutDescent =
+        workout.descent === null
+          ? ''
+          : `${
+              authUser.value.imperial_units
+                ? convertDistance(workout.descent, 'm', 'ft', 2)
+                : parseFloat(workout.descent.toFixed(2))
+            }`
     }
   }
   function isDistanceInvalid() {
@@ -359,6 +413,11 @@
   function isDurationInvalid() {
     return payloadErrorMessages.value.includes('workouts.INVALID_DURATION')
   }
+  function isElevationInvalid() {
+    return payloadErrorMessages.value.includes(
+      'workouts.INVALID_ASCENT_OR_DESCENT'
+    )
+  }
   function formatPayload(payload: IWorkoutForm) {
     payloadErrorMessages.value = []
     payload.title = workoutForm.title
@@ -376,6 +435,24 @@
       payloadErrorMessages.value.push('workouts.INVALID_DISTANCE')
     }
     payload.workout_date = `${workoutForm.workoutDate} ${workoutForm.workoutTime}`
+    payload.ascent =
+      workoutForm.workoutAscent === ''
+        ? null
+        : authUser.value.imperial_units
+        ? convertDistance(+workoutForm.workoutAscent, 'ft', 'm', 2)
+        : +workoutForm.workoutAscent
+    payload.descent =
+      workoutForm.workoutDescent === ''
+        ? null
+        : authUser.value.imperial_units
+        ? convertDistance(+workoutForm.workoutDescent, 'ft', 'm', 2)
+        : +workoutForm.workoutDescent
+    if (
+      (payload.ascent !== null && payload.descent === null) ||
+      (payload.ascent === null && payload.descent !== null)
+    ) {
+      payloadErrorMessages.value.push('workouts.INVALID_ASCENT_OR_DESCENT')
+    }
   }
   function updateWorkout() {
     const payload: IWorkoutForm = {
@@ -388,10 +465,17 @@
       } else {
         formatPayload(payload)
       }
-      store.dispatch(WORKOUTS_STORE.ACTIONS.EDIT_WORKOUT, {
+      if (payloadErrorMessages.value.length > 0) {
-        workoutId: props.workout.id,
+        store.commit(
-        data: payload,
+          ROOT_STORE.MUTATIONS.SET_ERROR_MESSAGES,
-      })
+          payloadErrorMessages.value
+        )
+      } else {
+        store.dispatch(WORKOUTS_STORE.ACTIONS.EDIT_WORKOUT, {
+          workoutId: props.workout.id,
+          data: payload,
+        })
+      }
     } else {
       if (withGpx.value) {
         if (!gpxFile) {
@@ -536,6 +620,22 @@
               }
             }
           }
+
+          .workout-data {
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+            .form-item {
+              width: 30%;
+            }
+
+            @media screen and (max-width: $medium-limit) {
+              flex-direction: column;
+              .form-item {
+                width: initial;
+              }
+            }
+          }
         }
       }
     }

fittrackee_client/src/locales/en/workouts.json

@@ -16,6 +16,7 @@
     "FROM": "from",
     "GPX_FILE": ".gpx file",
     "HIDE_FILTERS": "hide filters",
+    "INVALID_ASCENT_OR_DESCENT": "Both elevation values must be provided and be greater than or equal to 0.",
     "INVALID_DISTANCE": "The distance must be greater than 0",
     "INVALID_DURATION": "The duration must be greater than 0 seconds",
     "LATEST_WORKOUTS": "Latest workouts",

fittrackee_client/src/locales/fr/workouts.json

@@ -16,6 +16,7 @@
     "FROM": "à partir de",
     "GPX_FILE": "fichier .gpx",
     "HIDE_FILTERS": "masquer les filtres",
+    "INVALID_ASCENT_OR_DESCENT": "Les 2 valeurs pour l'élévation doit être fournies et être supérieures ou égales à 0.",
     "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",

fittrackee_client/src/types/workouts.ts

@@ -116,6 +116,8 @@ export interface IWorkoutForm {
   distance?: number
   duration?: number
   file?: Blob
+  ascent?: number | null
+  descent?: number | null
 }
 
 export interface IWorkoutPayload {