feat: loading data from clipboard; error detection

src/components/tabs/NumberGeneratorTab.vue

@@ -224,8 +224,7 @@ const randomizeTrainNumber = (randomizeRegions = false) => {
 </script>
 
 <style lang="scss" scoped>
-
-
+@use '../../styles/tab';
 
 .category-select {
   select {

src/components/tabs/StockGeneratorTab.vue

@@ -1,9 +1,5 @@
 <template>
   <div class="stock-generator tab">
-    <div class="tab_header">
-      <h2>{{ $t('stockgen.title') }}</h2>
-    </div>
-
     <div class="tab_content">
       <div>
         <h2>{{ $t('stockgen.properties-title') }}</h2>

src/components/tabs/StockListTab.vue

@@ -1,15 +1,16 @@
 <template>
   <section class="stock-list-tab">
-    <div class="tab_header">
-      <h2>{{ $t('stocklist.title') }}</h2>
-    </div>
-
     <div class="tab_content">
       <div class="stock_actions">
         <button class="btn btn--image" @click="clickFileInput">
-          <input type="file" @change="uploadStock" ref="conFile" accept=".con,.txt" />
+          <input type="file" @change="uploadStockFromFile" ref="conFile" accept=".con,.txt" />
           <img src="/images/icon-upload.svg" alt="upload icon" />
-          {{ $t('stocklist.action-upload') }}
+          {{ $t('stocklist.action-upload-file') }}
+        </button>
+
+        <button class="btn btn--image" @click="uploadStockFromClipboard">
+          <img src="/images/icon-upload.svg" alt="upload icon" />
+          {{ $t('stocklist.action-upload-clipboard') }}
         </button>
 
         <button
@@ -471,7 +472,7 @@ export default defineComponent({
       a.dispatchEvent(e);
     },
 
-    uploadStock() {
+    uploadStockFromFile() {
       const inputEl = this.$refs['conFile'] as HTMLInputElement;
       const files = inputEl.files;
 
@@ -494,6 +495,23 @@ export default defineComponent({
       inputEl.value = '';
     },
 
+    async uploadStockFromClipboard() {
+      try {
+        const content = await navigator.clipboard.readText();
+        this.loadStockFromString(content);
+      } catch (error) {
+        switch (error) {
+          case 'stock-loading-error':
+            alert(this.$t('stocklist.stock-loading-error'));
+            break;
+
+          default:
+            alert(this.$t('stocklist.stock-clipboard-error'));
+            break;
+        }
+      }
+    },
+
     onDragStart(vehicleIndex: number) {
       this.draggedVehicleID = vehicleIndex;
     },
@@ -521,7 +539,6 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-
 @use '@/styles/tab';
 
 .tab_content {
@@ -571,7 +588,7 @@ export default defineComponent({
   display: grid;
   gap: 0.5em;
 
-  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
 
   button {
     width: 100%;

src/components/tabs/StorageTab.vue

@@ -0,0 +1,45 @@
+<template>
+  <section class="tab storage-tab">
+    <div class="tab_header">
+      <h2>ZAPISANE SKŁADY</h2>
+      <h3>Zarządzaj składami zapisanymi w pamięci przeglądarki</h3>
+    </div>
+
+    <div class="tab_content">
+      <div class="storage_actions">
+        <!-- :data-disabled="stockIsEmpty"
+        :disabled="stockIsEmpty"
+        @click="downloadStock" -->
+        <button
+          class="btn btn--image"
+        >
+          <img src="/images/icon-download.svg" alt="download icon" />
+          POBIERZ DO PLIKU
+        </button>
+
+        <button
+          class="btn btn--image"
+        >
+          <img src="/images/icon-download.svg" alt="download icon" />
+          SKOPIUJ DO SCHOWKA
+        </button>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'storage-tab',
+
+  setup() {
+    return {};
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@use '@/styles/tab';
+</style>

src/components/tabs/WikiListTab.vue

@@ -1,9 +1,5 @@
 <template>
   <section class="wiki-list tab">
-    <div class="tab_header">
-      <h2>{{ $t('wiki.title') }}</h2>
-    </div>
-
     <div class="tab_content">
       <div class="actions">
         <div class="action action-input">