Dodano aktualizowanie zapisanych rozkazów

src/components/OrderList.vue

@@ -9,7 +9,8 @@
           {{ order.orderBody['header']['trainNo'] }}
         </b>
         <br />
-        Dodano: {{ new Date(order.createdAt).toLocaleString('pl-PL') }}
+        {{ order.createdAt ? 'Dodano: ' : 'Zaktualizowano: ' }}
+        {{ new Date(order.createdAt || order.updatedAt || 0).toLocaleString('pl-PL') }}
         <br />
         <button class="g-button action" @click="selectLocalOrder(order)">Wybierz</button>
         <button class="g-button action" @click="removeOrder(order)">Usuń</button>
@@ -58,7 +59,7 @@ export default defineComponent({
 
   computed: {
     sortedOrderList() {
-      return this.localOrderList.sort((a, b) => b.createdAt - a.createdAt);
+      return this.localOrderList.sort((a, b) => (b.createdAt || b.updatedAt!) - (a.createdAt || a.updatedAt!));
     },
   },
 

src/components/OrderMessage.vue

@@ -5,8 +5,11 @@
     <div class="message_body" v-html="fullOrderMessage"></div>
 
     <div class="message_actions">
-      <button class="g-button action" @click="saveOrder"><img :src="saveIcon" alt="save icon" />Zapisz ten rozkaz</button>
-      <button class="g-button action" @click="copyMessage">Kopiuj wiadomość rozkazu</button>
+      <button class="g-button action" @click="saveOrder">Zapisz nowy rozkaz</button>
+      <button class="g-button action" @click="copyMessage">Kopiuj treść rozkazu</button>
+      <button class="g-button action" :data-disabled="!store.chosenLocalOrderId" @click="updateOrder">
+        Zaktualizuj ten rozkaz
+      </button>
     </div>
 
     <transition name="monit-anim">
@@ -85,7 +88,7 @@ export default defineComponent({
     },
 
     saveOrder() {
-      const savedOrderStatus = this.saveOrderToStorage();
+      const savedOrderStatus = this.saveLocalOrder();
 
       switch (savedOrderStatus) {
         case -1:
@@ -104,6 +107,24 @@ export default defineComponent({
           break;
       }
     },
+
+    updateOrder() {
+      const updatedOrderStatus = this.updateLocalOrder();
+
+      switch (updatedOrderStatus) {
+        case -1:
+          this.showActionMonit('<span class="text--warn">Wystąpił błąd podczas aktualizowania tego rozkazu! :/</span>');
+          break;
+
+        case 0:
+          this.showActionMonit('<span class="text--warn">Nie wybrałeś żadnego zapisanego rozkazu!</span>');
+          break;
+
+        case 1:
+          this.showActionMonit('Zaktualizowano treść <b class="text--accent">rozkazu</b>!');
+          break;
+      }
+    },
   },
 });
 </script>
@@ -148,6 +169,11 @@ export default defineComponent({
     vertical-align: text-bottom;
     margin-right: 0.5em;
   }
+
+  button[data-disabled='true'] {
+    user-select: none;
+    color: #aaa;
+  }
 }
 
 .action_monit {

src/components/SideBar.vue

@@ -50,6 +50,8 @@ export default defineComponent({
 
   methods: {
     selectOrderType(type: any) {
+      if (type != this.store.chosenOrderType) this.store.chosenLocalOrderId = '';
+      
       this.store.chosenOrderType = type;
     },
   },

src/mixins/orderStorageMixin.ts

@@ -10,29 +10,29 @@ export default defineComponent({
   },
 
   methods: {
-    saveOrderToStorage() {
+    saveLocalOrder() {
       let orderObj: LocalStorageOrder = {
         id: '',
         orderType: this.store.chosenOrderType,
-        orderBody: {},
+        orderBody: this.store[this.store.chosenOrderType],
         orderFooter: this.store.orderFooter,
         createdAt: Date.now(),
       };
 
-      switch (this.store.chosenOrderType) {
-        case 'orderN':
-          orderObj['orderBody'] = this.store.orderN;
-          break;
-        case 'orderS':
-          orderObj['orderBody'] = this.store.orderS;
-          break;
-        case 'orderO':
-          orderObj['orderBody'] = this.store.orderO;
-          break;
+      // switch (this.store.chosenOrderType) {
+      //   case 'orderN':
+      //     orderObj['orderBody'] = this.store.orderN;
+      //     break;
+      //   case 'orderS':
+      //     orderObj['orderBody'] = this.store.orderS;
+      //     break;
+      //   case 'orderO':
+      //     orderObj['orderBody'] = this.store.orderO;
+      //     break;
 
-        default:
-          break;
-      }
+      //   default:
+      //     break;
+      // }
 
       const headerInfo = orderObj['orderBody']['header'];
 
@@ -51,10 +51,31 @@ export default defineComponent({
       }
 
       const nextOrderCount = Number(localOrderCount) + 1;
-      orderObj['id'] = `order-${nextOrderCount}`;
+      const orderId = `order-${nextOrderCount}`;
+      orderObj['id'] = orderId;
 
       localStorage.setItem('orderCount', `${nextOrderCount}`);
-      localStorage.setItem(`order-${nextOrderCount}`, JSON.stringify(orderObj));
+      localStorage.setItem(orderId, JSON.stringify(orderObj));
+
+      this.store.chosenLocalOrderId = orderId;
+      return 1;
+    },
+
+    updateLocalOrder() {
+      if (!this.store.chosenLocalOrderId) return 0;
+      const localOrder = window.localStorage.getItem(this.store.chosenLocalOrderId);
+
+      if (!localOrder) return -1;
+
+      let orderObj: LocalStorageOrder = {
+        id: this.store.chosenLocalOrderId,
+        orderType: this.store.chosenOrderType,
+        orderBody: this.store[this.store.chosenOrderType],
+        orderFooter: this.store.orderFooter,
+        updatedAt: Date.now(),
+      };
+
+      window.localStorage.setItem(this.store.chosenLocalOrderId, JSON.stringify(orderObj));
 
       return 1;
     },
@@ -66,6 +87,7 @@ export default defineComponent({
 
     selectLocalOrder(order: LocalStorageOrder) {
       this.store.chosenOrderType = order.orderType;
+      this.store.chosenLocalOrderId = order.id;
 
       const localOrder = JSON.parse(JSON.stringify(order));
       const localOrderBody = localOrder['orderBody'];

src/store/store.ts

@@ -4,6 +4,8 @@ export const useStore = defineStore('store', {
   state: () => {
     return {
       chosenOrderType: 'orderN' as 'orderO' | 'orderS' | 'orderN',
+      chosenLocalOrderId: '',
+
       orderMode: 'OrderMessage',
 
       orderFooter: {

src/types/orderTypes.ts

@@ -3,5 +3,6 @@ export interface LocalStorageOrder {
   orderType: 'orderO' | 'orderS' | 'orderN';
   orderBody: any;
   orderFooter: any;
-  createdAt: number;
+  createdAt?: number;
+  updatedAt?: number;
 }