From 060c5d42d94fc792a676d7cd4edc3c05cb08a879 Mon Sep 17 00:00:00 2001
From: Sam <sam@samr1.net>
Date: Sat, 25 Sep 2021 09:40:10 +0200
Subject: [PATCH] Client - update workout display when no gpx

---
 .../Workout/WorkoutDetail/WorkoutData.vue     | 10 ++++++++--
 .../Workout/WorkoutDetail/WorkoutMap.vue      | 19 ++++++++++++++++++-
 .../src/locales/en/workouts.json              |  1 +
 .../src/locales/fr/workouts.json              |  1 +
 fittrackee_client/src/scss/colors.scss        |  2 ++
 5 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutData.vue b/fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutData.vue
index 2ff0ba3f..46820df6 100644
--- a/fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutData.vue
+++ b/fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutData.vue
@@ -22,13 +22,19 @@
       {{ t('workouts.MAX_SPEED') }}: <span>{{ workout.max_speed }} km/h</span>
       <WorkoutRecord :workout="workout" record_type="MS" />
     </div>
-    <div class="workout-data">
+    <div
+      class="workout-data"
+      v-if="workout.max_alt !== null && workout.min_alt !== null"
+    >
       <img class="mountains" src="/img/misc/mountains.svg" />
       {{ t('workouts.MIN_ALTITUDE') }}: <span>{{ workout.min_alt }} m</span
       ><br />
       {{ t('workouts.MAX_ALTITUDE') }}: <span>{{ workout.max_alt }} m</span>
     </div>
-    <div class="workout-data">
+    <div
+      class="workout-data"
+      v-if="workout.ascent !== null && workout.descent !== null"
+    >
       <i class="fa fa-location-arrow" aria-hidden="true" />
       {{ t('workouts.ASCENT') }}: <span>{{ workout.ascent }} m</span><br />
       {{ t('workouts.DESCENT') }}: <span>{{ workout.descent }} m</span>
diff --git a/fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutMap.vue b/fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutMap.vue
index f74f5749..05614d8b 100644
--- a/fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutMap.vue
+++ b/fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutMap.vue
@@ -19,6 +19,7 @@
         <LGeoJson :geojson="geoJson.jsonData" />
       </LMap>
     </div>
+    <div v-else class="no-map">{{ t('workouts.NO_MAP') }}</div>
   </div>
 </template>
 
@@ -26,6 +27,7 @@
   import { gpx } from '@tmcw/togeojson'
   import { LGeoJson, LMap, LTileLayer } from '@vue-leaflet/vue-leaflet'
   import { ComputedRef, PropType, computed, defineComponent, ref } from 'vue'
+  import { useI18n } from 'vue-i18n'
 
   import { ROOT_STORE } from '@/store/constants'
   import { GeoJSONData } from '@/types/geojson'
@@ -46,6 +48,7 @@
       },
     },
     setup(props) {
+      const { t } = useI18n()
       const store = useStore()
       const workoutMap = ref<null | {
         leafletObject: { fitBounds: (bounds: number[][]) => null }
@@ -104,6 +107,7 @@
             : {}
         ),
         options: { zoom: 13 },
+        t,
         workoutMap,
         fitBounds,
         getApiUrl,
@@ -116,16 +120,29 @@
   @import '~@/scss/base';
   #workout-map {
     padding: $default-padding 0;
-    .leaflet-container {
+    .leaflet-container,
+    .no-map {
       height: 400px;
       width: 600px;
     }
+    .no-map {
+      text-align: center;
+      vertical-align: center;
+      font-style: italic;
+      line-height: 400px;
+      color: var(--workout-no-map-color);
+      background-color: var(--workout-no-map-bg-color);
+    }
 
     @media screen and (max-width: $small-limit) {
+      padding: 0;
       .leaflet-container {
         width: 100%;
         height: 300px;
       }
+      .no-map {
+        display: none;
+      }
     }
   }
 </style>
diff --git a/fittrackee_client/src/locales/en/workouts.json b/fittrackee_client/src/locales/en/workouts.json
index dfcb2e31..ca1910cc 100644
--- a/fittrackee_client/src/locales/en/workouts.json
+++ b/fittrackee_client/src/locales/en/workouts.json
@@ -12,6 +12,7 @@
   "MAX_SPEED": "max. speed",
   "MIN_ALTITUDE": "min. altitude",
   "NEXT_WORKOUT": "Next workout",
+  "NO_MAP": "No map",
   "NO_NEXT_WORKOUT": "No next workout",
   "NO_PREVIOUS_WORKOUT": "No previous workout",
   "NO_RECORDS": "No records.",
diff --git a/fittrackee_client/src/locales/fr/workouts.json b/fittrackee_client/src/locales/fr/workouts.json
index a94368c5..b94053e9 100644
--- a/fittrackee_client/src/locales/fr/workouts.json
+++ b/fittrackee_client/src/locales/fr/workouts.json
@@ -12,6 +12,7 @@
   "MAX_SPEED": "vitesse max",
   "MIN_ALTITUDE": "altitude min",
   "NEXT_WORKOUT": "Séance suivante",
+  "NO_MAP": "Pas de carte",
   "NO_NEXT_WORKOUT": "Pas de séance suivante",
   "NO_PREVIOUS_WORKOUT": "Pas de séances précédente",
   "NO_RECORDS": "Pas de records.",
diff --git a/fittrackee_client/src/scss/colors.scss b/fittrackee_client/src/scss/colors.scss
index 6d86f04b..57aba3e0 100644
--- a/fittrackee_client/src/scss/colors.scss
+++ b/fittrackee_client/src/scss/colors.scss
@@ -34,4 +34,6 @@
   --workout-trophy-color: #daa520;
   --workout-img-color: invert(22%) sepia(25%) saturate(646%) hue-rotate(169deg)
         brightness(97%) contrast(96%);
+  --workout-no-map-bg-color: #eaeaea;
+  --workout-no-map-color: #666666;
 }
\ No newline at end of file