Client - display message when no workouts

fittrackee_client/src/components/Common/NoWorkouts.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="no-workouts">
+    <div>
+      {{ t('workouts.NO_WORKOUTS') }}
+      <router-link to="/workouts/add">
+        {{ t('workouts.UPLOAD_FIRST_WORKOUT') }}
+      </router-link>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+  import { defineComponent } from 'vue'
+  import { useI18n } from 'vue-i18n'
+
+  export default defineComponent({
+    name: 'NoWorkouts',
+    setup() {
+      const { t } = useI18n()
+      return { t }
+    },
+  })
+</script>
+
+<style lang="scss" scoped>
+  @import '~@/scss/base.scss';
+  .no-workouts {
+    display: flex;
+    justify-content: center;
+    border: solid 1px var(--card-border-color);
+    border-radius: $border-radius;
+    padding: $default-padding;
+    margin: $default-margin;
+  }
+</style>

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

@@ -1,6 +1,6 @@
 <template>
   <div class="start-chart">
-    <div v-if="labels.length === 0">
+    <div v-if="hideChartIfNoData && emptyStats">
       {{ t('workouts.NO_WORKOUTS') }}
     </div>
     <div v-else>
@@ -99,6 +99,10 @@
         type: Boolean,
         default: false,
       },
+      hideChartIfNoData: {
+        type: Boolean,
+        default: false,
+      },
     },
     setup(props) {
       const store = useStore()
@@ -162,6 +166,7 @@
           () => formattedStats.value.datasets[displayedData.value]
         ),
         labels: computed(() => formattedStats.value.labels),
+        emptyStats: computed(() => Object.keys(statistics.value).length === 0),
         displayedData,
         t,
         updateDisplayData,