Client - init workout detail w/ map (wip)

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>

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>

fittrackee_client/src/locales/en/error.json

@@ -2,6 +2,7 @@
   "UNKNOWN": "Error. Please try again or contact the administrator.",
   "APP_ERROR": "The application seems encounter some issues.<br />Please try later or contact the administrator.",
   "NOT_FOUND": {
-    "PAGE": "Page not found"
+    "PAGE": "Page not found",
+    "WORKOUT": "Workout not found"
   }
 }

fittrackee_client/src/locales/fr/error.json

@@ -2,6 +2,7 @@
   "UNKNOWN": "Erreur. Veuillez réessayer ou contacter l'administrateur.",
   "APP_ERROR": "L'application semble rencontrer quelques problèmes.<br />Veuillez réessayer plus tard ou contacter l'administrateur.",
   "NOT_FOUND": {
-    "PAGE": "Page introuvable"
+    "PAGE": "Page introuvable",
+    "WORKOUT": "Séance introuvable"
   }
 }

fittrackee_client/src/router/index.ts

@@ -5,6 +5,7 @@ import { USER_STORE } from '@/store/constants'
 import Dashboard from '@/views/DashBoard.vue'
 import LoginOrRegister from '@/views/LoginOrRegister.vue'
 import NotFoundView from '@/views/NotFoundView.vue'
+import Workout from '@/views/Workout.vue'
 
 const routes: Array<RouteRecordRaw> = [
   {
@@ -24,6 +25,11 @@ const routes: Array<RouteRecordRaw> = [
     component: LoginOrRegister,
     props: { action: 'register' },
   },
+  {
+    path: '/workouts/:workoutId',
+    name: 'Workout',
+    component: Workout,
+  },
   { path: '/:pathMatch(.*)*', name: 'not-found', component: NotFoundView },
 ]
 

fittrackee_client/src/store/modules/workouts/actions.ts

@@ -49,4 +49,37 @@ export const actions: ActionTree<IWorkoutsState, IRootState> &
   ): void {
     getWorkouts(context, payload, 'USER_WORKOUTS')
   },
+  [WORKOUTS_STORE.ACTIONS.GET_WORKOUT](
+    context: ActionContext<IWorkoutsState, IRootState>,
+    workoutId: string
+  ): void {
+    context.commit(ROOT_STORE.MUTATIONS.EMPTY_ERROR_MESSAGES)
+    context.commit(WORKOUTS_STORE.MUTATIONS.SET_WORKOUT_LOADING, true)
+    authApi
+      .get(`workouts/${workoutId}`)
+      .then((res) => {
+        if (res.data.status === 'success') {
+          context.commit(
+            WORKOUTS_STORE.MUTATIONS.SET_WORKOUT,
+            res.data.data.workouts[0]
+          )
+          if (res.data.data.workouts[0].with_gpx) {
+            authApi.get(`workouts/${workoutId}/gpx`).then((res) => {
+              if (res.data.status === 'success') {
+                context.commit(
+                  WORKOUTS_STORE.MUTATIONS.SET_WORKOUT_GPX,
+                  res.data.data.gpx
+                )
+              }
+            })
+          }
+        } else {
+          handleError(context, null)
+        }
+      })
+      .catch((error) => handleError(context, error))
+      .finally(() =>
+        context.commit(WORKOUTS_STORE.MUTATIONS.SET_WORKOUT_LOADING, false)
+      )
+  },
 }

fittrackee_client/src/store/modules/workouts/enums.ts

@@ -1,15 +1,20 @@
 export enum WorkoutsActions {
   GET_CALENDAR_WORKOUTS = 'GET_CALENDAR_WORKOUTS',
   GET_USER_WORKOUTS = 'GET_USER_WORKOUTS',
+  GET_WORKOUT = 'GET_WORKOUT',
 }
 
 export enum WorkoutsGetters {
   CALENDAR_WORKOUTS = 'CALENDAR_WORKOUTS',
   USER_WORKOUTS = 'USER_WORKOUTS',
+  WORKOUT = 'WORKOUT',
 }
 
 export enum WorkoutsMutations {
   EMPTY_WORKOUTS = 'EMPTY_WORKOUTS',
   SET_CALENDAR_WORKOUTS = 'SET_CALENDAR_WORKOUTS',
   SET_USER_WORKOUTS = 'SET_USER_WORKOUTS',
+  SET_WORKOUT = 'SET_WORKOUT',
+  SET_WORKOUT_GPX = 'SET_WORKOUT_GPX',
+  SET_WORKOUT_LOADING = 'SET_WORKOUT_LOADING',
 }

fittrackee_client/src/store/modules/workouts/getters.ts

@@ -15,4 +15,7 @@ export const getters: GetterTree<IWorkoutsState, IRootState> &
   [WORKOUTS_STORE.GETTERS.USER_WORKOUTS]: (state: IWorkoutsState) => {
     return state.user_workouts
   },
+  [WORKOUTS_STORE.GETTERS.WORKOUT]: (state: IWorkoutsState) => {
+    return state.workout
+  },
 }

fittrackee_client/src/store/modules/workouts/mutations.ts

@@ -20,6 +20,24 @@ export const mutations: MutationTree<IWorkoutsState> & TWorkoutsMutations = {
   ) {
     state.user_workouts = workouts
   },
+  [WORKOUTS_STORE.MUTATIONS.SET_WORKOUT](
+    state: IWorkoutsState,
+    workout: IWorkout
+  ) {
+    state.workout.workout = workout
+  },
+  [WORKOUTS_STORE.MUTATIONS.SET_WORKOUT_LOADING](
+    state: IWorkoutsState,
+    loading: boolean
+  ) {
+    state.workout.loading = loading
+  },
+  [WORKOUTS_STORE.MUTATIONS.SET_WORKOUT_GPX](
+    state: IWorkoutsState,
+    gpx: string
+  ) {
+    state.workout.gpx = gpx
+  },
   [WORKOUTS_STORE.MUTATIONS.EMPTY_WORKOUTS](state: IWorkoutsState) {
     state.calendar_workouts = []
     state.user_workouts = []

fittrackee_client/src/store/modules/workouts/state.ts

@@ -1,6 +1,12 @@
 import { IWorkoutsState } from '@/store/modules/workouts/types'
+import { IWorkout } from '@/types/workouts'
 
 export const workoutsState: IWorkoutsState = {
   calendar_workouts: [],
   user_workouts: [],
+  workout: {
+    gpx: '',
+    loading: false,
+    workout: <IWorkout>{},
+  },
 }

fittrackee_client/src/store/modules/workouts/types.ts

@@ -7,11 +7,12 @@ import {
 
 import { WORKOUTS_STORE } from '@/store/constants'
 import { IRootState } from '@/store/modules/root/types'
-import { IWorkout, IWorkoutsPayload } from '@/types/workouts'
+import { IWorkout, IWorkoutsPayload, IWorkoutState } from '@/types/workouts'
 
 export interface IWorkoutsState {
   user_workouts: IWorkout[]
   calendar_workouts: IWorkout[]
+  workout: IWorkoutState
 }
 
 export interface IWorkoutsActions {
@@ -23,11 +24,16 @@ export interface IWorkoutsActions {
     context: ActionContext<IWorkoutsState, IRootState>,
     payload: IWorkoutsPayload
   ): void
+  [WORKOUTS_STORE.ACTIONS.GET_WORKOUT](
+    context: ActionContext<IWorkoutsState, IRootState>,
+    workoutId: string | string[]
+  ): void
 }
 
 export interface IWorkoutsGetters {
   [WORKOUTS_STORE.GETTERS.CALENDAR_WORKOUTS](state: IWorkoutsState): IWorkout[]
   [WORKOUTS_STORE.GETTERS.USER_WORKOUTS](state: IWorkoutsState): IWorkout[]
+  [WORKOUTS_STORE.GETTERS.WORKOUT](state: IWorkoutsState): IWorkoutState
 }
 
 export type TWorkoutsMutations<S = IWorkoutsState> = {
@@ -39,6 +45,12 @@ export type TWorkoutsMutations<S = IWorkoutsState> = {
     state: S,
     workouts: IWorkout[]
   ): void
+  [WORKOUTS_STORE.MUTATIONS.SET_WORKOUT](state: S, workout: IWorkout): void
+  [WORKOUTS_STORE.MUTATIONS.SET_WORKOUT_GPX](state: S, gpx: string): void
+  [WORKOUTS_STORE.MUTATIONS.SET_WORKOUT_LOADING](
+    state: S,
+    loading: boolean
+  ): void
   [WORKOUTS_STORE.MUTATIONS.EMPTY_WORKOUTS](state: S): void
 }
 

fittrackee_client/src/togeojson.d.ts

@@ -0,0 +1 @@
+declare module '@tmcw/togeojson'

fittrackee_client/src/types/geojson.ts

@@ -0,0 +1,3 @@
+export interface GeoJSONData {
+  jsonData?: Record<string, unknown>
+}

fittrackee_client/src/types/workouts.ts

@@ -78,3 +78,9 @@ export interface IWorkoutsPayload {
   per_page?: number
   page?: number
 }
+
+export interface IWorkoutState {
+  gpx: string
+  loading: boolean
+  workout: IWorkout
+}

fittrackee_client/src/views/Workout.vue

@@ -0,0 +1,79 @@
+<template>
+  <div id="workout">
+    <div class="workout-loading" v-if="workout.loading">
+      <div class="loading">
+        <Loader />
+      </div>
+    </div>
+    <div v-else class="container">
+      <div v-if="workout.workout.id">
+        <WorkoutDetail
+          v-if="sports.length > 0"
+          :workout="workout"
+          :sports="sports"
+          :authUser="authUser"
+        />
+      </div>
+      <div class="container" v-else>
+        <NotFound target="WORKOUT" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+  import { computed, ComputedRef, defineComponent, onBeforeMount } from 'vue'
+  import { useRoute } from 'vue-router'
+
+  import Loader from '@/components/Common/Loader.vue'
+  import NotFound from '@/components/Common/NotFound.vue'
+  import WorkoutDetail from '@/components/Workout/WorkoutDetail/index.vue'
+  import { SPORTS_STORE, USER_STORE, WORKOUTS_STORE } from '@/store/constants'
+  import { IAuthUserProfile } from '@/types/user'
+  import { IWorkoutState } from '@/types/workouts'
+  import { useStore } from '@/use/useStore'
+
+  export default defineComponent({
+    name: 'Workout',
+    components: {
+      Loader,
+      NotFound,
+      WorkoutDetail,
+    },
+    setup() {
+      const route = useRoute()
+      const store = useStore()
+      onBeforeMount(() =>
+        store.dispatch(
+          WORKOUTS_STORE.ACTIONS.GET_WORKOUT,
+          route.params.workoutId
+        )
+      )
+
+      const workout: ComputedRef<IWorkoutState> = computed(
+        () => store.getters[WORKOUTS_STORE.GETTERS.WORKOUT]
+      )
+      const authUser: ComputedRef<IAuthUserProfile> = computed(
+        () => store.getters[USER_STORE.GETTERS.AUTH_USER_PROFILE]
+      )
+      const sports = computed(() => store.getters[SPORTS_STORE.GETTERS.SPORTS])
+
+      return { authUser, sports, workout }
+    },
+  })
+</script>
+
+<style lang="scss" scoped>
+  @import '~@/scss/base';
+  #workout {
+    .workout-loading {
+      height: $app-height;
+
+      .loading {
+        display: flex;
+        align-items: center;
+        height: 100%;
+      }
+    }
+  }
+</style>

fittrackee_client/src/vue-leaflet.d.ts

@@ -0,0 +1,11 @@
+declare module '@vue-leaflet/vue-leaflet' {
+  import type { DefineComponent } from 'vue'
+  export const LMap: DefineComponent
+  export const LIcon: DefineComponent
+  export const LTileLayer: DefineComponent
+  export const LMarker: DefineComponent
+  export const LGeoJson: DefineComponent
+  export const LPolyline: DefineComponent
+  export const LPolygon: DefineComponent
+  export const LRectangle: DefineComponent
+}