chore: moved stock computations to store

src/components/tabs/StockListTab.vue

@@ -289,27 +289,6 @@ export default defineComponent({
       return this.store.realCompositionList.find((rc) => rc.stockString == currentStockString);
     },
 
-    stockString() {
-      if (this.store.stockList.length == 0) return '';
-
-      const includeColdStart = this.store.isColdStart && this.store.stockSupportsColdStart;
-      const includeDoubleManned =
-        this.store.isDoubleManned && this.store.stockSupportsDoubleManning;
-
-      return this.store.stockList
-        .map((stock, i) => {
-          let stockTypeStr =
-            isTractionUnit(stock.vehicleRef) || !stock.cargo
-              ? stock.vehicleRef.type
-              : `${stock.vehicleRef.type}:${stock.cargo.id}`;
-
-          if (i == 0 && (includeColdStart || includeDoubleManned))
-            return `${stockTypeStr},${includeColdStart ? 'c' : ''}${includeDoubleManned ? 'd' : ''}`;
-
-          return stockTypeStr;
-        })
-        .join(';');
-    },
 
     stockIsEmpty() {
       return this.store.stockList.length == 0;
@@ -371,7 +350,7 @@ export default defineComponent({
     isTractionUnit,
 
     copyToClipboard() {
-      navigator.clipboard.writeText(this.stockString);
+      navigator.clipboard.writeText(this.store.stockString);
 
       setTimeout(() => {
         alert(this.$t('stocklist.alert-copied'));
@@ -481,7 +460,7 @@ export default defineComponent({
 
       if (!fileName) return;
 
-      const blob = new Blob([this.stockString]);
+      const blob = new Blob([this.store.stockString]);
       const file = fileName + '.con';
 
       var e = document.createEvent('MouseEvents'),

src/components/tabs/StorageTab.vue

@@ -7,28 +7,47 @@
 
     <div class="tab_content">
       <div class="tab_actions">
-        <button class="btn btn--image">
+        <button
+          class="btn btn--image"
+          @click="saveStockDataToStorage"
+          :disabled="store.stockList.length == 0"
+          :data-disabled="store.stockList.length == 0"
+        >
           <FolderArrowDownIcon />
           ZAPISZ OBECNY SKŁAD
         </button>
-        <button class="btn btn--image">
+        <button
+          class="btn btn--image"
+          @click="removeStockIndexFromStorage"
+          :disabled="currentStockIndex == -1"
+          :data-disabled="currentStockIndex == -1"
+        >
           <TrashIcon />
           <span>USUŃ ZAPISANY SKŁAD</span>
         </button>
       </div>
+
+      <ul class="storage-stock-list">
+        <li v-for="(stockList, i) in storageStockData" :key="i">
+        </li>
+      </ul>
     </div>
   </section>
 </template>
 
 <script setup lang="ts">
-import { defineComponent, onActivated, Reactive, reactive } from 'vue';
+import { onActivated, Reactive, reactive, ref } from 'vue';
 import { IStock } from '../../types/common.types';
 import { FolderArrowDownIcon, TrashIcon } from '@heroicons/vue/20/solid';
+import { useStore } from '../../store';
+
+const store = useStore();
 
 let storageStockData: Reactive<IStock[][]> = reactive([]);
+const currentStockIndex = ref(-1);
 
 onActivated(() => {
-  loadStockDataFromStorage();
+  // loadStockDataFromStorage();
 });
 
 function loadStockDataFromStorage() {
@@ -46,21 +65,28 @@ function loadStockDataFromStorage() {
   }
 }
 
-function saveStockDataToStorage(stockList: IStock[]) {
-  storageStockData.push(stockList);
+function saveStockDataToStorage() {
+  if (store.stockList.length == 0) return;
+
+  storageStockData.push(store.stockList);
 
   try {
     localStorage.setItem('savedStockData', JSON.stringify(storageStockData));
+    currentStockIndex.value = storageStockData.length;
   } catch (error) {
     console.error('Wystąpił błąd podczas zapisywania składu do localStorage!', error);
+    storageStockData.pop();
   }
 }
 
-function removeStockIndexFromStorage(stockIndex: number) {
-  storageStockData.splice(stockIndex, 1);
+function removeStockIndexFromStorage() {
+  if (currentStockIndex.value == -1) return;
+
+  storageStockData.splice(currentStockIndex.value, 1);
 
   try {
     localStorage.setItem('savedStockData', JSON.stringify(storageStockData));
+    currentStockIndex.value = currentStockIndex.value - 1;
   } catch (error) {
     console.error('Wystąpił błąd podczas usuwania składu z localStorage!', error);
   }

src/store.ts

@@ -18,6 +18,8 @@ import {
   isTrainPassenger,
   locoDataList,
   maxStockSpeed,
+  stockSupportsColdStart,
+  stockSupportsDoubleManning,
   totalLength,
   totalWeight,
 } from './utils/vehicleUtils';
@@ -75,6 +77,30 @@ export const useStore = defineStore({
     isTrainPassenger: (state) => isTrainPassenger(state.stockList),
     acceptableWeight: (state) => acceptableWeight(state.stockList),
 
+    stockSupportsColdStart: (state) => stockSupportsColdStart(state.stockList),
+    stockSupportsDoubleManning: (state) => stockSupportsDoubleManning(state.stockList),
+
+    stockString: (state) => {
+      if (state.stockList.length == 0) return '';
+
+      const coldStartActive = stockSupportsColdStart(state.stockList);
+      const doubleManningActive = stockSupportsDoubleManning(state.stockList);
+
+      return state.stockList
+        .map((stock, i) => {
+          let stockTypeStr =
+            isTractionUnit(stock.vehicleRef) || !stock.cargo
+              ? stock.vehicleRef.type
+              : `${stock.vehicleRef.type}:${stock.cargo.id}`;
+
+          if (i == 0)
+            return `${stockTypeStr},${coldStartActive ? 'c' : ''}${doubleManningActive ? 'd' : ''}`;
+
+          return stockTypeStr;
+        })
+        .join(';');
+    },
+
     realCompositionList: (state) => {
       if (!state.vehiclesData) return [];
 
@@ -96,32 +122,6 @@ export const useStore = defineStore({
         return acc;
       }, []);
     },
-
-    stockSupportsColdStart: (state) => {
-      if (state.stockList.length == 0) return false;
-
-      if (!isTractionUnit(state.stockList[0].vehicleRef)) return false;
-      else if (state.stockList.length > 1) return false;
-
-      const headingLoco = state.stockList[0];
-
-      return (
-        state.vehiclesData?.find((vehicle) => vehicle.name == headingLoco.vehicleRef.type)?.group
-          .locoProps?.coldStart ?? false
-      );
-    },
-
-    stockSupportsDoubleManning: (state) => {
-      if (state.stockList.length == 0) return false;
-      if (!isTractionUnit(state.stockList[0].vehicleRef)) return false;
-
-      const headingLoco = state.stockList[0];
-
-      return (
-        state.vehiclesData?.find((vehicle) => vehicle.name == headingLoco.vehicleRef.type)?.group
-          .locoProps?.doubleManned ?? false
-      );
-    },
   },
 
   actions: {

src/utils/vehicleUtils.ts

@@ -127,3 +127,19 @@ export function isTrainPassenger(stockList: IStock[]) {
     .filter((stock) => !isTractionUnit(stock.vehicleRef))
     .every((stock) => stock.vehicleRef.group === 'wagon-passenger');
 }
+
+export function stockSupportsColdStart(stockList: IStock[]) {
+  return (
+    stockList.length == 1 &&
+    isTractionUnit(stockList[0].vehicleRef) &&
+    stockList[0].vehicleRef.coldStart
+  );
+}
+
+export function stockSupportsDoubleManning(stockList: IStock[]) {
+  return (
+    stockList.length != 0 &&
+    isTractionUnit(stockList[0].vehicleRef) &&
+    stockList[0].vehicleRef.doubleManned
+  );
+}