Merge pull request #13 from Spythere/development

Wersja 1.4.3

.env

@@ -1,2 +1,4 @@
 VITE_APP_API_URL=https://stacjownik.spythere.eu/api
 VITE_APP_SWDR_URL=https://api.td2.info.pl
+
+VITE_APP_ORDER_VERSION=2

package.json

@@ -1,6 +1,6 @@
 {
   "name": "genera-tor",
-  "version": "1.4.2",
+  "version": "1.4.3",
   "private": true,
   "type": "module",
   "scripts": {

src/components/OrderList.vue

@@ -15,15 +15,25 @@
         <b class="text--accent">#{{ order.id.split('-')[1] }}&nbsp;</b>
         <b>
           {{ getOrderName(order.orderType) }} nr {{ order.orderBody['header']['orderNo'] }} dla
-          pociągu nr
+          pociągu nr {{ order.orderBody['header']['trainNo'] }}
-          {{ order.orderBody['header']['trainNo'] }}
         </b>
+        <span
+          v-if="!order.orderVersion || order.orderVersion != ORDER_VERSION"
+          class="wrong-order-indicator"
+          tabindex="0"
+          data-tooltip="Przestarzała wersja rozkazu! Może generować złe informacje!"
+          >&#9888;
+        </span>
         <br />
         {{ order.createdAt ? 'Dodano: ' : 'Zaktualizowano: ' }}
         {{ new Date(order.createdAt || order.updatedAt || 0).toLocaleString('pl-PL') }}
-        <br />
+
+        <hr />
+
+        <div class="buttons">
           <button class="g-button action" @click="selectLocalOrder(order)">Wybierz</button>
           <button class="g-button action" @click="removeOrder(order)">Usuń</button>
+        </div>
       </li>
     </transition-group>
   </section>
@@ -41,7 +51,8 @@ export default defineComponent({
 
   data() {
     return {
-      localOrderList: [] as LocalStorageOrder[]
+      localOrderList: [] as LocalStorageOrder[],
+      ORDER_VERSION: import.meta.env['VITE_APP_ORDER_VERSION']
     };
   },
 
@@ -117,9 +128,13 @@ export default defineComponent({
   overflow: auto;
 }
 
+hr {
+  border: 1px solid #aaa;
+  height: 0;
+}
+
 ul {
   overflow: hidden;
-  position: relative;
 }
 
 h3 {
@@ -144,17 +159,24 @@ li {
 
   cursor: pointer;
 
-  button {
-    margin: 1em 1em 0 0;
-  }
-
   &[selected='true'] {
     outline: 1px solid $accentCol;
   }
+
   &.no-orders-warning {
     text-align: center;
     font-size: 1.2em;
     cursor: default;
   }
 }
+
+.wrong-order-indicator {
+  color: $accentCol;
+  padding: 0 0.25em;
+}
+
+.buttons {
+  display: flex;
+  gap: 0.5em;
+}
 </style>

src/mixins/orderStorageMixin.ts

@@ -2,6 +2,11 @@ import { defineComponent } from 'vue';
 import { useStore } from '../store/store';
 import { LocalStorageOrder } from '../types/orderTypes';
 
+function alertWrongOrderFormat() {
+  alert('Wystąpił błąd podczas przetwarzania rozkazu! Informacje mogą być niepoprawne!');
+  console.warn('Zły format zapisanego rozkazu!');
+}
+
 export default defineComponent({
   setup() {
     return {
@@ -28,7 +33,8 @@ export default defineComponent({
         orderType: this.store.chosenOrderType,
         orderBody: this.store[this.store.chosenOrderType],
         orderFooter: this.store.orderFooter,
-        createdAt: Date.now()
+        createdAt: Date.now(),
+        orderVersion: import.meta.env['VITE_APP_ORDER_VERSION'] || '1'
       };
 
       const headerInfo = orderObj['orderBody']['header'];
@@ -69,7 +75,8 @@ export default defineComponent({
         orderType: this.store.chosenOrderType,
         orderBody: this.store[this.store.chosenOrderType],
         orderFooter: this.store.orderFooter,
-        updatedAt: Date.now()
+        updatedAt: Date.now(),
+        orderVersion: import.meta.env['VITE_APP_ORDER_VERSION'] || '1'
       };
 
       window.localStorage.setItem(this.store.chosenLocalOrderId, JSON.stringify(orderObj));
@@ -84,50 +91,72 @@ export default defineComponent({
       // localStorage.setItem('orderCount', (Number(localStorage.getItem('orderCount')) - 1).toString());
     },
 
-    selectLocalOrder(order: LocalStorageOrder) {
+    selectLocalOrder(localOrder: LocalStorageOrder) {
-      this.store.chosenOrderType = order.orderType;
+      // const localOrder = JSON.parse(JSON.stringify(order));
-      this.store.chosenLocalOrderId = order.id;
+      const { orderBody: localOrderBody, orderFooter: localOrderFooter } = localOrder;
 
-      const localOrder = JSON.parse(JSON.stringify(order));
+      this.store[localOrder.orderType].header.date = localOrderBody.header.date;
-      const localOrderBody = localOrder['orderBody'];
+      this.store[localOrder.orderType].header.orderNo = localOrderBody.header.orderNo;
-      const localOrderFooter = localOrder['orderFooter'];
+      this.store[localOrder.orderType].header.trainNo = localOrderBody.header.trainNo;
 
-      let storeOrderObj;
+      if (localOrder.orderType == 'orderN' || localOrder.orderType == 'orderS') {
+        const currentOrder = this.store[localOrder.orderType];
 
-      switch (order.orderType) {
+        if (localOrderBody.rows.length != currentOrder.rows.length) {
-        case 'orderN':
+          alertWrongOrderFormat();
-        case 'orderS':
+          return;
-          storeOrderObj = this.store[order.orderType];
+        }
-          for (const orderKey in storeOrderObj) {
+
-            for (const propKey in (storeOrderObj as any)[orderKey]) {
+        for (let rowIndex = 0; rowIndex < currentOrder.rows.length; rowIndex++) {
-              (storeOrderObj as any)[orderKey][propKey] = localOrderBody[orderKey][propKey];
+          const row = currentOrder.rows[rowIndex];
+
+          if (localOrderBody.rows[rowIndex] === undefined) {
+            alertWrongOrderFormat();
+            continue;
+          }
+
+          for (const rowProp in row) {
+            if (localOrderBody.rows[rowIndex][rowProp] === undefined) {
+              alertWrongOrderFormat();
+              continue;
+            }
+
+            (currentOrder.rows[rowIndex] as any)[rowProp] = localOrderBody.rows[rowIndex][rowProp];
+          }
         }
       }
 
-          break;
+      if (localOrder.orderType == 'orderO') {
-        case 'orderO':
+        const currentOrder = this.store[localOrder.orderType];
-          storeOrderObj = this.store[order.orderType];
 
-          storeOrderObj['other'] = localOrderBody['other'];
+        for (let rowIndex = 0; rowIndex < currentOrder.orderList.length; rowIndex++) {
-          storeOrderObj['header']['date'] = localOrderBody['header']['date'];
+          const row = currentOrder.orderList[rowIndex];
-          storeOrderObj['header']['orderNo'] = localOrderBody['header']['orderNo'];
-          storeOrderObj['header']['trainNo'] = localOrderBody['header']['trainNo'];
 
-          for (let i = 0; i < storeOrderObj['orderList'].length; i++) {
+          if (localOrderBody.orderList[rowIndex] === undefined) {
-            const orderItem = storeOrderObj['orderList'][i];
+            alertWrongOrderFormat();
+            continue;
+          }
 
-            for (const prop in orderItem) {
+          for (const rowProp in row) {
-              (storeOrderObj['orderList'][i] as any)[prop] = localOrderBody['orderList'][i][prop];
+            if (localOrderBody.orderList[rowIndex][rowProp] === undefined) {
+              alertWrongOrderFormat();
+              continue;
+            }
+
+            (currentOrder.orderList[rowIndex] as any)[rowProp] =
+              localOrderBody.orderList[rowIndex][rowProp];
           }
         }
 
-          break;
+        currentOrder.other = localOrderBody.other;
       }
 
       for (const key in this.store.orderFooter) {
         (this.store.orderFooter as any)[key] = localOrderFooter[key];
       }
 
+      this.store.chosenOrderType = localOrder.orderType;
+      this.store.chosenLocalOrderId = localOrder.id;
       this.store.orderMode = 'OrderMessage';
     }
   }

src/styles/global.scss

@@ -33,7 +33,9 @@ button {
   outline: none;
   background: none;
 
-  transition: all 150ms ease-in;
+  transition:
+    color 90ms ease-in,
+    border 90ms ease-in;
   font-family: 'Libre Franklin', sans-serif;
 
   cursor: pointer;
@@ -46,20 +48,31 @@ button.g-button {
   color: white;
 
   &.action {
-    outline: 2px solid white;
+    border: 2px solid white;
     padding: 0.5em;
 
     &:focus-visible {
-      outline: 2px solid $accentCol;
+      border: 2px solid $accentCol;
+    }
+
+    &:hover {
+      color: $accentCol;
     }
   }
 
   &.option {
+    position: relative;
     margin: 0 0.25em;
     padding: 0.25em;
 
-    &:focus-visible {
+    &:focus-visible::after {
-      outline: 1px solid $accentCol;
+      content: '';
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      width: 100%;
+      height: 2px;
+      background-color: $accentCol;
     }
 
     &[data-active='true'] {
@@ -95,6 +108,10 @@ select {
   padding: 0.1em 0;
   border-radius: 0.3em;
   text-align: center;
+
+  &:hover {
+    border: 2px solid $accentCol;
+  }
 }
 
 // List style
@@ -195,3 +212,21 @@ label.g-checkbox {
     }
   }
 }
+
+// Tooltip
+[data-tooltip] {
+  cursor: pointer;
+}
+
+[data-tooltip]:hover::after,
+[data-tooltip]:focus::after {
+  position: absolute;
+
+  content: attr(data-tooltip);
+  color: white;
+  background: black;
+  padding: 0.5em;
+  margin: 0.25em;
+  max-width: 300px;
+  z-index: 100;
+}

src/types/orderTypes.ts

@@ -7,6 +7,7 @@ export interface LocalStorageOrder {
   orderFooter: any;
   createdAt?: number;
   updatedAt?: number;
+  orderVersion?: string;
 }
 
 export interface IOrderN {