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

@ -9,6 +9,7 @@
import ChartDataLabels from 'chartjs-plugin-datalabels'
import { ComputedRef, PropType, computed, defineComponent } from 'vue'
import { BarChart, useBarChart } from 'vue-chart-3'
import { useI18n } from 'vue-i18n'
import { IStatisticsChartDataset, TDatasetKeys } from '@/types/statistics'
import { formatTooltipValue } from '@/utils/tooltip'
@ -36,6 +37,7 @@
},
},
setup(props) {
const { t } = useI18n()
// eslint-disable-next-line
function getNumber(value: any): number {
return isNaN(value) ? 0 : +value
@ -103,7 +105,7 @@
},
callbacks: {
label: function (context) {
let label = context.dataset.label || ''
let label = t(`sports.${context.dataset.label}.LABEL`) || ''
if (label) {
label += ': '
}
@ -120,7 +122,10 @@
tooltipItems.map((tooltipItem) => {
sum += tooltipItem.parsed.y
})
return 'Total: ' + formatTooltipValue(props.displayedData, sum)
return (
`${t('statistics.TOTAL')}: ` +
formatTooltipValue(props.displayedData, sum)
)
},
},
},

View File

@ -8,7 +8,7 @@
</div>
</template>
<script lang="ts" scoped>
<script lang="ts">
import { ComputedRef, PropType, computed, defineComponent } from 'vue'
import Chart from '@/components/Common/StatsChart/Chart.vue'
@ -68,7 +68,7 @@
})
</script>
<style lang="scss">
<style lang="scss" scoped>
@import '~@/scss/base';
.stat-chart {
.chart {

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>

View File

@ -4,6 +4,7 @@ import ButtonsTranslations from './buttons.json'
import CommonTranslations from './common.json'
import DashboardTranslations from './dashboard.json'
import ErrorTranslations from './error.json'
import SportsTranslations from './sports.json'
import StatisticsTranslations from './statistics.json'
import UserTranslations from './user.json'
import WorkoutsTranslations from './workouts.json'
@ -15,6 +16,7 @@ export default {
common: CommonTranslations,
dashboard: DashboardTranslations,
error: ErrorTranslations,
sports: SportsTranslations,
statistics: StatisticsTranslations,
user: UserTranslations,
workouts: WorkoutsTranslations,

View File

@ -0,0 +1,20 @@
{
"Cycling (Sport)": {
"LABEL": "Cycling (Sport)"
},
"Cycling (Transport)": {
"LABEL": "Cycling (Transport)"
},
"Hiking": {
"LABEL": "Hiking"
},
"Mountain Biking": {
"LABEL": "Mountain Biking"
},
"Running": {
"LABEL": "Running"
},
"Walking": {
"LABEL": "Walking"
}
}

View File

@ -1,3 +1,4 @@
{
"STATISTICS": "Statistics"
"STATISTICS": "Statistics",
"TOTAL": "Total"
}

View File

@ -3,6 +3,7 @@
"DISTANCE": "distance",
"DURATION": "duration",
"KM": "km",
"NO_WORKOUTS": "No workouts.",
"RECORD_AS": "Ave. speed",
"RECORD_FD": "Farest distance",
"RECORD_LD": "Longest duration",

View File

@ -4,6 +4,7 @@ import ButtonsTranslations from './buttons.json'
import CommonTranslations from './common.json'
import DashboardTranslations from './dashboard.json'
import ErrorTranslations from './error.json'
import SportsTranslations from './sports.json'
import StatisticsTranslations from './statistics.json'
import UserTranslations from './user.json'
import WorkoutsTranslations from './workouts.json'
@ -15,6 +16,7 @@ export default {
common: CommonTranslations,
dashboard: DashboardTranslations,
error: ErrorTranslations,
sports: SportsTranslations,
statistics: StatisticsTranslations,
user: UserTranslations,
workouts: WorkoutsTranslations,

View File

@ -0,0 +1,20 @@
{
"Cycling (Sport)": {
"LABEL": "Vélo (Sport)"
},
"Cycling (Transport)": {
"LABEL": "Vélo (Transport)"
},
"Hiking": {
"LABEL": "Randonnée"
},
"Mountain Biking": {
"LABEL": "VTT"
},
"Running": {
"LABEL": "Course"
},
"Walking": {
"LABEL": "Marche"
}
}

View File

@ -1,3 +1,4 @@
{
"STATISTICS": "Statistiques"
"STATISTICS": "Statistiques",
"TOTAL": "Total"
}

View File

@ -3,6 +3,7 @@
"DISTANCE": "distance",
"DURATION": "durée",
"KM": "km",
"NO_WORKOUTS": "Pas de séances.",
"RECORD_AS": "Vitesse moy.",
"RECORD_FD": "Distance la + longue",
"RECORD_LD": "Durée la + longue",