feat: user communication flags

src/components/StationsView/StationTable.vue

@@ -146,6 +146,14 @@
             </span>
           </td>
 
+          <td class="station-dispatcher-lang">
+            <img
+              v-if="station.onlineInfo"
+              :src="`/images/flags/${getLanguageNameById(station.onlineInfo.dispatcherLanguageId)}.svg`"
+              alt="user flag"
+            />
+          </td>
+
           <td class="station-dispatcher-exp">
             <span
               v-if="station.onlineInfo && station.onlineInfo?.dispatcherExp != -1"
@@ -344,6 +352,7 @@ import { useTooltipStore } from '../../store/tooltipStore';
 import { getChangedFilters } from '../../managers/stationFilterManager';
 import { ActiveSorter, HeadIdsType, headIconsIds, headIds } from './typings';
 import { filterStations, sortStations } from './utils';
+import { getLanguageNameById } from '../../utils/languageUtils';
 
 export default defineComponent({
   emits: ['toggleDonationCard'],
@@ -354,7 +363,8 @@ export default defineComponent({
   data: () => ({
     headIconsIds,
     headIds,
-    getChangedFilters
+    getChangedFilters,
+    getLanguageNameById
   }),
 
   setup() {
@@ -495,6 +505,10 @@ thead th {
     width: 12em;
   }
 
+  &.dispatcher-lang {
+    width: 6em;
+  }
+
   &.dispatcher-lvl {
     width: 6em;
   }
@@ -604,6 +618,13 @@ tbody tr {
   }
 }
 
+.station-dispatcher-lang {
+  img {
+    max-width: 2em;
+    vertical-align: middle;
+  }
+}
+
 .station-level {
   span {
     background-color: #888;

src/components/StationsView/typings.ts

@@ -10,6 +10,7 @@ export const headIds = [
   'min-lvl',
   'status',
   'dispatcher',
+  'dispatcher-lang',
   'dispatcher-lvl',
   'routes-single',
   'routes-double',

src/components/TrainsView/TrainInfo.vue

@@ -66,6 +66,13 @@
 
           <span v-else>{{ train.driverName }}</span>
         </div>
+
+        <div class="train-language-flag">
+          <img
+            :src="`/images/flags/${getLanguageNameById(train.driverLanguageId)}.svg`"
+            alt="user flag"
+          />
+        </div>
       </div>
     </div>
 
@@ -199,6 +206,7 @@ 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';
 
 export default defineComponent({
   mixins: [trainInfoMixin, styleMixin, trainCategoryMixin],
@@ -217,7 +225,8 @@ export default defineComponent({
   data() {
     return {
       store: useMainStore(),
-      apiStore: useApiStore()
+      apiStore: useApiStore(),
+      getLanguageNameById
     };
   },
 
@@ -290,6 +299,11 @@ export default defineComponent({
   vertical-align: text-bottom;
 }
 
+.train-language-flag img {
+  width: 1.5em;
+  vertical-align: text-bottom;
+}
+
 .timetable-id {
   color: #d2d2d2;
 }