feature: wczytywanie składów; poprawki stylistyki

src/components/tabs/StockGeneratorTab.vue

@@ -63,8 +63,6 @@
           @click="toggleCarExclusion(carType)"
         >
           {{ carType }}
-
-          <!-- <span>X</span> -->
         </button>
       </div>
 

src/components/tabs/StockListTab.vue

@@ -1,21 +1,5 @@
 <template>
   <section class="stock-list">
-    <!-- <div class="stock_actions">
-      <label class="file-label">
-        <input
-          type="file"
-          accept=".con, .txt"
-          ref="conFile"
-          style="position: fixed; top: -100%"
-          @change="uploadStock"
-        />
-        <div class="btn">ZAŁADUJ PLIK</div>
-      </label>
-
-      <button class="btn" @click="store.stockSectionMode = 'number-generator'">GENERUJ NUMER</button>
-      <button class="btn" @click="store.stockSectionMode = 'stock-generator'">LOSUJ SKŁAD</button>
-    </div> -->
-
     <div class="stock_controls" :data-disabled="store.chosenStockListIndex == -1">
       <b class="no">
         POJAZD NR <span class="text--accent">{{ store.chosenStockListIndex + 1 }}</span> &nbsp;
@@ -50,21 +34,20 @@
     </div>
 
     <div class="stock_actions">
-      <button class="btn" :data-disabled="stockIsEmpty" :disabled="stockIsEmpty" @click="downloadStock">
+      <label class="file-label">
-        POBIERZ PLIK
+        <div class="btn">WCZYTAJ</div>
-      </button>
+        <input type="file" @change="uploadStock" ref="conFile" />
+      </label>
+
+      <button class="btn" :data-disabled="stockIsEmpty" :disabled="stockIsEmpty" @click="downloadStock">POBIERZ</button>
 
       <button class="btn" :data-disabled="stockIsEmpty" :disabled="stockIsEmpty" @click="copyToClipboard">
-        KOPIUJ JAKO TEKST
+        SKOPIUJ
       </button>
 
-      <button class="btn" :data-disabled="stockIsEmpty" :disabled="stockIsEmpty" @click="resetStock">
+      <button class="btn" :data-disabled="stockIsEmpty" :disabled="stockIsEmpty" @click="resetStock">ZRESETUJ</button>
-        ZRESETUJ LISTĘ
-      </button>
 
-      <button class="btn" :data-disabled="stockIsEmpty" :disabled="stockIsEmpty" @click="shuffleCars">
+      <button class="btn" :data-disabled="stockIsEmpty" :disabled="stockIsEmpty" @click="shuffleCars">PRZETASUJ</button>
-        TASUJ WAGONY
-      </button>
     </div>
 
     <div class="stock_specs">
@@ -362,7 +345,8 @@ export default defineComponent({
     },
 
     uploadStock() {
-      const files = (this.$refs['conFile'] as HTMLInputElement).files;
+      const inputEl = this.$refs['conFile'] as HTMLInputElement;
+      const files = inputEl.files;
 
       if (files?.length != 1) return;
 
@@ -378,6 +362,8 @@ export default defineComponent({
       };
 
       reader.onerror = (err) => console.log(err);
+
+      inputEl.value = '';
     },
 
     onDragStart(vehicleIndex: number) {
@@ -471,15 +457,9 @@ export default defineComponent({
   label.file-label {
     text-align: center;
     cursor: pointer;
-    padding: 0;
 
-    input:focus-visible + div {
+    input {
-      outline: 1px solid white;
+      display: none;
-      color: $accentColor;
-    }
-
-    input:hover + div {
-      color: $accentColor;
     }
   }
 }

src/mixins/stockMixin.ts

@@ -85,10 +85,18 @@ export default defineComponent({
 
       stockArray.forEach((type, i) => {
         let vehicle: Vehicle | null = null;
-        if (i == 0) vehicle = this.store.locoDataList.find((loco) => loco.type == stockArray[0]) || null;
+        let vehicleCargo: ICargo | null = null;
-        else vehicle = this.store.carDataList.find((car) => car.type == type) || null;
 
-        this.addVehicle(vehicle);
+        if (/^(EU|EP|ET|SM|EN|2EN|SN)/.test(type))
+          vehicle = this.store.locoDataList.find((loco) => loco.type == type) || null;
+        else {
+          const [carType, cargo] = type.split(':');
+          vehicle = this.store.carDataList.find((car) => car.type == carType) || null;
+
+          if (cargo) vehicleCargo = vehicle?.cargoList.find((c) => c.id == cargo) || null;
+        }
+
+        this.addVehicle(vehicle, vehicleCargo);
       });
     },
   },

src/styles/global.scss

@@ -94,6 +94,10 @@ button {
 
   transition: all 250ms;
 
+  &:hover {
+    color: $accentColor;
+  }
+
   &.btn--outline {
     background: none;
     font-weight: bold;