Client - inject sport colors

fittrackee_client/src/components/Common/Images/SportImage/index.vue

@@ -2,7 +2,7 @@
   <div
     class="sport-img"
     :style="{ fill: sportColors[sportLabel] }"
-    :title="title ? title : t(`sports.${sportLabel}.LABEL`)"
+    :title="title ? title : $t(`sports.${sportLabel}.LABEL`)"
   >
     <CyclingSport v-if="sportLabel === 'Cycling (Sport)'" />
     <CyclingTransport v-if="sportLabel === 'Cycling (Transport)'" />
@@ -14,8 +14,7 @@
 </template>
 
 <script lang="ts">
-  import { defineComponent } from 'vue'
+  import { defineComponent, inject } from 'vue'
-  import { useI18n } from 'vue-i18n'
 
   import CyclingSport from '@/components/Common/Images/SportImage/CyclingSport.vue'
   import CyclingTransport from '@/components/Common/Images/SportImage/CyclingTransport.vue'
@@ -23,7 +22,6 @@
   import MountainBiking from '@/components/Common/Images/SportImage/MountainBiking.vue'
   import Running from '@/components/Common/Images/SportImage/Running.vue'
   import Walking from '@/components/Common/Images/SportImage/Walking.vue'
-  import { sportColors } from '@/utils/sports'
 
   export default defineComponent({
     name: 'SportImg',
@@ -46,8 +44,7 @@
       },
     },
     setup() {
-      const { t } = useI18n()
+      return { sportColors: inject('sportColors') }
-      return { sportColors, t }
     },
   })
 </script>

fittrackee_client/src/components/Statistics/StatsSportsMenu.vue

@@ -20,12 +20,12 @@
 </template>
 
 <script lang="ts">
-  import { ComputedRef, PropType, computed, defineComponent } from 'vue'
+  import { ComputedRef, PropType, computed, defineComponent, inject } from 'vue'
   import { useI18n } from 'vue-i18n'
 
   import SportImage from '@/components/Common/Images/SportImage/index.vue'
   import { ISport, ITranslatedSport } from '@/types/sports'
-  import { translateSports, sportColors } from '@/utils/sports'
+  import { translateSports } from '@/utils/sports'
 
   export default defineComponent({
     name: 'SportsMenu',
@@ -54,7 +54,7 @@
       }
 
       return {
-        sportColors,
+        sportColors: inject('sportColors'),
         translatedSports,
         updateSelectedSportIds,
       }

fittrackee_client/src/components/Statistics/index.vue

@@ -37,7 +37,7 @@
   import { ISport, ITranslatedSport } from '@/types/sports'
   import { IStatisticsDateParams } from '@/types/statistics'
   import { IAuthUserProfile } from '@/types/user'
-  import { translateSports, sportColors } from '@/utils/sports'
+  import { translateSports } from '@/utils/sports'
   import { getStatsDateParams, updateChartParams } from '@/utils/statistics'
 
   export default defineComponent({
@@ -106,7 +106,6 @@
       return {
         chartParams,
         selectedTimeFrame,
-        sportColors,
         timeFrames,
         translatedSports,
         selectedSportIds,

fittrackee_client/src/main.ts

@@ -8,8 +8,10 @@ import store from './store'
 
 import { customComponents } from '@/custom-components'
 import { clickOutsideDirective } from '@/directives'
+import { sportColors } from '@/utils/sports'
 
 const app = createApp(App)
+  .provide('sportColors', sportColors)
   .use(i18n)
   .use(store)
   .use(router)