Client - add missing translations on chart + message when no workouts

This commit is contained in:
Sam
2021-09-21 08:51:07 +02:00
parent 795599ad46
commit 5dadbee29c
12 changed files with 117 additions and 43 deletions

View File

@ -7,6 +7,9 @@
:user="user"
:key="workout.id"
></WorkoutCard>
<Card v-if="workouts.length === 0" class="no-workouts">
<template #content>{{ t('workouts.NO_WORKOUTS') }}</template>
</Card>
</div>
</template>
@ -18,7 +21,9 @@
onBeforeMount,
PropType,
} from 'vue'
import { useI18n } from 'vue-i18n'
import Card from '@/components/Common/Card.vue'
import WorkoutCard from '@/components/Dashboard/Timeline/WorkoutCard.vue'
import { SPORTS_STORE, WORKOUTS_STORE } from '@/store/constants'
import { ISport } from '@/types/sports'
@ -29,6 +34,7 @@
export default defineComponent({
name: 'Timeline',
components: {
Card,
WorkoutCard,
},
props: {
@ -39,6 +45,7 @@
},
setup() {
const store = useStore()
const { t } = useI18n()
onBeforeMount(() =>
store.dispatch(WORKOUTS_STORE.ACTIONS.GET_USER_WORKOUTS, { page: 1 })
)
@ -51,7 +58,15 @@
() => store.getters[SPORTS_STORE.GETTERS.SPORTS]
)
return { workouts, sports }
return { workouts, sports, t }
},
})
</script>
<style lang="scss" scoped>
@import '~@/scss/base';
.no-workouts {
margin-bottom: $default-margin * 2;
}
</style>

View File

@ -3,43 +3,49 @@
<Card :without-title="false">
<template #title>{{ $t('dashboard.THIS_MONTH') }}</template>
<template #content>
<div class="chart-radio">
<label class="">
<input
type="radio"
name="total_distance"
:checked="displayedData === 'total_distance'"
@click="updateDisplayData"
/>
{{ t('workouts.DISTANCE') }}
</label>
<label class="">
<input
type="radio"
name="total_duration"
:checked="displayedData === 'total_duration'"
@click="updateDisplayData"
/>
{{ t('workouts.DURATION') }}
</label>
<label class="">
<input
type="radio"
name="nb_workouts"
:checked="displayedData === 'nb_workouts'"
@click="updateDisplayData"
/>
{{ t('workouts.WORKOUT', 2) }}
</label>
<div v-if="Object.keys(statistics).length === 0">
{{ t('workouts.NO_WORKOUTS') }}
</div>
<Chart
:displayedData="displayedData"
:params="chartParams"
:statistics="statistics"
:sports="sports"
:week-starting-monday="weekStartingMonday"
v-if="statistics && weekStartingMonday !== undefined"
/></template>
<div v-else>
<div class="chart-radio">
<label class="">
<input
type="radio"
name="total_distance"
:checked="displayedData === 'total_distance'"
@click="updateDisplayData"
/>
{{ t('workouts.DISTANCE') }}
</label>
<label class="">
<input
type="radio"
name="total_duration"
:checked="displayedData === 'total_duration'"
@click="updateDisplayData"
/>
{{ t('workouts.DURATION') }}
</label>
<label class="">
<input
type="radio"
name="nb_workouts"
:checked="displayedData === 'nb_workouts'"
@click="updateDisplayData"
/>
{{ t('workouts.WORKOUT', 2) }}
</label>
</div>
<Chart
:displayedData="displayedData"
:params="chartParams"
:statistics="statistics"
:sports="sports"
:week-starting-monday="weekStartingMonday"
v-if="statistics && weekStartingMonday !== undefined"
/>
</div>
</template>
</Card>
</div>
</template>