Merge pull request #100 from Spythere/development

v1.25.2

package.json

@@ -1,6 +1,6 @@
 {
   "name": "stacjownik",
-  "version": "1.25.0",
+  "version": "1.25.2",
   "private": true,
   "scripts": {
     "dev": "vite",

src/App.vue

@@ -131,7 +131,8 @@ export default defineComponent({
         };
 
         this.isUpdateCardOpen =
-          storageVersion != version || import.meta.env.VITE_UPDATE_TEST === 'test';
+          (storageVersion != '' && storageVersion != version) ||
+          import.meta.env.VITE_UPDATE_TEST === 'test';
       } catch (error) {
         console.error(`Wystąpił błąd podczas pobierania danych z API GitHuba: ${error}`);
       }

src/components/Global/StockList.vue

@@ -1,83 +1,26 @@
 <template>
   <div class="stock-list">
-    <div v-if="tractionOnly">
+    <ul>
-      <p>
+      <li
-        {{ computedStockList[0].split(':')[0].split('_').splice(0, 2).join(' ') }}
+        v-for="({ vehicleName, vehicleCargo, images, imagesFallbacks }, i) in thumbnailNames"
-        {{ computedStockList[0].split(':')[1] }}
+        :key="i"
-      </p>
+      >
-
+        <div class="stock-text">
-      <img
+          <p>{{ vehicleName.replace(/_/g, ' ') }}</p>
-        class="traction-only"
+          <small v-if="vehicleCargo">({{ vehicleCargo }})</small>
-        :src="
+        </div>
-          getVehicleThumbnailURL(
-            computedStockList[0].split(':')[0],
-            /^EN/.test(computedStockList[0]) ? 'rb' : ''
-          )
-        "
-        @error="onImageError($event, computedStockList[0])"
-        width="300"
-        height="60"
-      />
-    </div>
-
-    <ul v-else>
-      <li v-for="(stockName, i) in computedStockList" :key="i">
-        <p>
-          {{ stockName.split(':')[0].split('_').splice(0, 3).join(' ') }}
-          <div v-if="stockName.split(':')[1]">({{ stockName.split(':')[1] }})</div>
-        </p>
 
         <span>
           <img
-            :data-mouseover="stockName"
+            v-for="(thumbnailImage, imageIndex) in images"
+            :data-mouseover="vehicleName"
             data-tooltip-type="VehiclePreviewTooltip"
-            :data-tooltip-content="stockName"
+            :data-tooltip-content="vehicleName"
-            :src="
+            :src="`https://static.spythere.eu/thumbnails/v2/${thumbnailImage}.png`"
-              getVehicleThumbnailURL(stockName.split(':')[0], /^EN/.test(stockName) ? 'rb' : '')
+            @error="onImageError($event, imagesFallbacks[imageIndex])"
-            "
-            @error="onImageError($event, stockName)"
             @click.stop="() => {}"
-            width="400"
             height="60"
           />
-
-          <!-- /// Manualne dodawanie miniaturek członów dla kibelków /// -->
-          <img
-            :data-mouseover="stockName"
-            data-tooltip-type="VehiclePreviewTooltip"
-            :data-tooltip-content="stockName.split(':')[0]"
-            v-if="/^(EN|2EN)/.test(stockName)"
-            :src="getVehicleThumbnailURL(stockName, 's')"
-            @error="
-              (event) => ((event.target as HTMLImageElement).src = '/images/icon-loco-ezt-s.png')
-            "
-            @click.stop="() => {}"
-          />
-
-          <img
-            :data-mouseover="stockName"
-            data-tooltip-type="VehiclePreviewTooltip"
-            :data-tooltip-content="stockName.split(':')[0]"
-            v-if="/^EN71/.test(stockName)"
-            :src="getVehicleThumbnailURL(stockName, 's')"
-            @error="
-              (event) => ((event.target as HTMLImageElement).src = '/images/icon-loco-ezt-s.png')
-            "
-            @click.stop="() => {}"
-          />
-
-          <img
-            :data-mouseover="stockName"
-            data-tooltip-type="VehiclePreviewTooltip"
-            :data-tooltip-content="stockName.split(':')[0]"
-            v-if="/^(EN|2EN)/.test(stockName)"
-            :src="getVehicleThumbnailURL(stockName, 'ra')"
-            @error="
-              (event) => ((event.target as HTMLImageElement).src = '/images/icon-loco-ezt-ra.png')
-            "
-            @click.stop="() => {}"
-          />
-          <!-- ///  -->
         </span>
       </li>
     </ul>
@@ -109,32 +52,116 @@ export default defineComponent({
   computed: {
     computedStockList() {
       return this.tractionOnly ? this.trainStockList.slice(0, 1) : this.trainStockList;
+    },
+
+    thumbnailNames() {
+      return (this.tractionOnly ? this.trainStockList.slice(0, 1) : this.trainStockList)
+        .filter((v) => v.length != 0)
+        .map((vehicleString) => {
+          const [vehicleName, vehicleCargo] = vehicleString.split(':');
+
+          const vehicleThumbnailData = {
+            images: [] as string[],
+            imagesFallbacks: [] as string[],
+            vehicleName,
+            vehicleCargo
+          };
+
+          // Generowanie członów EN57
+          if (vehicleName.startsWith('EN57')) {
+            vehicleThumbnailData['images'] = [
+              vehicleName + 'ra',
+              vehicleName + 's',
+              vehicleName + 'rb'
+            ];
+            vehicleThumbnailData['imagesFallbacks'] = [
+              'unknown_ezt-ra',
+              'unknown_ezt-s',
+              'unknown_ezt-rb'
+            ];
+          }
+          // Generowanie członów EN71
+          else if (vehicleName.startsWith('EN71')) {
+            vehicleThumbnailData['images'] = [
+              vehicleName + 'ra',
+              vehicleName + 'sa',
+              vehicleName + 'sb',
+              vehicleName + 'rb'
+            ];
+            vehicleThumbnailData['imagesFallbacks'] = [
+              'unknown_ezt-ra',
+              'unknown_ezt-sa',
+              'unknown_ezt-sb',
+              'unknown_ezt-rb'
+            ];
+          }
+          // Generowanie pojazdów i członów 2EN57
+          else if (vehicleString.startsWith('2EN57')) {
+            const [firstVehicleNumber, secondVehicleNumber] = vehicleString
+              .replace('2EN57-', '')
+              .split('+');
+
+            vehicleThumbnailData['images'] = [
+              `EN57-${firstVehicleNumber}ra`,
+              `EN57-${firstVehicleNumber}s`,
+              `EN57-${firstVehicleNumber}rb`,
+              `EN57-${secondVehicleNumber}ra`,
+              `EN57-${secondVehicleNumber}s`,
+              `EN57-${secondVehicleNumber}rb`
+            ];
+
+            vehicleThumbnailData['imagesFallbacks'] = [
+              'unknown_ezt-ra',
+              'unknown_ezt-s',
+              'unknown_ezt-rb',
+              'unknown_ezt-ra',
+              'unknown_ezt-s',
+              'unknown_ezt-rb'
+            ];
+          }
+          // Generowanie członów Gor77
+          else if (vehicleString.startsWith('Gor77')) {
+            vehicleThumbnailData['images'] = [
+              vehicleName + '-A',
+              vehicleName + '-B',
+              vehicleName + '-C',
+              vehicleName + '-D'
+            ];
+            vehicleThumbnailData['imagesFallbacks'] = [
+              'unknown_Gor77-A',
+              'unknown_Gor77-B',
+              'unknown_Gor77-C',
+              'unknown_Gor77-D'
+            ];
+          }
+          // Generowanie członów ET41
+          else if (vehicleString.startsWith('ET41')) {
+            vehicleThumbnailData['images'] = [vehicleName + '-A', vehicleName + '-B'];
+            vehicleThumbnailData['imagesFallbacks'] = ['unknown_ET41-A', 'unknown_ET41-B'];
+          }
+          // Generowanie pozostałych pojazdów
+          else {
+            let fallbackVehicleImage = 'unknown_cargo';
+
+            if (/^(EP|EU)/.test(vehicleName)) fallbackVehicleImage = 'unknown_train';
+            else if (/^(SM42)/.test(vehicleName)) fallbackVehicleImage = 'unknown_SM42';
+            else if (/(\d{3}a|(Bau|Gor)\d{2}|304C)_/.test(vehicleName))
+              fallbackVehicleImage = 'unknown_passenger';
+
+            vehicleThumbnailData['images'] = [vehicleName];
+            vehicleThumbnailData['imagesFallbacks'] = [fallbackVehicleImage];
+          }
+
+          if (this.tractionOnly) vehicleThumbnailData['images'].length = 1;
+
+          return vehicleThumbnailData;
+        });
     }
   },
 
   methods: {
-    getVehicleThumbnailURL(locoType: string, suffix?: string) {
+    onImageError(event: Event, fallbackImage: string) {      
-      return `https://static.spythere.eu/thumbnails/${locoType}${suffix}.png`;
+      (event.target as HTMLImageElement).src = `/images/${fallbackImage}.png`;
-    },
-
-    onImageError(event: Event, stockName: string) {
-      let fallbackName = '';
-
-      const isLoco = /.-\d{3}/.test(stockName);
-
-      if (isLoco) {
-        if (/^\d?EN\d{2}/.test(stockName)) fallbackName = 'loco-ezt';
-        else if (/^SN\d{2}/.test(stockName)) fallbackName = 'loco-szt';
-        else if (/^\d{0,}?E/.test(stockName)) fallbackName = 'loco-e';
-        else fallbackName = 'loco-s';
-      } else {
-        const isCarPassenger = /(\d{3}a|(Bau|Gor)\d{2}|304C)_/.test(stockName);
-
-        fallbackName += 'car-';
-        fallbackName += isCarPassenger ? 'passenger' : 'cargo';
-      }
-
-      (event.target as HTMLImageElement).src = `/images/icon-${fallbackName}.png`;
     }
   }
 });
@@ -170,10 +197,10 @@ img.traction-only {
   max-width: 100%;
 }
 
-p {
+.stock-text {
   text-align: center;
   color: #aaa;
-  font-size: 0.95em;
+  font-size: 0.9em;
-  margin-bottom: 1em;
+  margin-bottom: 0.25em;
 }
 </style>

src/components/JournalView/JournalTimetables/TimetableStops.vue

@@ -1,23 +1,41 @@
 <template>
-  <div class="stop-list" v-if="showExtraInfo == true">
+  <div class="timetable-stops">
-    <span
+    <div class="stop-list">
-      v-for="(stop, i) in timetableStops.filter((_, i) =>
+      <span
-        !showExtraInfo ? i == 0 || i == timetableStops.length - 1 : true
+        v-for="(stop, i) in timetableStops.filter((_, i) =>
-      )"
+          !showExtraInfo ? i == 0 || i == timetableStops.length - 1 : true
-      class="stop-list-item"
+        )"
-      :key="stop.stopName"
+        class="stop-list-item"
-      :data-confirmed="stop.confirmed"
+        :key="stop.stopName"
-    >
+        :data-confirmed="stop.confirmed"
-      <span v-if="i > 0">
+      >
-        &gt;
+        <span v-if="i > 0">
-        <span v-if="!showExtraInfo && i == 1 && timetableStops.length > 2">
+          &gt;
-          ... (+{{ timetableStops.length - 2 }}) &gt;
+          <span v-if="!showExtraInfo && i == 1 && timetableStops.length > 2">
+            ... (+{{ timetableStops.length - 2 }}) &gt;
+          </span>
+        </span>
+
+        <span class="stop-name">{{ stop.stopName }}</span>
+        <span v-html="stop.html"></span>
+      </span>
+    </div>
+
+    <div class="path-details" v-if="showExtraInfo && timetablePathDetails">
+      <span
+        v-for="(pathData, i) in timetablePathDetails"
+        :data-visited="pathData.isVisited"
+        :data-next-visited="
+          i < timetablePathDetails.length - 1 && timetablePathDetails[i + 1].isVisited
+        "
+      >
+        <span class="path-arrival" v-if="pathData.arrival">/ {{ pathData.arrival }} &RightArrow; </span>
+        <b class="path-scenery">{{ pathData.sceneryName }}</b>
+        <span class="path-departure" v-if="pathData.departure">
+          &RightArrow; {{ pathData.departure }}&nbsp;
         </span>
       </span>
-
+    </div>
-      <span class="stop-name">{{ stop.stopName }}</span>
-      <span v-html="stop.html"></span>
-    </span>
   </div>
 </template>
 
@@ -42,6 +60,24 @@ export default defineComponent({
   },
 
   computed: {
+    timetablePathDetails() {
+      if (!this.timetable.path || this.timetable.path == '') return null;
+
+      return this.timetable.path.split(';').map((pathEl, i) => {
+        const [arrival, name, departure] = pathEl.split(',');
+        const sceneryName = name.split(' ').slice(0, -1).join(' ');
+        const sceneryHash = name.split(' ').pop()?.replace('.sc', '') ?? '';
+
+        return {
+          arrival,
+          sceneryName,
+          sceneryHash,
+          departure,
+          isVisited: this.timetable.visitedSceneries?.includes(sceneryHash) ?? false
+        };
+      });
+    },
+
     timetableStops() {
       const timetable = this.timetable;
 
@@ -94,13 +130,14 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.stop-list {
+.timetable-stops {
   word-wrap: break-word;
   gap: 0.25em;
   font-size: 0.95em;
-
   color: #adadad;
+}
 
+.stop-list {
   &-item[data-confirmed='true'] {
     color: lightgreen;
 
@@ -109,4 +146,19 @@ export default defineComponent({
     }
   }
 }
+
+.path-details {
+  margin-top: 0.5em;
+}
+
+.path-details > span[data-visited='true'] {
+  .path-arrival,
+  .path-scenery {
+    color: lightgreen;
+  }
+
+  &[data-next-visited='true'] .path-departure {
+    color: lightgreen;
+  }
+}
 </style>

src/components/SceneryView/SceneryTimetable.vue

@@ -213,7 +213,10 @@ export default defineComponent({
     const mainStore = useMainStore();
 
     const chosenCheckpoint = ref(
-      props.station?.generalInfo?.checkpoints[0] ?? props.station?.name ?? ''
+      props.station?.generalInfo?.checkpoints[0] ??
+        props.station?.name ??
+        route.query['station']?.toString() ??
+        ''
     );
 
     return {
@@ -233,12 +236,14 @@ export default defineComponent({
     },
 
     sceneryTimetables(): SceneryTimetableRow[] {
-      if (!this.station) return [];
       if (!this.onlineScenery) return [];
 
+      const sceneryName = this.$route.query['station']?.toString().replace(/_/g, ' ') ?? '';
+
       return this.onlineScenery.scheduledTrains
         .filter(
           (ct) =>
+            ct.timetablePathElement.stationName == sceneryName &&
             ct.train.region == this.mainStore.region.id &&
             this.chosenCheckpoint &&
             ct.checkpointStop.stopNameRAW.toLowerCase() == this.chosenCheckpoint.toLowerCase()
@@ -247,75 +252,18 @@ export default defineComponent({
           const trainStopStatus = getTrainStopStatus(
             ct.checkpointStop,
             ct.train.currentStationName,
-            this.station!.name
+            sceneryName
           );
 
-          const trainStopIndex =
-            ct.train.timetableData?.followingStops.findIndex(
-              (stop) => stop.stopName == ct.checkpointStop.stopName
-            ) ?? -1;
-
-          let prevStationName = '',
-            nextStationName = '';
-
-          let departureLine: string | null = null;
-          let arrivingLine: string | null = null;
-
-          let prevDepartureLine: string | null = null,
-            nextArrivalLine: string | null = null;
-
-          if (trainStopIndex > -1 && ct.train.timetableData?.followingStops !== undefined) {
-            for (let i = trainStopIndex; i >= 0; i--) {
-              const stop = ct.train.timetableData.followingStops[i];
-
-              if (
-                /strong|podg\.|pe\./g.test(stop.stopName) &&
-                !prevStationName &&
-                i <= trainStopIndex - 1
-              )
-                prevStationName = stop.stopNameRAW.replace(/,.*/g, '');
-
-              if (
-                stop.arrivalLine != null &&
-                !arrivingLine &&
-                !/-|_|it|sbl/gi.test(stop.arrivalLine)
-              ) {
-                arrivingLine = stop.arrivalLine;
-                prevDepartureLine =
-                  ct.train.timetableData.followingStops[i - 1]?.departureLine || null;
-              }
-            }
-
-            for (let i = trainStopIndex; i < ct.train.timetableData.followingStops.length; i++) {
-              const stop = ct.train.timetableData.followingStops[i];
-
-              if (
-                /strong|podg\.|pe\./g.test(stop.stopName) &&
-                !nextStationName &&
-                i > trainStopIndex
-              )
-                nextStationName = stop.stopNameRAW.replace(/,.*/g, '');
-
-              if (
-                stop.departureLine &&
-                !departureLine &&
-                !/-|_|it|sbl/gi.test(stop.departureLine)
-              ) {
-                departureLine = stop.departureLine;
-                nextArrivalLine = ct.train.timetableData.followingStops[i + 1]?.arrivalLine || null;
-              }
-            }
-          }
-
           return {
             checkpointStop: ct.checkpointStop,
             train: ct.train,
-            prevDepartureLine,
+            prevDepartureLine: ct.previousSceneryElement?.departureRouteExt ?? null,
-            nextArrivalLine,
+            nextArrivalLine: ct.nextSceneryElement?.arrivalRouteExt ?? null,
-            departureLine,
+            departureLine: ct.timetablePathElement.departureRouteExt ?? null,
-            arrivingLine,
+            arrivingLine: ct.timetablePathElement.arrivalRouteExt ?? null,
-            prevStationName,
+            prevStationName: ct.previousSceneryElement?.stationName ?? null,
-            nextStationName,
+            nextStationName: ct.nextSceneryElement?.stationName ?? null,
             status: trainStopStatus
           };
         })

src/store/apiStore.ts

@@ -51,6 +51,12 @@ export const useApiStore = defineStore('apiStore', {
       // Static data
       this.fetchDonatorsData();
       this.fetchStationsGeneralInfo();
+
+      // Ponowne pobieranie danych po ServiceWorkerze
+      setTimeout(() => {
+        this.fetchStationsGeneralInfo();
+      }, Math.floor(Math.random() * 500) + 1000);
+
       this.fetchVehiclesInfo();
     },
 

src/store/mainStore.ts

@@ -96,7 +96,17 @@ export const useMainStore = defineStore('mainStore', {
                   followingStops: timetable.stopList,
                   routeDistance: timetable.stopList[timetable.stopList.length - 1].stopDistance,
                   sceneries: timetable.sceneries,
-                  sceneryNames: sceneryNames.reverse()
+                  sceneryNames: sceneryNames.reverse(),
+                  timetablePath: timetable.path.split(';').map((pathElementString) => {
+                    const [arrival, station, departure] = pathElementString.split(',');
+
+                    return {
+                      arrivalRouteExt: arrival,
+                      departureRouteExt: departure,
+                      stationName: station.split(' ').slice(0, -1).join(' '),
+                      stationHash: station.split(' ').slice(-1).join(' ')
+                    };
+                  })
                 }
               : undefined
           } as Train;
@@ -110,21 +120,39 @@ export const useMainStore = defineStore('mainStore', {
           } else sceneriesTrains.set(train.currentStationName, [trainObj]);
 
           // Checkpoints trains map
-          timetable?.stopList.forEach((stop, i) => {
+          if (trainObj.timetableData) {
-            if (/strong|podg\.|pe\./.test(stop.stopName)) {
+            let currentSceneryIndex = 0;
-              const checkpointTrain: CheckpointTrain = {
+            const timetablePath = trainObj.timetableData.timetablePath;
-                train: trainObj,
-                checkpointStop: stop
-              };
 
-              if (checkpointsTrains.has(stop.stopNameRAW.toLowerCase())) {
+            trainObj.timetableData.followingStops.forEach((stop, i) => {
-                checkpointsTrains.set(stop.stopNameRAW.toLowerCase(), [
+              if (/strong|podg|pe/.test(stop.stopName)) {
-                  ...checkpointsTrains.get(stop.stopNameRAW.toLowerCase())!,
+                const checkpointTrain: CheckpointTrain = {
-                  checkpointTrain
+                  train: trainObj,
-                ]);
+                  checkpointStop: stop,
-              } else checkpointsTrains.set(stop.stopNameRAW.toLowerCase(), [checkpointTrain]);
+
-            }
+                  previousSceneryElement:
-          });
+                    currentSceneryIndex > 0 ? timetablePath[currentSceneryIndex - 1] : null,
+
+                  nextSceneryElement:
+                    currentSceneryIndex < timetablePath.length - 1
+                      ? timetablePath[currentSceneryIndex + 1]
+                      : null,
+
+                  timetablePathElement: timetablePath[currentSceneryIndex]
+                };
+
+                if (checkpointsTrains.has(stop.stopNameRAW.toLowerCase())) {
+                  checkpointsTrains.set(stop.stopNameRAW.toLowerCase(), [
+                    ...checkpointsTrains.get(stop.stopNameRAW.toLowerCase())!,
+                    checkpointTrain
+                  ]);
+                } else checkpointsTrains.set(stop.stopNameRAW.toLowerCase(), [checkpointTrain]);
+              }
+
+              if (timetablePath[currentSceneryIndex].departureRouteExt == stop.departureLine)
+                currentSceneryIndex++;
+            });
+          }
 
           return trainObj;
         });
@@ -252,8 +280,10 @@ export const useMainStore = defineStore('mainStore', {
 
           if (!scheduledTrains) return;
 
-          scheduledTrains.forEach(({ train, checkpointStop }) => {
+          scheduledTrains.forEach(({ train, checkpointStop, timetablePathElement, ...v }) => {
-            scenery.scheduledTrains.push({ train, checkpointStop });
+            if (scenery.name != timetablePathElement.stationName) return;
+
+            scenery.scheduledTrains.push({ train, checkpointStop, timetablePathElement, ...v });
 
             if (uniqueTrainIds.includes(train.id) || train.region != this.region.id) return;
 

src/typings/api.ts

@@ -195,6 +195,8 @@ export namespace API {
       TWR: boolean;
       SKR: boolean;
       sceneries: string[];
+
+      path: string;
     }
   }
 
@@ -249,16 +251,14 @@ export namespace API {
       hashesString?: string;
       currentSceneryName?: string;
       currentSceneryHash?: string;
-
       routeSceneries?: string;
-
       checkpointArrivals?: string[];
       checkpointDepartures?: string[];
-
       checkpointArrivalsScheduled?: string[];
       checkpointDeparturesScheduled?: string[];
-
       checkpointStopTypes?: string[];
+      visitedSceneries?: string[];
+      path: string;
     }
 
     export type Response = Data[];

src/typings/common.ts

@@ -39,6 +39,13 @@ export interface RegionCounters {
   timetablesCount: number;
 }
 
+export interface TimetablePathElement {
+  arrivalRouteExt?: string;
+  departureRouteExt?: string;
+  stationName: string;
+  stationHash: string;
+}
+
 export interface Train {
   id: string;
   modalId: string;
@@ -73,6 +80,7 @@ export interface Train {
     routeDistance: number;
     sceneries: string[];
     sceneryNames: string[];
+    timetablePath: TimetablePathElement[];
   };
 }
 
@@ -188,6 +196,9 @@ export interface TrainStop {
 export interface CheckpointTrain {
   checkpointStop: TrainStop;
   train: Train;
+  timetablePathElement: TimetablePathElement;
+  previousSceneryElement: TimetablePathElement | null;
+  nextSceneryElement: TimetablePathElement | null;
 }
 
 // Vehicles Data

vite.config.ts

@@ -26,7 +26,7 @@ export default defineConfig({
           {
             urlPattern:
               /^https:\/\/stacjownik.spythere.eu\/api\/(getVehicles|getDonators|getSceneries)/i,
-            handler: 'NetworkFirst',
+            handler: 'StaleWhileRevalidate',
             options: {
               cacheName: 'stacjownik-api-cache',
               cacheableResponse: {
@@ -34,19 +34,6 @@ export default defineConfig({
               }
             }
           },
-          {
-            urlPattern: /^https:\/\/static.spythere.eu\/.*/i,
-            handler: 'StaleWhileRevalidate',
-            options: {
-              cacheName: 'spythere-static-cache',
-              cacheableResponse: {
-                statuses: [0, 200]
-              },
-              expiration: {
-                maxEntries: 100
-              }
-            }
-          }
         ]
       },
       devOptions: {