Merge pull request #114 from Spythere/development

v1.28.3

package.json

@@ -1,6 +1,6 @@
 {
   "name": "stacjownik",
-  "version": "1.28.2",
+  "version": "1.28.3",
   "private": true,
   "type": "module",
   "scripts": {

src/App.vue

@@ -6,6 +6,7 @@
     />
 
     <Tooltip />
+    
     <AppHeader :current-lang="currentLang" @change-lang="changeLang" />
 
     <main class="app_main">
@@ -16,21 +17,12 @@
       </router-view>
     </main>
 
-    <footer class="app_footer">
-      &copy;
-      <a href="https://td2.info.pl/profile/?u=20777" target="_blank">Spythere</a>
-      {{ new Date().getUTCFullYear() }} |
-      <button class="btn--text" @click="() => (isUpdateCardOpen = true)">
-        v{{ VERSION }}{{ isOnProductionHost ? '' : 'dev' }}
-      </button>
-
-      <br />
-      <a href="https://discord.gg/x2mpNN3svk">
-        <img src="/images/icon-discord.png" alt="" />&nbsp;<b>{{ $t('footer.discord') }}</b>
-      </a>
-
-      <div style="display: none">&int; ukryta taktyczna całka do programowania w HTMLu</div>
-    </footer>
+    <AppFooter
+      :version="VERSION"
+      :is-on-production-host="isOnProductionHost"
+      :is-update-card-open="isUpdateCardOpen"
+      @open-update-card="() => (isUpdateCardOpen = true)"
+    />
   </div>
 </template>
 
@@ -38,7 +30,7 @@
 import { defineComponent } from 'vue';
 import axios from 'axios';
 
-import { version } from '.././package.json';
+import { version } from '../package.json';
 import { Status } from './typings/common';
 import { useMainStore } from './store/mainStore';
 import { useApiStore } from './store/apiStore';
@@ -51,6 +43,7 @@ import Tooltip from './components/Tooltip/Tooltip.vue';
 import UpdateCard from './components/App/UpdateCard.vue';
 
 import StorageManager from './managers/storageManager';
+import AppFooter from './components/App/AppFooter.vue';
 
 const STORAGE_VERSION_KEY = 'app_version';
 
@@ -59,6 +52,7 @@ export default defineComponent({
     Clock,
     StatusIndicator,
     AppHeader,
+    AppFooter,
     UpdateCard,
     Tooltip
   },

src/components/App/AppFooter.vue

@@ -0,0 +1,41 @@
+<template>
+  <footer class="app_footer">
+    &copy;
+    <a href="https://td2.info.pl/profile/?u=20777" target="_blank">Spythere</a>
+    {{ new Date().getUTCFullYear() }} |
+    <button class="btn--text" @click="openUpdateCard">
+      v{{ version }}{{ isOnProductionHost ? '' : 'dev' }}
+    </button>
+
+    <br />
+    <a href="https://discord.gg/x2mpNN3svk">
+      <img src="/images/icon-discord.png" alt="" />&nbsp;<b>{{ $t('footer.discord') }}</b>
+    </a>
+
+    <div style="display: none">&int; ukryta taktyczna całka do programowania w HTMLu</div>
+  </footer>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  emits: ['openUpdateCard'],
+  props: {
+    isUpdateCardOpen: {
+      type: Boolean,
+      required: true
+    },
+    version: String,
+    isOnProductionHost: Boolean
+  },
+
+  methods: {
+    openUpdateCard() {
+      this.$emit('openUpdateCard');
+    }
+  }
+});
+</script>
+
+<style scoped></style>

src/components/Global/VehicleThumbnail.vue

@@ -8,7 +8,7 @@
     <div class="stock-images">
       <img
         v-for="(thumbnailImage, imageIndex) in images"
-        :src="`https://static.spythere.eu/thumbnails/v2/${thumbnailImage}.png`"
+        :src="`https://stacjownik.spythere.eu/static/thumbnails/${thumbnailImage}.png`"
         height="60"
         loading="lazy"
         data-tooltip-type="VehiclePreviewTooltip"

src/components/Tooltip/VehiclePreviewTooltip.vue

@@ -1,23 +1,22 @@
 <template>
   <div class="tooltip-content">
-    <div v-if="imageState == 'loading'" class="loading-info">
-      {{ $t('vehicle-preview.loading') }}
+    <div class="image-box">
+      <div v-if="imageState == 'loading'" class="loading-info">
+        {{ $t('vehicle-preview.loading') }}
+      </div>
+
+      <div v-if="imageState == 'error'" class="loading-info">{{ $t('vehicle-preview.error') }}</div>
+
+      <img
+        v-if="tooltipStore.type"
+        @load="onImageLoad"
+        @error="onImageError"
+        width="300"
+        height="176"
+        :src="`https://stacjownik.spythere.eu/static/images/${vehicleName}--300px.jpg`"
+      />
     </div>
 
-    <div v-if="imageState == 'error'">{{ $t('vehicle-preview.error') }}</div>
-
-    <img
-      v-if="tooltipStore.type"
-      @load="onImageLoad"
-      @error="onImageError"
-      width="300"
-      height="176"
-      class="rounded-md w-full h-auto"
-      :src="`https://static.spythere.eu/images/${vehicleName}--300px.jpg`"
-    />
-
-    <div v-if="imageState == 'error'" class="error-placeholder"></div>
-
     <div class="vehicle-name">
       {{ vehicleName.replace(/_/g, ' ') }}
       <span v-if="vehicleCargo">({{ vehicleCargo.id }})</span>
@@ -98,10 +97,17 @@ export default defineComponent({
   border-radius: 0.5em;
 }
 
+.image-box {
+  position: relative;
+  min-height: 150px;
+}
+
 .loading-info {
   position: absolute;
   left: 50%;
-  transform: translateX(-50%);
+  top: 50%;
+  font-size: 1.15em;
+  transform: translate(-50%, -50%);
 }
 
 img {

src/locales/pl.json

@@ -63,7 +63,7 @@
     "RP": "wojewódzki pospieszny",
     "RO": "wojewódzki osobowy",
     "RM": "wojewódzki osobowy międzynarodowy",
-    "RA": "wojewódzki osobowy algomeracyjny",
+    "RA": "wojewódzki osobowy aglomeracyjny",
 
     "PW": "pasażerski próżny - służbowy",
     "PX": "pasażerski próżny próbny",

src/store/apiStore.ts

@@ -59,11 +59,7 @@ export const useApiStore = defineStore('apiStore', {
       if (t >= this.nextDataCheckTime) {
         this.fetchDonatorsData();
         this.fetchVehiclesInfo();
-
-        // Revalidation after staling
-        this.fetchStationsGeneralInfo().then(() => {
-          this.fetchStationsGeneralInfo();
-        });
+        this.fetchStationsGeneralInfo();
 
         this.nextDataCheckTime = t + 3600000;
       }