feature: ładowanie składów z pliku

src/components/StockListTab.vue

@@ -1,6 +1,17 @@
 <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>
@@ -350,6 +361,25 @@ export default defineComponent({
       a.dispatchEvent(e);
     },
 
+    uploadStock() {
+      const files = (this.$refs['conFile'] as HTMLInputElement).files;
+
+      if (files?.length != 1) return;
+
+      const reader = new FileReader();
+      reader.readAsText(files[0]);
+
+      reader.onload = (res) => {
+        const stockString = res.target?.result;
+
+        if (!stockString || typeof stockString !== 'string') return;
+
+        this.loadStockFromString(stockString);
+      };
+
+      reader.onerror = (err) => console.log(err);
+    },
+
     onDragStart(vehicleIndex: number) {
       this.draggedVehicleID = vehicleIndex;
     },
@@ -435,6 +465,21 @@ export default defineComponent({
   margin: 1em 0;
 
   grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+
+  label.file-label {
+    text-align: center;
+    cursor: pointer;
+    padding: 0;
+
+    input:focus-visible + div {
+      outline: 1px solid white;
+      color: $accentColor;
+    }
+
+    input:hover + div {
+      color: $accentColor;
+    }
+  }
 }
 
 .real-stock-info {

src/components/cards/RealStockCard.vue

@@ -88,25 +88,7 @@ export default defineComponent({
     },
 
     choseStock(name: string, type: string, number: string, stockString: string) {
-      const stockArray = stockString.split(';');
+      this.loadStockFromString(stockString);
-
-      this.store.stockList.length = 0;
-      this.store.chosenVehicle = null;
-      this.store.chosenCar = null;
-      this.store.chosenCargo = null;
-      this.store.chosenLoco = null;
-      this.store.chosenStockListIndex = -1;
-
-      this.store.swapVehicles = false;
-
-      stockArray.forEach((type, i) => {
-        let vehicle: Vehicle | null = null;
-        if (i == 0) vehicle = this.store.locoDataList.find((loco) => loco.type == stockArray[0]) || null;
-        else vehicle = this.store.carDataList.find((car) => car.type == type) || null;
-
-        this.addVehicle(vehicle);
-      });
-
       this.store.isRealStockListCardOpen = false;
     },
   },

src/mixins/stockMixin.ts

@@ -70,6 +70,27 @@ export default defineComponent({
 
       this.store.stockList.push(stockObj);
     },
+
+    loadStockFromString(stockString: string) {
+      const stockArray = stockString.split(';');
+
+      this.store.stockList.length = 0;
+      this.store.chosenVehicle = null;
+      this.store.chosenCar = null;
+      this.store.chosenCargo = null;
+      this.store.chosenLoco = null;
+      this.store.chosenStockListIndex = -1;
+
+      this.store.swapVehicles = false;
+
+      stockArray.forEach((type, i) => {
+        let vehicle: Vehicle | null = null;
+        if (i == 0) vehicle = this.store.locoDataList.find((loco) => loco.type == stockArray[0]) || null;
+        else vehicle = this.store.carDataList.find((car) => car.type == type) || null;
+
+        this.addVehicle(vehicle);
+      });
+    },
   },
 });
 

src/styles/global.scss

@@ -80,7 +80,7 @@ button {
   }
 }
 
-button.btn {
+.btn {
   padding: 0.4em 0.75em;
 
   outline: none;