Client - init workout detail w/ map (wip)

2021-09-24 12:11:38 +02:00
parent e7fd6860d3
commit 695fa0d0f1
20 changed files with 1048 additions and 3 deletions
--- a/fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutMap.vue
+++ b/fittrackee_client/src/components/Workout/WorkoutDetail/WorkoutMap.vue
@ -0,0 +1,94 @@
+<template>
+  <div id="workout-map">
+    <div
+      class="leaflet-container"
+      v-if="geoJson.jsonData && center && bounds.length === 2"
+    >
+      <LMap :zoom="options.zoom" :center="center" :bounds="bounds">
+        <LTileLayer
+          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+          :bounds="bounds"
+        />
+        <LGeoJson :geojson="geoJson.jsonData" />
+      </LMap>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+  import { gpx } from '@tmcw/togeojson'
+  import { LGeoJson, LMap, LTileLayer } from '@vue-leaflet/vue-leaflet'
+  import { ComputedRef, PropType, computed, defineComponent } from 'vue'
+
+  import { GeoJSONData } from '@/types/geojson'
+  import { IWorkoutState } from '@/types/workouts'
+
+  export default defineComponent({
+    name: 'WorkoutMap',
+    components: {
+      LGeoJson,
+      LMap,
+      LTileLayer,
+    },
+    props: {
+      workout: {
+        type: Object as PropType<IWorkoutState>,
+      },
+    },
+    setup(props) {
+      function getGeoJson(gpxContent: string): GeoJSONData {
+        if (!gpxContent || gpxContent !== '') {
+          try {
+            const jsonData = gpx(
+              new DOMParser().parseFromString(gpxContent, 'text/xml')
+            )
+            return { jsonData }
+          } catch (e) {
+            console.error('Invalid gpx content')
+            return {}
+          }
+        }
+        return {}
+      }
+      function getCenter(bounds: ComputedRef<number[][]>): number[] {
+        return [
+          (bounds.value[0][0] + bounds.value[1][0]) / 2,
+          (bounds.value[0][1] + bounds.value[1][1]) / 2,
+        ]
+      }
+      const bounds = computed(() =>
+        props.workout
+          ? [
+              [
+                props.workout.workout.bounds[0],
+                props.workout.workout.bounds[1],
+              ],
+              [
+                props.workout.workout.bounds[2],
+                props.workout.workout.bounds[3],
+              ],
+            ]
+          : []
+      )
+
+      return {
+        bounds: bounds,
+        center: computed(() => getCenter(bounds)),
+        geoJson: computed(() =>
+          props.workout && props.workout.gpx
+            ? getGeoJson(props.workout.gpx)
+            : {}
+        ),
+        options: { zoom: 13 },
+      }
+    },
+  })
+</script>
+
+<style lang="scss" scoped>
+  @import '~@/scss/base';
+  .leaflet-container {
+    height: 400px;
+    width: 600px;
+  }
+</style>
--- a/fittrackee_client/src/components/Workout/WorkoutDetail/index.vue
+++ b/fittrackee_client/src/components/Workout/WorkoutDetail/index.vue
@ -0,0 +1,107 @@
+<template>
+  <div class="workout-detail">
+    <Card :without-title="false">
+      <template #title>
+        <div class="workout-previous">
+          <i class="fa fa-chevron-left" aria-hidden="true" />
+        </div>
+        <div class="workout-card-title">
+          <div class="sport-img">
+            <img alt="workout sport logo" :src="sport.img" />
+          </div>
+          <div class="workout-title-date">
+            <div class="workout-title">{{ workout.workout.title }}</div>
+            <div class="workout-date">
+              {{ workoutDate.workout_date }} - {{ workoutDate.workout_time }}
+            </div>
+          </div>
+        </div>
+        <div class="workout-next">
+          <i class="fa fa-chevron-right" aria-hidden="true" />
+        </div>
+      </template>
+      <template #content>
+        <WorkoutMap :workout="workout" />
+      </template>
+    </Card>
+  </div>
+</template>
+
+<script lang="ts">
+  import { PropType, defineComponent, computed } from 'vue'
+
+  import Card from '@/components/Common/Card.vue'
+  import WorkoutMap from '@/components/Workout/WorkoutDetail/WorkoutMap.vue'
+  import { ISport } from '@/types/sports'
+  import { IAuthUserProfile } from '@/types/user'
+  import { IWorkoutState } from '@/types/workouts'
+  import { formatWorkoutDate, getDateWithTZ } from '@/utils/dates'
+
+  export default defineComponent({
+    name: 'WorkoutDetail',
+    components: {
+      Card,
+      WorkoutMap,
+    },
+    props: {
+      authUser: {
+        type: Object as PropType<IAuthUserProfile>,
+        required: true,
+      },
+      sports: {
+        type: Object as PropType<ISport[]>,
+      },
+      workout: {
+        type: Object as PropType<IWorkoutState>,
+        required: true,
+      },
+    },
+    setup(props) {
+      return {
+        sport: computed(() =>
+          props.sports
+            ? props.sports.find(
+                (sport) => sport.id === props.workout.workout.sport_id
+              )
+            : {}
+        ),
+        workoutDate: computed(() =>
+          formatWorkoutDate(
+            getDateWithTZ(
+              props.workout.workout.workout_date,
+              props.authUser.timezone
+            )
+          )
+        ),
+      }
+    },
+  })
+</script>
+
+<style lang="scss" scoped>
+  @import '~@/scss/base';
+  .workout-detail {
+    ::v-deep(.card) {
+      .card-title {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .workout-card-title {
+          display: flex;
+          flex-grow: 1;
+          .sport-img {
+            img {
+              height: 35px;
+              width: 35px;
+              padding: 0 $default-padding;
+            }
+          }
+          .workout-date {
+            font-size: 0.8em;
+            font-weight: normal;
+          }
+        }
+      }
+    }
+  }
+</style>