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

2022-12-14 16:43:44 +01:00
parent c611f41519
commit 0c0138b867
4 changed files with 131 additions and 27 deletions
--- a/fittrackee_client/src/components/Workout/WorkoutEdition.vue
+++ b/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">
-                  <label>
-                    {{ $t('workouts.DISTANCE') }} ({{
-                      authUser.imperial_units ? 'mi' : 'km'
-                    }}):
-                  </label>
-                  <input
-                    :class="{ errored: isDistanceInvalid() }"
-                    name="workout-distance"
-                    type="number"
-                    min="0"
-                    step="0.001"
-                    required
-                    @invalid="invalidateForm"
-                    :disabled="loading"
-                    v-model="workoutForm.workoutDistance"
-                  />
+                <div class="workout-data">
+                  <div class="form-item">
+                    <label>
+                      {{ $t('workouts.DISTANCE') }} ({{
+                        authUser.imperial_units ? 'mi' : 'km'
+                      }})*:
+                    </label>
+                    <input
+                      :class="{ errored: isDistanceInvalid() }"
+                      name="workout-distance"
+                      type="number"
+                      min="0"
+                      step="0.001"
+                      required
+                      @invalid="invalidateForm"
+                      :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)
-          : parseFloat(workout.distance.toFixed(2))
+          ? convertDistance(workout.distance, 'km', 'mi', 3)
+          : 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, {
-        workoutId: props.workout.id,
-        data: payload,
-      })
+      if (payloadErrorMessages.value.length > 0) {
+        store.commit(
+          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;
+              }
+            }
+          }
        }
      }
    }
--- a/fittrackee_client/src/locales/en/workouts.json
+++ b/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",
--- a/fittrackee_client/src/locales/fr/workouts.json
+++ b/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",
--- a/fittrackee_client/src/types/workouts.ts
+++ b/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 {