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

fittrackee_client/src/components/Common/StatsChart/Chart.vue

@@ -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)
+                )
               },
             },
           },

fittrackee_client/src/components/Common/StatsChart/index.vue

@@ -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 {

fittrackee_client/src/components/Dashboard/Timeline/index.vue

@@ -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>

fittrackee_client/src/components/Dashboard/UserMonthStats.vue

@@ -3,6 +3,10 @@
     <Card :without-title="false">
       <template #title>{{ $t('dashboard.THIS_MONTH') }}</template>
       <template #content>
+        <div v-if="Object.keys(statistics).length === 0">
+          {{ t('workouts.NO_WORKOUTS') }}
+        </div>
+        <div v-else>
           <div class="chart-radio">
             <label class="">
               <input
@@ -39,7 +43,9 @@
             :sports="sports"
             :week-starting-monday="weekStartingMonday"
             v-if="statistics && weekStartingMonday !== undefined"
-      /></template>
+          />
+        </div>
+      </template>
     </Card>
   </div>
 </template>

fittrackee_client/src/locales/en/en.ts

@@ -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,

fittrackee_client/src/locales/en/sports.json

@@ -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"
+  }
+}

fittrackee_client/src/locales/en/statistics.json

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

fittrackee_client/src/locales/en/workouts.json

@@ -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",

fittrackee_client/src/locales/fr/fr.ts

@@ -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,

fittrackee_client/src/locales/fr/sports.json

@@ -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"
+  }
+}

fittrackee_client/src/locales/fr/statistics.json

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

fittrackee_client/src/locales/fr/workouts.json

@@ -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",