chore: updated icons, storage tab layout

src/components/tabs/StockListTab.vue

@@ -4,12 +4,12 @@
       <div class="stock_actions">
         <button class="btn btn--image" @click="clickFileInput">
           <input type="file" @change="uploadStockFromFile" ref="conFile" accept=".con,.txt" />
-          <img src="/images/icon-upload.svg" alt="upload icon" />
+          <ArrowUpTrayIcon />
           {{ $t('stocklist.action-upload-file') }}
         </button>
 
         <button class="btn btn--image" @click="uploadStockFromClipboard">
-          <img src="/images/icon-upload.svg" alt="upload icon" />
+          <ArrowUpTrayIcon />
           {{ $t('stocklist.action-upload-clipboard') }}
         </button>
 
@@ -19,7 +19,7 @@
           :disabled="stockIsEmpty"
           @click="downloadStock"
         >
-          <img src="/images/icon-download.svg" alt="download icon" />
+          <ArrowDownTrayIcon />
           {{ $t('stocklist.action-download') }}
         </button>
 
@@ -29,7 +29,7 @@
           :disabled="stockIsEmpty"
           @click="copyToClipboard"
         >
-          <img src="/images/icon-copy.svg" alt="copy icon" />
+          <ClipboardDocumentIcon />
           {{ $t('stocklist.action-copy') }}
         </button>
 
@@ -39,7 +39,7 @@
           :disabled="stockIsEmpty"
           @click="resetStock"
         >
-          <img src="/images/icon-reset.svg" alt="reset icon" />
+          <ArrowUturnLeftIcon />
           {{ $t('stocklist.action-reset') }}
         </button>
 
@@ -49,7 +49,7 @@
           :disabled="stockIsEmpty"
           @click="shuffleCars"
         >
-          <img src="/images/icon-shuffle.svg" alt="shuffle icon" />
+          <ArrowPathIcon />
           {{ $t('stocklist.action-shuffle') }}
         </button>
       </div>
@@ -60,7 +60,7 @@
           :tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
           @click="moveUpStock(store.chosenStockListIndex)"
         >
-          <img :src="getIconURL('higher')" alt="move up vehicle" />
+          <ChevronUpIcon />
           {{ $t('stocklist.action-move-up') }}
         </button>
 
@@ -69,7 +69,7 @@
           :tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
           @click="moveDownStock(store.chosenStockListIndex)"
         >
-          <img :src="getIconURL('lower')" alt="move down vehicle" />
+          <ChevronDownIcon />
           {{ $t('stocklist.action-move-down') }}
         </button>
 
@@ -78,7 +78,7 @@
           :tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
           @click="removeStock(store.chosenStockListIndex)"
         >
-          <img :src="getIconURL('remove')" alt="remove vehicle" />
+          <TrashIcon />
           {{ $t('stocklist.action-remove') }}
         </button>
       </div>
@@ -239,10 +239,31 @@ import StockThumbnails from '../utils/StockThumbnails.vue';
 import stockMixin from '../../mixins/stockMixin';
 import Checkbox from '../common/Checkbox.vue';
 import { isTractionUnit } from '../../utils/vehicleUtils';
+import {
+  ArrowDownTrayIcon,
+  ArrowPathIcon,
+  ArrowUpTrayIcon,
+  ArrowUturnLeftIcon,
+  ChevronDownIcon,
+  ChevronUpIcon,
+  ClipboardDocumentIcon,
+  TrashIcon,
+} from '@heroicons/vue/20/solid';
 
 export default defineComponent({
   name: 'stock-list',
-  components: { StockThumbnails, Checkbox },
+  components: {
+    StockThumbnails,
+    Checkbox,
+    ArrowDownTrayIcon,
+    ArrowPathIcon,
+    ArrowUpTrayIcon,
+    ArrowUturnLeftIcon,
+    ChevronDownIcon,
+    ChevronUpIcon,
+    ClipboardDocumentIcon,
+    TrashIcon,
+  },
 
   mixins: [imageMixin, stockMixin, stockPreviewMixin],
 

src/components/tabs/StorageTab.vue

@@ -6,40 +6,71 @@
     </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
+      <div class="tab_actions">
+        <button class="btn btn--image">
+          <FolderArrowDownIcon />
+          ZAPISZ OBECNY SKŁAD
         </button>
-
-        <button
-          class="btn btn--image"
-        >
-          <img src="/images/icon-download.svg" alt="download icon" />
-          SKOPIUJ DO SCHOWKA
+        <button class="btn btn--image">
+          <TrashIcon />
+          <span>USUŃ ZAPISANY SKŁAD</span>
         </button>
       </div>
     </div>
   </section>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script setup lang="ts">
+import { defineComponent, onActivated, Reactive, reactive } from 'vue';
+import { IStock } from '../../types/common.types';
+import { FolderArrowDownIcon, TrashIcon } from '@heroicons/vue/20/solid';
 
-export default defineComponent({
-  name: 'storage-tab',
+let storageStockData: Reactive<IStock[][]> = reactive([]);
 
-  setup() {
-    return {};
-  },
+onActivated(() => {
+  loadStockDataFromStorage();
 });
+
+function loadStockDataFromStorage() {
+  const savedData = localStorage.getItem('savedStockData');
+
+  if (!savedData) {
+    localStorage.setItem('savedStockData', JSON.stringify([]));
+    return;
+  }
+
+  try {
+    storageStockData = JSON.parse(savedData);
+  } catch (error) {
+    console.error('Wystąpił błąd podczas przetwarzania danych o składach z localStorage!', error);
+  }
+}
+
+function saveStockDataToStorage(stockList: IStock[]) {
+  storageStockData.push(stockList);
+
+  try {
+    localStorage.setItem('savedStockData', JSON.stringify(storageStockData));
+  } catch (error) {
+    console.error('Wystąpił błąd podczas zapisywania składu do localStorage!', error);
+  }
+}
+
+function removeStockIndexFromStorage(stockIndex: number) {
+  storageStockData.splice(stockIndex, 1);
+
+  try {
+    localStorage.setItem('savedStockData', JSON.stringify(storageStockData));
+  } catch (error) {
+    console.error('Wystąpił błąd podczas usuwania składu z localStorage!', error);
+  }
+}
 </script>
 
 <style lang="scss" scoped>
 @use '@/styles/tab';
+
+.tab_actions {
+  grid-template-columns: repeat(2, 1fr);
+}
 </style>

src/styles/_global.scss

@@ -190,9 +190,9 @@ button {
     align-items: center;
     gap: 0.5em;
 
-    img {
-      width: 1.3em;
-      vertical-align: middle;
+    img, svg {
+      width: 20px;
+      height: 20px;
     }
   }