Alexander/FitTrackee
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Client - access previous or next workouts if exist

Browse Source
This commit is contained in:
Sam 2021-09-24 15:03:40 +02:00
parent 1640a3fee4
commit ea5be4037d
3 changed files with 65 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
fittrackee_client/src/components/Workout/WorkoutDetail/index.vue
View File

@ -2,7 +2,23 @@
<div class="workout-detail">
<Card :without-title="false">
<template #title>
<div class="workout-previous">
<div
class="workout-previous workout-arrow"
:class="{ inactive: !workout.workout.previous_workout }"
:title="
workout.workout.previous_workout
? t('workouts.PREVIOUS_WORKOUT')
: t('workouts.NO_PREVIOUS_WORKOUT')
"
@click="
workout.workout.previous_workout
? $router.push({
name: 'Workout',
params: { workoutId: workout.workout.previous_workout },
})
: null
"
>
<i class="fa fa-chevron-left" aria-hidden="true" />
</div>
<div class="workout-card-title">
@ -16,7 +32,23 @@
</div>
</div>
</div>
<div class="workout-next">
<div
class="workout-next workout-arrow"
:class="{ inactive: !workout.workout.next_workout }"
:title="
workout.workout.next_workout
? t('workouts.NEXT_WORKOUT')
: t('workouts.NO_NEXT_WORKOUT')
"
@click="
workout.workout.next_workout
? $router.push({
name: 'Workout',
params: { workoutId: workout.workout.next_workout },
})
: null
"
>
<i class="fa fa-chevron-right" aria-hidden="true" />
</div>
</template>
@ -28,13 +60,17 @@
</template>
<script lang="ts">
import { PropType, defineComponent, computed } from 'vue'
import { PropType, defineComponent, computed, watch } from 'vue'
import { useI18n } from 'vue-i18n'
import { useRoute } from 'vue-router'
import Card from '@/components/Common/Card.vue'
import WorkoutMap from '@/components/Workout/WorkoutDetail/WorkoutMap.vue'
import { WORKOUTS_STORE } from '@/store/constants'
import { ISport } from '@/types/sports'
import { IAuthUserProfile } from '@/types/user'
import { IWorkoutState } from '@/types/workouts'
import { useStore } from '@/use/useStore'
import { formatWorkoutDate, getDateWithTZ } from '@/utils/dates'
export default defineComponent({
@ -57,6 +93,15 @@
},
},
setup(props) {
const route = useRoute()
const store = useStore()
const { t } = useI18n()
watch(
() => route.params.workoutId,
async (newWorkoutId) => {
store.dispatch(WORKOUTS_STORE.ACTIONS.GET_WORKOUT, newWorkoutId)
}
)
return {
sport: computed(() =>
props.sports
@ -73,6 +118,7 @@
)
)
),
t,
}
},
})
@ -88,6 +134,14 @@
display: flex;
justify-content: space-between;
align-items: center;
.workout-arrow {
cursor: pointer;
&.inactive {
color: var(--disabled-color);
cursor: default;
}
}
.workout-card-title {
display: flex;
flex-grow: 1;

4
fittrackee_client/src/locales/en/workouts.json
View File

@ -4,8 +4,12 @@
"DURATION": "duration",
"KM": "km",
"LATEST_WORKOUTS": "Latest workouts",
"NEXT_WORKOUT": "Next workout",
"NO_NEXT_WORKOUT": "No next workout",
"NO_PREVIOUS_WORKOUT": "No previous workout",
"NO_RECORDS": "No records.",
"NO_WORKOUTS": "No workouts.",
"PREVIOUS_WORKOUT": "Previous workout",
"RECORD": "record | records",
"RECORD_AS": "Ave. speed",
"RECORD_FD": "Farest distance",

4
fittrackee_client/src/locales/fr/workouts.json
View File

@ -4,8 +4,12 @@
"DURATION": "durée",
"KM": "km",
"LATEST_WORKOUTS": "Séances récentes",
"NEXT_WORKOUT": "Séance suivante",
"NO_NEXT_WORKOUT": "Pas de séance suivante",
"NO_PREVIOUS_WORKOUT": "Pas de séances précédente",
"NO_RECORDS": "Pas de records.",
"NO_WORKOUTS": "Pas de séances.",
"PREVIOUS_WORKOUT": "Séance précédente",
"RECORD": "record | records",
"RECORD_AS": "Vitesse moy.",
"RECORD_FD": "Distance la + longue",