Alexander/FitTrackee
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Client - replace sports PNG images with SVG

Browse Source
This commit is contained in:
Sam
2021-10-01 16:48:48 +02:00
parent ba0b94de45
commit 5856599377
28 changed files with 461 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
fittrackee_client/src/utils/records.ts
View File

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

35
fittrackee_client/src/utils/sports.ts
View File

@ -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<string, string> = {
'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<number, string> => {
@ -16,27 +17,31 @@ export const sportIdColors = (sports: ISport[]): Record<number, string> => {
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]
}