Client - display records on Dashboard (wip)

fittrackee_client/src/components/Dashboard/UserRecords.vue

@@ -1,3 +0,0 @@
-<template>
-  <div>User records</div>
-</template>

fittrackee_client/src/components/Dashboard/UserRecords/RecordsCard.vue

@@ -0,0 +1,97 @@
+<template>
+  <div class="records-card">
+    <Card :without-title="false">
+      <template #title>
+        <div>
+          <img
+            class="sport-img"
+            :alt="`${sportLabel} logo`"
+            :src="records.img"
+          />
+        </div>
+        {{ sportLabel }}
+      </template>
+      <template #content>
+        <div class="record" v-for="record in records.records" :key="record.id">
+          <span class="record-type">{{
+            t(`workouts.RECORD_${record.record_type}`)
+          }}</span>
+          <span class="record-value">{{ record.value }}</span>
+          <span class="record-date">{{ record.workout_date }}</span>
+        </div>
+      </template>
+    </Card>
+  </div>
+</template>
+
+<script lang="ts">
+  import { PropType, defineComponent } from 'vue'
+  import { useI18n } from 'vue-i18n'
+
+  import Card from '@/components/Common/Card.vue'
+  import { IRecord } from '@/types/workouts'
+
+  export default defineComponent({
+    name: 'RecordsCard',
+    components: {
+      Card,
+    },
+    props: {
+      records: {
+        type: Object as PropType<IRecord[]>,
+        required: true,
+      },
+      sportLabel: {
+        type: String,
+        required: true,
+      },
+    },
+    setup() {
+      const { t } = useI18n()
+      return { t }
+    },
+  })
+</script>
+
+<style lang="scss" scoped>
+  @import '~@/scss/base';
+
+  .records-card {
+    padding: 0;
+    width: 50%;
+    @media screen and (max-width: $small-limit) {
+      width: 100%;
+    }
+
+    ::v-deep(.card) {
+      font-size: 0.9em;
+      .card-title {
+        display: flex;
+        font-size: 0.9em;
+        .sport-img {
+          padding-right: $default-padding;
+          height: 18px;
+          width: 18px;
+        }
+      }
+      .card-content {
+        font-size: 0.9em;
+        padding: $default-padding;
+        .record {
+          display: flex;
+          justify-content: space-between;
+          span {
+            padding: 2px 5px;
+          }
+          .record-type {
+            flex-grow: 1;
+          }
+          .record-value {
+            font-weight: bold;
+            padding-right: $default-padding * 2;
+          }
+        }
+      }
+    }
+  }
+</style>

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

@@ -0,0 +1,66 @@
+<template>
+  <div class="user-records">
+    <Card v-if="Object.keys(recordsBySport).length === 0" class="no-records">
+      <template #content>{{ t('workouts.NO_RECORDS') }}</template>
+    </Card>
+    <RecordsCard
+      v-for="sportLabel in Object.keys(recordsBySport).sort()"
+      :sportLabel="sportLabel"
+      :records="recordsBySport[sportLabel]"
+      :key="sportLabel"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+  import { computed, defineComponent, PropType } from 'vue'
+  import { useI18n } from 'vue-i18n'
+
+  import Card from '@/components/Common/Card.vue'
+  import RecordsCard from '@/components/Dashboard/UserRecords/RecordsCard.vue'
+  import { SPORTS_STORE } from '@/store/constants'
+  import { IAuthUserProfile } from '@/types/user'
+  import { useStore } from '@/use/useStore'
+  import { getRecordsBySports } from '@/utils/records'
+  import { translateSports } from '@/utils/sports'
+
+  export default defineComponent({
+    name: 'UserRecords',
+    components: {
+      Card,
+      RecordsCard,
+    },
+    props: {
+      user: {
+        type: Object as PropType<IAuthUserProfile>,
+        required: true,
+      },
+    },
+    setup(props) {
+      const store = useStore()
+      const { t } = useI18n()
+      const recordsBySport = computed(() =>
+        getRecordsBySports(
+          props.user.records,
+          translateSports(store.getters[SPORTS_STORE.GETTERS.SPORTS], t),
+          props.user.timezone
+        )
+      )
+      return { recordsBySport, t }
+    },
+  })
+</script>
+
+<style lang="scss" scoped>
+  @import '~@/scss/base';
+
+  .user-records {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+
+    .no-records {
+      width: 100%;
+    }
+  }
+</style>

fittrackee_client/src/locales/en/workouts.json

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

fittrackee_client/src/locales/fr/workouts.json

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

fittrackee_client/src/types/user.ts

@@ -1,3 +1,5 @@
+import { IRecord } from '@/types/workouts'
+
 export interface IAuthUserProfile {
   admin: boolean
   bio: string | null
@@ -11,6 +13,7 @@ export interface IAuthUserProfile {
   nb_sports: number
   nb_workouts: number
   picture: string | boolean
+  records: IRecord[]
   sports_list: number[]
   timezone: string
   total_distance: number

fittrackee_client/src/types/workouts.ts

@@ -18,11 +18,21 @@ export interface IRecord {
   record_type: string
   sport_id: number
   user: string
-  value: number
+  value: number | string
   workout_date: string
   workout_id: string
 }
 
+export interface IRecordsBySport {
+  [key: string]: string | Record<string, string | number>[]
+  img: string
+  records: Record<string, string | number>[]
+}
+
+export interface IRecordsBySports {
+  [key: string]: IRecordsBySport
+}
+
 export interface IWeather {
   humidity: number
   icon: string

fittrackee_client/src/utils/dates.ts

@@ -4,6 +4,7 @@ import {
   addYears,
   endOfMonth,
   endOfWeek,
+  format,
   startOfMonth,
   startOfWeek,
   startOfYear,
@@ -60,3 +61,20 @@ export const getCalendarStartAndEnd = (
     end: endOfWeek(monthEnd),
   }
 }
+
+export const formatWorkoutDate = (
+  dateTime: Date,
+  dateFormat: string | null = null,
+  timeFormat: string | null = null
+): Record<string, string> => {
+  if (!dateFormat) {
+    dateFormat = 'yyyy/MM/dd'
+  }
+  if (!timeFormat) {
+    timeFormat = 'HH:mm'
+  }
+  return {
+    workout_date: format(dateTime, dateFormat),
+    workout_time: format(dateTime, timeFormat),
+  }
+}

fittrackee_client/src/utils/records.ts

@@ -0,0 +1,53 @@
+import { ISport } from '@/types/sports'
+import { IRecord, IRecordsBySports } from '@/types/workouts'
+import { formatWorkoutDate, getDateWithTZ } from '@/utils/dates'
+
+export const formatRecord = (
+  record: IRecord,
+  tz: string
+): Record<string, string | number> => {
+  let value
+  switch (record.record_type) {
+    case 'AS':
+    case 'MS':
+      value = `${record.value} km/h`
+      break
+    case 'FD':
+      value = `${record.value} km`
+      break
+    case 'LD':
+      value = record.value
+      break
+    default:
+      throw new Error(
+        `Invalid record type, expected: "AS", "FD", "LD", "MD", got: "${record.record_type}"`
+      )
+  }
+  return {
+    workout_date: formatWorkoutDate(getDateWithTZ(record.workout_date, tz))
+      .workout_date,
+    workout_id: record.workout_id,
+    id: record.id,
+    record_type: record.record_type,
+    value: value,
+  }
+}
+
+export const getRecordsBySports = (
+  records: IRecord[],
+  sports: ISport[],
+  tz: string
+): IRecordsBySports =>
+  records.reduce((sportList: IRecordsBySports, record) => {
+    const sport = sports.find((s) => s.id === record.sport_id)
+    if (sport && sport.label) {
+      if (sportList[sport.label] === void 0) {
+        sportList[sport.label] = {
+          img: sport.img,
+          records: [],
+        }
+      }
+      sportList[sport.label].records.push(formatRecord(record, tz))
+    }
+    return sportList
+  }, {})

fittrackee_client/src/utils/sports.ts

@@ -1,3 +1,5 @@
+import { ISport } from '@/types/sports'
+
 export const sportColors: Record<string, string> = {
   'Cycling (Sport)': '#55A8A3',
   'Cycling (Transport)': '#98C3A9',
@@ -6,3 +8,22 @@ export const sportColors: Record<string, string> = {
   Running: '#926692',
   Walking: '#929292',
 }
+
+const sortSports = (a: ISport, b: ISport): number => {
+  const sportALabel = a.label.toLowerCase()
+  const sportBLabel = b.label.toLowerCase()
+  return sportALabel > sportBLabel ? 1 : sportALabel < sportBLabel ? -1 : 0
+}
+
+export const translateSports = (
+  sports: ISport[],
+  t: CallableFunction,
+  onlyActive = false
+): ISport[] =>
+  sports
+    .filter((sport) => (onlyActive ? sport.is_active : true))
+    .map((sport) => ({
+      ...sport,
+      label: t(`sports.${sport.label}.LABEL`),
+    }))
+    .sort(sortSports)

fittrackee_client/src/views/DashBoard.vue

@@ -7,7 +7,7 @@
       <div class="left-container dashboard-sub-container">
         <UserCalendar :user="authUser" />
         <UserMonthStats :user="authUser" />
-        <!--        <UserRecords />-->
+        <UserRecords :user="authUser" />
       </div>
       <div class="right-container dashboard-sub-container">
         <Timeline :user="authUser" />
@@ -22,7 +22,7 @@
   import Timeline from '@/components/Dashboard/Timeline/index.vue'
   import UserCalendar from '@/components/Dashboard/UserCalendar/index.vue'
   import UserMonthStats from '@/components/Dashboard/UserMonthStats.vue'
-  // import UserRecords from '@/components/Dashboard/UserRecords.vue'
+  import UserRecords from '@/components/Dashboard/UserRecords/index.vue'
   import UserStatsCards from '@/components/Dashboard/UserStartsCards/index.vue'
   import { USER_STORE } from '@/store/constants'
   import { IAuthUserProfile } from '@/types/user'
@@ -34,7 +34,7 @@
       Timeline,
       UserCalendar,
       UserMonthStats,
-      // UserRecords,
+      UserRecords,
       UserStatsCards,
     },
     setup() {