From 8dc670b6311f51fa88cff907a43402f1cfae95d8 Mon Sep 17 00:00:00 2001 From: Spythere Date: Mon, 15 Apr 2024 16:39:46 +0200 Subject: [PATCH] chore(preview): adjustments in image loading & fallback --- public/images/placeholder.jpg | Bin 5298 -> 2181 bytes src/components/sections/TrainImageSection.vue | 138 ++++++++---------- src/mixins/stockPreviewMixin.ts | 2 - src/store.ts | 3 - 4 files changed, 63 insertions(+), 80 deletions(-) diff --git a/public/images/placeholder.jpg b/public/images/placeholder.jpg index de080be243a90681e27053ca54599a3da5a0da6a..4f77fd94215165c79df66f9d774670c8170ace08 100644 GIT binary patch literal 2181 zcmeHGJ!lhQ7=FI{Y0~79-nExl#NmY2DP2^=Ev3u>omq(W%sxaiCId zxY^W%H8Xq8@_mGY0faG%KHI6+rlylQbc}B=L7jjXW1?3_+TMjwp;&hSW>IqSv zN0#an9rXJ>eTGzdQZ2wC#R)8-0^8F=yaVD;w7spDjvV$bfVr8VIASIV!pb0c?vfvdoyjdm`719*H57~ZPcuI;TO(^V>!fX@$r z&@3?Y90;7>@r`Ptj{C2G9C literal 5298 zcmeHKPi)&%82_9!YuBb*x}{?p9E>;6fI6|AI8Cf&-PS)_(85X^U;`w0v0qYeu^nu; zNhc&YAnn3o5=i{HP~gA?p`GBs0fcs)goFeeAjG(EK|%t-1x?|5&YyNu+W}YdWXC_h z_xry0z2Enqm9KTZ^&`X{oh!@%hi!tJ0BGHWk7k=@1)xxP7={2~5cY6k;1IF<02c|K zWyJS(@Oi|CJDd<=nG3-vK3%*O#BqGSjJJ7dAh3NMF>4d(kooLBPZo;vypoWmL@JGz zl9JM7NmDYsoYhnnFJyCT>#;B&t((znOTJ&%l1bZ35W^|cgzi|$CaEXogp`CMQ_VWj zFHoN^)2eCbg3CFD_`(e@5@J4y==%-B8a!w^>F{P4}n9k~HF-PT;D9dtA z%BEFWO34Cm=-Qm)S_Jc8TBJ&o=j*g8@Jui5_s0 z$qex+n)Oa!seAe!krYkB$Z)k<(J{=*>fNa990kccWqLU6YUfNW(ib|YX7a&~)QHaZ zcV6(w3dK~lJM|@ES1F!U+%4@MbCcv{CNl&xW}x0V6dhA3mUSg1s;LYq>vS@cmQeJz zz2{W?265@}D()my0QXVw!Ql^g^nIwyY%EbG9;zV9lBi_5DrAHt#-3ycvAvAsohuB+ zHXPb69lrz&_C72}`F`sw&{v?ZKwp8r0(}Mke+sOZCe+4%ISnj4T0e!Z6sD)2n_oCH zS2#V3bs0ctt)^Svz%c;J_T7b(C-}4Hp5_OChG94WF-U_-bgy1qoGY<{X!G{x*FmKP zUy01u=A12iM-41NuvFubaZInfKH}#QXBvK;;WrV-@z0up_(Q}KE(VDBI_odD@h=Ql z1I$W9h`XhQXobW>wV=n06w_{u>VG#xFnb-jK84@7VE!#05EzEVDFaz!_TyJ!!b4v?|%bO zLak0;1985oER4-W1aiVjDk zBf}#jqr3LRMt6ci*#rUwr?b_;{Q-;lgM$5ZM`t?2M0&jK=?U zYkdJ@LvV$g2y9(YZ+I@hQd_+nf>RxG8R1MrfU}
-
+
-
-
- {{ store.chosenVehicle.type }} • - - {{ - $t( - `preview.${isLocomotive(store.chosenVehicle) ? store.chosenVehicle.group : store.chosenVehicle.group}` - ) - }} - - -
-
- {{ store.chosenVehicle.length }}m | {{ (store.chosenVehicle.weight / 1000).toFixed(1) }}t - | {{ store.chosenVehicle.maxSpeed }} km/h -
- -
- {{ $t('preview.cabin') }} {{ store.chosenVehicle.cabinType }} -
- -
+
+ {{ store.chosenVehicle.type }} • + {{ - store.chosenVehicle.group == 'wagon-freight' - ? $t(`usage.${store.chosenVehicle.constructionType}`) - : `${$t('preview.construction')} ${store.chosenVehicle.constructionType}` + $t( + `preview.${isTractionUnit(store.chosenVehicle) ? store.chosenVehicle.group : store.chosenVehicle.group}` + ) }} + + +
+
+ {{ store.chosenVehicle.length }}m | + {{ (store.chosenVehicle.weight / 1000).toFixed(1) }}t | + {{ store.chosenVehicle.maxSpeed }} km/h +
+ +
+ {{ $t('preview.cabin') }} {{ store.chosenVehicle.cabinType }} +
+ +
+ {{ + store.chosenVehicle.group == 'wagon-freight' + ? $t(`usage.${store.chosenVehicle.constructionType}`) + : `${$t('preview.construction')} ${store.chosenVehicle.constructionType}` + }} +
+ + + + {{ + $t('preview.team-only') + }}
- - - - {{ - $t('preview.team-only') - }}
-
{{ $t('preview.desc') }}
+
+ placeholder image +
{{ $t('preview.desc') }}
+
@@ -66,7 +67,7 @@ import { computed, defineComponent } from 'vue'; import { useStore } from '../../store'; import { isTractionUnit } from '../../utils/vehicleUtils'; -import { ILocomotive, IVehicle } from '../../types'; +import { IVehicle } from '../../types'; import imageMixin from '../../mixins/imageMixin'; export default defineComponent({ @@ -87,18 +88,8 @@ export default defineComponent({ }; }, - watch: { - chosenVehicle(vehicle: IVehicle, prevVehicle: IVehicle) { - if (vehicle && vehicle.type != prevVehicle?.type) { - this.store.imageLoading = true; - } - }, - }, - methods: { - onImageLoad() { - this.store.imageLoading = false; - }, + isTractionUnit, onImageError(e: Event) { const el = e.target as HTMLImageElement; @@ -107,10 +98,6 @@ export default defineComponent({ el.src = '/images/placeholder.jpg'; }, - isLocomotive(vehicle: IVehicle): vehicle is ILocomotive { - return isTractionUnit(vehicle); - }, - onImageClick(e: Event) { const target = e.target as HTMLElement; @@ -131,22 +118,25 @@ export default defineComponent({ .train-image-section { display: flex; flex-direction: column; + align-items: center; text-align: center; - grid-row: 3; - grid-column: 1; - margin-top: 1em; - height: 22em; + height: 250px; + + & > div { + max-width: 100%; + width: 380px; + } } img { - max-width: 380px; width: 100%; - height: 100%; - border: 1px solid white; - cursor: zoom-in; + &[data-preview-active='true'] { + border: 1px solid white; + cursor: zoom-in; + } &[data-sponsor-only='true'] { border: 1px solid $sponsorColor; @@ -157,18 +147,16 @@ img { } } -.sponsor-only { - color: $sponsorColor; -} +.placeholder { + height: 250px; -.team-only { - color: $teamColor; + background-color: $bgColor; } .image-info { font-size: 1.1em; padding: 0.5em; - margin: 0.5em auto; + // margin: 0.5em auto; line-height: 1.35; width: 100%; diff --git a/src/mixins/stockPreviewMixin.ts b/src/mixins/stockPreviewMixin.ts index ee327ac..0f24882 100644 --- a/src/mixins/stockPreviewMixin.ts +++ b/src/mixins/stockPreviewMixin.ts @@ -14,8 +14,6 @@ export default defineComponent({ methods: { previewStock(stock: IStock) { - // if (this.store.chosenVehicle?.imageSrc != stock.imgSrc) this.store.imageLoading = true; - if (stock.isLoco) { const chosenLoco = this.store.locoDataList.find((v) => v.type == stock.type) || null; this.store.chosenVehicle = chosenLoco; diff --git a/src/store.ts b/src/store.ts index a080ca6..8bc24da 100644 --- a/src/store.ts +++ b/src/store.ts @@ -34,8 +34,6 @@ export const useStore = defineStore({ isColdStart: false, isDoubleManned: false, - imageLoading: false, - chosenLocoGroup: 'loco-electric' as LocoGroupType, chosenCarGroup: 'wagon-passenger' as WagonGroupType, @@ -126,7 +124,6 @@ export const useStore = defineStore({ try { const vehiclesData = (await http.get('/vehicles')).data; this.vehiclesData = vehiclesData; - } catch (error) { console.error(error); }