From 3e3612696cbd45c9c77505a88cde1de84005e2e9 Mon Sep 17 00:00:00 2001
From: Sam <sam@samr1.net>
Date: Mon, 29 Nov 2021 17:07:51 +0100
Subject: [PATCH] [Client] workout - add link to download gpx file - fix #115

---
 .../WorkoutDetail/WorkoutCardTitle.vue        | 30 +++++++++++++++++--
 .../Workout/WorkoutDetail/index.vue           |  3 +-
 fittrackee_client/src/types/workouts.ts       |  3 +-
 3 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutCardTitle.vue b/fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutCardTitle.vue
index 7003313b..862f5843 100644
--- a/fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutCardTitle.vue
+++ b/fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutCardTitle.vue
@@ -31,6 +31,12 @@
               })
             "
           />
+          <i
+            v-if="workoutObject.with_gpx"
+            class="fa fa-download"
+            aria-hidden="true"
+            @click.prevent="downloadGpx(workoutObject.workoutId)"
+          />
           <i
             class="fa fa-trash"
             aria-hidden="true"
@@ -58,8 +64,8 @@
               }"
             >
               > {{ $t('workouts.BACK_TO_WORKOUT') }}
-            </router-link></span
-          >
+            </router-link>
+          </span>
         </div>
       </div>
     </div>
@@ -83,6 +89,7 @@
 <script setup lang="ts">
   import { toRefs } from 'vue'
 
+  import authApi from '@/api/authApi'
   import { ISport } from '@/types/sports'
   import { IWorkoutObject } from '@/types/workouts'
 
@@ -95,6 +102,23 @@
   const emit = defineEmits(['displayModal'])
 
   const { sport, workoutObject } = toRefs(props)
+
+  async function downloadGpx(workoutId: string) {
+    await authApi
+      .get(`workouts/${workoutId}/gpx/download`, {
+        responseType: 'blob',
+      })
+      .then((response) => {
+        const gpxFileUrl = window.URL.createObjectURL(
+          new Blob([response.data], { type: 'application/gpx+xml' })
+        )
+        const gpxLink = document.createElement('a')
+        gpxLink.href = gpxFileUrl
+        gpxLink.setAttribute('download', `${workoutId}.gpx`)
+        document.body.appendChild(gpxLink)
+        gpxLink.click()
+      })
+  }
 </script>
 
 <style lang="scss" scoped>
@@ -133,10 +157,12 @@
       }
 
       .fa {
+        cursor: pointer;
         padding: 0 $default-padding * 0.3;
       }
 
       @media screen and (max-width: $small-limit) {
+        .fa-download,
         .fa-trash,
         .fa-edit {
           border: solid 1px var(--card-border-color);
diff --git a/fittrackee_client/src/components/Workout/WorkoutDetail/index.vue b/fittrackee_client/src/components/Workout/WorkoutDetail/index.vue
index 7e571489..740c4373 100644
--- a/fittrackee_client/src/components/Workout/WorkoutDetail/index.vue
+++ b/fittrackee_client/src/components/Workout/WorkoutDetail/index.vue
@@ -151,8 +151,9 @@
       type: props.displaySegment ? 'SEGMENT' : 'WORKOUT',
       workoutDate: workoutDate.workout_date,
       weatherEnd: segment ? null : workout.weather_end,
-      workoutId: workout.id,
       weatherStart: segment ? null : workout.weather_start,
+      with_gpx: workout.with_gpx,
+      workoutId: workout.id,
       workoutTime: workoutDate.workout_time,
     }
   }
diff --git a/fittrackee_client/src/types/workouts.ts b/fittrackee_client/src/types/workouts.ts
index 91f56727..779dd997 100644
--- a/fittrackee_client/src/types/workouts.ts
+++ b/fittrackee_client/src/types/workouts.ts
@@ -94,8 +94,9 @@ export interface IWorkoutObject {
   type: string
   workoutDate: string
   weatherEnd: IWeather | null
-  workoutId: string
   weatherStart: IWeather | null
+  with_gpx: boolean
+  workoutId: string
   workoutTime: string
 }