From af579f2cbaa158039cab9339009b867b0e9d3bc0 Mon Sep 17 00:00:00 2001 From: Spythere Date: Thu, 30 May 2024 15:34:03 +0200 Subject: [PATCH 1/5] chore: order stylings; fix: compatibility with deprecated orders --- .env | 4 +- src/components/OrderList.vue | 44 +++++++++++++++------ src/mixins/orderStorageMixin.ts | 69 ++++++++++++++++++--------------- src/styles/global.scss | 45 ++++++++++++++++++--- src/types/orderTypes.ts | 1 + 5 files changed, 115 insertions(+), 48 deletions(-) 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 { From 8b8d69132dc666b1d62fccdfeb0bdddf4b7df504 Mon Sep 17 00:00:00 2001 From: Spythere Date: Thu, 30 May 2024 15:49:20 +0200 Subject: [PATCH 2/5] chore: minor fixes --- src/components/OrderList.vue | 2 +- src/styles/global.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/OrderList.vue b/src/components/OrderList.vue index d4a69a1..f4be6cb 100644 --- a/src/components/OrderList.vue +++ b/src/components/OrderList.vue @@ -21,7 +21,7 @@ v-if="!order.orderVersion || order.orderVersion != ORDER_VERSION" class="wrong-order-indicator" tabindex="0" - data-tooltip="Niepoprawny format rozkazu" + data-tooltip="Niepoprawny format rozkazu, może generować złe informacje!" >⚠
diff --git a/src/styles/global.scss b/src/styles/global.scss index eae1707..a7d13a0 100644 --- a/src/styles/global.scss +++ b/src/styles/global.scss @@ -221,12 +221,12 @@ label.g-checkbox { [data-tooltip]:hover::after, [data-tooltip]:focus::after { position: absolute; - transform: translateX(10px); content: attr(data-tooltip); color: white; background: black; padding: 0.5em; + margin: 0.25em; max-width: 300px; z-index: 100; } From 5649e7c4174ec8d4dd0b4f6b9ebc29636da61514 Mon Sep 17 00:00:00 2001 From: Spythere Date: Thu, 30 May 2024 15:50:05 +0200 Subject: [PATCH 3/5] bump: 1.4.3 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 0dd2788..fce1cff 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "genera-tor", - "version": "1.4.2", + "version": "1.4.3", "private": true, "type": "module", "scripts": { From a180215dd0f87963fc219c87e0bfafd3561665c2 Mon Sep 17 00:00:00 2001 From: Spythere Date: Thu, 30 May 2024 16:08:44 +0200 Subject: [PATCH 4/5] chore: order compatibility warnings --- src/mixins/orderStorageMixin.ts | 32 ++++++++++++++++++++++++++++---- 1 file changed, 28 insertions(+), 4 deletions(-) diff --git a/src/mixins/orderStorageMixin.ts b/src/mixins/orderStorageMixin.ts index a956bb8..82386fe 100644 --- a/src/mixins/orderStorageMixin.ts +++ b/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 { @@ -98,17 +103,24 @@ export default defineComponent({ const currentOrder = this.store[localOrder.orderType]; 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!'); + alertWrongOrderFormat(); return; } for (let rowIndex = 0; rowIndex < currentOrder.rows.length; rowIndex++) { 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]; } } @@ -120,7 +132,17 @@ export default defineComponent({ for (let rowIndex = 0; rowIndex < currentOrder.orderList.length; rowIndex++) { const row = currentOrder.orderList[rowIndex]; + if (localOrderBody.orderList[rowIndex] === undefined) { + alertWrongOrderFormat(); + continue; + } + for (const rowProp in row) { + if (localOrderBody.orderList[rowIndex][rowProp] === undefined) { + alertWrongOrderFormat(); + continue; + } + (currentOrder.orderList[rowIndex] as any)[rowProp] = localOrderBody.orderList[rowIndex][rowProp]; } @@ -133,6 +155,8 @@ export default defineComponent({ (this.store.orderFooter as any)[key] = localOrderFooter[key]; } + console.log('loading'); + this.store.chosenOrderType = localOrder.orderType; this.store.chosenLocalOrderId = localOrder.id; this.store.orderMode = 'OrderMessage'; From 1b8bf5cc45cb2b14586f97b311c0ec96d8ffb440 Mon Sep 17 00:00:00 2001 From: Spythere Date: Thu, 30 May 2024 16:10:22 +0200 Subject: [PATCH 5/5] hotfix --- src/components/OrderList.vue | 2 +- src/mixins/orderStorageMixin.ts | 2 -- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/src/components/OrderList.vue b/src/components/OrderList.vue index f4be6cb..433114e 100644 --- a/src/components/OrderList.vue +++ b/src/components/OrderList.vue @@ -21,7 +21,7 @@ v-if="!order.orderVersion || order.orderVersion != ORDER_VERSION" class="wrong-order-indicator" tabindex="0" - data-tooltip="Niepoprawny format rozkazu, może generować złe informacje!" + data-tooltip="Przestarzała wersja rozkazu! Może generować złe informacje!" >⚠
diff --git a/src/mixins/orderStorageMixin.ts b/src/mixins/orderStorageMixin.ts index 82386fe..b2e8a1b 100644 --- a/src/mixins/orderStorageMixin.ts +++ b/src/mixins/orderStorageMixin.ts @@ -155,8 +155,6 @@ export default defineComponent({ (this.store.orderFooter as any)[key] = localOrderFooter[key]; } - console.log('loading'); - this.store.chosenOrderType = localOrder.orderType; this.store.chosenLocalOrderId = localOrder.id; this.store.orderMode = 'OrderMessage';