usprawnienia miniaturek pojazdów

src/components/Global/StockList.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="stock-list">
     <ul>
-      <li v-for="(stockName, i) in trainStockList" :key="i">
+      <li v-for="(stockName, i) in computedStockList" :key="i">
         <p>
           {{ stockName.split(':')[0].split('_').splice(0, 2).join(' ') }}
           {{ stockName.split(':')[1] }}
@@ -18,7 +18,7 @@
           />
 
           <img
-            v-if="/^(EN|2EN)/.test(stockName)"
+            v-if="/^(EN|2EN)/.test(stockName) && !tractionOnly"
             :src="`https://rj.td2.info.pl/dist/img/thumbnails/${stockName.split(':')[0]}s.png`"
             @error="
               (event) => ((event.target as HTMLImageElement).src = '/images/icon-loco-ezt-s.png')
@@ -27,7 +27,7 @@
 
           <img
             class="train-thumbnail"
-            v-if="/^EN71/.test(stockName)"
+            v-if="/^EN71/.test(stockName) && !tractionOnly"
             :src="`https://rj.td2.info.pl/dist/img/thumbnails/${stockName.split(':')[0]}s.png`"
             @error="
               (event) => ((event.target as HTMLImageElement).src = '/images/icon-loco-ezt-s.png')
@@ -36,7 +36,7 @@
 
           <img
             class="train-thumbnail"
-            v-if="/^(EN|2EN)/.test(stockName)"
+            v-if="/^(EN|2EN)/.test(stockName) && !tractionOnly"
             :src="`https://rj.td2.info.pl/dist/img/thumbnails/${stockName.split(':')[0]}ra.png`"
             @error="
               (event) => ((event.target as HTMLImageElement).src = '/images/icon-loco-ezt-ra.png')
@@ -58,6 +58,10 @@ export default defineComponent({
     trainStockList: {
       type: Array as PropType<string[]>,
       required: true
+    },
+    tractionOnly: {
+      type: Boolean,
+      required: false
     }
   },
 
@@ -67,14 +71,35 @@ export default defineComponent({
     };
   },
 
+  computed: {
+    computedStockList() {
+      return this.tractionOnly ? this.trainStockList.slice(0, 1) : this.trainStockList;
+    }
+  },
+
   methods: {
     onImageError(event: Event, stockName: string) {
-      const fallbackName =
-        Object.keys(this.apiStore.rollingStockData!.info).find((type) => {
-          return this.apiStore.rollingStockData!.info[type as keyof API.RollingStock.Info].find(
-            (v) => v[0] === stockName.split(':')[0]
-          );
-        }) || 'vehicle-unknown';
+      let fallbackName = '';
+
+      const isLoco = /.-\d/.test(stockName);
+
+      if (isLoco) {
+        fallbackName += 'loco-';
+        fallbackName += /^\d?EN\d{2}/.test(stockName)
+          ? 'ezt'
+          : /^SN\d{2}/.test(stockName)
+          ? 'szt'
+          : /^\d?E/.test(stockName)
+          ? 'e'
+          : 's';
+      } else {
+        const isCarPassenger = /(\d{3}a|(Bau|Gor)\d{2}|304C)_/.test(stockName);
+
+        fallbackName += 'car-';
+        fallbackName += isCarPassenger ? 'passenger' : 'cargo';
+      }
+
+      console.log(stockName, fallbackName);
 
       (event.target as HTMLImageElement).src = `/images/icon-${fallbackName}.png`;
     }

src/components/Global/TrainThumbnail.vue

@@ -1,85 +0,0 @@
-<template>
-  <img class="train-thumbnail" :src="placeholderUrl" v-if="isNotFound" />
-
-  <img
-    class="train-thumbnail"
-    v-else
-    :src="`https://rj.td2.info.pl/dist/img/thumbnails/${name.split(':')[0]}${
-      stockType == 'loco-ezt' ? 'rb' : ''
-    }.png`"
-    @error="onImageError"
-    @load="onImageLoad"
-    width="220"
-    height="60"
-  />
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import { API } from '../../typings/api';
-import { useApiStore } from '../../store/apiStore';
-
-export default defineComponent({
-  props: {
-    name: {
-      type: String,
-      required: true
-    },
-
-    onlyFirstSegment: {
-      type: Boolean,
-      default: false
-    }
-  },
-
-  data() {
-    return {
-      apiStore: useApiStore(),
-      isNotFound: false,
-      isLoaded: false
-    };
-  },
-
-  computed: {
-    url() {
-      return `https://rj.td2.info.pl/dist/img/thumbnails/${this.name.split(':')[0]}.png`;
-    },
-
-    placeholderUrl() {
-      return `/images/icon-${this.stockType}.png`;
-    },
-
-    stockType() {
-      if (!this.apiStore.rollingStockData) return 'vehicle-unknown';
-
-      return (
-        Object.keys(this.apiStore.rollingStockData.info).find((type) => {
-          return this.apiStore.rollingStockData?.info[type as keyof API.RollingStock.Info].find(
-            (v) => v[0] === this.name.split(':')[0]
-          );
-        }) || 'vehicle-unknown'
-      );
-    }
-  },
-
-  methods: {
-    onImageError() {
-      this.isNotFound = true;
-      this.isLoaded = false;
-    },
-
-    onImageLoad() {
-      this.isNotFound = false;
-      this.isLoaded = true;
-    }
-  }
-});
-</script>
-
-<style lang="scss" scoped>
-.train-thumbnail {
-  width: auto;
-  height: auto;
-  max-height: 60px;
-}
-</style>

src/components/JournalView/JournalTimetables/TimetableExtra.vue

@@ -53,7 +53,6 @@
       </button>
     </div>
 
-    <!-- <StockList :trainStockList="currentHistoryIndex == 0 ? timetable.stockString : stockHistory[currentHistoryIndex].stockString).split(';')" /> -->
     <StockList
       :trainStockList="
         (currentHistoryIndex == 0
@@ -63,15 +62,6 @@
       "
     />
 
-    <!-- <ul class="stock-list">
-      <li
-        v-for="(stockName, i) in (currentHistoryIndex == 0 ? timetable.stockString : stockHistory[currentHistoryIndex].stockString).split(';')"
-        :key="i"
-      >
-        <div>{{ stockName.split(':')[0].split('_').splice(0, 2).join(' ') }} {{ stockName.split(':')[1] }}</div>
-        <TrainThumbnail :name="stockName" />
-      </li>
-    </ul> -->
   </div>
 </template>
 

src/components/TrainsView/TrainInfo.vue

@@ -97,13 +97,11 @@
     </section>
 
     <section class="train-stats">
-      <TrainThumbnail :name="train.locoType" :onlyFirstSegment="true" />
+      <StockList :trainStockList="train.stockList" :tractionOnly="true" />
 
       <div class="text--grayed">
-        {{ train.locoType }}
         <span v-if="train.stockList.length > 1">
-          &nbsp;&bull; {{ $t('trains.cars') }}:
-          <span class="count">{{ train.stockList.length - 1 }}</span>
+          {{ $t('trains.cars') }}: {{ train.stockList.length - 1 }}
         </span>
       </div>
 
@@ -125,13 +123,13 @@ import styleMixin from '../../mixins/styleMixin';
 import trainInfoMixin from '../../mixins/trainInfoMixin';
 import Train from '../../scripts/interfaces/Train';
 import ProgressBar from '../Global/ProgressBar.vue';
-import TrainThumbnail from '../Global/TrainThumbnail.vue';
 import { useMainStore } from '../../store/mainStore';
 import { useApiStore } from '../../store/apiStore';
+import StockList from '../Global/StockList.vue';
 
 export default defineComponent({
   mixins: [trainInfoMixin, styleMixin],
-  components: { ProgressBar, TrainThumbnail },
+  components: { ProgressBar, StockList },
 
   props: {
     train: {
@@ -153,13 +151,6 @@ export default defineComponent({
 });
 </script>
 
-<!-- Global style for TrainThumbnail -->
-<style lang="scss">
-.train-stats .train-thumbnail {
-  max-width: 100%;
-}
-</style>
-
 <style lang="scss" scoped>
 @import '../../styles/responsive.scss';
 @import '../../styles/badge.scss';