refactor: added language flag component

src/components/App/AppWelcomeCard.vue

@@ -5,11 +5,11 @@
 
       <div class="language-select">
         <button :data-active="$i18n.locale == 'pl'" @click="store.changeLocale('pl')">
-          <img src="/images/icon-pl.svg" alt="" width="45" />
+          <FlagIcon :language-id="0" width="2.5em" />
         </button>
 
         <button :data-active="$i18n.locale == 'en'" @click="store.changeLocale('en')">
-          <img src="/images/icon-en.svg" alt="" width="45" />
+          <FlagIcon :language-id="1" width="2.5em" />
         </button>
       </div>
 
@@ -116,6 +116,7 @@
 <script setup lang="ts">
 import Card from '../Global/Card.vue';
 import { useMainStore } from '../../store/mainStore';
+import FlagIcon from '../Global/FlagIcon.vue';
 
 const store = useMainStore();
 
@@ -157,7 +158,7 @@ a.link {
   justify-content: center;
   margin: 0.5em 0;
 
-  button[data-active='false'] img {
+  button[data-active='false'] ::v-deep(img) {
     opacity: 0.5;
   }
 }

src/components/Global/FlagIcon.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="flag-icon">
+    <img
+      :src="languageFlagSrc"
+      alt="language flag"
+      :style="{
+        width: width
+      }"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { getLanguageNameById } from '../../utils/languageUtils';
+
+const props = defineProps({
+  languageId: {
+    type: Number,
+    required: true
+  },
+
+  width: {
+    type: String
+  }
+});
+
+const languageFlagSrc = computed(
+  () => `/images/flags/${getLanguageNameById(props.languageId)}.svg`
+);
+</script>
+
+<style scoped>
+.flag-icon img {
+  vertical-align: middle;
+}
+</style>

src/components/JournalView/JournalTimetables/EntryGeneral.vue

@@ -71,6 +71,8 @@
       <router-link v-else :to="`/journal/timetables?search-driver=${timetable.driverName}`">
         <strong>{{ timetable.driverName }}</strong>
       </router-link>
+
+      <div v-if="timetable.driverLanguageId != null"></div>
     </span>
 
     <span class="general-time">
@@ -110,6 +112,7 @@ import dateMixin from '../../../mixins/dateMixin';
 import styleMixin from '../../../mixins/styleMixin';
 import { useApiStore } from '../../../store/apiStore';
 import trainCategoryMixin from '../../../mixins/trainCategoryMixin';
+import { getLanguageNameById } from '../../../utils/languageUtils';
 
 export default defineComponent({
   mixins: [dateMixin, styleMixin, trainCategoryMixin],
@@ -191,7 +194,7 @@ export default defineComponent({
   }
 }
 
-@include responsive.smallScreen{
+@include responsive.smallScreen {
   .item-general {
     flex-direction: column;
     justify-content: center;

src/components/StationsView/StationTable.vue

@@ -146,12 +146,8 @@
             </span>
           </td>
 
-          <td class="station-dispatcher-lang">
-            <img
-              v-if="station.onlineInfo"
-              :src="`/images/flags/${getLanguageNameById(station.onlineInfo.dispatcherLanguageId)}.svg`"
-              alt="user flag"
-            />
+          <td class="station-dispatcher-lang" v-if="station.onlineInfo">
+            <FlagIcon :language-id="station.onlineInfo.dispatcherLanguageId" width="2.25em" />
           </td>
 
           <td class="station-dispatcher-exp">
@@ -353,18 +349,18 @@ import { getChangedFilters } from '../../managers/stationFilterManager';
 import { ActiveSorter, HeadIdsType, headIconsIds, headIds } from './typings';
 import { filterStations, sortStations } from './utils';
 import { getLanguageNameById } from '../../utils/languageUtils';
+import FlagIcon from '../Global/FlagIcon.vue';
 
 export default defineComponent({
   emits: ['toggleDonationCard'],
 
-  components: { Loading, StationStatusBadge },
+  components: { Loading, StationStatusBadge, FlagIcon },
   mixins: [styleMixin, dateMixin],
 
   data: () => ({
     headIconsIds,
     headIds,
-    getChangedFilters,
-    getLanguageNameById
+    getChangedFilters
   }),
 
   setup() {
@@ -618,13 +614,6 @@ tbody tr {
   }
 }
 
-.station-dispatcher-lang {
-  img {
-    max-width: 2em;
-    vertical-align: middle;
-  }
-}
-
 .station-level {
   span {
     background-color: #888;

src/components/TrainsView/TrainInfo.vue

@@ -68,10 +68,7 @@
         </div>
 
         <div class="train-language-flag">
-          <img
-            :src="`/images/flags/${getLanguageNameById(train.driverLanguageId)}.svg`"
-            alt="user flag"
-          />
+          <FlagIcon :language-id="train.driverLanguageId" width="1.5em" />
         </div>
       </div>
     </div>
@@ -206,11 +203,11 @@ import trainInfoMixin from '../../mixins/trainInfoMixin';
 import trainCategoryMixin from '../../mixins/trainCategoryMixin';
 import ProgressBar from '../Global/ProgressBar.vue';
 import StockList from '../Global/StockList.vue';
-import { getLanguageNameById } from '../../utils/languageUtils';
+import FlagIcon from '../Global/FlagIcon.vue';
 
 export default defineComponent({
   mixins: [trainInfoMixin, styleMixin, trainCategoryMixin],
-  components: { ProgressBar, StockList },
+  components: { ProgressBar, StockList, FlagIcon },
 
   props: {
     train: {
@@ -225,8 +222,7 @@ export default defineComponent({
   data() {
     return {
       store: useMainStore(),
-      apiStore: useApiStore(),
-      getLanguageNameById
+      apiStore: useApiStore()
     };
   },
 
@@ -299,11 +295,6 @@ export default defineComponent({
   vertical-align: text-bottom;
 }
 
-.train-language-flag img {
-  width: 1.5em;
-  vertical-align: text-bottom;
-}
-
 .timetable-id {
   color: #d2d2d2;
 }

src/typings/api.ts

@@ -38,6 +38,7 @@ export namespace API {
       dispatcherLevel: number | null;
       dispatcherRate: number;
       dispatcherIsSupporter: boolean;
+      dispatcherLanguageId: number | null;
       dispatcherStatus?: number;
       isOnline: boolean;
       lastOnlineTimestamp: number;
@@ -223,6 +224,7 @@ export namespace API {
       driverName: string;
       driverLevel: number | null;
       driverIsSupporter: boolean;
+      driverLanguageId: number | null;
 
       route: string;
       twr: number;

src/views/StationsView.vue

@@ -29,10 +29,7 @@
             data-tooltip-type="HtmlTooltip"
             :data-tooltip-content="`<b>${$t('app.language-tooltip-content')}</b>`"
           >
-            <img
-              :src="`/images/icon-${mainStore.currentLocale}.svg`"
-              alt="change language flag icon"
-            />
+            <FlagIcon :language-id="mainStore.currentLocale == 'pl' ? 0 : 1" />
           </button>
 
           <a
@@ -85,6 +82,7 @@ import { reactive } from 'vue';
 import { provide } from 'vue';
 import { ActiveSorter } from '../components/StationsView/typings';
 import { onMounted } from 'vue';
+import FlagIcon from '../components/Global/FlagIcon.vue';
 
 const filterInitStates = { ...initFilters };
 
@@ -93,7 +91,8 @@ export default defineComponent({
     StationTable,
     StationFilterCard,
     StationStats,
-    DonationCard
+    DonationCard,
+    FlagIcon
   },
 
   data: () => ({