[Client] workout - add link to download gpx file - fix #115

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);

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,
     }
   }

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
 }