Merge pull request #111 from Spythere/development

fix: vehicle thumbnail names

src/components/Global/StockList.vue

@@ -1,15 +1,13 @@
 <template>
-  <div class="stock-list">
+  <div class="list-wrapper">
-    <ul>
+    <ul class="stock-list">
-      <li v-for="({ images, imagesFallbacks, vehicleString }, i) in thumbnailNames" :key="i">
+      <li v-for="({ images, imagesFallbacks, vehicleString }, i) in thumbnailNames">
-        <span>
+        <VehicleThumbnail
-          <VehicleThumbnail
+          :key="i"
-            v-for="(thumbnailImage, imageIndex) in images"
+          :vehicle-string="vehicleString"
-            :vehicle-string="vehicleString"
+          :images="images"
-            :img-name="thumbnailImage"
+          :image-fallbacks="imagesFallbacks"
-            :fallback-name="imagesFallbacks[imageIndex]"
+        />
-          />
-        </span>
       </li>
     </ul>
   </div>
@@ -148,32 +146,21 @@ export default defineComponent({
           return vehicleThumbnailData;
         });
     }
-  },
-
-  methods: {
-    onImageError(event: Event, fallbackImage: string) {
-      (event.target as HTMLImageElement).src = `/images/${fallbackImage}.png`;
-    }
   }
 });
 </script>
 
 <style lang="scss" scoped>
-.stock-list {
+
+.list-wrapper {
   display: flex;
   justify-content: center;
 }
 
-.stock-list ul {
+.stock-list {
   display: flex;
   align-items: flex-end;
   overflow: auto;
   margin: 0 auto;
 }
-
-ul > li > span {
-  display: flex;
-  align-items: flex-end;
-  cursor: crosshair;
-}
 </style>

src/components/Global/VehicleThumbnail.vue

@@ -5,26 +5,28 @@
       <small v-if="vehicleCargo">({{ vehicleCargo }})</small>
     </div>
 
-    <img
+    <div class="stock-images">
-      :src="`https://static.spythere.eu/thumbnails/v2/${imgName}.png`"
+      <img
-      height="60"
+        v-for="(thumbnailImage, imageIndex) in images"
-      loading="lazy"
+        :src="`https://static.spythere.eu/thumbnails/v2/${thumbnailImage}.png`"
-      data-tooltip-type="VehiclePreviewTooltip"
+        height="60"
-      :data-tooltip-content="vehicleString"
+        loading="lazy"
-      @error="onImageError"
+        data-tooltip-type="VehiclePreviewTooltip"
-      @load="onImageLoad"
+        :data-tooltip-content="vehicleString"
-    />
+        @error="onImageError($event, imageFallbacks[imageIndex])"
+        @load="onImageLoad"
+      />
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, Ref, ref } from 'vue';
+import { computed, PropType, Ref, ref } from 'vue';
 
 const props = defineProps({
   vehicleString: { type: String, required: true },
-  imgName: { type: String, required: true },
+  images: { type: Object as PropType<string[]>, required: true },
-  fallbackName: { type: String, required: true },
+  imageFallbacks: { type: Object as PropType<string[]>, required: true }
-  placeholderName: String
 });
 
 const thumbRef = ref(null) as Ref<HTMLElement | null>;
@@ -33,8 +35,8 @@ const imgStatus = ref('loading');
 const vehicleName = computed(() => props.vehicleString.split(':')[0].replace(/_/g, ' '));
 const vehicleCargo = computed(() => props.vehicleString.split(':')[1]);
 
-function onImageError(event: Event) {
+function onImageError(event: Event, fallbackImage: string) {
-  (event.target as HTMLImageElement).src = `/images/${props.fallbackName}.png`;
+  (event.target as HTMLImageElement).src = `/images/${fallbackImage}.png`;
   imgStatus.value = 'error';
 }
 
@@ -49,6 +51,7 @@ function onImageLoad() {
 
 <style lang="scss" scoped>
 .vehicle-thumbnail {
+  
   position: relative;
   opacity: 0;
   transition: opacity 100ms ease-in-out;
@@ -66,4 +69,13 @@ function onImageLoad() {
   margin-bottom: 0.25em;
   padding: 0.25em 0;
 }
+
+.stock-images {
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+  cursor: crosshair;
+
+  padding: 0.5em 0;
+}
 </style>