Wybór ładunku, podgląd i wyłączanie z losowania

src/components/StockListTab.vue

@@ -118,6 +118,7 @@
       <div class="warning" v-if="tooManyLocomotives">Ten skład posiada za dużo pojazdów trakcyjnych!</div>
     </div>
 
+    <!-- Stock list -->
     <ul ref="list">
       <li v-if="store.stockList.length == 0" class="list-empty">
         <div class="stock-info">Lista pojazdów jest pusta!</div>
@@ -172,12 +173,13 @@ import TrainImage from './TrainImageSection.vue';
 import { useStore } from '../store';
 import warningsMixin from '../mixins/warningsMixin';
 import imageMixin from '../mixins/imageMixin';
+import stockPreviewMixin from '../mixins/stockPreviewMixin';
 
 export default defineComponent({
   name: 'stock-list',
   components: { TrainImage },
 
-  mixins: [warningsMixin, imageMixin],
+  mixins: [warningsMixin, imageMixin, stockPreviewMixin],
 
   setup() {
     const store = useStore();
@@ -230,41 +232,20 @@ export default defineComponent({
       }, 20);
     },
 
-    onListItemClick(vehicleID: number) {
-      const vehicle = this.store.stockList[vehicleID];
+    onListItemClick(stockID: number) {
+      const stock = this.store.stockList[stockID];
 
       this.store.chosenStockListIndex =
-        this.store.chosenStockListIndex == vehicleID && this.store.chosenVehicle?.type == vehicle.type ? -1 : vehicleID;
+        this.store.chosenStockListIndex == stockID && this.store.chosenVehicle?.type == stock.type ? -1 : stockID;
 
       if (this.store.chosenStockListIndex == -1) {
         this.store.chosenVehicle = null;
         return;
       }
 
-      if (this.store.chosenVehicle?.imageSrc != vehicle.imgSrc) this.store.imageLoading = true;
+      if (this.store.swapVehicles) this.store.swapVehicles = false;
 
-      if (this.store.showSupporter && !vehicle.supportersOnly) {
-        this.store.showSupporter = false;
-      }
-
-      if (vehicle.isLoco) {
-        const chosenLoco = this.store.locoDataList.find((v) => v.type == vehicle.type) || null;
-        this.store.chosenVehicle = chosenLoco;
-        this.store.chosenLoco = chosenLoco;
-        // this.store.chosenCargo = null;
-        this.store.chosenLocoPower = vehicle.useType;
-      } else {
-        const chosenCar = this.store.carDataList.find((v) => v.type == vehicle.type) || null;
-        this.store.chosenVehicle = chosenCar;
-        this.store.chosenCar = chosenCar;
-
-        this.store.chosenCargo = vehicle.cargo || null;
-        this.store.chosenCarUseType = vehicle.useType;
-      }
-
-      if (this.store.swapVehicles) {
-        this.store.swapVehicles = false;
-      }
+      this.previewStock(stock);
     },
 
     getCarSpecFromType(typeStr: string) {