Zapisywanie rozkazów

src/components/OrderList.vue

@@ -3,25 +3,30 @@
     <h3>Zapisane rozkazy pisemne ({{ localOrderCount }})</h3>
 
     <ul>
-      <li v-for="order in sortedOrderList" @click="selectLocalOrder(order)">
+      <li v-for="order in sortedOrderList">
         <b>
           {{ getOrderName(order.orderType) }} nr {{ order.orderBody['header']['orderNo'] }} dla pociągu nr
           {{ order.orderBody['header']['trainNo'] }}
         </b>
         <br />
         Dodano: {{ new Date(order.createdAt).toLocaleString('pl-PL') }}
+        <br />
+        <button class="g-button" @click="selectLocalOrder(order)">Wybierz</button>
+        <button class="g-button" @click="removeOrder(order)">Usuń</button>
       </li>
     </ul>
   </section>
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive } from 'vue';
+import { defineComponent } from 'vue';
+import orderStorageMixin from '../mixins/orderStorageMixin';
 import { useStore } from '../store/store';
 import { LocalStorageOrder } from '../types/orderTypes';
 
 export default defineComponent({
   name: 'OrderList',
+  mixins: [orderStorageMixin],
 
   data() {
     return {
@@ -41,26 +46,13 @@ export default defineComponent({
       return `Rozkaz "${orderType.split('order')[1]}"`;
     },
 
-    selectLocalOrder(order: LocalStorageOrder) {
-      this.store.chosenOrderType = order.orderType;
-      const orderBody = JSON.parse(JSON.stringify(order.orderBody));
+    removeOrder(order: LocalStorageOrder) {
+      if (!order) return;
 
-      switch (order.orderType) {
-        case 'orderN':
-          // for (let key in this.store[order.orderType]) {
-          //   (this.store[order.orderType] as any)[key] = orderBody[key];
-          // }
-          // this.store['orderN']['header'] = orderBody['header'];
-          // this.store['orderN']['row1'] = orderBody['row1'];
-          // this.store['orderN']['header'] = orderBody['header'];
-          // this.store['orderN']['header'] = orderBody['header'];
-          // this.store['orderN']['header'] = orderBody['header'];
-          break;
+      this.removeLocalOrder(order);
 
-        default:
-          break;
-      }
-      this.store[order.orderType] = reactive(JSON.parse(JSON.stringify(order.orderBody)));
+      this.localOrderList = this.localOrderList.filter((o) => o.id != order.id);
+      this.localOrderCount = this.localOrderCount - 1;
     },
   },
 
@@ -93,7 +85,6 @@ export default defineComponent({
 <style lang="scss" scoped>
 .order-list {
   padding: 1em;
-  width: 500px;
 }
 
 ul {
@@ -114,5 +105,9 @@ li {
   background-color: #222;
 
   cursor: pointer;
+
+  button {
+    margin: 1em 1em 0 0;
+  }
 }
 </style>

src/components/OrderMessage.vue

@@ -89,7 +89,9 @@ export default defineComponent({
 
       switch (savedOrderStatus) {
         case -1:
-          this.showActionMonit('<span class="text--warn">Wypełnij numer rozkazu, numer pociągu i datę zanim dodasz rozkaz!</span>');
+          this.showActionMonit(
+            '<span class="text--warn">Wypełnij numer rozkazu, numer pociągu i datę zanim dodasz rozkaz!</span>'
+          );
           break;
         case 0:
           this.showActionMonit('<span class="text--warn">Ostatni zapisany rozkaz jest identyczny z obecnym!</span>');
@@ -109,7 +111,6 @@ export default defineComponent({
 <style lang="scss" scoped>
 .order-message {
   padding: 1em;
-  width: 500px;
 
   h3 {
     margin: 0;
@@ -120,10 +121,6 @@ export default defineComponent({
   button {
     margin: 0 0.5em;
   }
-
-  @media screen and (max-width: 550px) {
-    max-width: 100%;
-  }
 }
 
 .message_body {

src/components/SideBar.vue

@@ -1,6 +1,10 @@
 <template>
   <section class="sidebar">
     <div class="sidebar_content">
+      <button class="option-save" @click="toggleOrderMode" :data-selected="store.orderMode == 'OrderList'">
+        <img :src="saveIcon" alt="save icon" />
+      </button>
+
       <button
         v-for="orderType in orderTypeList"
         :key="orderType.id"
@@ -11,11 +15,6 @@
 
         <div class="bar"></div>
       </button>
-
-      <button class="option-save" @click="toggleOrderMode" :data-selected="store.orderMode == 'OrderList'">
-        <img :src="saveIcon" alt="save icon" />
-        <div class="bar"></div>
-      </button>
     </div>
   </section>
 </template>
@@ -96,7 +95,7 @@ export default defineComponent({
     align-items: center;
 
     color: white;
-    background-color: #000000aa;
+    background-color: #00000073;
     width: 50px;
     height: 85px;
 
@@ -125,15 +124,15 @@ export default defineComponent({
 }
 
 button.option-save {
-  background-color: $accentCol;
+  background-color: #000000aa;
 
   img {
     width: 80%;
     height: 80%;
   }
 
-  &[data-selected='true'] .bar {
-    background-color: #111;
+  &[data-selected='true'] {
+    background-color: $accentCol;
   }
 }
 

src/mixins/orderStorageMixin.ts

@@ -12,7 +12,8 @@ export default defineComponent({
   methods: {
     saveOrderToStorage() {
       let orderObj: LocalStorageOrder = {
-        orderType: this.store.chosenOrderType ,
+        id: '',
+        orderType: this.store.chosenOrderType,
         orderBody: {},
         orderFooter: this.store.orderFooter,
         createdAt: Date.now(),
@@ -50,10 +51,60 @@ export default defineComponent({
       }
 
       const nextOrderCount = Number(localOrderCount) + 1;
+      orderObj['id'] = `order-${nextOrderCount}`;
+
       localStorage.setItem('orderCount', `${nextOrderCount}`);
       localStorage.setItem(`order-${nextOrderCount}`, JSON.stringify(orderObj));
 
       return 1;
     },
+
+    removeLocalOrder(order: LocalStorageOrder) {
+      localStorage.removeItem(order.id);
+      localStorage.setItem('orderCount', (Number(localStorage.getItem('orderCount')) - 1).toString());
+    },
+
+    selectLocalOrder(order: LocalStorageOrder) {
+      this.store.chosenOrderType = order.orderType;
+      const localOrder = JSON.parse(JSON.stringify(order));
+      const localOrderBody = localOrder['orderBody'];
+      const localOrderFooter = localOrder['orderFooter'];
+
+      let storeOrderObj;
+
+      switch (order.orderType) {
+        case 'orderN':
+        case 'orderS':
+          storeOrderObj = this.store[order.orderType];
+          for (let orderKey in storeOrderObj) {
+            for (let propKey in (storeOrderObj as any)[orderKey]) {
+              (storeOrderObj as any)[orderKey][propKey] = localOrderBody[orderKey][propKey];
+            }
+          }
+
+          break;
+        case 'orderO':
+          storeOrderObj = this.store[order.orderType];
+
+          storeOrderObj['other'] = localOrderBody['other'];
+          storeOrderObj['header']['date'] = localOrderBody['header']['date'];
+          storeOrderObj['header']['orderNo'] = localOrderBody['header']['orderNo'];
+          storeOrderObj['header']['trainNo'] = localOrderBody['header']['trainNo'];
+
+          for (let i = 0; i < storeOrderObj['orderList'].length; i++) {
+            const orderItem = storeOrderObj['orderList'][i];
+
+            for (let prop in orderItem) {
+              (storeOrderObj['orderList'][i] as any)[prop] = localOrderBody['orderList'][i][prop];
+            }
+          }
+
+          break;
+      }
+
+      for (let key in this.store.orderFooter) {
+        (this.store.orderFooter as any)[key] = localOrderFooter[key];
+      }
+    },
   },
 });

src/types/orderTypes.ts

@@ -1,4 +1,5 @@
 export interface LocalStorageOrder {
+  id: string;
   orderType: 'orderO' | 'orderS' | 'orderN';
   orderBody: any;
   orderFooter: any;

src/views/Home.vue

@@ -77,5 +77,9 @@ export default defineComponent({
       margin: 0.5em;
     }
   }
+
+  .message_container {
+    width: 500px;
+  }
 }
 </style>