From 62f3940e7d2b16ab59ee79465c36aea3e207ccc4 Mon Sep 17 00:00:00 2001
From: Sam <sam@samr1.net>
Date: Tue, 18 Jul 2023 19:18:10 +0200
Subject: [PATCH] Client - fix display when workout has no evelation data

---
 .../src/components/Workout/WorkoutCard.vue    | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/fittrackee_client/src/components/Workout/WorkoutCard.vue b/fittrackee_client/src/components/Workout/WorkoutCard.vue
index e6ad19a3..d4cca808 100644
--- a/fittrackee_client/src/components/Workout/WorkoutCard.vue
+++ b/fittrackee_client/src/components/Workout/WorkoutCard.vue
@@ -61,7 +61,7 @@
       </div>
       <div
         class="workout-data"
-        :class="{ 'without-gpx': workout && !workout.with_gpx }"
+        :class="{ 'without-elevation': !hasElevation(workout) }"
         @click="
           workout.id
             ? $router.push({
@@ -92,7 +92,7 @@
             :useImperialUnits="useImperialUnits"
           />
         </div>
-        <div class="data elevation" v-if="workout && workout.with_gpx">
+        <div class="data elevation" v-if="hasElevation(workout)">
           <img
             class="mountains"
             src="/img/workouts/mountains.svg"
@@ -114,7 +114,7 @@
             />
           </div>
         </div>
-        <div class="data altitude" v-if="hasElevation(workout)">
+        <div class="data altitude" v-if="hasUphillValue(workout)">
           <i class="fa fa-location-arrow" aria-hidden="true" />
           <div class="data-values">
             +<Distance
@@ -169,7 +169,16 @@
   )
 
   function hasElevation(workout: IWorkout): boolean {
-    return workout && workout.ascent !== null && workout.descent !== null
+    return (
+      workout.with_gpx && workout.min_alt !== null && workout.max_alt !== null
+    )
+  }
+  function hasUphillValue(workout: IWorkout): boolean {
+    return (
+      hasElevation(workout) &&
+      workout.ascent !== null &&
+      workout.descent !== null
+    )
   }
 </script>
 
@@ -273,7 +282,7 @@
           }
         }
 
-        &.without-gpx {
+        &.without-elevation {
           .img,
           .data {
             justify-content: center;