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

src/components/StockGeneratorTab.vue

@@ -33,11 +33,25 @@
       </div>
 
       <h2>WYBRANE WAGONY</h2>
-      <p>Wagony posiadające wybrane ładunki. Kliknij na pojazd, aby został wyłączony z losowania.</p>
+      <p>
+        Wagony posiadające wybrane ładunki. Najedź na nazwę, aby zobaczyć podgląd wagonu. Kliknij, aby wyłączyć z
+        losowania (tylko podświetlone nazwy będą uwzględnione).
+      </p>
 
       <div class="generator_vehicles">
-        <button :data-chosen="true" class="btn" v-for="car in chosenCarTypes" @click="previewCar(car)">
-          {{ car }}
+        <button
+          :data-chosen="true"
+          :data-excluded="excludedCarTypes.includes(carType)"
+          class="btn"
+          v-for="carType in computedChosenCarTypes"
+          :key="carType"
+          @mouseover="onMouseHover(carType)"
+          @mouseleave="onMouseLeave"
+          @click="toggleCarExclusion(carType)"
+        >
+          {{ carType }}
+
+          <!-- <span>X</span> -->
         </button>
       </div>
     </div>
@@ -49,7 +63,6 @@ import { defineComponent } from 'vue';
 import { useStore } from '../store';
 
 import generatorData from '../data/generatorData.json';
-import { ICarWagon } from '../types';
 
 export default defineComponent({
   name: 'stock-generator',
@@ -63,22 +76,52 @@ export default defineComponent({
   data() {
     return {
       generatorData,
-      chosenCarTypes: new Set() as Set<string>,
+      chosenCarTypes: [] as string[],
+      excludedCarTypes: [] as string[],
+
       chosenCargoTypes: [] as string[],
+
+      previewTimeout: -1,
     };
   },
 
+  computed: {
+    computedChosenCarTypes() {
+      return new Set<string>(this.chosenCarTypes.sort((c1, c2) => (c1 > c2 ? 1 : -1)));
+    },
+  },
+
   methods: {
+    onMouseHover(type: string) {
+      window.clearTimeout(this.previewTimeout);
+
+      this.previewTimeout = window.setTimeout(() => {
+        this.previewCar(type);
+      }, 400);
+    },
+
+    onMouseLeave() {
+      window.clearTimeout(this.previewTimeout);
+    },
+
     previewCar(type: string) {
-      this.store.chosenCar = this.store.carDataList.find((c) => c.constructionType == type) || null;
-      this.store.chosenVehicle = this.store.chosenCar;
+      const c = this.store.carDataList.find((c) => c.type.startsWith(type)) || null;
+
+      this.store.chosenVehicle = c;
+      this.store.chosenCar = c;
+      this.store.chosenLoco = null;
+      this.store.chosenCargo = null;
+
+      if (c) this.store.chosenCarUseType = c?.useType;
+
+      // this.store.chosenVehicle = this.store.chosenCar;
     },
 
     toggleCargoChosen(cargoType: string, vehicles: string[]) {
       if (this.chosenCargoTypes.includes(cargoType)) {
         vehicles.forEach((v) => {
           const [type] = v.split(':');
-          this.chosenCarTypes.delete(type);
+          this.chosenCarTypes.splice(this.chosenCarTypes.indexOf(type), 1);
         });
 
         this.chosenCargoTypes.splice(this.chosenCargoTypes.indexOf(cargoType), 1);
@@ -89,11 +132,16 @@ export default defineComponent({
 
       vehicles.forEach((v) => {
         const [type] = v.split(':');
-        const cars = this.store.carDataList.filter((c) => c.constructionType == type);
+        // const cars = this.store.carDataList.filter((c) => c.constructionType == type);
 
-        this.chosenCarTypes.add(type);
+        this.chosenCarTypes.push(type);
       });
     },
+
+    toggleCarExclusion(type: string) {
+      if (!this.excludedCarTypes.includes(type)) this.excludedCarTypes.push(type);
+      else this.excludedCarTypes = this.excludedCarTypes.filter((c) => c != type);
+    },
   },
 });
 </script>
@@ -128,25 +176,44 @@ h2 {
   }
 }
 
-.generator_cargo, .generator_vehicles {
+.generator_cargo,
+.generator_vehicles {
   display: grid;
   gap: 0.5em;
   grid-template-columns: repeat(4, 1fr);
-  
+
   button {
+    position: relative;
     padding: 0.5em;
-  
+
     text-align: center;
     text-transform: uppercase;
     font-weight: bold;
-  
+
     background-color: $secondaryColor;
-  
+
     &[data-chosen='true'] {
       background-color: $accentColor;
       color: black;
+
+      box-shadow: 0 0 5px 1px $accentColor;
+    }
+
+    &[data-excluded='true'] {
+      background-color: gray;
+      box-shadow: none;
+    }
+
+    span {
+      position: absolute;
+      right: 0;
+      top: 50%;
+      padding: 5px;
+
+      transform: translate(-8px, -50%);
+      background-color: $bgColor;
+      color: white;
     }
   }
 }
-
 </style>