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;
 }

src/locales/en.json

@@ -337,6 +337,7 @@
       "min-lvl": "Scenery\nlevel",
       "status": "Status",
       "dispatcher": "Dispatcher",
+      "dispatcher-lang": "Language",
       "dispatcher-lvl": "Dispatcher\nlevel",
       "routes-single": "1-track\nroutes",
       "routes-double": "2-track\nroutes",

src/locales/pl.json

@@ -334,6 +334,7 @@
       "min-lvl": "Poziom\nscenerii",
       "status": "Status",
       "dispatcher": "Dyżurny",
+      "dispatcher-lang": "Język",
       "dispatcher-lvl": "Poziom\ndyżurnego",
       "routes-single": "Szlaki\n1-torowe",
       "routes-double": "Szlaki\n2-torowe",

src/store/mainStore.ts

@@ -87,6 +87,7 @@ export const useMainStore = defineStore('mainStore', {
             online: Boolean(train.online),
             driverId: train.driverId,
             driverName: train.driverName,
+            driverLanguageId: train.driverLanguageId,
             currentStationName: train.currentStationName,
             currentStationHash: train.currentStationHash,
             connectedTrack: train.connectedTrack,
@@ -258,6 +259,7 @@ export const useMainStore = defineStore('mainStore', {
             dispatcherIsSupporter: false,
             dispatcherStatus: Status.ActiveDispatcher.FREE,
             dispatcherTimestamp: -1,
+            dispatcherLanguageId: -1,
 
             isOnline: false,
 
@@ -304,6 +306,7 @@ export const useMainStore = defineStore('mainStore', {
           dispatcherIsSupporter: scenery.dispatcherIsSupporter,
           dispatcherStatus: scenery.dispatcherStatus,
           dispatcherTimestamp: dispatcherTimestamp,
+          dispatcherLanguageId: scenery.dispatcherLanguageId,
 
           isOnline: scenery.isOnline == 1,
 

src/typings/api.ts

@@ -114,6 +114,7 @@ export namespace API {
       dispatcherId: number;
       dispatcherName: string;
       dispatcherIsSupporter: boolean;
+      dispatcherLanguageId: number;
       stationName: string;
       stationHash: string;
       region: string;
@@ -152,6 +153,7 @@ export namespace API {
       driverId: number;
       driverIsSupporter: boolean;
       driverLevel?: number;
+      driverLanguageId: number;
 
       currentStationName: string;
       currentStationHash?: string;

src/typings/common.ts

@@ -60,6 +60,7 @@ export interface Train {
   distance: number;
   connectedTrack: string;
   driverId: number;
+  driverLanguageId: number;
   trainNo: number;
   driverName: string;
   driverLevel: number;
@@ -162,6 +163,7 @@ export interface ActiveScenery {
   dispatcherIsSupporter: boolean;
   dispatcherStatus: Status.ActiveDispatcher | number;
   dispatcherTimestamp: number | null;
+  dispatcherLanguageId: number;
   isOnline: boolean;
   stationTrains: Train[];
   scheduledTrains: CheckpointTrain[];

src/utils/languageUtils.ts

@@ -0,0 +1,5 @@
+export const languageFlagNames = ['pl', 'en', 'de', 'cz', 'sk', 'ru', 'se', 'ua', 'it'];
+
+export function getLanguageNameById(languageId: number) {
+  return languageFlagNames[languageId] ?? 'pl';
+}