From ea07f054b27486d1376e8a713d4e74a3243c2830 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Thu, 9 Feb 2023 19:18:15 +0100
Subject: [PATCH] =?UTF-8?q?feature:=20=C5=82adowanie=20sk=C5=82ad=C3=B3w?=
 =?UTF-8?q?=20z=20pliku?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/StockListTab.vue        | 45 ++++++++++++++++++++++++++
 src/components/cards/RealStockCard.vue | 20 +-----------
 src/mixins/stockMixin.ts               | 21 ++++++++++++
 src/styles/global.scss                 |  2 +-
 4 files changed, 68 insertions(+), 20 deletions(-)

diff --git a/src/components/StockListTab.vue b/src/components/StockListTab.vue
index 04ae9ec..856dc56 100644
--- a/src/components/StockListTab.vue
+++ b/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 {
diff --git a/src/components/cards/RealStockCard.vue b/src/components/cards/RealStockCard.vue
index f240cb0..7a79e53 100644
--- a/src/components/cards/RealStockCard.vue
+++ b/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.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.loadStockFromString(stockString);
       this.store.isRealStockListCardOpen = false;
     },
   },
diff --git a/src/mixins/stockMixin.ts b/src/mixins/stockMixin.ts
index 1728190..79f4cf8 100644
--- a/src/mixins/stockMixin.ts
+++ b/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);
+      });
+    },
   },
 });
 
diff --git a/src/styles/global.scss b/src/styles/global.scss
index 775d504..d8ae465 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -80,7 +80,7 @@ button {
   }
 }
 
-button.btn {
+.btn {
   padding: 0.4em 0.75em;
 
   outline: none;