{{ workoutObject.title }}
@@ -86,11 +84,15 @@
import { PropType, defineComponent } from 'vue'
import { useI18n } from 'vue-i18n'
+ import SportImage from '@/components/Common/Sports/SportImage.vue'
import { ISport } from '@/types/sports'
import { IWorkoutObject } from '@/types/workouts'
export default defineComponent({
name: 'WorkoutCardTitle',
+ components: {
+ SportImage,
+ },
props: {
sport: {
type: Object as PropType,
@@ -129,11 +131,9 @@
display: flex;
flex-grow: 1;
.sport-img {
- img {
- height: 35px;
- width: 35px;
- padding: 0 $default-padding;
- }
+ height: 35px;
+ width: 35px;
+ padding: 0 $default-padding;
}
.workout-date {
font-size: 0.8em;
diff --git a/fittrackee_client/src/types/sports.ts b/fittrackee_client/src/types/sports.ts
index fa400cfe..4e78d0ce 100644
--- a/fittrackee_client/src/types/sports.ts
+++ b/fittrackee_client/src/types/sports.ts
@@ -5,3 +5,6 @@ export interface ISport {
is_active: boolean
label: string
}
+export interface ITranslatedSport extends ISport {
+ translatedLabel: string
+}
diff --git a/fittrackee_client/src/types/workouts.ts b/fittrackee_client/src/types/workouts.ts
index 7f24f1df..9131cb17 100644
--- a/fittrackee_client/src/types/workouts.ts
+++ b/fittrackee_client/src/types/workouts.ts
@@ -27,7 +27,7 @@ export interface IRecord {
export interface IRecordsBySport {
[key: string]: string | Record[]
- img: string
+ label: string
records: Record[]
}
diff --git a/fittrackee_client/src/utils/records.ts b/fittrackee_client/src/utils/records.ts
index b6ab64a4..ad98cdef 100644
--- a/fittrackee_client/src/utils/records.ts
+++ b/fittrackee_client/src/utils/records.ts
@@ -1,4 +1,4 @@
-import { ISport } from '@/types/sports'
+import { ITranslatedSport } from '@/types/sports'
import { IRecord, IRecordsBySports } from '@/types/workouts'
import { formatWorkoutDate, getDateWithTZ } from '@/utils/dates'
@@ -35,19 +35,19 @@ export const formatRecord = (
export const getRecordsBySports = (
records: IRecord[],
- sports: ISport[],
+ translatedSports: ITranslatedSport[],
tz: string
): IRecordsBySports =>
records.reduce((sportList: IRecordsBySports, record) => {
- const sport = sports.find((s) => s.id === record.sport_id)
+ const sport = translatedSports.find((s) => s.id === record.sport_id)
if (sport && sport.label) {
- if (sportList[sport.label] === void 0) {
- sportList[sport.label] = {
- img: sport.img,
+ if (sportList[sport.translatedLabel] === void 0) {
+ sportList[sport.translatedLabel] = {
+ label: sport.label,
records: [],
}
}
- sportList[sport.label].records.push(formatRecord(record, tz))
+ sportList[sport.translatedLabel].records.push(formatRecord(record, tz))
}
return sportList
}, {})
diff --git a/fittrackee_client/src/utils/sports.ts b/fittrackee_client/src/utils/sports.ts
index 15f1e05c..a92f8386 100644
--- a/fittrackee_client/src/utils/sports.ts
+++ b/fittrackee_client/src/utils/sports.ts
@@ -1,13 +1,14 @@
-import { ISport } from '@/types/sports'
+import { ISport, ITranslatedSport } from '@/types/sports'
import { IWorkout } from '@/types/workouts'
+// TODO: allow user to change colors
export const sportColors: Record = {
- 'Cycling (Sport)': '#55A8A3',
- 'Cycling (Transport)': '#98C3A9',
- Hiking: '#D0838A',
- 'Mountain Biking': '#ECC77E',
- Running: '#926692',
- Walking: '#929292',
+ 'Cycling (Sport)': '#4c9792',
+ 'Cycling (Transport)': '#88af98',
+ Hiking: '#bb757c',
+ 'Mountain Biking': '#d4b371',
+ Running: '#835b83',
+ Walking: '#838383',
}
export const sportIdColors = (sports: ISport[]): Record => {
@@ -16,27 +17,31 @@ export const sportIdColors = (sports: ISport[]): Record => {
return colors
}
-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
+const sortSports = (a: ITranslatedSport, b: ITranslatedSport): number => {
+ const sportATranslatedLabel = a.translatedLabel.toLowerCase()
+ const sportBTranslatedLabel = b.translatedLabel.toLowerCase()
+ return sportATranslatedLabel > sportBTranslatedLabel
+ ? 1
+ : sportATranslatedLabel < sportBTranslatedLabel
+ ? -1
+ : 0
}
export const translateSports = (
sports: ISport[],
t: CallableFunction,
onlyActive = false
-): ISport[] =>
+): ITranslatedSport[] =>
sports
.filter((sport) => (onlyActive ? sport.is_active : true))
.map((sport) => ({
...sport,
- label: t(`sports.${sport.label}.LABEL`),
+ translatedLabel: t(`sports.${sport.label}.LABEL`),
}))
.sort(sortSports)
-export const getSportImg = (workout: IWorkout, sports: ISport[]): string => {
+export const getSportLabel = (workout: IWorkout, sports: ISport[]): string => {
return sports
.filter((sport) => sport.id === workout.sport_id)
- .map((sport) => sport.img)[0]
+ .map((sport) => sport.label)[0]
}
diff --git a/fittrackee_client/tests/unit/utils/fixtures.ts b/fittrackee_client/tests/unit/utils/fixtures.ts
index 55b6bc30..319d29e8 100644
--- a/fittrackee_client/tests/unit/utils/fixtures.ts
+++ b/fittrackee_client/tests/unit/utils/fixtures.ts
@@ -1,5 +1,8 @@
+import createI18n from '@/i18n'
import { ISport } from '@/types/sports'
+import { translateSports } from '@/utils/sports'
+const { t } = createI18n.global
export const sports: ISport[] = [
{
has_workouts: false,
@@ -23,3 +26,5 @@ export const sports: ISport[] = [
label: 'Hiking',
},
]
+
+export const translatedSports = translateSports(sports, t)
diff --git a/fittrackee_client/tests/unit/utils/records.spec.ts b/fittrackee_client/tests/unit/utils/records.spec.ts
index adbc29e9..ff7cbd68 100644
--- a/fittrackee_client/tests/unit/utils/records.spec.ts
+++ b/fittrackee_client/tests/unit/utils/records.spec.ts
@@ -1,6 +1,6 @@
import { assert, expect } from 'chai'
-import { sports } from './fixtures'
+import { translatedSports } from './fixtures'
import { formatRecord, getRecordsBySports } from '@/utils/records'
@@ -157,7 +157,7 @@ describe('getRecordsBySports', () => {
},
expected: {
'Cycling (Sport)': {
- img: '/img/sports/cycling-sport.png',
+ label: 'Cycling (Sport)',
records: [
{
id: 9,
@@ -206,7 +206,7 @@ describe('getRecordsBySports', () => {
},
expected: {
'Cycling (Sport)': {
- img: '/img/sports/cycling-sport.png',
+ label: 'Cycling (Sport)',
records: [
{
id: 9,
@@ -225,7 +225,7 @@ describe('getRecordsBySports', () => {
],
},
'Cycling (Transport)': {
- img: '/img/sports/cycling-transport.png',
+ label: 'Cycling (Transport)',
records: [
{
id: 10,
@@ -244,7 +244,7 @@ describe('getRecordsBySports', () => {
assert.deepEqual(
getRecordsBySports(
testParams.input.records,
- sports,
+ translatedSports,
testParams.input.tz
),
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
diff --git a/fittrackee_client/tests/unit/utils/sports.spec.ts b/fittrackee_client/tests/unit/utils/sports.spec.ts
index 731e5430..82d5d100 100644
--- a/fittrackee_client/tests/unit/utils/sports.spec.ts
+++ b/fittrackee_client/tests/unit/utils/sports.spec.ts
@@ -16,7 +16,32 @@ describe('sortSports', () => {
locale: 'en',
onlyActive: false,
},
- expected: sports,
+ expected: [
+ {
+ has_workouts: false,
+ id: 1,
+ img: '/img/sports/cycling-sport.png',
+ is_active: true,
+ label: 'Cycling (Sport)',
+ translatedLabel: 'Cycling (Sport)',
+ },
+ {
+ has_workouts: false,
+ id: 2,
+ img: '/img/sports/cycling-transport.png',
+ is_active: false,
+ label: 'Cycling (Transport)',
+ translatedLabel: 'Cycling (Transport)',
+ },
+ {
+ has_workouts: true,
+ id: 3,
+ img: '/img/sports/hiking.png',
+ is_active: true,
+ label: 'Hiking',
+ translatedLabel: 'Hiking',
+ },
+ ],
},
{
description:
@@ -33,6 +58,7 @@ describe('sortSports', () => {
img: '/img/sports/cycling-sport.png',
is_active: true,
label: 'Cycling (Sport)',
+ translatedLabel: 'Cycling (Sport)',
},
{
has_workouts: true,
@@ -40,6 +66,7 @@ describe('sortSports', () => {
img: '/img/sports/hiking.png',
is_active: true,
label: 'Hiking',
+ translatedLabel: 'Hiking',
},
],
},
@@ -65,21 +92,24 @@ describe('sortSports', () => {
id: 3,
img: '/img/sports/hiking.png',
is_active: true,
- label: 'Randonnée',
+ label: 'Hiking',
+ translatedLabel: 'Randonnée',
},
{
has_workouts: false,
id: 1,
img: '/img/sports/cycling-sport.png',
is_active: true,
- label: 'Vélo (Sport)',
+ label: 'Cycling (Sport)',
+ translatedLabel: 'Vélo (Sport)',
},
{
has_workouts: false,
id: 2,
img: '/img/sports/cycling-transport.png',
is_active: false,
- label: 'Vélo (Transport)',
+ label: 'Cycling (Transport)',
+ translatedLabel: 'Vélo (Transport)',
},
],
},
@@ -97,14 +127,16 @@ describe('sortSports', () => {
id: 3,
img: '/img/sports/hiking.png',
is_active: true,
- label: 'Randonnée',
+ label: 'Hiking',
+ translatedLabel: 'Randonnée',
},
{
has_workouts: false,
id: 1,
img: '/img/sports/cycling-sport.png',
is_active: true,
- label: 'Vélo (Sport)',
+ label: 'Cycling (Sport)',
+ translatedLabel: 'Vélo (Sport)',
},
],
},
diff --git a/fittrackee_client/tests/unit/utils/statistics.spec.ts b/fittrackee_client/tests/unit/utils/statistics.spec.ts
index 26801ba6..38cb856e 100644
--- a/fittrackee_client/tests/unit/utils/statistics.spec.ts
+++ b/fittrackee_client/tests/unit/utils/statistics.spec.ts
@@ -164,51 +164,51 @@ describe('getDatasets', () => {
nb_workouts: [
{
label: 'Cycling (Sport)',
- backgroundColor: ['#55A8A3'],
+ backgroundColor: ['#4c9792'],
data: [],
},
{
label: 'Cycling (Transport)',
- backgroundColor: ['#98C3A9'],
+ backgroundColor: ['#88af98'],
data: [],
},
{
label: 'Hiking',
- backgroundColor: ['#D0838A'],
+ backgroundColor: ['#bb757c'],
data: [],
},
],
total_distance: [
{
label: 'Cycling (Sport)',
- backgroundColor: ['#55A8A3'],
+ backgroundColor: ['#4c9792'],
data: [],
},
{
label: 'Cycling (Transport)',
- backgroundColor: ['#98C3A9'],
+ backgroundColor: ['#88af98'],
data: [],
},
{
label: 'Hiking',
- backgroundColor: ['#D0838A'],
+ backgroundColor: ['#bb757c'],
data: [],
},
],
total_duration: [
{
label: 'Cycling (Sport)',
- backgroundColor: ['#55A8A3'],
+ backgroundColor: ['#4c9792'],
data: [],
},
{
label: 'Cycling (Transport)',
- backgroundColor: ['#98C3A9'],
+ backgroundColor: ['#88af98'],
data: [],
},
{
label: 'Hiking',
- backgroundColor: ['#D0838A'],
+ backgroundColor: ['#bb757c'],
data: [],
},
],
@@ -220,21 +220,21 @@ describe('getDatasets', () => {
nb_workouts: [
{
label: 'Cycling (Transport)',
- backgroundColor: ['#98C3A9'],
+ backgroundColor: ['#88af98'],
data: [],
},
],
total_distance: [
{
label: 'Cycling (Transport)',
- backgroundColor: ['#98C3A9'],
+ backgroundColor: ['#88af98'],
data: [],
},
],
total_duration: [
{
label: 'Cycling (Transport)',
- backgroundColor: ['#98C3A9'],
+ backgroundColor: ['#88af98'],
data: [],
},
],
@@ -257,51 +257,51 @@ describe('formatStats', () => {
nb_workouts: [
{
label: 'Cycling (Sport)',
- backgroundColor: ['#55A8A3'],
+ backgroundColor: ['#4c9792'],
data: [0, 0, 0],
},
{
label: 'Cycling (Transport)',
- backgroundColor: ['#98C3A9'],
+ backgroundColor: ['#88af98'],
data: [0, 0, 0],
},
{
label: 'Hiking',
- backgroundColor: ['#D0838A'],
+ backgroundColor: ['#bb757c'],
data: [0, 0, 0],
},
],
total_distance: [
{
label: 'Cycling (Sport)',
- backgroundColor: ['#55A8A3'],
+ backgroundColor: ['#4c9792'],
data: [0, 0, 0],
},
{
label: 'Cycling (Transport)',
- backgroundColor: ['#98C3A9'],
+ backgroundColor: ['#88af98'],
data: [0, 0, 0],
},
{
label: 'Hiking',
- backgroundColor: ['#D0838A'],
+ backgroundColor: ['#bb757c'],
data: [0, 0, 0],
},
],
total_duration: [
{
label: 'Cycling (Sport)',
- backgroundColor: ['#55A8A3'],
+ backgroundColor: ['#4c9792'],
data: [0, 0, 0],
},
{
label: 'Cycling (Transport)',
- backgroundColor: ['#98C3A9'],
+ backgroundColor: ['#88af98'],
data: [0, 0, 0],
},
{
label: 'Hiking',
- backgroundColor: ['#D0838A'],
+ backgroundColor: ['#bb757c'],
data: [0, 0, 0],
},
],
@@ -326,21 +326,21 @@ describe('formatStats', () => {
nb_workouts: [
{
label: 'Cycling (Transport)',
- backgroundColor: ['#98C3A9'],
+ backgroundColor: ['#88af98'],
data: [0, 0, 0],
},
],
total_distance: [
{
label: 'Cycling (Transport)',
- backgroundColor: ['#98C3A9'],
+ backgroundColor: ['#88af98'],
data: [0, 0, 0],
},
],
total_duration: [
{
label: 'Cycling (Transport)',
- backgroundColor: ['#98C3A9'],
+ backgroundColor: ['#88af98'],
data: [0, 0, 0],
},
],
@@ -392,51 +392,51 @@ describe('formatStats', () => {
nb_workouts: [
{
label: 'Cycling (Sport)',
- backgroundColor: ['#55A8A3'],
+ backgroundColor: ['#4c9792'],
data: [1, 1, 0],
},
{
label: 'Cycling (Transport)',
- backgroundColor: ['#98C3A9'],
+ backgroundColor: ['#88af98'],
data: [0, 2, 0],
},
{
label: 'Hiking',
- backgroundColor: ['#D0838A'],
+ backgroundColor: ['#bb757c'],
data: [0, 0, 2],
},
],
total_distance: [
{
label: 'Cycling (Sport)',
- backgroundColor: ['#55A8A3'],
+ backgroundColor: ['#4c9792'],
data: [10, 15, 0],
},
{
label: 'Cycling (Transport)',
- backgroundColor: ['#98C3A9'],
+ backgroundColor: ['#88af98'],
data: [0, 20, 0],
},
{
label: 'Hiking',
- backgroundColor: ['#D0838A'],
+ backgroundColor: ['#bb757c'],
data: [0, 0, 12],
},
],
total_duration: [
{
label: 'Cycling (Sport)',
- backgroundColor: ['#55A8A3'],
+ backgroundColor: ['#4c9792'],
data: [3000, 3500, 0],
},
{
label: 'Cycling (Transport)',
- backgroundColor: ['#98C3A9'],
+ backgroundColor: ['#88af98'],
data: [0, 3000, 0],
},
{
label: 'Hiking',
- backgroundColor: ['#D0838A'],
+ backgroundColor: ['#bb757c'],
data: [0, 0, 5000],
},
],
@@ -488,21 +488,21 @@ describe('formatStats', () => {
nb_workouts: [
{
label: 'Cycling (Sport)',
- backgroundColor: ['#55A8A3'],
+ backgroundColor: ['#4c9792'],
data: [1, 1, 0],
},
],
total_distance: [
{
label: 'Cycling (Sport)',
- backgroundColor: ['#55A8A3'],
+ backgroundColor: ['#4c9792'],
data: [10, 15, 0],
},
],
total_duration: [
{
label: 'Cycling (Sport)',
- backgroundColor: ['#55A8A3'],
+ backgroundColor: ['#4c9792'],
data: [3000, 3500, 0],
},
],