Spythere/genera-tor
1
0
Fork 0
mirror of https://github.com/Spythere/genera-tor.git synced 2026-05-03 05:28:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

Poprawiono działanie placeholderów dla rozkazów N i S

Browse Source
This commit is contained in:
Spythere
2022-10-27 19:56:20 +02:00
parent 1cb188df8f
commit 20e5df3290
8 changed files with 537 additions and 318 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.firebase/hosting.ZGlzdA.cache
+4 -4
View File
@@ -25,7 +25,7 @@ ms-icon-144x144.png,1658609937000,aede59be6881a13db2df2635cc1e7b258a39f5ab107713
ms-icon-150x150.png,1658609937021,e2c169c428949765d1e695b05a48f4b982ae2fa3068e426ed41447eba0e19234
ms-icon-310x310.png,1658609937042,9680db857d251ecdb422aa8c1cc186ffe67e74c2b6655067e7d7fc2e324476c3
ms-icon-70x70.png,1658609936980,e61ef4f24726f3f017de2ece28c2701413764d02310881d0d99642d18582a14a
index.html,1666616986687,d56712a3ae1b21063a53c53732d47257ae92c62a670c6cf3e366d7bb4fc26574
assets/icon-save.5a12487e.svg,1666616986687,5c75b0d4e35cdaf019c7292f7fd98c2e60466ae6f8b30d49b96cf2380c08299c
assets/index.fb05c726.css,1666616986687,f030c87b6540ca5a65e06a802889fab0cfa07a1a0650f453110806104d32f7d2
assets/index.28881d1a.js,1666616986687,6a819fe792ae2df4904fa2e9d95909a2d6c0cfcf44974fd4f71041e002fe6f45
index.html,1666810286156,89deda4447e48e5633c80ff58647b5285dea60771814bad3a10251640795f62c
assets/icon-save.5a12487e.svg,1666810286155,5c75b0d4e35cdaf019c7292f7fd98c2e60466ae6f8b30d49b96cf2380c08299c
assets/index.f04e20fa.css,1666810286162,f6b429354ceb854e2194d03ab61a9849d1d7c18093e455a181d4ea266aef79d3
assets/index.94c91b26.js,1666810286156,f02ea5c814ca05573d7951ec52ffa2bb97c4c134aa6963ac01178ecb34116606
src/components/OrderFooter.vue
+6 -6
View File
@@ -4,25 +4,25 @@
<tbody>
<tr>
<td colspan="4">
<input type="text" v-model="footerInfo.stationName" holder="nazwa stacji" />
<input type="text" v-model="footerInfo.stationName" placeholder="nazwa stacji" />
<br />
stacja
</td>
<td colspan="3">
<input type="text" v-model="footerInfo.checkpointName" holder="skrót posterunku" />
<input type="text" v-model="footerInfo.checkpointName" placeholder="skrót posterunku" />
<br />
posterunek
</td>
<td colspan="2">
<input type="text" v-model="footerInfo.hour" holder="godzina" />
<input type="text" v-model="footerInfo.hour" placeholder="godzina" />
<br />
godz.
</td>
<td colspan="1">
<input type="text" v-model="footerInfo.minutes" holder="minuta" />
<input type="text" v-model="footerInfo.minutes" placeholder="minuta" />
<br />
min.
</td>
@@ -30,13 +30,13 @@
<tr>
<td colspan="5">
<input type="text" v-model="footerInfo.dispatcherName" holder="nick dyżurnego" />
<input type="text" v-model="footerInfo.dispatcherName" placeholder="dyżurny" />
<br />
dyżurny ruchu
</td>
<td colspan="5">
<input type="text" v-model="footerInfo.secondaryDispatcherName" holder="nick osoby uprawnionej*" />
<input type="text" v-model="footerInfo.secondaryDispatcherName" placeholder="dyżurny (wypełnić jedno)" />
<br />
z polecenia dyżurnego ruchu
</td>
src/components/OrderN.vue
+119 -137
View File
@@ -17,37 +17,27 @@
<td>
<label for="row-enabled-1">1</label>
<div>
<input
type="checkbox"
id="row-enabled-1"
v-model="order.row1.enabled"
@change="handleRowCheckboxChange(1)"
/>
<input type="checkbox" id="row-enabled-1" v-model="order.rows[0].enabled" />
</div>
</td>
<td ref="row-1">
Od <input type="text" v-model="order.row1.from" holder="nazwa stacji" /> do
<input type="text" v-model="order.row1.to" holder="nazwa stacji" /> tor nr
<input type="text" v-model="order.row1.trackNo" holder="nr toru" /> jest zamknięty, ruch jednotorowy
Od <input type="text" v-model="order.rows[0].from" holder="stacja / post." /> do
<input type="text" v-model="order.rows[0].to" holder="stacja / post." /> tor nr
<input type="text" v-model="order.rows[0].trackNo" holder="nr toru" /> jest zamknięty, ruch jednotorowy
dwukierunkowy wprowadzono po torze nr
<input type="text" v-model="order.row1.trackNo2" holder="nr toru" />
<input type="text" v-model="order.rows[0].trackNo2" holder="nr toru" />
</td>
</tr>
<tr>
<td>
<label for="row-enabled-2">2</label>
<div>
<input
type="checkbox"
id="row-enabled-2"
v-model="order.row2.enabled"
@change="handleRowCheckboxChange(2)"
/>
<input type="checkbox" id="row-enabled-2" v-model="order.rows[1].enabled" />
</div>
</td>
<td ref="row-2">
<strong>ZEZWALAM</strong> po otrzymaniu
<select id="select-2a" v-model="order.row2.option1">
<select id="select-2a" v-model="order.rows[1].option1">
<option :value="`sygnału &quot;Nakaz Jazdy&quot;`">sygnału "Nakaz Jazdy"</option>
<option value="tylko tego rozkazu pisemnego">tylko tego rozkazu pisemnego</option>
</select>
@@ -57,8 +47,8 @@
name="section-2"
id="checkbox-2a"
value="checkbox-2a"
v-model="order.row2.checkbox"
:checked="order.row2.checkbox == 'checkbox-2a'"
v-model="order.rows[1].checkbox"
:checked="order.rows[1].checkbox == 'checkbox-2a'"
@change="handleRowCheckboxChange(2)"
/>
<label for="checkbox-2a">
@@ -69,16 +59,18 @@
name="section-2a"
id="radio-2a-1"
value="wyjazdowego"
v-model="order.row2.signalType"
v-model="order.rows[1].signalType"
@change="handleRowCheckboxChange(2)"
/>
<label for="radio-2a-1">
wyjazdowego
<input
type="text"
v-model="order.row2.signal1"
v-model="order.rows[1].signal1"
holder="nazwa sem."
:radio-checked="order.row2.checkbox == 'checkbox-2a' && order.row2.signalType == 'wyjazdowego'"
:radio-checked="
order.rows[1].checkbox == 'checkbox-2a' && order.rows[1].signalType == 'wyjazdowego'
"
/>
</label>
<br />
@@ -87,17 +79,17 @@
name="section-2a"
id="radio-2a-2"
value="drogowskazowego"
v-model="order.row2.signalType"
v-model="order.rows[1].signalType"
@change="handleRowCheckboxChange(2)"
/>
<label for="radio-2a-2">
drogowskazowego
<input
type="text"
v-model="order.row2.signal2"
v-model="order.rows[1].signal2"
holder="nazwa sem."
:radio-checked="
order.row2.checkbox == 'checkbox-2a' && order.row2.signalType == 'drogowskazowego'
order.rows[1].checkbox == 'checkbox-2a' && order.rows[1].signalType == 'drogowskazowego'
"
/>
(odnoszącego się do wyjazdu pociągu)
@@ -108,16 +100,18 @@
name="section-2a"
id="radio-2a-3"
value="wjazdowego"
v-model="order.row2.signalType"
v-model="order.rows[1].signalType"
@change="handleRowCheckboxChange(2)"
/>
<label for="radio-2a-3">
wjazdowego
<input
type="text"
v-model="order.row2.signal3"
v-model="order.rows[1].signal3"
holder="nazwa sem."
:radio-checked="order.row2.checkbox == 'checkbox-2a' && order.row2.signalType == 'wjazdowego'"
:radio-checked="
order.rows[1].checkbox == 'checkbox-2a' && order.rows[1].signalType == 'wjazdowego'
"
/>
na post. odg. bez sem. wyjazdowego
</label>
@@ -125,21 +119,21 @@
i wyjechać w kierunku
<input
type="text"
v-model="order.row2.direction1"
holder="nazwa stacji"
:radio-checked="order.row2.checkbox == 'checkbox-2a'"
v-model="order.rows[1].direction1"
holder="stacja / post."
:radio-checked="order.rows[1].checkbox == 'checkbox-2a'"
/>
na tor szlakowy
<select v-model="order.row2.option2">
<select v-model="order.rows[1].option2">
<option value="lewy">lewy</option>
<option value="prawy">prawy</option>
</select>
nr
<input
type="text"
v-model="order.row2.trackNoTo1"
v-model="order.rows[1].trackNoTo1"
holder="nr toru"
:radio-checked="order.row2.checkbox == 'checkbox-2a'"
:radio-checked="order.rows[1].checkbox == 'checkbox-2a'"
/>
</label>
</div>
@@ -149,36 +143,36 @@
name="section-2"
id="checkbox-2b"
value="checkbox-2b"
v-model="order.row2.checkbox"
:checked="order.row2.checkbox == 'checkbox-2b'"
v-model="order.rows[1].checkbox"
:checked="order.rows[1].checkbox == 'checkbox-2b'"
@change="handleRowCheckboxChange(2)"
/>
<label for="checkbox-2b">
z toru nr
<input
type="text"
v-model="order.row2.trackNoFrom"
v-model="order.rows[1].trackNoFrom"
holder="nr toru"
:radio-checked="order.row2.checkbox == 'checkbox-2b'"
:radio-checked="order.rows[1].checkbox == 'checkbox-2b'"
/>
nie posiadającego semafora wyjazdowego wyjechać w kierunku
<input
type="text"
v-model="order.row2.direction2"
holder="nazwa stacji"
:radio-checked="order.row2.checkbox == 'checkbox-2b'"
v-model="order.rows[1].direction2"
holder="stacja / post."
:radio-checked="order.rows[1].checkbox == 'checkbox-2b'"
/>
na tor szlakowy
<select v-model="order.row2.option3">
<select v-model="order.rows[1].option3">
<option value="lewy">lewy</option>
<option value="prawy">prawy</option>
</select>
nr
<input
type="text"
v-model="order.row2.trackNoTo2"
v-model="order.rows[1].trackNoTo2"
holder="nr toru"
:radio-checked="order.row2.checkbox == 'checkbox-2b'"
:radio-checked="order.rows[1].checkbox == 'checkbox-2b'"
/>
</label>
</div>
@@ -188,63 +182,54 @@
<td>
<label for="row-enabled-3">3</label>
<div>
<input
type="checkbox"
id="row-enabled-3"
v-model="order.row3.enabled"
@change="handleRowCheckboxChange(3)"
/>
<input type="checkbox" id="row-enabled-3" v-model="order.rows[2].enabled" />
</div>
</td>
<td ref="row-3">
<select v-model="order.row3.option1">
<select v-model="order.rows[2].option1">
<option value="Jazda">Jazda</option>
<option value="Popychanie">Popychanie</option>
</select>
pociągu odbędzie się w kierunku:
<input type="text" v-model="order.row3.direction" holder="nazwa stacji" /> do km
<input type="text" v-model="order.row3.toKilometer" holder="kilometry" /> skąd
<select v-model="order.row3.option2">
<input type="text" v-model="order.rows[2].direction" holder="stacja / post." /> do km
<input type="text" v-model="order.rows[2].toKilometer" holder="kilometry" /> skąd
<select v-model="order.rows[2].option2">
<option value="pociąg">pociąg</option>
<option value="popychacz">popychacz</option>
</select>
ma wrócić po torze lewym nr
<input type="text" v-model="order.row3.trackNo" holder="nr toru" /> najpóźniej o godz.
<input type="text" v-model="order.row3.untilHour" holder="godzina" /> min.
<input type="text" v-model="order.row3.untilMin" holder="minuta" />
<input type="text" v-model="order.rows[2].trackNo" holder="nr toru" /> najpóźniej o godz.
<input type="text" v-model="order.rows[2].untilHour" holder="godzina" /> min.
<input type="text" v-model="order.rows[2].untilMin" holder="minuta" />
</td>
</tr>
<tr>
<td>
<label for="row-enabled-4">4</label>
<div>
<input
type="checkbox"
id="row-enabled-4"
v-model="order.row4.enabled"
@change="handleRowCheckboxChange(4)"
/>
<input type="checkbox" id="row-enabled-4" v-model="order.rows[3].enabled" />
</div>
</td>
<td ref="row-4">
<strong>WJAZD</strong> z toru szlakowego nr
<input type="text" v-model="order.row4.trackNo" holder="nr toru" /> na
<select v-model="order.row4.optionStation">
<input type="text" v-model="order.rows[3].trackNo" holder="nr toru" /> na
<select v-model="order.rows[3].optionStation">
<option value="stację">stację</option>
<option value="posterunek odgałęźny">posterunek odgałęźny</option>
</select>
<input type="text" v-model="order.row4.stationName" holder="nazwa stacji" /> odbędzie się po otrzymaniu:
<input type="text" v-model="order.rows[3].stationName" holder="stacja / post." /> odbędzie się po
otrzymaniu:
<div style="margin-top: 0.5rem">
<input
type="radio"
name="section-4"
id="checkbox-4a"
value="checkbox-4a"
v-model="order.row4.checkbox"
v-model="order.rows[3].checkbox"
/>
<label for="checkbox-4a">
sygnału zastępczego "Sz" na osobnym urządzeniu ustawionym z
<select v-model="order.row4.side">
<select v-model="order.rows[3].side">
<option value="lewej">lewej</option>
<option value="prawej">prawej</option>
</select>
@@ -257,7 +242,7 @@
name="section-4"
id="checkbox-4b"
value="checkbox-4b"
v-model="order.row4.checkbox"
v-model="order.rows[3].checkbox"
/>
<label for="checkbox-4b">
rozkazu pisemnego "N" (doręczonego lub przekazanego przez urządzenia łączności)
@@ -269,25 +254,20 @@
<td>
<label for="row-enabled-5">5</label>
<div>
<input
type="checkbox"
id="row-enabled-5"
v-model="order.row5.enabled"
@change="handleRowCheckboxChange(5)"
/>
<input type="checkbox" id="row-enabled-5" v-model="order.rows[4].enabled" />
</div>
</td>
<td ref="row-5">
<strong>ZEZWALAM</strong> wjechać z toru szlakowego nr
<input type="text" v-model="order.row5.trackNo" holder="nr toru" /> z kierunku
<input type="text" v-model="order.row5.direction" holder="nazwa stacji" /> na
<select v-model="order.row5.stationType">
<input type="text" v-model="order.rows[4].trackNo" holder="nr toru" /> z kierunku
<input type="text" v-model="order.rows[4].direction" holder="stacja / post." /> na
<select v-model="order.rows[4].stationType">
<option value="stację">stację</option>
<option value="posterunek odgałęźny">posterunek odgałęźny</option>
</select>
<input type="text" v-model="order.row5.stationName" holder="nazwa stacji" />
<input type="text" v-model="order.rows[4].stationName" holder="stacja / post." />
i przejechać obok sygnału "Stój" na
<input type="text" v-model="order.row5.on" holder="nazwa sygnału" />
<input type="text" v-model="order.rows[4].on" holder="nazwa sygnału" />
</td>
</tr>
</tbody>
@@ -299,8 +279,9 @@
<script lang="ts">
import { defineComponent, reactive } from 'vue';
import { useStore } from '../store/store';
import { handleOrderPlaceholders } from '../handlers/orderPlaceholderHandler';
type OrderRowRange = 1 | 2 | 3 | 4 | 5;
type TOrderRows = 1 | 2 | 3 | 4 | 5;
export default defineComponent({
name: 'OrderN',
@@ -321,80 +302,76 @@ export default defineComponent({
},
() => {
const { row1 } = order;
const row = order.rows[0];
const message = `Od ${row1.from || '_'} do ${row1.to || '_'} tor nr ${
row1.trackNo || '_'
} jest zamknięty, ruch jednotorowy dwukierunkowy wprowadzono po torze nr ${row1.trackNo2 || '_'}`;
const message = `Od ${row.from || '_'} do ${row.to || '_'} tor nr ${
row.trackNo || '_'
} jest zamknięty, ruch jednotorowy dwukierunkowy wprowadzono po torze nr ${row.trackNo2 || '_'}`;
return message;
},
() => {
const { row2 } = order;
const row = order.rows[1];
let message = `ZEZWALAM po otrzymaniu ${row2.option1 || '_'}`;
let message = `ZEZWALAM po otrzymaniu ${row.option1 || '_'}`;
if (row2.checkbox == 'checkbox-2a') {
message += ` przejechać obok wskazującego sygnał "Stój" semafora ${row2.signalType || '_'} `;
if (row.checkbox == 'checkbox-2a') {
message += ` przejechać obok wskazującego sygnał "Stój" semafora ${row.signalType || '_'} `;
if (row2.signalType == 'wyjazdowego') message += row2.signal1 || '_';
if (row2.signalType == 'drogowskazowego')
message += `${row2.signal2 || '_'} (odnoszącego się do wyjazdu pociągu)`;
if (row2.signalType == 'wjazdowego') message += `${row2.signal3 || '_'} na post. odg. bez sem. wyjazdowego`;
if (row.signalType == 'wyjazdowego') message += row.signal1 || '_';
if (row.signalType == 'drogowskazowego')
message += `${row.signal2 || '_'} (odnoszącego się do wyjazdu pociągu)`;
if (row.signalType == 'wjazdowego') message += `${row.signal3 || '_'} na post. odg. bez sem. wyjazdowego`;
message += ` i wyjechać w kierunku ${row2.direction1 || '_'} na tor szlakowy ${row2.option2 || '_'} nr ${
row2.trackNoTo1 || '_'
message += ` i wyjechać w kierunku ${row.direction1 || '_'} na tor szlakowy ${row.option2 || '_'} nr ${
row.trackNoTo1 || '_'
}`;
}
if (row2.checkbox == 'checkbox-2b') {
message += ` z toru nr ${
row2.trackNoFrom || '_'
} nie posiadającego semafora wyjazdowego wyjechać w kierunku ${row2.direction2 || '_'} na tor szlakowy ${
row2.option3 || '_'
} nr ${row2.trackNoTo2 || '_'}`;
if (row.checkbox == 'checkbox-2b') {
message += ` z toru nr ${row.trackNoFrom || '_'} nie posiadającego semafora wyjazdowego wyjechać w kierunku ${
row.direction2 || '_'
} na tor szlakowy ${row.option3 || '_'} nr ${row.trackNoTo2 || '_'}`;
}
return message;
},
() => {
const { row3 } = order;
const row = order.rows[2];
let message = `${row3.option1 || '_'} pociągu odbędzie się w kierunku: ${row3.direction || '_'} do km ${
row3.toKilometer || '_'
} skąd ${row3.option2 || '_'} ma wrócić po torze lewym nr ${row3.trackNo || '_'} najpóźniej o godz. ${
row3.untilHour || '_'
} min. ${row3.untilMin || '_'}`;
let message = `${row.option1 || '_'} pociągu odbędzie się w kierunku: ${row.direction || '_'} do km ${
row.toKilometer || '_'
} skąd ${row.option2 || '_'} ma wrócić po torze lewym nr ${row.trackNo || '_'} najpóźniej o godz. ${
row.untilHour || '_'
} min. ${row.untilMin || '_'}`;
return message;
},
() => {
const { row4 } = order;
const row = order.rows[3];
let message = `WJAZD z toru szlakowego nr ${row4.trackNo || '_'} na ${row4.optionStation || '_'} ${
row4.stationName || '_'
let message = `WJAZD z toru szlakowego nr ${row.trackNo || '_'} na ${row.optionStation || '_'} ${
row.stationName || '_'
} odbędzie się po otrzymaniu: `;
if (row4.checkbox == 'checkbox-4a')
message += `sygnału zastępczego "Sz" na osobnym urządzeniu ustawionym z ${row4.side || '_'} strony toru`;
if (row.checkbox == 'checkbox-4a')
message += `sygnału zastępczego "Sz" na osobnym urządzeniu ustawionym z ${row.side || '_'} strony toru`;
if (row4.checkbox == 'checkbox-4b')
if (row.checkbox == 'checkbox-4b')
message += 'rozkazu pisemnego "N" (doręczonego lub przekazanego przez urządzenia łączności)';
return message;
},
() => {
const { row5 } = order;
const row = order.rows[4];
const message = `ZEZWALAM wjechać z toru szlakowego nr ${row5.trackNo || '_'} z kierunku ${
row5.direction || '_'
} na ${row5.stationType || '_'} ${row5.stationName || '_'} i przejechać obok sygnału "Stój" na ${
row5.on || '_'
} `;
const message = `ZEZWALAM wjechać z toru szlakowego nr ${row.trackNo || '_'} z kierunku ${
row.direction || '_'
} na ${row.stationType || '_'} ${row.stationName || '_'} i przejechać obok sygnału "Stój" na ${row.on || '_'} `;
return message;
},
@@ -414,6 +391,16 @@ export default defineComponent({
this.generateMessage();
},
},
'order.rows': {
deep: true,
handler() {
this.updatePlaceholders();
},
},
},
mounted() {
this.updatePlaceholders();
},
activated() {
@@ -421,33 +408,28 @@ export default defineComponent({
},
methods: {
handleRowCheckboxChange(rowIndex: 1 | 2 | 3 | 4 | 5) {
const isRowEnabled = this.order[`row${rowIndex}`].enabled;
updatePlaceholders() {
this.order.rows.forEach((_, i) => {
this.handleRowCheckboxChange((i + 1) as TOrderRows);
});
},
handleRowCheckboxChange(rowIndex: TOrderRows) {
const isRowEnabled = this.order.rows[rowIndex - 1].enabled;
const rowRef = this.$refs[`row-${rowIndex}`] as HTMLTableElement;
if (!isRowEnabled) {
rowRef.querySelectorAll('input[type="text"]').forEach((node) => {
if (node.getAttribute('placeholder') != null) {
node.setAttribute('holder', node.getAttribute('placeholder')!);
node.removeAttribute('placeholder');
}
});
return;
}
rowRef.querySelectorAll('input[type="text"]').forEach((node) => {
if (node.getAttribute('holder')) node.setAttribute('placeholder', node.getAttribute('holder')!);
this.$nextTick(() => {
handleOrderPlaceholders(isRowEnabled, rowRef);
});
},
generateMessage() {
let message = this.rowMethods[0]();
for (let i = 1; i <= 5; i++) {
if (!this.order[`row${i as OrderRowRange}`].enabled) continue;
for (let i = 0; i < 5; i++) {
if (!this.order.rows[i].enabled) continue;
message += ` <b> [ ${i} ] </b> ${this.rowMethods[i]()}`;
message += ` <b> [ ${i + 1} ] </b> ${this.rowMethods[i + 1]()}`;
}
this.store.orderMessage = message;
src/components/OrderS.vue
+138 -67
View File
@@ -25,33 +25,58 @@
<input
type="checkbox"
id="row-enabled-1"
v-model="order.row1.enabled"
v-model="order.rows[0].enabled"
@change="handleRowCheckboxChange(1)"
/>
</div>
</td>
<td ref="row-1">
zezwalam po otrzymaniu
<select id="select-1a" v-model="order.row1.option1">
<select id="select-1a" v-model="order.rows[0].option1">
<option :value="`sygnału &quot;nakaz jazdy&quot;`">sygnału "nakaz jazdy"</option>
<option value="tylko tego rozkazu pisemnego">tylko tego rozkazu pisemnego</option>
</select>
<div style="margin-top: 0.5rem">
<input type="radio" name="section-1a" id="radio-1a-1" value="radio-1a-1" v-model="order.row1.radio1" />
<input
type="radio"
name="section-1a"
id="radio-1a-1"
value="radio-1a-1"
v-model="order.rows[0].radio1"
@change="handleRowCheckboxChange(1)"
/>
<label for="radio-1a-1">
przejechać obok wskazującego sygnał "Stój" semafora
<select id="select-signal" v-model="order.row1.optionSignal">
<select id="select-signal" v-model="order.rows[0].optionSignal">
<option value="wyjazdowego">wyjazdowego</option>
<option value="drogowskazowego">drogowskazowego</option>
</select>
<input type="text" v-model="order.row1.signal1" holder="nazwa sem." />
<input
type="text"
v-model="order.rows[0].signal1"
holder="nazwa sem."
:radio-checked="order.rows[0].radio1 == 'radio-1a-1'"
/>
<br />
</label>
<hr />
<input type="radio" name="section-1a" id="radio-1a-2" value="radio-1a-2" v-model="order.row1.radio1" />
<input
type="radio"
name="section-1a"
id="radio-1a-2"
value="radio-1a-2"
v-model="order.rows[0].radio1"
@change="handleRowCheckboxChange(1)"
/>
<label for="radio-1a-2">
wyjechać z toru nr <input type="text" v-model="order.row1.trackNo" holder="nr toru" /> nie
posiadającego semafora wyjazdowego
wyjechać z toru nr
<input
type="text"
v-model="order.rows[0].trackNo"
holder="nr toru"
:radio-checked="order.rows[0].radio1 == 'radio-1a-2'"
/>
nie posiadającego semafora wyjazdowego
</label>
</div>
</td>
@@ -63,7 +88,7 @@
<input
type="checkbox"
id="row-enabled-2"
v-model="order.row2.enabled"
v-model="order.rows[1].enabled"
@change="handleRowCheckboxChange(2)"
/>
</div>
@@ -76,20 +101,36 @@
name="section-2a"
id="radio-2a-1"
value="wyjazdowego"
v-model="order.row2.signalType"
@change="handleRowCheckboxChange(2)"
v-model="order.rows[1].signalType"
/>
<label for="radio-2a-1">wjazdowego <input type="text" v-model="order.row2.signal1" /> </label>
<label for="radio-2a-1">
wjazdowego
<input
type="text"
v-model="order.rows[1].signal1"
holder="nazwa sem."
:radio-checked="order.rows[1].signalType == 'wyjazdowego'"
/>
</label>
<br />
<input
type="radio"
name="section-2a"
id="radio-2a-2"
value="drogowskazowego"
v-model="order.row2.signalType"
@change="handleRowCheckboxChange(2)"
v-model="order.rows[1].signalType"
/>
<label for="radio-2a-2"
>drogowskazowego <input type="text" v-model="order.row2.signal2" /> (odnoszącego się do wyjazdu
pociągu)
<label for="radio-2a-2">
drogowskazowego
<input
type="text"
v-model="order.rows[1].signal2"
holder="nazwa sem."
:radio-checked="order.rows[1].signalType == 'drogowskazowego'"
/>
(odnoszącego się do wyjazdu pociągu)
</label>
<br />
<input
@@ -97,14 +138,35 @@
name="section-2a"
id="radio-2a-3"
value="odstępowego"
v-model="order.row2.signalType"
@change="handleRowCheckboxChange(2)"
v-model="order.rows[1].signalType"
/>
<label for="radio-2a-3">odstępowego <input type="text" v-model="order.row2.signal3" /></label>
<label for="radio-2a-3">
odstępowego
<input
type="text"
v-model="order.rows[1].signal3"
holder="nazwa sem."
:radio-checked="order.rows[1].signalType == 'odstępowego'"
/></label>
<br />
<input type="radio" name="section-2a" id="radio-2a-4" value="toru" v-model="order.row2.signalType" />
<input
type="radio"
name="section-2a"
id="radio-2a-4"
value="toru"
v-model="order.rows[1].signalType"
@change="handleRowCheckboxChange(2)"
/>
<label for="radio-2a-4">
wjechać z zamkniętego toru nr <input type="text" v-model="order.row2.trackNo" /> nie posiadającego
semafora wjazdowego
wjechać z zamkniętego toru nr
<input
type="text"
v-model="order.rows[1].trackNo"
holder="nr toru"
:radio-checked="order.rows[1].signalType == 'toru'"
/>
nie posiadającego semafora wjazdowego
</label>
</div>
</td>
@@ -116,19 +178,20 @@
<input
type="checkbox"
id="row-enabled-3"
v-model="order.row3.enabled"
v-model="order.rows[2].enabled"
@change="handleRowCheckboxChange(3)"
/>
</div>
</td>
<td ref="row-3">
Od <input type="text" v-model="order.row3.from" /> do <input type="text" v-model="order.row3.to" /> po
torze nr <input type="text" v-model="order.row3.trackNo" /> ruch pociągów prowadzony jest w odstępie
posterunków następczych. Wskazania semaforów sbl są nieważne. Zachować ostrożność od ostatniego semafora
ze wskaźnikiem "W18". Szlak wolny, ostatni pociąg nr
<input type="text" v-model="order.row3.trainNo" /> przybył do
<input type="text" v-model="order.row3.arrivedTo" /> o godzinie
<input type="text" v-model="order.row3.hour" />
Od <input type="text" v-model="order.rows[2].from" holder="stacja / post." /> do
<input type="text" v-model="order.rows[2].to" holder="stacja / post." /> po torze nr
<input type="text" v-model="order.rows[2].trackNo" holder="nr toru" /> ruch pociągów prowadzony jest w
odstępie posterunków następczych. Wskazania semaforów sbl są nieważne. Zachować ostrożność od ostatniego
semafora ze wskaźnikiem "W18". Szlak wolny, ostatni pociąg nr
<input type="text" v-model="order.rows[2].trainNo" holder="nr pociągu" /> przybył do
<input type="text" v-model="order.rows[2].arrivedTo" holder="stacja / post." /> o godzinie
<input type="text" v-model="order.rows[2].hour" holder="godzina" />
</td>
</tr>
<tr style="height: 255px">
@@ -138,7 +201,7 @@
<input
type="checkbox"
id="row-enabled-4"
v-model="order.row4.enabled"
v-model="order.rows[3].enabled"
@change="handleRowCheckboxChange(4)"
/>
</div>
@@ -146,7 +209,7 @@
<td ref="row-4">
Inne:
<br />
<textarea id="" cols="30" rows="10" v-model="order.row4.content"></textarea>
<textarea id="" cols="30" rows="10" v-model="order.rows[3].content" placeholder="Np.: "></textarea>
</td>
</tr>
</tbody>
@@ -157,9 +220,10 @@
<script lang="ts">
import { defineComponent, reactive } from 'vue';
import { handleOrderPlaceholders } from '../handlers/orderPlaceholderHandler';
import { useStore } from '../store/store';
type OrderRowRange = 1 | 2 | 3 | 4;
type TOrderRows = 1 | 2 | 3 | 4;
export default defineComponent({
name: 'OrderS',
@@ -178,36 +242,36 @@ export default defineComponent({
},
() => {
const { row1 } = order;
const row = order.rows[0];
let message = `zezwalam po otrzymaniu ${row1.option1 || '_'}`;
let message = `zezwalam po otrzymaniu ${row.option1 || '_'}`;
if (row1.radio1 == 'radio-1a-1')
message += ` przejechać obok wskazującego sygnał "Stój" semafora ${row1.optionSignal || '_'} ${
row1.signal1 || '_'
if (row.radio1 == 'radio-1a-1')
message += ` przejechać obok wskazującego sygnał "Stój" semafora ${row.optionSignal || '_'} ${
row.signal1 || '_'
}`;
else message += ` wyjechać z toru nr ${row1.trackNo || '_'} nie posiadającego semafora wyjazdowego`;
else message += ` wyjechać z toru nr ${row.trackNo || '_'} nie posiadającego semafora wyjazdowego`;
return message;
},
() => {
const { row2 } = order;
const row = order.rows[1];
let message = `zezwalam przejechać obok wskazującego sygnał "Stój" semafora `;
switch (row2.signalType) {
switch (row.signalType) {
case 'wyjazdowego':
message += `wjazdowego ${row2.signal1 || '_'}`;
message += `wjazdowego ${row.signal1 || '_'}`;
break;
case 'drogowskazowego':
message += `drogowskazowego ${row2.signal2 || '_'}`;
message += `drogowskazowego ${row.signal2 || '_'}`;
break;
case 'odstępowego':
message += `odstępowego ${row2.signal3 || '_'}`;
message += `odstępowego ${row.signal3 || '_'}`;
break;
case 'toru':
message += `wjechać z zamkniętego toru nr ${row2.trackNo || '_'} nie posiadającego semafora wjazdowego`;
message += `wjechać z zamkniętego toru nr ${row.trackNo || '_'} nie posiadającego semafora wjazdowego`;
break;
default:
@@ -217,19 +281,19 @@ export default defineComponent({
return message;
},
() => {
const { row3 } = order;
const row = order.rows[2];
return `Od ${row3.from || '_'} do ${row3.to || '_'} po torze nr ${
row3.trackNo || '_'
return `Od ${row.from || '_'} do ${row.to || '_'} po torze nr ${
row.trackNo || '_'
} ruch pociągów prowadzony jest w odstępie posterunków następczych. Wskazania semaforów sbl są nieważne. Zachować ostrożność od ostatniego semafora ze wskaźnikiem "W18". Szlak wolny, ostatni pociąg nr ${
row3.trainNo || '_'
} przybył do ${row3.arrivedTo || '_'} o godzinie ${row3.hour || '_'}`;
row.trainNo || '_'
} przybył do ${row.arrivedTo || '_'} o godzinie ${row.hour || '_'}`;
},
() => {
const { row4 } = order;
const row = order.rows[3];
return `Inne: ${row4.content}`;
return `Inne: ${row.content}`;
},
];
@@ -244,6 +308,10 @@ export default defineComponent({
this.generateMessage();
},
mounted() {
this.updatePlaceholders();
},
watch: {
order: {
deep: true,
@@ -251,37 +319,40 @@ export default defineComponent({
this.generateMessage();
},
},
'order.rows': {
deep: true,
handler() {
this.updatePlaceholders();
},
},
},
methods: {
updatePlaceholders() {
this.order.rows.forEach((_, i) => {
this.handleRowCheckboxChange((i + 1) as TOrderRows);
});
},
generateMessage() {
let message = this.rowMethods[0]();
for (let i = 1; i <= 4; i++) {
if (!this.order[`row${i as OrderRowRange}`].enabled) continue;
for (let i = 0; i < 4; i++) {
if (!this.order.rows[i].enabled) continue;
message += ` <b> [ ${i} ] </b> ${this.rowMethods[i]()}`;
message += ` <b> [ ${i + 1} ] </b> ${this.rowMethods[i]()}`;
}
this.store.orderMessage = message;
},
handleRowCheckboxChange(rowIndex: OrderRowRange) {
const isRowEnabled = this.order[`row${rowIndex}`].enabled;
handleRowCheckboxChange(rowIndex: TOrderRows) {
const isRowEnabled = this.order.rows[rowIndex - 1].enabled;
const rowRef = this.$refs[`row-${rowIndex}`] as HTMLTableElement;
if (!isRowEnabled) {
rowRef.querySelectorAll('input[type="text"]').forEach((node) => {
node.setAttribute('holder', node.getAttribute('placeholder') || '');
node.removeAttribute('placeholder');
});
return;
}
rowRef.querySelectorAll('input[type="text"]').forEach((node) => {
if (node.getAttribute('holder') != null) node.setAttribute('placeholder', node.getAttribute('holder')!);
node.removeAttribute('holder');
this.$nextTick(() => {
handleOrderPlaceholders(isRowEnabled, rowRef);
});
},
},
src/handlers/orderPlaceholderHandler.ts
+23
View File
@@ -0,0 +1,23 @@
// For use inside OrderS and OrderN
export const handleOrderPlaceholders = (isRowEnabled: boolean, rowRef: HTMLTableElement) => {
rowRef.querySelectorAll('input[type="text"]').forEach((node) => {
if (!isRowEnabled) {
if (node.getAttribute('placeholder') != null) {
node.setAttribute('holder', node.getAttribute('placeholder')!);
node.removeAttribute('placeholder');
}
return;
}
if (!node.getAttribute('holder')) return;
const radioCheckedAttr = node.getAttribute('radio-checked');
if (radioCheckedAttr == null) return node.setAttribute('placeholder', node.getAttribute('holder')!);
if (radioCheckedAttr == 'true') return node.setAttribute('placeholder', node.getAttribute('holder')!);
if (node.getAttribute('placeholder') == null) return;
node.setAttribute('holder', node.getAttribute('placeholder')!);
node.removeAttribute('placeholder');
});
};
src/mixins/orderStorageMixin.ts
+2 -15
View File
@@ -19,21 +19,6 @@ export default defineComponent({
createdAt: Date.now(),
};
// switch (this.store.chosenOrderType) {
// case 'orderN':
// orderObj['orderBody'] = this.store.orderN;
// break;
// case 'orderS':
// orderObj['orderBody'] = this.store.orderS;
// break;
// case 'orderO':
// orderObj['orderBody'] = this.store.orderO;
// break;
// default:
// break;
// }
const headerInfo = orderObj['orderBody']['header'];
if (!headerInfo['orderNo']) return -1;
@@ -129,6 +114,8 @@ export default defineComponent({
(this.store.orderFooter as any)[key] = localOrderFooter[key];
}
console.log(this.store[this.store.chosenOrderType]);
this.store.orderMode = 'OrderMessage';
},
},
src/store/store.ts
+87 -88
View File
@@ -1,11 +1,12 @@
import { defineStore } from 'pinia';
import { IOrderN, IOrderO, IOrderS, TOrder } from '../types/orderTypes';
export const useStore = defineStore('store', {
state: () => {
return {
helperModalOpen: false,
chosenOrderType: 'orderN' as 'orderO' | 'orderS' | 'orderN',
chosenOrderType: 'orderN' as TOrder,
chosenLocalOrderId: '',
orderMode: 'OrderMessage',
@@ -72,7 +73,7 @@ export const useStore = defineStore('store', {
},
],
other: '',
},
} as IOrderO,
orderN: {
header: {
@@ -81,61 +82,59 @@ export const useStore = defineStore('store', {
date: new Date().toLocaleDateString('pl-PL', { day: '2-digit', month: 'long' }),
},
row1: {
enabled: false,
from: '',
to: '',
trackNo: '',
trackNo2: '',
},
rows: [
{
enabled: false,
from: '',
to: '',
trackNo: '',
trackNo2: '',
},
{
enabled: false,
option1: 'sygnału "Nakaz Jazdy"',
option2: 'lewy',
option3: 'lewy',
signal1: '',
signal2: '',
signal3: '',
signalType: 'wyjazdowego',
checkbox: 'checkbox-2a',
direction1: '',
direction2: '',
trackNoFrom: '',
trackNoTo1: '',
trackNoTo2: '',
},
{
enabled: false,
option1: 'Jazda',
option2: 'pociąg',
row2: {
enabled: false,
option1: 'sygnału "Nakaz Jazdy"',
option2: 'lewy',
option3: 'lewy',
signal1: '',
signal2: '',
signal3: '',
signalType: 'wyjazdowego',
checkbox: 'checkbox-2a',
direction1: '',
direction2: '',
trackNoFrom: '',
trackNoTo1: '',
trackNoTo2: '',
},
row3: {
enabled: false,
option1: 'Jazda',
option2: 'pociąg',
direction: '',
toKilometer: '',
trackNo: '',
untilHour: '',
untilMin: '',
},
row4: {
enabled: false,
trackNo: '',
optionStation: 'stację',
stationName: '',
checkbox: 'checkbox-4a',
side: 'lewej',
},
row5: {
enabled: false,
trackNo: '',
direction: '',
stationType: 'stację',
stationName: '',
on: '',
},
},
direction: '',
toKilometer: '',
trackNo: '',
untilHour: '',
untilMin: '',
},
{
enabled: false,
trackNo: '',
optionStation: 'stację',
stationName: '',
checkbox: 'checkbox-4a',
side: 'lewej',
},
{
enabled: false,
trackNo: '',
direction: '',
stationType: 'stację',
stationName: '',
on: '',
},
],
} as IOrderN,
orderS: {
header: {
@@ -145,42 +144,42 @@ export const useStore = defineStore('store', {
date: new Date().toLocaleDateString('pl-PL', { day: '2-digit', month: 'long' }),
},
row1: {
enabled: false,
option1: 'sygnału "nakaz jazdy"',
optionSignal: 'wyjazdowego',
radio1: 'radio-1a-1',
signal1: '',
trackNo: '',
},
rows: [
{
enabled: false,
option1: 'sygnału "nakaz jazdy"',
optionSignal: 'wyjazdowego',
radio1: 'radio-1a-1',
signal1: '',
trackNo: '',
},
row2: {
enabled: false,
signalType: 'wyjazdowego',
signal1: '',
signal2: '',
signal3: '',
trackNo: '',
},
{
enabled: false,
signalType: 'wyjazdowego',
signal1: '',
signal2: '',
signal3: '',
trackNo: '',
},
row3: {
enabled: false,
from: '',
to: '',
trackNo: '',
trainNo: '',
arrivedTo: '',
hour: '',
},
{
enabled: false,
from: '',
to: '',
trackNo: '',
trainNo: '',
arrivedTo: '',
hour: '',
},
row4: {
enabled: false,
content: '',
},
},
{
enabled: false,
content: '',
},
],
} as IOrderS,
};
},
});
src/types/orderTypes.ts
+158 -1
View File
@@ -1,8 +1,165 @@
export type TOrder = 'orderO' | 'orderS' | 'orderN';
export interface LocalStorageOrder {
id: string;
orderType: 'orderO' | 'orderS' | 'orderN';
orderType: TOrder;
orderBody: any;
orderFooter: any;
createdAt?: number;
updatedAt?: number;
}
export interface IOrderN {
header: {
orderNo: string;
trainNo: string;
date: string;
};
rows: [
{
enabled: boolean;
from: string;
to: string;
trackNo: string;
trackNo2: string;
},
{
enabled: boolean;
option1: string;
option2: string;
option3: string;
signal1: string;
signal2: string;
signal3: string;
signalType: string;
checkbox: string;
direction1: string;
direction2: string;
trackNoFrom: string;
trackNoTo1: string;
trackNoTo2: string;
},
{
enabled: boolean;
option1: string;
option2: string;
direction: string;
toKilometer: string;
trackNo: string;
untilHour: string;
untilMin: string;
},
{
enabled: boolean;
trackNo: string;
optionStation: string;
stationName: string;
checkbox: string;
side: string;
},
{
enabled: boolean;
trackNo: string;
direction: string;
stationType: string;
stationName: string;
on: string;
}
];
}
export interface IOrderS {
header: {
orderNo: string;
trainNo: string;
for: string;
date: string;
};
rows: [
{
enabled: boolean;
option1: string;
optionSignal: string;
radio1: string;
signal1: string;
trackNo: string;
},
{
enabled: boolean;
signalType: string;
signal1: string;
signal2: string;
signal3: string;
trackNo: string;
},
{
enabled: boolean;
from: string;
to: string;
trackNo: string;
trainNo: string;
arrivedTo: string;
hour: string;
},
{
enabled: boolean;
content: string;
}
];
}
export interface IOrderO {
header: {
orderNo: string;
trainNo: string;
date: string;
};
orderList: [
{
name: string;
from: string;
to: string;
vmax: string;
jo: boolean;
reason: string;
},
{
name: string;
from: string;
to: string;
vmax: string;
jo: boolean;
reason: string;
},
{
name: string;
from: string;
to: string;
vmax: string;
jo: boolean;
reason: string;
},
{
name: string;
from: string;
to: string;
vmax: string;
jo: boolean;
reason: string;
},
{
name: string;
from: string;
to: string;
vmax: string;
jo: boolean;
reason: string;
}
];
other: string;
}