obsługa niezaładowanych miniaturek pojazdów

src/components/Global/TrainThumbnail.vue

@@ -0,0 +1,61 @@
+<template>
+  <img :src="url" loading="lazy" alt="Loco image not found" @error="onImageError" />
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import imageMixin from '../../mixins/imageMixin';
+import { useStore } from '../../store/store';
+import { RollingStockInfo } from '../../scripts/interfaces/github_api/StockInfoGithubData';
+
+export default defineComponent({
+  mixins: [imageMixin],
+
+  props: {
+    name: {
+      type: String,
+      required: true,
+    },
+  },
+
+  data() {
+    return {
+      store: useStore(),
+    };
+  },
+
+  computed: {
+    url() {
+      return `https://rj.td2.info.pl/dist/img/thumbnails/${this.name.split(':')[0]}.png`;
+    },
+
+    stockType() {
+      if (!this.store.rollingStockData) return 'unknown';
+
+      return (
+        Object.keys(this.store.rollingStockData.info).find((type) => {
+          return this.store.rollingStockData?.info[type as keyof RollingStockInfo].find((v) => v[0] === this.name.split(':')[0]);
+        }) || 'unknown'
+      );
+    },
+  },
+
+  methods: {
+    onImageError(e: Event) {
+      const imageEl = e.target as HTMLImageElement;
+      imageEl.src = this.getImage(`icon-${this.stockType}.png`);
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.wrapper {
+  display: flex;
+  justify-content: center;
+}
+
+img {
+  display: inline-block;
+}
+</style>

src/components/JournalView/JournalTimetables/TimetableExtra.vue

@@ -60,11 +60,7 @@
         ).split(';')"
         :key="i"
       >
-        <img
+        <TrainThumbnail :name="car" />
-          @error="onImageError"
-          :src="`https://rj.td2.info.pl/dist/img/thumbnails/${car.split(':')[0]}.png`"
-          :alt="car"
-        />
         <div>{{ car.replace(/_/g, ' ').split(':')[0] }}</div>
       </li>
     </ul>
@@ -75,28 +71,25 @@
 import { PropType, defineComponent } from 'vue';
 import { TimetableHistory } from '../../../scripts/interfaces/api/TimetablesAPIData';
 import imageMixin from '../../../mixins/imageMixin';
+import TrainThumbnail from '../../Global/TrainThumbnail.vue';
 
 export default defineComponent({
   mixins: [imageMixin],
-
   props: {
     showExtraInfo: {
       type: Boolean,
       required: true,
     },
-
     timetable: {
       type: Object as PropType<TimetableHistory>,
       required: true,
     },
   },
-
   data() {
     return {
       currentHistoryIndex: 0,
     };
   },
-
   computed: {
     stockHistory() {
       return this.timetable.stockHistory
@@ -116,13 +109,13 @@ export default defineComponent({
         });
     },
   },
-
   methods: {
     onImageError(e: Event) {
       const imageEl = e.target as HTMLImageElement;
       imageEl.src = this.getImage('unknown.png');
     },
   },
+  components: { TrainThumbnail },
 });
 </script>
 

src/components/TrainsView/TrainInfo.vue

@@ -62,15 +62,13 @@
     </section>
 
     <section class="train-stats">
-      <div>
+      <TrainThumbnail :name="train.locoType" />
-        <img :src="train.locoURL" loading="lazy" alt="Loco image not found" @error="onImageError" />
-      </div>
 
       <div class="text--grayed">
         {{ train.locoType }}
-        <span v-if="train.cars.length > 0">
+        <span v-if="train.stockList.length > 0">
           &nbsp;&bull; {{ $t('trains.cars') }}:
-          <span class="count">{{ train.cars.length }}</span>
+          <span class="count">{{ train.stockList.length }}</span>
         </span>
       </div>
 
@@ -91,6 +89,7 @@ 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';
 
 export default defineComponent({
   props: {
@@ -104,7 +103,7 @@ export default defineComponent({
     },
   },
   mixins: [trainInfoMixin, imageMixin, styleMixin],
-  components: { ProgressBar },
+  components: { ProgressBar, TrainThumbnail },
 });
 </script>
 
@@ -127,7 +126,7 @@ export default defineComponent({
   text-align: center;
 
   img {
-    margin: 0.5em 0;
+    margin: 0.5em auto;
     width: 12em;
   }
 }

src/components/TrainsView/TrainSchedule.vue

@@ -2,12 +2,12 @@
   <div class="train-schedule" @click="toggleShowState">
     <div class="train-stock">
       <ul class="stock-list">
-        <li>
+        <!-- <li>
           <img class="train-image" :src="train.locoURL" alt="loco" @error="onImageError" />
           <div>{{ train.locoType }}</div>
-        </li>
+        </li> -->
 
-        <li v-if="train.locoType.startsWith('EN')">
+        <!-- <li v-if="train.locoType.startsWith('EN')">
           <img :src="train.locoURL.replace('rb', 's')" @error="onImageError" alt="" />
           <div>{{ train.locoType }}S</div>
         </li>
@@ -20,16 +20,17 @@
         <li v-if="train.locoType.startsWith('EN')">
           <img :src="train.locoURL.replace('rb', 'ra')" @error="onImageError" alt="" />
           <div>{{ train.locoType }}RA</div>
-        </li>
+        </li> -->
 
-        <li v-for="(car, i) in train.cars" :key="i">
+        <li v-for="(stockName, i) in train.stockList" :key="i">
-          <img
+          <!-- <img
             :src="`https://rj.td2.info.pl/dist/img/thumbnails/${car.split(':')[0]}.png`"
             @error="onImageError"
             alt="car"
-          />
+          /> -->
 
-          <div>{{ car.replace(/_/g, ' ').split(':')[0] }}</div>
+          <TrainThumbnail :name="stockName" />
+          <div>{{ stockName.replace(/_/g, ' ').split(':')[0] }}</div>
         </li>
       </ul>
     </div>
@@ -91,9 +92,10 @@ import Train from '../../scripts/interfaces/Train';
 import TrainStop from '../../scripts/interfaces/TrainStop';
 import { useStore } from '../../store/store';
 import StopDate from '../Global/StopDate.vue';
+import TrainThumbnail from '../Global/TrainThumbnail.vue';
 
 export default defineComponent({
-  components: { StopDate },
+  components: { StopDate, TrainThumbnail },
   props: {
     train: {
       type: Object as PropType<Train>,
@@ -426,4 +428,3 @@ ul.stop_list > li.stop {
   }
 }
 </style>
-

src/scripts/interfaces/Train.ts

@@ -15,12 +15,11 @@ export default interface Train {
   driverLevel: number;
   currentStationName: string;
   currentStationHash: string;
-  locoURL: string;
   locoType: string;
   online: boolean;
   lastSeen: number;
   region: string;
-  cars: string[];
+  stockList: string[];
 
   isTimeout: boolean;
   isSupporter: boolean;

src/scripts/interfaces/api/StationAPIData.ts

@@ -11,7 +11,7 @@ export default interface StationAPIData {
   lastSeen: number;
   dispatcherExp: number;
   nameFromHeader: string;
-  spawnString: string;
+  spawnString: string | null;
   networkConnectionString: string;
   isOnline: number;
   dispatcherRate: number;

src/scripts/interfaces/github_api/StockInfoGithubData.ts

@@ -0,0 +1,13 @@
+export interface RollingStockGithubData {
+  usage: Record<string, string>;
+  info: RollingStockInfo;
+}
+
+export interface RollingStockInfo {
+  'loco-e': [string, string, string, string, boolean][];
+  'loco-s': [string, string, string, string, boolean][];
+  'loco-szt': [string, string, string, string, boolean][];
+  'loco-ezt': [string, string, string, string, boolean][];
+  'car-passenger': [string, string, boolean, boolean, string][];
+  'car-cargo': [string, string, boolean, boolean, string][];
+}

src/scripts/interfaces/store/storeTypes.ts

@@ -6,7 +6,7 @@ import Station from '../Station';
 import Train from '../Train';
 import { DispatcherStatsAPIData } from '../api/DispatcherStatsAPIData';
 import { DriverStatsAPIData } from '../api/DriverStatsAPIData';
-import { Ref } from 'vue';
+import { RollingStockGithubData } from '../github_api/StockInfoGithubData';
 
 export type Availability = 'default' | 'unavailable' | 'nonPublic' | 'abandoned' | 'nonDefault';
 
@@ -14,6 +14,7 @@ export interface StoreState {
   stationList: Station[];
   trainList: Train[];
   apiData: APIData;
+  rollingStockData?: RollingStockGithubData;
 
   lastDispatcherStatuses: { hash: string; statusTimestamp: number; statusID: string }[];
 

src/scripts/utils/apiURLs.ts

@@ -1,6 +1,6 @@
 export const URLs = {
   stacjownikAPI:
-    import.meta.env.VITE_APP_API_DEV == 1 && !import.meta.env.PROD
+    import.meta.env.VITE_APP_API_DEV === "1" && !import.meta.env.PROD
       ? 'http://localhost:3001'
       : 'https://stacjownik.spythere.pl',
   stacjownikAPIDev: 'localhost:3000',

src/store/journalFiltersStore.ts

@@ -1,9 +0,0 @@
-import { defineStore } from 'pinia';
-
-export const useJournalFiltersStore = defineStore('journalFiltersStore', {
-  state: () => ({
-    timetableFilters: {
-      
-    },
-  }),
-});

src/store/store.ts

@@ -8,14 +8,16 @@ import Station from '../scripts/interfaces/Station';
 import StationRoutes from '../scripts/interfaces/StationRoutes';
 import Train from '../scripts/interfaces/Train';
 import { URLs } from '../scripts/utils/apiURLs';
-import { getLocoURL, getStatusTimestamp, getStatusID, getScheduledTrain, parseSpawns } from '../scripts/utils/storeUtils';
+import { getStatusTimestamp, getStatusID, getScheduledTrain, parseSpawns } from '../scripts/utils/storeUtils';
 import { APIData, StationJSONData, StoreState } from '../scripts/interfaces/store/storeTypes';
 import packageInfo from '../../package.json';
+import { RollingStockInfo, RollingStockGithubData } from '../scripts/interfaces/github_api/StockInfoGithubData';
 
 export const useStore = defineStore('store', {
   state: () =>
     ({
       apiData: {} as unknown,
+      rollingStockData: undefined,
 
       stationList: [],
       trainList: [],
@@ -351,6 +353,7 @@ export const useStore = defineStore('store', {
 
     async connectToAPI() {
       await this.fetchStationsGeneralInfo();
+      await this.fetchStockInfoData();
 
       this.connectToWebsocket();
     },
@@ -361,6 +364,14 @@ export const useStore = defineStore('store', {
       await this.setOnlineData();
     },
 
+    async fetchStockInfoData() {
+      try {
+        this.rollingStockData = (await axios.get<RollingStockGithubData>('https://raw.githubusercontent.com/Spythere/api/main/td2/data/stockInfo.json')).data;
+      } catch (error) {
+        console.error('Ups! Wystąpił błąd podczas pobierania informacji o taborze z API:', error);
+      }
+    },
+
     async setOnlineData() {
       if (!this.apiData.stations) {
         this.dataStatuses.sceneries = DataStatus.Error;

src/vite-env.d.ts

@@ -1,19 +1,15 @@
 /// <reference types="vite/client" />
 
 declare module '*.vue' {
-  import type { DefineComponent } from 'vue'
+  import type { DefineComponent } from 'vue';
-  const component: DefineComponent<{}, {}, any>
+  const component: DefineComponent<{}, {}, any>;
-  export default component
+  export default component;
-
 }
 interface ImportMetaEnv {
-  readonly VITE_APP_API_DEV: number;
+  readonly VITE_APP_API_DEV: string;
-  readonly VITE_APP_WS_DEV: number;
+  readonly VITE_APP_WS_DEV: string;
 }
 
 interface ImportMeta {
   readonly env: ImportMetaEnv;
 }
-
-
-