refactor: auto update values

src/components/OrderList.vue

@@ -16,7 +16,6 @@
         <b>
           {{
             t('order-list.order-title', {
-              id: order.id,
               trainNo: order.orderData.header.A
             })
           }}
@@ -28,9 +27,22 @@
           :data-tooltip="t('order-list.warning-deprecated-version')"
           >&#9888;
         </span>
-        <br />
-        {{ t(`order-list.order-${order.createdAt ? 'added' : 'updated'}`) }}
-        {{ new Date(order.createdAt || order.updatedAt || 0).toLocaleString('pl-PL') }}
+
+        <div>
+          {{
+            t('order-list.order-subtitle', [
+              order.orderData.instructions
+                .filter((v) => v.active)
+                .map((v) => v.name)
+                .join(', ')
+            ])
+          }}
+        </div>
+
+        <div>
+          {{ t(`order-list.order-${order.createdAt ? 'added' : 'updated'}`) }}
+          {{ new Date(order.createdAt || order.updatedAt || 0).toLocaleString('pl-PL') }}
+        </div>
 
         <hr />
 
@@ -48,7 +60,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onActivated, Reactive, reactive } from 'vue';
+import { computed, onActivated, onMounted, Reactive, reactive } from 'vue';
 import { useStore } from '../store/store';
 import { IStorageOrderData, LocalStorageOrderLegacy } from '../types/orderTypes';
 import StorageManager from '../managers/storageManager';
@@ -64,13 +76,29 @@ function removeOrder(orderId: string) {
   StorageManager.removeValue(orderId);
 
   if (store.chosenLocalOrderId == orderId) store.chosenLocalOrderId = '';
-  storageOrderList.splice(storageOrderList.findIndex((o) => o.id == orderId));
+  console.log(storageOrderList);
+
+  const orderIndex = storageOrderList.findIndex((o) => o.id == orderId);
+  if (orderIndex != -1) storageOrderList.splice(orderIndex, 1);
 
   if (storageOrderList.length == 0) StorageManager.setNumericValue('orderCount', 0);
 }
 
 function selectLocalOrder(order: IStorageOrderData) {
-  store.orderData = order.orderData;
+  Object.entries(order.orderData.header).forEach(([k, v]) => {
+    (store.orderData['header'] as any)[k] = v;
+  });
+
+  Object.entries(order.orderData.footer).forEach(([k, v]) => {
+    (store.orderData['footer'] as any)[k] = v;
+  });
+
+  Object.entries(order.orderData.instructions).forEach(([k, v]) => {
+    (store.orderData['instructions'] as any)[k] = v;
+  });
+
+  store.panelMode = 'OrderMessage';
+  store.chosenLocalOrderId = order.id;
 }
 
 function isOrderDeprecated(
@@ -108,6 +136,7 @@ onActivated(() => {
   if (deprecatedOrders != 0) {
   }
 
+  storageOrderList.length = 0;
   storageOrderList.push(...orderList);
 });
 </script>

src/components/OrderMessage.vue

@@ -115,8 +115,12 @@ const orderMessagePreview = computed(() => store.orderMessage);
 
 watch(orderMessagePreview, () => {
   if (updateDate.value == true) {
-    store.orderFooter['hour'] = currentFormattedHours();
-    store.orderFooter['minutes'] = currentFormattedMinutes();
+    store.orderData.header.B = new Date().toISOString().split('T')[0];
+
+    store.orderData.footer.Y = new Date().toLocaleTimeString('pl-PL', {
+      hour: 'numeric',
+      minute: '2-digit'
+    });
   }
 });
 
@@ -160,13 +164,13 @@ function verifyOrderFields() {
 
   Object.entries(header).forEach(([k, v]) => {
     if (v.trim().length == 0) {
-      fieldsToCorrect.push(`order.header.${k}`);
+      fieldsToCorrect.push(k);
     }
   });
 
   Object.entries(footer).forEach(([k, v]) => {
     if (v.trim().length == 0) {
-      fieldsToCorrect.push(`order.footer.${k}`);
+      fieldsToCorrect.push(k);
     }
   });
 
@@ -197,10 +201,7 @@ function copyMessage() {
   const fieldsToCorrect = verifyOrderFields();
 
   if (fieldsToCorrect.length > 0)
-    return showActionMonit(
-      `${t('order-message.warning-fill-footer')} ${fieldsToCorrect.join(', ')}`,
-      'warning'
-    );
+    return showActionMonit(t('order-message.warning-fill-missing'), 'warning');
 
   navigator.clipboard.writeText(orderMessagePreview.value);
 
@@ -226,7 +227,6 @@ function saveOrder() {
     orderData: store.orderData
   };
 
-  const localStorage = window.localStorage;
   const localOrderCount = StorageManager.getNumericValue('orderCount') || 0;
 
   if (localOrderCount == 0) StorageManager.setNumericValue('orderCount', 0);
@@ -234,7 +234,7 @@ function saveOrder() {
   const prevLocalOrder = StorageManager.getValue(`order-${Number(localOrderCount)}`);
 
   if (prevLocalOrder && prevLocalOrder == JSON.stringify(orderDataToSave)) {
-    showActionMonit(`${t('order-message.warning-order-identical')}`, 'warning');
+    showActionMonit(t('order-message.warning-order-identical'), 'warning');
     return;
   }
 
@@ -242,8 +242,8 @@ function saveOrder() {
   const nextOrderId = `order-${nextOrderCount}`;
   orderDataToSave['id'] = nextOrderId;
 
-  localStorage.setItem('orderCount', `${nextOrderCount}`);
-  localStorage.setItem(nextOrderId, JSON.stringify(orderDataToSave));
+  StorageManager.setNumericValue('orderCount', nextOrderCount);
+  StorageManager.setValue(nextOrderId, JSON.stringify(orderDataToSave));
 
   store.chosenLocalOrderId = nextOrderId;
   showActionMonit(t('order-message.success-save-html'), 'success');
@@ -273,7 +273,7 @@ function updateOrder() {
   };
 
   window.localStorage.setItem(store.chosenLocalOrderId, JSON.stringify(orderDataToUpdate));
-  showActionMonit(t('order-message.success-update-html'), 'warning');
+  showActionMonit(t('order-message.success-update-html'), 'success');
 }
 </script>
 

src/locales/en.json

@@ -26,7 +26,7 @@
       "warning-outdated-clipboard": "Oops! Your browser may be a little bit depraceted since it's not supporting saving data to the clipboard! :/",
       "warning-fill-inputs": "Fill all the empty fields before copying the order!",
       "warning-add-rows": "Add at least one row before copying the order!",
-      "warning-fill-footer": "Fill the following rows in the order's footer before copying it:",
+      "warning-fill-missing": "Fill rows in the order's header and footer before copying it!",
       "warning-fill-top": "Fill at least fields A, B, C and D in the order's header before saving it!",
       "warning-order-identical": "Last saved order is identical as the current one!",
       "warning-no-order-selected": "Choose the already saved order first!",
@@ -52,7 +52,8 @@
    },
    "order-list": {
       "title": "Saved train orders",
-      "order-title": "Order #{id} for train no. {trainNo}",
+      "order-title": "Train order for train no. {trainNo}",
+      "order-subtitle": "Selected instructions: {0}",
       "no-saved-orders": "No saved orders!",
       "order-added": "Added:",
       "order-updated": "Updated:",

src/locales/pl.json

@@ -26,7 +26,7 @@
       "warning-outdated-clipboard": "Ups! Twoja przeglądarka musi być dosyć przestarzała, ponieważ nie obsługuje zapisu do schowka! :/",
       "warning-fill-inputs": "Wypełnij puste rubryki rozkazu przed jego skopiowaniem!",
       "warning-add-rows": "Dodaj co najmniej jedną działkę rozkazu przed jego skopiowaniem!",
-      "warning-fill-footer": "Uzupełnij następujące rubryki na dole rozkazu przed jego skopiowaniem:",
+      "warning-fill-missing": "Uzupełnij rubryki w nagłówku i stopce rozkazu przed jego skopiowaniem!",
       "warning-fill-top": "Wypełnij co najmniej rubryki A, B, C i D w nagłówku rozkazu przed jego zapisaniem!",
       "warning-order-identical": "Ostatni zapisany rozkaz jest identyczny z obecnym!",
       "warning-no-order-selected": "Wybierz rozkaz, który chcesz zaktualizować!",
@@ -53,7 +53,8 @@
    "order-list": {
       "title": "Zapisane rozkazy pisemne",
       "no-saved-orders": "Brak zapisanych rozkazów!",
-      "order-title": "Rozkaz pisemny #{id} dla pociągu nr {trainNo}",
+      "order-title": "Rozkaz pisemny dla pociągu nr {trainNo}",
+      "order-subtitle": "Zaznaczone instrukcje: {0}",
       "order-added": "Dodano:",
       "order-updated": "Zaktualizowano:",
       "button-order-select": "Wybierz",