diff --git a/.env b/.env
index 21b1403..1b39328 100644
--- a/.env
+++ b/.env
@@ -1,2 +1,4 @@
VITE_APP_API_URL=https://stacjownik.spythere.eu/api
-VITE_APP_SWDR_URL=https://api.td2.info.pl
\ No newline at end of file
+VITE_APP_SWDR_URL=https://api.td2.info.pl
+
+VITE_APP_ORDER_VERSION=2
\ No newline at end of file
diff --git a/src/components/OrderList.vue b/src/components/OrderList.vue
index 8a0da00..d4a69a1 100644
--- a/src/components/OrderList.vue
+++ b/src/components/OrderList.vue
@@ -15,15 +15,25 @@
#{{ order.id.split('-')[1] }}
{{ getOrderName(order.orderType) }} nr {{ order.orderBody['header']['orderNo'] }} dla
- pociągu nr
- {{ order.orderBody['header']['trainNo'] }}
+ pociągu nr {{ order.orderBody['header']['trainNo'] }}
+ ⚠
+
{{ order.createdAt ? 'Dodano: ' : 'Zaktualizowano: ' }}
{{ new Date(order.createdAt || order.updatedAt || 0).toLocaleString('pl-PL') }}
-
-
-
+
+
+
+
+
+
+
@@ -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;
+}
diff --git a/src/mixins/orderStorageMixin.ts b/src/mixins/orderStorageMixin.ts
index b0506e1..a956bb8 100644
--- a/src/mixins/orderStorageMixin.ts
+++ b/src/mixins/orderStorageMixin.ts
@@ -28,7 +28,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 +70,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 +86,55 @@ export default defineComponent({
// localStorage.setItem('orderCount', (Number(localStorage.getItem('orderCount')) - 1).toString());
},
- selectLocalOrder(order: LocalStorageOrder) {
- this.store.chosenOrderType = order.orderType;
- this.store.chosenLocalOrderId = order.id;
+ selectLocalOrder(localOrder: LocalStorageOrder) {
+ // const localOrder = JSON.parse(JSON.stringify(order));
+ const { orderBody: localOrderBody, orderFooter: localOrderFooter } = localOrder;
- const localOrder = JSON.parse(JSON.stringify(order));
- const localOrderBody = localOrder['orderBody'];
- const localOrderFooter = localOrder['orderFooter'];
+ this.store[localOrder.orderType].header.date = localOrderBody.header.date;
+ this.store[localOrder.orderType].header.orderNo = localOrderBody.header.orderNo;
+ 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) {
- case 'orderN':
- case 'orderS':
- storeOrderObj = this.store[order.orderType];
- for (const orderKey in storeOrderObj) {
- for (const propKey in (storeOrderObj as any)[orderKey]) {
- (storeOrderObj as any)[orderKey][propKey] = localOrderBody[orderKey][propKey];
- }
+ if (localOrderBody.rows.length != currentOrder.rows.length) {
+ alert(
+ 'Zły format rozkazu! Może pochodzić z przestarzałej wersji lub został źle zapisany.'
+ );
+ console.warn('Zły format zapisanego rozkazu!');
+ return;
+ }
+
+ for (let rowIndex = 0; rowIndex < currentOrder.rows.length; rowIndex++) {
+ const row = currentOrder.rows[rowIndex];
+
+ for (const rowProp in row) {
+ (currentOrder.rows[rowIndex] as any)[rowProp] = localOrderBody.rows[rowIndex][rowProp];
}
+ }
+ }
- break;
- case 'orderO':
- storeOrderObj = this.store[order.orderType];
+ if (localOrder.orderType == 'orderO') {
+ const currentOrder = this.store[localOrder.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 rowIndex = 0; rowIndex < currentOrder.orderList.length; rowIndex++) {
+ const row = currentOrder.orderList[rowIndex];
- for (let i = 0; i < storeOrderObj['orderList'].length; i++) {
- const orderItem = storeOrderObj['orderList'][i];
-
- for (const prop in orderItem) {
- (storeOrderObj['orderList'][i] as any)[prop] = localOrderBody['orderList'][i][prop];
- }
+ for (const rowProp in row) {
+ (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';
}
}
diff --git a/src/styles/global.scss b/src/styles/global.scss
index b717a6e..eae1707 100644
--- a/src/styles/global.scss
+++ b/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 {
- outline: 1px solid $accentCol;
+ &:focus-visible::after {
+ 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;
+ transform: translateX(10px);
+
+ content: attr(data-tooltip);
+ color: white;
+ background: black;
+ padding: 0.5em;
+ max-width: 300px;
+ z-index: 100;
+}
diff --git a/src/types/orderTypes.ts b/src/types/orderTypes.ts
index 592d347..c743392 100644
--- a/src/types/orderTypes.ts
+++ b/src/types/orderTypes.ts
@@ -7,6 +7,7 @@ export interface LocalStorageOrder {
orderFooter: any;
createdAt?: number;
updatedAt?: number;
+ orderVersion?: string;
}
export interface IOrderN {