Client - display user stats (wip)

fittrackee_client/src/components/Dashboard/UserStatCard.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="user-stat-card">
+    <Card>
+      <template #content>
+        <div class="stat-content">
+          <div class="stat-icon">
+            <i class="fa" :class="`fa-${icon}`" />
+          </div>
+          <div class="stat-details">
+            <div class="stat-huge">{{ value }}</div>
+            <div>{{ text }}</div>
+          </div>
+        </div>
+      </template>
+    </Card>
+  </div>
+</template>
+
+<script lang="ts">
+  import { defineComponent } from 'vue'
+
+  import Card from '@/components/Common/Card.vue'
+  export default defineComponent({
+    name: 'UserStatCard',
+    components: {
+      Card,
+    },
+    props: {
+      icon: {
+        type: String,
+        required: true,
+      },
+      value: {
+        type: [String, Number],
+        required: true,
+      },
+      text: {
+        type: String,
+        required: true,
+      },
+    },
+  })
+</script>
+
+<style lang="scss">
+  @import '~@/scss/base';
+  .user-stat-card {
+    flex: 1;
+    max-width: 25%;
+    @media screen and (max-width: $small-limit) {
+      flex: 1 0 50%;
+      max-width: 49%;
+    }
+
+    .stat-content {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+
+      .stat-icon {
+        width: 30%;
+        text-align: center;
+        vertical-align: center;
+        @media screen and (max-width: $medium-limit) {
+          width: 50%;
+          text-align: left;
+        }
+
+        .fa {
+          font-size: 3em;
+          @media screen and (max-width: $medium-limit) {
+            font-size: 2em;
+          }
+          @media screen and (max-width: $x-small-limit) {
+            font-size: 1.5em;
+          }
+        }
+      }
+      .stat-details {
+        width: 70%;
+        text-align: right;
+        @media screen and (max-width: $medium-limit) {
+          width: 100%;
+        }
+
+        .stat-huge {
+          font-size: 1.7em;
+          font-weight: bold;
+          @media screen and (max-width: $medium-limit) {
+            font-size: 1.3em;
+          }
+          @media screen and (max-width: $x-small-limit) {
+            font-size: 1em;
+          }
+        }
+      }
+    }
+  }
+</style>

fittrackee_client/src/components/Dashboard/UserStats.vue

@@ -0,0 +1,82 @@
+<template>
+  <div id="user-stats">
+    <UserStatCard
+      icon="calendar"
+      :value="user.nb_workouts"
+      :text="t('workouts.WORKOUT', user.nb_workouts)"
+    />
+    <UserStatCard
+      icon="road"
+      :value="Number(user.total_distance).toFixed(2)"
+      :text="t('workouts.KM')"
+    />
+    <UserStatCard
+      icon="clock-o"
+      :value="total_duration.days"
+      :text="total_duration.duration"
+    />
+    <UserStatCard
+      icon="tags"
+      :value="user.nb_sports"
+      :text="t('workouts.SPORT', user.nb_sports)"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+  import { ComputedRef, PropType, defineComponent, computed } from 'vue'
+  import { useI18n } from 'vue-i18n'
+
+  import { IAuthUserProfile } from '@/store/modules/user/interfaces'
+  import UserStatCard from '@/components/Dashboard/UserStatCard.vue'
+
+  export default defineComponent({
+    name: 'UserStats',
+    components: {
+      UserStatCard,
+    },
+    props: {
+      user: {
+        type: Object as PropType<IAuthUserProfile>,
+        required: true,
+      },
+    },
+    setup(props) {
+      const { t } = useI18n()
+      const total_duration: ComputedRef<string> = computed(
+        () => props.user.total_duration
+      )
+
+      function get_duration(total_duration: ComputedRef<string>) {
+        const duration = total_duration.value.match(/day/g)
+          ? total_duration.value.split(', ')[1]
+          : total_duration.value
+        return {
+          days: total_duration.value.match(/day/g)
+            ? `${total_duration.value.split(' ')[0]} ${
+                total_duration.value.match(/days/g)
+                  ? t('common.DAY', 2)
+                  : t('common.DAY', 1)
+              }`
+            : `0 ${t('common.DAY', 2)},`,
+          duration: `${duration.split(':')[0]}h ${duration.split(':')[1]}min`,
+        }
+      }
+
+      return {
+        t,
+        total_duration: computed(() => get_duration(total_duration)),
+      }
+    },
+  })
+</script>
+
+<style lang="scss">
+  @import '~@/scss/base';
+  #user-stats {
+    display: flex;
+    flex: 1 0 25%;
+    justify-content: space-around;
+    flex-wrap: wrap;
+  }
+</style>