Merge pull request #33 from Spythere/development

hotfix: caching

package.json

@@ -1,12 +1,12 @@
 {
   "name": "pojazdownik",
-  "version": "1.8.6",
+  "version": "1.8.8",
   "private": true,
   "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vue-tsc --noEmit && vite build",
-    "preview": "yarn build && vite preview --port 4174",
+    "preview": "yarn build && vite preview",
     "type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false",
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
     "format": "prettier --write src/"

src/components/cards/RealStockCard.vue

@@ -76,7 +76,7 @@
               <div class="thumbnail-container">
                 <div>{{ stockType }}</div>
                 <img
-                  :src="`https://rj.td2.info.pl/dist/img/thumbnails/${stockType}.png`"
+                  :src="`https://static.spythere.eu/thumbnails/${stockType}.png`"
                   :title="stockType"
                   style="opacity: 0"
                   @error="(e) => onStockItemError(e, stockType)"

src/components/sections/TrainImageSection.vue

@@ -1,19 +1,22 @@
 <template>
   <section class="train-image-section">
     <div v-if="store.chosenVehicle">
-      <img
-        :src="getThumbnailURL(store.chosenVehicle.type, 'small')"
-        :data-preview-active="store.chosenVehicle !== null"
-        :data-sponsor-only="
-          store.chosenVehicle.sponsorOnlyTimestamp &&
-          store.chosenVehicle.sponsorOnlyTimestamp > Date.now()
-        "
-        :data-team-only="store.chosenVehicle.teamOnly"
-        @click="onImageClick"
-        @keydown.enter="onImageClick"
-        @error="onImageError"
-        tabindex="0"
-      />
+      <div class="image-wrapper">
+        <img
+          :src="getThumbnailURL(store.chosenVehicle.type, 'small')"
+          :data-preview-active="store.chosenVehicle !== null"
+          :data-sponsor-only="
+            store.chosenVehicle.sponsorOnlyTimestamp &&
+            store.chosenVehicle.sponsorOnlyTimestamp > Date.now()
+          "
+          :data-team-only="store.chosenVehicle.teamOnly"
+          @click="onImageClick"
+          @keydown.enter="onImageClick"
+          @load="onImageLoad"
+          @error="onImageError"
+          tabindex="0"
+        />
+      </div>
 
       <div class="image-info">
         <b class="text--accent">{{ store.chosenVehicle.type }}</b> &bull;
@@ -77,6 +80,10 @@ import { computed, defineComponent } from 'vue';
 import { useStore } from '../../store';
 import { isTractionUnit } from '../../utils/vehicleUtils';
 import imageMixin from '../../mixins/imageMixin';
+import { watch } from 'vue';
+import { storeToRefs } from 'pinia';
+import { Ref } from 'vue';
+import { ref } from 'vue';
 
 export default defineComponent({
   mixins: [imageMixin],
@@ -89,9 +96,17 @@ export default defineComponent({
 
   setup() {
     const store = useStore();
+    const { chosenVehicle } = storeToRefs(store);
+
+    const imageStatus = ref('none') as Ref<'none' | 'loading' | 'loaded' | 'error'>;
+
+    watch(chosenVehicle, () => {
+      imageStatus.value = 'loading';
+    });
 
     return {
       store,
+      imageStatus,
       chosenVehicle: computed(() => store.chosenVehicle),
     };
   },
@@ -104,6 +119,11 @@ export default defineComponent({
       if (el.src == '/images/placeholder.jpg') return;
 
       el.src = '/images/placeholder.jpg';
+      this.imageStatus = 'error';
+    },
+
+    onImageLoad(e: Event) {
+      this.imageStatus = 'loaded';
     },
 
     onImageClick(e: Event) {
@@ -132,6 +152,7 @@ export default defineComponent({
   min-height: 250px;
 
   & > div {
+    position: relative;
     max-width: 100%;
     width: 380px;
   }
@@ -154,18 +175,25 @@ img {
   }
 }
 
-.placeholder {
-  height: 250px;
-
-  background-color: $bgColor;
+.image-wrapper {
+  position: relative;
+  min-height: 220px;
 }
 
-.sponsor-only {
-  color: $sponsorColor;
-}
+.loading-placeholder {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
 
-.team-only {
-  color: $teamColor;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  background-color: #2b2b2b;
+  padding: 1em;
+  font-size: 1.2em;
 }
 
 .image-info {
@@ -181,6 +209,20 @@ img {
   font-weight: bold;
 }
 
+.placeholder {
+  height: 250px;
+
+  background-color: $bgColor;
+}
+
+.sponsor-only {
+  color: $sponsorColor;
+}
+
+.team-only {
+  color: $teamColor;
+}
+
 @media screen and (max-width: $breakpointMd) {
   .train-image-section {
     justify-content: center;

src/components/tabs/StockListTab.vue

@@ -146,7 +146,7 @@
             <template #href>
               <a
                 target="_blank"
-                href="https://docs.google.com/spreadsheets/d/1KVa5vn2d8XGkXQFwbavVudwKqUQxbLOucHWs2VYqAUE"
+                href="https://docs.google.com/spreadsheets/d/1BvTU-U7huIaEheov22TrhTtROUM4MwVfdbq03GVAEM8"
               >
                 {{ $t('stocklist.acceptable-mass-docs') }}
               </a>

src/components/utils/StockThumbnails.vue

@@ -21,7 +21,7 @@
 
       <img
         draggable="false"
-        :src="`https://rj.td2.info.pl/dist/img/thumbnails/${stock.vehicleRef.type}.png`"
+        :src="`https://static.spythere.eu/thumbnails/${stock.vehicleRef.type}.png`"
         :alt="stock.vehicleRef.type"
         :title="stock.vehicleRef.type"
         @error="stockImageError($event, stock)"

src/constants/numberGeneratorData.json

@@ -27,20 +27,8 @@
   },
   "categoriesRules": {
     "EI": [null, "00", "99"],
-    "EC": [null, "001", "049"],
-    "EN": [null, "001", "049"],
-    "MP": [null, "050", "169"],
-    "RO": [null, "200", "999"],
-    "RP": [null, "050", "169"],
-    "PW": ["6", "000", "899"],
-    "TK": ["3", "000", "899"],
-    "TM": ["4", "000", "899"],
-    "LT": ["5", "000", "899"]
-  },
-  "categoriesNextVersion": {
-    "EI": [null, "00", "99"],
-    "EC": [null, "001", "049"],
-    "EN": [null, "001", "049"],
+    "EC": [null, "000", "049"],
+    "EN": [null, "000", "049"],
 
     "RO": [null, "200", "999"],
     "RP": [null, "050", "169"],

src/constants/speedLimits.json

@@ -47,6 +47,26 @@
     "cargo": null,
     "none": 160
   },
+  "ET22": {
+    "passenger": {
+      "650000": 125
+    },
+    "cargo": {
+      "1200000": 100,
+      "3100000": 70
+    },
+    "none": 125
+  },
+  "201E": {
+    "passenger": {
+      "650000": 125
+    },
+    "cargo": {
+      "1200000": 100,
+      "3100000": 70
+    },
+    "none": 125
+  },
   "ET41": {
     "passenger": {
       "700000": 125

src/store.ts

@@ -97,7 +97,9 @@ export const useStore = defineStore({
 
     stockSupportsColdStart: (state) => {
       if (state.stockList.length == 0) return false;
+
       if (!isTractionUnit(state.stockList[0].vehicleRef)) return false;
+      else if (state.stockList.length > 1) return false;
 
       const headingLoco = state.stockList[0];
 

vite.config.ts

@@ -8,6 +8,9 @@ export default defineConfig({
   server: {
     port: 2138,
   },
+  preview: {
+    port: 4138,
+  },
   plugins: [
     vue(),
     VitePWA({
@@ -25,25 +28,10 @@ export default defineConfig({
 
         runtimeCaching: [
           {
-            urlPattern: new RegExp('^https://rj.td2.info.pl/dist/img/thumbnails/*', 'i'),
-            handler: 'CacheFirst',
+            urlPattern: /^https:\/\/.*\.spythere\.eu\/.*/i,
+            handler: 'StaleWhileRevalidate',
             options: {
-              cacheName: 'swdr-images-cache',
-              expiration: {
-                maxEntries: 50,
-                maxAgeSeconds: 60 * 60 * 24, // <== 1 day
-              },
-              cacheableResponse: {
-                statuses: [200],
-              },
-            },
-          },
-
-          {
-            urlPattern: new RegExp('^https://stacjownik.spythere.eu/vehicles', 'i'),
-            handler: 'NetworkFirst',
-            options: {
-              cacheName: 'vehicles-cache',
+              cacheName: 'spythere-cache',
             },
           },
         ],