Merge pull request #117 from Spythere/development

v1.28.5

package.json

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

src/components/App/AppHeader.vue

@@ -111,7 +111,7 @@ export default defineComponent({
     isChristmas() {
       const date = new Date();
 
-      return date.getUTCMonth() == 11 && date.getUTCDate() >= 24 && date.getUTCDate() <= 26;
+      return date.getUTCMonth() == 11 && date.getUTCDate() >= 20 && date.getUTCDate() <= 31;
     }
   }
 });

src/components/Tooltip/VehiclePreviewTooltip.vue

@@ -1,11 +1,7 @@
 <template>
   <div class="tooltip-content">
     <div class="image-box">
-      <div v-if="imageState == 'loading'" class="loading-info">
+      <Loading 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"
@@ -34,8 +30,11 @@
 import { defineComponent } from 'vue';
 import { useTooltipStore } from '../../store/tooltipStore';
 import { useApiStore } from '../../store/apiStore';
+import Loading from '../Global/Loading.vue';
 
 export default defineComponent({
+  components: { Loading },
+
   data() {
     return {
       tooltipStore: useTooltipStore(),
@@ -60,9 +59,12 @@ export default defineComponent({
     },
 
     onImageError(e: Event) {
+      if (!e.target || !(e.target instanceof HTMLImageElement) || this.imageState == 'error')
+        return;
+
       this.imageState = 'error';
 
-      (e.target as HTMLElement).style.display = 'none';
+      e.target.src = '/images/no-vehicle-image.png';
     }
   },
 
@@ -99,14 +101,13 @@ export default defineComponent({
 
 .image-box {
   position: relative;
-  min-height: 150px;
+  min-height: 170px;
 }
 
 .loading-info {
   position: absolute;
   left: 50%;
-  top: 50%;
+  top: 35%;
-  font-size: 1.15em;
   transform: translate(-50%, -50%);
 }