Client - init workouts timeline
This commit is contained in:
Sam
65
fittrackee_client/src/components/Common/StaticMap.vue
Normal file
65
fittrackee_client/src/components/Common/StaticMap.vue
Normal file
@ -0,0 +1,65 @@
|
||||
<template>
|
||||
<div class="static-map">
|
||||
<img
|
||||
class="map-image"
|
||||
:src="`${getApiUrl()}workouts/map/${workout.map}?${Date.now()}`"
|
||||
alt="workout map"
|
||||
/>
|
||||
<div class="map-attribution">
|
||||
<span class="map-attribution-text">©</span>
|
||||
<a
|
||||
class="map-attribution-text"
|
||||
href="http://www.openstreetmap.org/copyright"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
OpenStreetMap
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, PropType } from 'vue'
|
||||
|
||||
import { IWorkout } from '@/types/workouts'
|
||||
import { getApiUrl } from '@/utils'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'StaticMap',
|
||||
props: {
|
||||
workout: {
|
||||
type: Object as PropType<IWorkout>,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
setup() {
|
||||
return { getApiUrl }
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import '~@/scss/base';
|
||||
|
||||
.static-map {
|
||||
display: flex;
|
||||
position: relative;
|
||||
|
||||
.map-image {
|
||||
height: 225px;
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
.map-attribution {
|
||||
top: 0;
|
||||
right: 0;
|
||||
font-size: 11px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.map-attribution-text {
|
||||
background-color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,3 +0,0 @@
|
||||
<template>
|
||||
<div>Timeline</div>
|
||||
</template>
|
||||
@ -0,0 +1,156 @@
|
||||
<template>
|
||||
<div class="timeline-workout">
|
||||
<Card>
|
||||
<template #content>
|
||||
<div class="workout-user-date">
|
||||
<div class="workout-user">
|
||||
<img
|
||||
class="profile-img"
|
||||
v-if="userPictureUrl !== ''"
|
||||
alt="User picture"
|
||||
:src="userPictureUrl"
|
||||
/>
|
||||
<div v-else class="no-picture">
|
||||
<i class="fa fa-user-circle-o" aria-hidden="true" />
|
||||
</div>
|
||||
{{ user.username }}
|
||||
</div>
|
||||
<div
|
||||
class="workout-date"
|
||||
:title="
|
||||
format(
|
||||
getDateWithTZ(workout.workout_date, user.timezone),
|
||||
'dd/MM/yyyy HH:mm'
|
||||
)
|
||||
"
|
||||
>
|
||||
{{
|
||||
formatDistance(new Date(workout.workout_date), new Date(), {
|
||||
addSuffix: true,
|
||||
locale,
|
||||
})
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="workout-map" v-if="workout.with_gpx">
|
||||
<StaticMap :workout="workout"></StaticMap>
|
||||
</div>
|
||||
<div class="workout-data">
|
||||
<div>
|
||||
<img class="sport-img" alt="workout sport logo" :src="sport.img" />
|
||||
</div>
|
||||
<div>
|
||||
<i class="fa fa-clock-o" aria-hidden="true" />
|
||||
{{ workout.moving }}
|
||||
</div>
|
||||
<div>
|
||||
<i class="fa fa-road" aria-hidden="true" />
|
||||
{{ workout.distance }} km
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Locale, format, formatDistance } from 'date-fns'
|
||||
import { PropType, defineComponent, ComputedRef, computed } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
import Card from '@/components/Common/Card.vue'
|
||||
import StaticMap from '@/components/Common/StaticMap.vue'
|
||||
import { ROOT_STORE } from '@/store/constants'
|
||||
import { ISport } from '@/types/sports'
|
||||
import { IAuthUserProfile } from '@/types/user'
|
||||
import { IWorkout } from '@/types/workouts'
|
||||
import { useStore } from '@/use/useStore'
|
||||
import { getApiUrl } from '@/utils'
|
||||
import { getDateWithTZ } from '@/utils/dates'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'WorkoutCard',
|
||||
components: {
|
||||
Card,
|
||||
StaticMap,
|
||||
},
|
||||
props: {
|
||||
workout: {
|
||||
type: Object as PropType<IWorkout>,
|
||||
required: true,
|
||||
},
|
||||
user: {
|
||||
type: Object as PropType<IAuthUserProfile>,
|
||||
required: true,
|
||||
},
|
||||
sport: {
|
||||
type: Object as PropType<ISport>,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
const { t } = useI18n()
|
||||
const store = useStore()
|
||||
const userPictureUrl: ComputedRef<string> = computed(() =>
|
||||
props.user.picture
|
||||
? `${getApiUrl()}/users/${props.user.username}/picture?${Date.now()}`
|
||||
: ''
|
||||
)
|
||||
const locale: ComputedRef<Locale> = computed(
|
||||
() => store.getters[ROOT_STORE.GETTERS.LOCALE]
|
||||
)
|
||||
|
||||
return {
|
||||
format,
|
||||
formatDistance,
|
||||
getDateWithTZ,
|
||||
locale,
|
||||
t,
|
||||
userPictureUrl,
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '~@/scss/base';
|
||||
|
||||
.timeline-workout {
|
||||
margin-bottom: $default-margin * 2;
|
||||
|
||||
::v-deep(.card) {
|
||||
max-width: 400px;
|
||||
.card-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0;
|
||||
.workout-user-date {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: $default-padding * 0.5 $default-padding;
|
||||
.profile-img {
|
||||
border-radius: 50%;
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
}
|
||||
.workout-date {
|
||||
font-size: 0.75em;
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
.workout-data {
|
||||
display: flex;
|
||||
padding-top: $default-padding * 0.5;
|
||||
.sport-img {
|
||||
height: 28px;
|
||||
width: 28px;
|
||||
}
|
||||
div {
|
||||
width: 33%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,57 @@
|
||||
<template>
|
||||
<div class="timeline">
|
||||
<WorkoutCard
|
||||
v-for="workout in workouts"
|
||||
:workout="workout"
|
||||
:sport="sports.filter((s) => s.id === workout.sport_id)[0]"
|
||||
:user="user"
|
||||
:key="workout.id"
|
||||
></WorkoutCard>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import {
|
||||
computed,
|
||||
ComputedRef,
|
||||
defineComponent,
|
||||
onBeforeMount,
|
||||
PropType,
|
||||
} from 'vue'
|
||||
|
||||
import WorkoutCard from '@/components/Dashboard/Timeline/WorkoutCard.vue'
|
||||
import { SPORTS_STORE, WORKOUTS_STORE } from '@/store/constants'
|
||||
import { ISport } from '@/types/sports'
|
||||
import { IAuthUserProfile } from '@/types/user'
|
||||
import { IWorkout } from '@/types/workouts'
|
||||
import { useStore } from '@/use/useStore'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'Timeline',
|
||||
components: {
|
||||
WorkoutCard,
|
||||
},
|
||||
props: {
|
||||
user: {
|
||||
type: Object as PropType<IAuthUserProfile>,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
setup() {
|
||||
const store = useStore()
|
||||
onBeforeMount(() =>
|
||||
store.dispatch(WORKOUTS_STORE.ACTIONS.GET_USER_WORKOUTS, { page: 1 })
|
||||
)
|
||||
|
||||
const workouts: ComputedRef<IWorkout[]> = computed(
|
||||
() => store.getters[WORKOUTS_STORE.GETTERS.USER_WORKOUTS]
|
||||
)
|
||||
|
||||
const sports: ComputedRef<ISport[]> = computed(
|
||||
() => store.getters[SPORTS_STORE.GETTERS.SPORTS]
|
||||
)
|
||||
|
||||
return { workouts, sports }
|
||||
},
|
||||
})
|
||||
</script>
|
||||
Reference in New Issue
Block a user