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;
   }
 }