Poprawki dostępności

src/components/SceneryView/SceneryInfo.vue

@@ -139,7 +139,9 @@
             class="user"
             :class="train.stopStatus"
             :key="train.trainNo + i"
+            tabindex="0"
             @click="() => navigateToTrain(train.trainNo)"
+            @keydown="(e) => { if(e.keyCode == 13) navigateToTrain(train.trainNo) }"
           >
             <span class="user_train">{{ train.trainNo }}</span>
             <span class="user_name">{{ train.driverName }}</span>
@@ -264,7 +266,7 @@ h3 {
 
 .info {
   &-header {
-    padding: 1em;
+    padding: 2em 1em;
 
     & > .scenery-name {
       font-weight: bold;
@@ -273,6 +275,10 @@ h3 {
       font-size: 3.5em;
 
       text-transform: uppercase;
+
+      @include smallScreen() {
+        font-size: 2.75em; 
+      }
     }
 
     & > .scenery-hash {

src/components/SceneryView/SceneryTimetable.vue

@@ -1,32 +1,18 @@
 <template>
   <div class="scenery-timetable">
     <h3 class="timetable-header">
-      <span>{{ $t("scenery.timetables") }}</span>
+      <span>{{ $t('scenery.timetables') }}</span>
 
-      <a
-        :href="currentURL + '&timetable_only=1'"
-        v-if="!timetableOnly"
-        target="_blank"
-      >
-        <img
-          :src="viewIcon"
-          alt="icon-view"
-          :title="$t('timetables.timetable-only')"
-        />
+      <a :href="currentURL + '&timetable_only=1'" v-if="!timetableOnly" target="_blank" class="timetable-only">
+        <img :src="viewIcon" alt="icon-view" :title="$t('timetables.timetable-only')" />
       </a>
     </h3>
 
-    <div
-      class="checkpoints"
-      v-if="
-        station &&
-        station.generalInfo?.checkpoints
-      "
-    >
+    <div class="checkpoints" v-if="station && station.generalInfo?.checkpoints">
       <button
         v-for="cp in station.generalInfo.checkpoints"
         :key="cp.checkpointName"
-        class="checkpoint_item btn--text"
+        class="checkpoint_item btn btn--text"
         :class="{ current: selectedCheckpoint === cp.checkpointName }"
         @click="selectCheckpoint(cp)"
       >
@@ -35,14 +21,11 @@
     </div>
 
     <span class="timetable-item loading" v-if="timetableDataStatus == 0 && computedScheduledTrains.length == 0">
-      {{ $t("app.loading") }}
+      {{ $t('app.loading') }}
     </span>
 
-    <span
-      class="timetable-item empty"
-      v-else-if="computedScheduledTrains.length == 0"
-    >
-      {{ $t("scenery.no-timetables") }}
+    <span class="timetable-item empty" v-else-if="computedScheduledTrains.length == 0">
+      {{ $t('scenery.no-timetables') }}
     </span>
 
     <transition-group name="list-anim">
@@ -50,45 +33,32 @@
         class="timetable-item"
         v-for="(scheduledTrain, i) in computedScheduledTrains"
         :key="i + 1"
+        tabindex="0"
+        @click="navigateToTrain(scheduledTrain.trainNo)"
+        @keydown="
+          (e) => {
+            if (e.keyCode == 13) navigateToTrain(scheduledTrain.trainNo);
+          }
+        "
       >
         <span class="timetable-general">
           <span class="general-info">
-            <router-link
-              :to="{
-                name: 'TrainsView',
-                query: {
-                  train: scheduledTrain.trainNo.toString(),
-                },
-              }"
-            >
-              <span>
-                <strong>{{ scheduledTrain.category }}</strong>
-                {{ scheduledTrain.trainNo }}
-              </span>
-            </router-link>
-            |
             <span>
-              <a
-                :href="
-                  'https://td2.info.pl/profile/?u=' + scheduledTrain.driverId
-                "
-                target="_blank"
-                >{{ scheduledTrain.driverName }}</a
-              >
+              <strong>{{ scheduledTrain.category }}</strong>
+              {{ scheduledTrain.trainNo }}
+            </span>
+            |
+            <span style="color: white">
+              {{ scheduledTrain.driverName }}
             </span>
 
             <div class="info-route">
-              <strong
-                >{{ scheduledTrain.beginsAt }} -
-                {{ scheduledTrain.terminatesAt }}</strong
-              >
+              <strong>{{ scheduledTrain.beginsAt }} - {{ scheduledTrain.terminatesAt }}</strong>
             </div>
           </span>
 
           <span class="general-status">
-            <span :class="scheduledTrain.stopStatus"
-              >{{ $t(`timetables.${scheduledTrain.stopStatus}`) }}
-            </span>
+            <span :class="scheduledTrain.stopStatus">{{ $t(`timetables.${scheduledTrain.stopStatus}`) }} </span>
           </span>
         </span>
 
@@ -101,9 +71,7 @@
             >
             </span>
             <span class="arrival-time" v-else>
-              {{ scheduledTrain.stopInfo.arrivalTimeString }} ({{
-                scheduledTrain.stopInfo.arrivalDelay
-              }})
+              {{ scheduledTrain.stopInfo.arrivalTimeString }} ({{ scheduledTrain.stopInfo.arrivalDelay }})
             </span>
           </span>
 
@@ -122,9 +90,7 @@
             >
             </span>
             <span class="departure-time" v-else>
-              {{ scheduledTrain.stopInfo.departureTimeString }} ({{
-                scheduledTrain.stopInfo.departureDelay
-              }})
+              {{ scheduledTrain.stopInfo.departureTimeString }} ({{ scheduledTrain.stopInfo.departureDelay }})
             </span>
           </span>
         </span>
@@ -134,14 +100,14 @@
 </template>
 
 <script lang="ts">
-import Station from "@/scripts/interfaces/Station";
-import SelectBox from "../Global/SelectBox.vue";
-import { computed, defineComponent, ref } from "@vue/runtime-core";
-import { useRoute } from "vue-router";
-import { useStore } from "@/store";
-import { GETTERS } from "@/constants/storeConstants";
-import { DataStatus } from "@/scripts/enums/DataStatus";
-import { ComputedRef } from "vue";
+import Station from '@/scripts/interfaces/Station';
+import SelectBox from '../Global/SelectBox.vue';
+import { computed, defineComponent, ref } from '@vue/runtime-core';
+import { useRoute } from 'vue-router';
+import { useStore } from '@/store';
+import { GETTERS } from '@/constants/storeConstants';
+import { DataStatus } from '@/scripts/enums/DataStatus';
+import { ComputedRef } from 'vue';
 
 export default defineComponent({
   components: { SelectBox },
@@ -156,7 +122,7 @@ export default defineComponent({
   },
 
   data: () => ({
-    viewIcon: require("@/assets/icon-view.svg"),
+    viewIcon: require('@/assets/icon-view.svg'),
     listOpen: false,
   }),
 
@@ -166,31 +132,28 @@ export default defineComponent({
 
     const store = useStore();
 
-    const timetableDataStatus = computed(() => store.getters[GETTERS.timetableDataStatus]) as ComputedRef<DataStatus>
+    const timetableDataStatus = computed(() => store.getters[GETTERS.timetableDataStatus]) as ComputedRef<DataStatus>;
 
-    const selectedCheckpoint = ref("");
+    const selectedCheckpoint = ref('');
 
     const computedScheduledTrains = computed(() => {
-      if (!props.station) return [];  
+      if (!props.station) return [];
 
       let scheduledTrains =
-        props.station.generalInfo?.checkpoints.find(
-          (cp) => cp.checkpointName === selectedCheckpoint.value
-        )?.scheduledTrains || props.station.onlineInfo?.scheduledTrains || [];
+        props.station.generalInfo?.checkpoints.find((cp) => cp.checkpointName === selectedCheckpoint.value)
+          ?.scheduledTrains ||
+        props.station.onlineInfo?.scheduledTrains ||
+        [];
 
       return (
         scheduledTrains?.sort((a, b) => {
           if (a.stopStatusID > b.stopStatusID) return 1;
           else if (a.stopStatusID < b.stopStatusID) return -1;
 
-          if (a.stopInfo.arrivalTimestamp > b.stopInfo.arrivalTimestamp)
-            return 1;
-          else if (a.stopInfo.arrivalTimestamp < b.stopInfo.arrivalTimestamp)
-            return -1;
+          if (a.stopInfo.arrivalTimestamp > b.stopInfo.arrivalTimestamp) return 1;
+          else if (a.stopInfo.arrivalTimestamp < b.stopInfo.arrivalTimestamp) return -1;
 
-          return a.stopInfo.departureTimestamp > b.stopInfo.departureTimestamp
-            ? 1
-            : -1;
+          return a.stopInfo.departureTimestamp > b.stopInfo.departureTimestamp ? 1 : -1;
         }) || []
       );
     });
@@ -199,18 +162,18 @@ export default defineComponent({
       currentURL,
       selectedCheckpoint,
       computedScheduledTrains,
-      timetableDataStatus
+      timetableDataStatus,
     };
   },
 
   methods: {
     loadSelectedOption() {
       if (!this.station) return;
-      if(!this.station.generalInfo) return;
-      if(!this.station.generalInfo.checkpoints) return;
+      if (!this.station.generalInfo) return;
+      if (!this.station.generalInfo.checkpoints) return;
       if (this.station.generalInfo.checkpoints.length == 0) return;
 
-      if (this.selectedCheckpoint != "") return;
+      if (this.selectedCheckpoint != '') return;
 
       this.selectedCheckpoint = this.station.generalInfo.checkpoints[0].checkpointName;
     },
@@ -218,6 +181,13 @@ export default defineComponent({
     selectCheckpoint(cp: { checkpointName: string }) {
       this.selectedCheckpoint = cp.checkpointName;
     },
+
+    navigateToTrain(trainNo: number) {
+      this.$router.push({
+        name: 'TrainsView',
+        query: { train: trainNo.toString() },
+      });
+    },
   },
 
   mounted() {
@@ -231,8 +201,8 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import "../../styles/responsive.scss";
-@import "../../styles/variables.scss";
+@import '../../styles/responsive.scss';
+@import '../../styles/variables.scss';
 
 h3 {
   margin: 0.5em 0;
@@ -243,10 +213,17 @@ h3 {
   align-items: center;
 
   font-size: 1.5em;
+}
+
+.timetable-only {
+  margin-left: 0.5em;
 
   img {
     width: 1.1em;
-    margin-left: 0.5em;
+  }
+
+  &:focus {
+    outline: 1px solid white;
   }
 }
 
@@ -365,6 +342,8 @@ h3 {
 
     background: $bgLigtherCol;
 
+    cursor: pointer;
+
     @include smallScreen() {
       display: flex;
       flex-direction: column;
@@ -428,7 +407,7 @@ h3 {
 
     &:not(:last-child)::after {
       margin: 0 0.5em;
-      content: "•";
+      content: '•';
       color: white;
     }
   }
@@ -446,7 +425,7 @@ h3 {
   transform: rotate(-45deg);
 
   &::before {
-    content: "";
+    content: '';
     position: absolute;
     display: block;
     width: 55px;
@@ -527,4 +506,4 @@ h3 {
 .departure-time.terminates {
   font-size: 0.75em;
 }
-</style>
+</style>

src/components/StationsView/StationTable.vue

@@ -38,6 +38,8 @@
             v-for="(station, i) in stations"
             :key="i + station.name"
             @click="() => setScenery(station.name)"
+            @keydown="(e) => { if(e.keyCode == 13) setScenery(station.name) }"
+            tabindex="0"
           >
             <td
               class="station_name"

src/components/TrainsView/TrainTable.vue

@@ -1,18 +1,15 @@
 <template>
   <div class="train-table">
     <div class="traffic-warning" v-if="distanceLimitExceeded">
-      {{ $t("trains.distance-exceeded") }}
+      {{ $t('trains.distance-exceeded') }}
     </div>
 
     <div class="no-trains" v-if="computedTrains.length == 0 && timetableLoaded">
-      {{ $t("trains.no-trains") }}
+      {{ $t('trains.no-trains') }}
     </div>
 
-    <div
-      class="no-trains"
-      v-if="computedTrains.length == 0 && !timetableLoaded"
-    >
-      {{ $t("trains.loading") }}
+    <div class="no-trains" v-if="computedTrains.length == 0 && !timetableLoaded">
+      {{ $t('trains.loading') }}
     </div>
 
     <ul class="train-list">
@@ -20,6 +17,12 @@
         class="train-row"
         v-for="(train, i) in computedTrains"
         :key="i"
+        tabindex="0"
+        @keydown="
+          (e) => {
+            if (e.keyCode == 13) changeScheduleShowState(train.timetableData?.timetableId);
+          }
+        "
         :ref="
           (el) => {
             if (!train.timetableData) return;
@@ -27,17 +30,14 @@
           }
         "
       >
-        <div
-          class="wrapper"
-          @click="changeScheduleShowState(train.timetableData?.timetableId)"
-        >
+        <div class="wrapper" @click="changeScheduleShowState(train.timetableData?.timetableId)">
           <span class="info">
             <div class="info_timetable" v-if="!train.timetableData">
               <div class="timetable_general">
                 <span>
                   {{ train.trainNo }} |
                   <span style="color: gold">
-                    {{ $t("trains.no-timetable") }}
+                    {{ $t('trains.no-timetable') }}
                   </span>
                 </span>
               </div>
@@ -58,9 +58,7 @@
                   <span>
                     <strong>{{ train.timetableData.category }}</strong>
                     {{ train.trainNo }} |
-                    <span style="color: gold">
-                      {{ train.timetableData.routeDistance }} km
-                    </span>
+                    <span style="color: gold"> {{ train.timetableData.routeDistance }} km </span>
                   </span>
                 </span>
 
@@ -68,33 +66,22 @@
                   <span class="activator">
                     SRJP
 
-                    <img
-                      :src="
-                        showedSchedule == train.timetableData.timetableId
-                          ? ascSVG
-                          : descSVG
-                      "
-                      alt="arrow-icon"
-                    />
+                    <img :src="showedSchedule == train.timetableData.timetableId ? ascSVG : descSVG" alt="arrow-icon" />
                   </span>
 
-                  <span class="content">
-                    {{ $t("trains.detailed-timetable") }} {{ train.trainNo }}
-                  </span>
+                  <span class="content"> {{ $t('trains.detailed-timetable') }} {{ train.trainNo }} </span>
                 </span>
               </div>
 
               <div class="timetable_route">
-                {{ train.timetableData.route.replace("|", " - ") }}
+                {{ train.timetableData.route.replace('|', ' - ') }}
               </div>
 
               <div class="timetable_stops">
                 <span v-if="train.timetableData.followingStops.length > 2">
-                  {{ $t("trains.via-title") }}
+                  {{ $t('trains.via-title') }}
 
-                  <span
-                    v-html="displayStopList(train.timetableData.followingStops)"
-                  ></span>
+                  <span v-html="displayStopList(train.timetableData.followingStops)"></span>
                 </span>
               </div>
             </div>
@@ -103,10 +90,7 @@
           <span class="driver">
             <div class="driver-info">
               <span class="driver-name">
-                <a
-                  :href="'https://td2.info.pl/profile/?u=' + train.driverId"
-                  target="_blank"
-                >
+                <a :href="'https://td2.info.pl/profile/?u=' + train.driverId" target="_blank">
                   {{ train.driverName }}
                 </a>
               </span>
@@ -119,54 +103,37 @@
             <span class="driver-loco">
               <div class="driver-cars">
                 <span v-if="train.cars.length > 0">
-                  {{ $t("trains.cars") }}:
+                  {{ $t('trains.cars') }}:
                   <span class="count">{{ train.cars.length }}</span>
                 </span>
 
                 <span v-else>{{ displayLocoInfo(train.locoType) }}</span>
               </div>
 
-              <img
-                class="train-image"
-                :src="train.locoURL"
-                @error="onImageError"
-              />
+              <img class="train-image" :src="train.locoURL" @error="onImageError" />
             </span>
           </span>
 
           <span class="stats">
             <div class="stats-main">
               <span v-for="stat in stats.main" :key="stat.name">
-                <img
-                  :src="require(`@/assets/icon-${stat.name}.svg`)"
-                  :alt="stat.name"
-                />
-                {{
-                  `${~~(train[stat.name] * (stat.multiplier || 1))}${stat.unit}`
-                }}
+                <img :src="require(`@/assets/icon-${stat.name}.svg`)" :alt="stat.name" />
+                {{ `${~~(train[stat.name] * (stat.multiplier || 1))}${stat.unit}` }}
               </span>
             </div>
 
             <div class="stats-position">
               <span v-for="stat in stats.position" :key="stat.name">
                 <div>
-                  <img
-                    :src="require(`@/assets/icon-${stat.name}.svg`)"
-                    :alt="stat.name"
-                  />
+                  <img :src="require(`@/assets/icon-${stat.name}.svg`)" :alt="stat.name" />
                 </div>
-                {{ (train[stat.prop] || "---") + (stat.unit || "") }}
+                {{ (train[stat.prop] || '---') + (stat.unit || '') }}
               </span>
             </div>
           </span>
         </div>
 
-        <transition
-          name="unfold"
-          @enter="enter"
-          @afterEnter="afterEnter"
-          @leave="leave"
-        >
+        <transition name="unfold" @enter="enter" @afterEnter="afterEnter" @leave="leave">
           <TrainSchedule
             v-if="showedSchedule === train.timetableData?.timetableId"
             :followingStops="train.timetableData?.followingStops"
@@ -179,20 +146,14 @@
 </template>
 
 <script lang="ts">
-import Train from "@/scripts/interfaces/Train";
-import TrainStop from "@/scripts/interfaces/TrainStop";
+import Train from '@/scripts/interfaces/Train';
+import TrainStop from '@/scripts/interfaces/TrainStop';
 
-import TrainSchedule from "@/components/TrainsView/TrainSchedule.vue";
-import { DataStatus } from "@/scripts/enums/DataStatus";
-import {
-  computed,
-  ComputedRef,
-  defineComponent,
-  Ref,
-  ref,
-} from "@vue/runtime-core";
-import { useStore } from "@/store";
-import { GETTERS } from "@/constants/storeConstants";
+import TrainSchedule from '@/components/TrainsView/TrainSchedule.vue';
+import { DataStatus } from '@/scripts/enums/DataStatus';
+import { computed, ComputedRef, defineComponent, Ref, ref } from '@vue/runtime-core';
+import { useStore } from '@/store';
+import { GETTERS } from '@/constants/storeConstants';
 
 export default defineComponent({
   components: {
@@ -213,45 +174,45 @@ export default defineComponent({
 
   data: () => ({
     showedSchedule: 0,
-    defaultLocoImage: require("@/assets/unknown.png"),
+    defaultLocoImage: require('@/assets/unknown.png'),
 
-    ascSVG: require("@/assets/icon-arrow-asc.svg"),
-    descSVG: require("@/assets/icon-arrow-desc.svg"),
+    ascSVG: require('@/assets/icon-arrow-asc.svg'),
+    descSVG: require('@/assets/icon-arrow-desc.svg'),
 
     stats: {
       main: [
         {
-          name: "mass",
-          unit: "t",
+          name: 'mass',
+          unit: 't',
           multiplier: 0.001,
         },
         {
-          name: "speed",
-          unit: "km/h",
+          name: 'speed',
+          unit: 'km/h',
         },
         {
-          name: "length",
-          unit: "m",
+          name: 'length',
+          unit: 'm',
         },
       ],
 
       position: [
         {
-          name: "scenery",
-          prop: "currentStationName",
+          name: 'scenery',
+          prop: 'currentStationName',
         },
         {
-          name: "route",
-          prop: "connectedTrack",
+          name: 'route',
+          prop: 'connectedTrack',
         },
         {
-          name: "signal",
-          prop: "signal",
+          name: 'signal',
+          prop: 'signal',
         },
         {
-          name: "distance",
-          prop: "distance",
-          unit: "m",
+          name: 'distance',
+          prop: 'distance',
+          unit: 'm',
         },
       ],
     },
@@ -261,14 +222,10 @@ export default defineComponent({
     const store = useStore();
     const elList: Ref<(HTMLElement | null)[]> = ref([]);
 
-    const timetableDataStatus: ComputedRef<DataStatus> = computed(
-      () => store.getters[GETTERS.timetableDataStatus]
-    );
+    const timetableDataStatus: ComputedRef<DataStatus> = computed(() => store.getters[GETTERS.timetableDataStatus]);
 
     const queryTimetable = computed(() => {
-      const q = props.computedTrains.find(
-        (train) => train.trainNo === Number(props.queryTrain)
-      )?.timetableData;
+      const q = props.computedTrains.find((train) => train.trainNo === Number(props.queryTrain))?.timetableData;
 
       return q;
     });
@@ -276,18 +233,12 @@ export default defineComponent({
     return {
       elList,
       queryTimetable,
-      timetableLoaded: computed(
-        () => timetableDataStatus.value === DataStatus.Loaded
-      ),
-      timetableError: computed(
-        () => timetableDataStatus.value === DataStatus.Error
-      ),
+      timetableLoaded: computed(() => timetableDataStatus.value === DataStatus.Loaded),
+      timetableError: computed(() => timetableDataStatus.value === DataStatus.Error),
       distanceLimitExceeded: computed(
         () =>
-          props.computedTrains.findIndex(
-            ({ timetableData }) =>
-              timetableData && timetableData.routeDistance > 200
-          ) != -1
+          props.computedTrains.findIndex(({ timetableData }) => timetableData && timetableData.routeDistance > 200) !=
+          -1
       ),
     };
   },
@@ -296,7 +247,7 @@ export default defineComponent({
     enter(el: HTMLElement) {
       const maxHeight = getComputedStyle(el).height;
 
-      el.style.height = "0px";
+      el.style.height = '0px';
 
       getComputedStyle(el);
 
@@ -306,21 +257,20 @@ export default defineComponent({
     },
 
     afterEnter(el: HTMLElement) {
-      el.style.height = "auto";
+      el.style.height = 'auto';
     },
 
     leave(el: HTMLElement) {
       el.style.height = getComputedStyle(el).height;
 
       setTimeout(() => {
-        el.style.height = "0px";
+        el.style.height = '0px';
       }, 10);
     },
 
     focusOnTrain(trainNoStr: string) {
-      const timetableId = this.computedTrains.find(
-        (train) => train.trainNo == Number(trainNoStr)
-      )?.timetableData?.timetableId;
+      const timetableId = this.computedTrains.find((train) => train.trainNo == Number(trainNoStr))?.timetableData
+        ?.timetableId;
 
       if (!timetableId) return;
 
@@ -330,15 +280,14 @@ export default defineComponent({
     changeScheduleShowState(timetableId: number | undefined) {
       if (!timetableId || timetableId < 0) return;
 
-      this.showedSchedule =
-        this.showedSchedule == timetableId ? 0 : timetableId;
+      this.showedSchedule = this.showedSchedule == timetableId ? 0 : timetableId;
 
       setTimeout(() => {
         const currentEl = this.elList[timetableId];
 
         currentEl?.scrollIntoView({
-          behavior: "smooth",
-          block: this.showedSchedule == 0 ? "nearest" : "center",
+          behavior: 'smooth',
+          block: this.showedSchedule == 0 ? 'nearest' : 'center',
         });
       }, 200);
     },
@@ -350,39 +299,31 @@ export default defineComponent({
     },
 
     displayStopList(stops: TrainStop[]): string | undefined {
-      if (!stops) return "";
+      if (!stops) return '';
 
       return stops
         .reduce((acc: string[], stop: TrainStop, i: number) => {
-          if (stop.stopType.includes("ph"))
-            acc.push(
-              `<strong style='color:${
-                stop.confirmed ? "springgreen" : "white"
-              }'>${stop.stopName}</strong>`
-            );
+          if (stop.stopType.includes('ph'))
+            acc.push(`<strong style='color:${stop.confirmed ? 'springgreen' : 'white'}'>${stop.stopName}</strong>`);
           else if (
             i > 0 &&
             i < stops.length - 1 &&
-            !stop.stopNameRAW.includes("po.") &&
-            !stop.stopNameRAW.includes("SBL")
+            !stop.stopNameRAW.includes('po.') &&
+            !stop.stopNameRAW.includes('SBL')
           )
-            acc.push(
-              `<span style='color:${
-                stop.confirmed ? "springgreen" : "lightgray"
-              }'>${stop.stopName}</span>`
-            );
+            acc.push(`<span style='color:${stop.confirmed ? 'springgreen' : 'lightgray'}'>${stop.stopName}</span>`);
           return acc;
         }, [])
-        .join(" > ");
+        .join(' > ');
     },
 
     displayLocoInfo(locoType: string) {
-      if (locoType.includes("EN")) return `${this.$t("trains.EZT")}`;
-      if (locoType.includes("SN")) return `${this.$t("trains.SZT")}`;
-      if (locoType.startsWith("E")) return `${this.$t("trains.loco-electric")}`;
-      if (locoType.startsWith("S")) return `${this.$t("trains.loco-diesel")}`;
+      if (locoType.includes('EN')) return `${this.$t('trains.EZT')}`;
+      if (locoType.includes('SN')) return `${this.$t('trains.SZT')}`;
+      if (locoType.startsWith('E')) return `${this.$t('trains.loco-electric')}`;
+      if (locoType.startsWith('S')) return `${this.$t('trains.loco-diesel')}`;
 
-      return "";
+      return '';
     },
   },
 
@@ -393,8 +334,8 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import "../../styles/responsive.scss";
-@import "../../styles/user_badge.scss";
+@import '../../styles/responsive.scss';
+@import '../../styles/user_badge.scss';
 
 .unfold {
   &-leave-active,
@@ -605,4 +546,4 @@ img.train-image {
     text-align: center;
   }
 }
-</style>
+</style>