chore: updated locales, expanded storage entry format

src/components/tabs/StockListTab.vue

@@ -523,12 +523,18 @@ export default defineComponent({
       if (!entryName) return;
 
       if (entryName in this.store.storageStockData) {
-        const overwriteData = confirm(this.$t('stocklist.prompt-bookmark-overwrite'));
+        const overwriteDataConfirm = confirm(this.$t('stocklist.prompt-bookmark-overwrite'));
 
-        if (!overwriteData) return;
+        if (!overwriteDataConfirm) return;
+
+        this.store.storageStockData[entryName].updatedAt = new Date();
       }
 
-      this.store.storageStockData[entryName] = this.store.stockString;
+      this.store.storageStockData[entryName] = {
+        id: entryName,
+        createdAt: new Date(),
+        stockString: this.store.stockString,
+      };
 
       try {
         localStorage.setItem('savedStockData', JSON.stringify(this.store.storageStockData));

src/components/tabs/StorageTab.vue

@@ -1,17 +1,14 @@
 <template>
   <section class="tab storage-tab">
     <div class="tab_header">
-      <h2>ZAPISANE SKŁADY</h2>
+      <h2>{{ $t('storage.title') }}</h2>
-      <h3>Zarządzaj składami zapisanymi w pamięci przeglądarki</h3>
+      <h3>{{ $t('storage.subtitle') }}</h3>
     </div>
 
     <div class="tab_content">
       <div class="storage-list-wrapper">
         <transition-group name="storage-list-anim" tag="ul" class="storage-list">
-          <li
+          <li v-for="(storageEntry, stockName) in store.storageStockData" :key="stockName">
-            v-for="(stockString, stockName) in store.storageStockData"
-            :key="stockName"
-          >
             <div class="storage-item-top">
               <button class="btn btn--text btn-name" @click="chooseStorageStock(stockName)">
                 {{ stockName }}
@@ -34,13 +31,17 @@
 
             <div class="storage-item-expandable" v-if="expandedEntries.includes(stockName)">
               {{
-                stockString
+                storageEntry.stockString
                   .split(';')
                   .map((s) => s.split(/:|,/)[0])
                   .join(' + ')
               }}
             </div>
           </li>
+
+          <li v-if="Object.keys(store.storageStockData).length == 0" class="storage-no-entries">
+            {{ $t('storage.no-entires') }}
+          </li>
         </transition-group>
       </div>
     </div>
@@ -75,8 +76,18 @@ export default defineComponent({
     expandedEntries: [] as string[],
   }),
 
+  computed: {
+    storageStockDataList() {
+      // return Object.keys(this.store.storageStockData).
+    },
+  },
+
   methods: {
     removeStockIndexFromStorage(stockName: string) {
+      let removeConfirm = confirm(this.$t('storage.remove-confirm'));
+
+      if (!removeConfirm) return;
+
       delete this.store.storageStockData[stockName];
       this.store.chosenStorageStockName = '';
 
@@ -89,7 +100,7 @@ export default defineComponent({
 
     chooseStorageStock(stockName: string) {
       try {
-        this.loadStockFromString(this.store.storageStockData[stockName]);
+        this.loadStockFromString(this.store.storageStockData[stockName].stockString);
         this.store.chosenStorageStockName = stockName;
         this.$router.push('/');
       } catch (error) {
@@ -156,6 +167,13 @@ ul.storage-list > li {
   margin-top: 0.5em;
 }
 
+.storage-no-entries {
+  padding: 1em;
+  font-size: 1.15em;
+  font-weight: bold;
+  text-align: center;
+}
+
 .storage-list-anim {
   &-move,
   &-enter-active,
@@ -174,6 +192,7 @@ ul.storage-list > li {
 
   &-leave-active {
     position: absolute;
+    width: 100%;
   }
 }
 </style>

src/locales/en.json

@@ -208,6 +208,12 @@
     "search-stock": "Search by vehicles",
     "action-reset": "RESET"
   },
+  "storage": {
+    "title": "BOOKMARKED COMPOSITIONS",
+    "subtitle": "Manage your rolling stock compositions saved locally in the browser memory",
+    "remove-confirm": "Are you sure you want to delete this entry?",
+    "no-entires": "No bookmarked compositions - save a new one in the Stock tab"
+  },
   "cargo": {
     "kontenery": "containers",
     "chłodnia": "refrigerator",

src/locales/pl.json

@@ -208,6 +208,12 @@
     "search-stock": "Szukaj po pojazdach",
     "action-reset": "RESETUJ"
   },
+  "storage": {
+    "title": "ZAPISANE SKŁADY",
+    "subtitle": "Zarządzaj składami zapisanymi lokalnie w pamięci przeglądarki",
+    "remove-confirm": "Czy na pewno chcesz usunąć ten wpis?",
+    "no-entires": "Brak zapisanych składów - dodaj nowy przez zakładkę ze Składem"
+  },
   "cargo": {
     "kontenery": "kontenery",
     "chłodnia": "chłodnia",

src/store.ts

@@ -9,6 +9,7 @@ import {
   LocoGroupType,
   WagonGroupType,
   IVehicleData,
+  StorageStockEntry,
 } from './types/common.types';
 import { defineStore } from 'pinia';
 import {
@@ -46,8 +47,6 @@ export const useStore = defineStore({
     stockList: [] as IStock[],
     cargoOptions: [] as any[][],
 
-    storageStockList: [] as IStock[][],
-
     swapVehicles: false,
 
     chosenStockListIndex: -1,
@@ -61,7 +60,7 @@ export const useStore = defineStore({
 
     lastFocusedElement: null as HTMLElement | null,
 
-    storageStockData: {} as Record<string, string>,
+    storageStockData: {} as Record<string, StorageStockEntry>,
     chosenStorageStockName: '',
 
     compatibleSimulatorVersion: '2024.3.1',

src/types/common.types.ts

@@ -97,3 +97,10 @@ export interface IVehicleLocoProps {
   coldStart: boolean;
   doubleManned: boolean;
 }
+
+export interface StorageStockEntry {
+  id: string;
+  createdAt: Date;
+  updatedAt?: Date;
+  stockString: string;
+}