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

Rozkaz S

Browse Source
This commit is contained in:
Spythere
2022-07-20 19:19:54 +02:00
parent a23e11d566
commit f953d8fe7f
5 changed files with 482 additions and 338 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Order.vue
+15 -35
View File
@@ -1,8 +1,10 @@
<template> <template>
<div class="rozkaz"> <div class="rozkaz">
<keep-alive> <transition name="order-anim" mode="out-in">
<component :is="chosenOrderComponent"></component> <keep-alive>
</keep-alive> <component :is="chosenOrderComponent"></component>
</keep-alive>
</transition>
<section class="info"> <section class="info">
<table class="info-table"> <table class="info-table">
@@ -103,7 +105,7 @@ export default defineComponent({
} }
@media screen and (max-width: 550px) { @media screen and (max-width: 550px) {
font-size: 3vw; font-size: 3vw;
} }
} }
@@ -145,7 +147,6 @@ select {
width: 10%; width: 10%;
text-align: center; text-align: center;
vertical-align: top;
font-weight: bold; font-weight: bold;
} }
@@ -153,8 +154,9 @@ select {
td { td {
padding: 0.35em; padding: 0.35em;
text-align: justify; text-align: justify;
vertical-align: top;
line-height: 1.4em; line-height: 1.5em;
} }
} }
@@ -183,37 +185,15 @@ table.info-table {
text-align: center; text-align: center;
} }
tr:not(.chosen) > td.row-content { .order-anim {
opacity: 0.45; &-enter-active,
user-select: none; &-leave-active {
transition: opacity 150ms ease-in-out;
position: relative;
&::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
tr.row {
&:not(.chosen) {
cursor: pointer;
} }
&.chosen > .row-number { &-enter-from,
color: red; &-leave-to {
} opacity: 0;
&:hover {
outline: 3px solid red;
& td.row-number {
color: red;
}
} }
} }
</style> </style>
src/components/OrderN.vue
+213 -210
View File
@@ -1,207 +1,208 @@
<template> <template>
<section class="header" ref="header"> <section class="order-n">
<h2 class="flex-center"> <section class="header" ref="header">
Rozkaz pisemny "N" nr <h2 class="flex-center">
<input type="text" v-model="order.header.orderNo" /> Rozkaz pisemny "N" nr
</h2> <input type="text" v-model="order.header.orderNo" />
</h2>
<div class="flex-row"> <div class="flex-row">
dla pociągu nr <input type="text" v-model="order.header.trainNo" /> dnia dla pociągu nr <input type="text" v-model="order.header.trainNo" /> dnia
<input type="text" v-model="order.header.date" /> {{ new Date().getUTCFullYear() }}r. <input type="text" v-model="order.header.date" /> {{ new Date().getUTCFullYear() }}r.
</div> </div>
</section> </section>
<section class="table-section">
<section class="table-section"> <table class="options-table">
<table class="options-table"> <tbody>
<tbody> <tr>
<tr> <td>
<td> <label for="row-enabled-1">1</label>
<label for="row-enabled-1">1</label> <div>
<div> <input type="checkbox" id="row-enabled-1" v-model="order.row1.enabled" />
<input type="checkbox" id="row-enabled-1" v-model="order.row1.enabled" /> </div>
</div> </td>
</td> <td>
<td> Od <input type="text" v-model="order.row1.from" /> do <input type="text" v-model="order.row1.to" /> tor nr
Od <input type="text" v-model="order.row1.from" /> do <input type="text" v-model="order.row1.to" /> tor nr <input type="text" v-model="order.row1.trackNo" /> jest zamknięty, ruch jednotorowy dwukierunkowy
<input type="text" v-model="order.row1.trackNo" /> jest zamknięty, ruch jednotorowy dwukierunkowy wprowadzono po torze nr <input type="text" v-model="order.row1.trackNo2" />
wprowadzono po torze nr <input type="text" v-model="order.row1.trackNo2" /> </td>
</td> </tr>
</tr> <tr>
<td>
<tr> <label for="row-enabled-2">2</label>
<td> <div>
<label for="row-enabled-2">2</label> <input type="checkbox" id="row-enabled-2" v-model="order.row2.enabled" />
<div> </div>
<input type="checkbox" id="row-enabled-2" v-model="order.row2.enabled" /> </td>
</div> <td>
</td> <strong>ZEZWALAM</strong> po otrzymaniu
<td> <select id="select-2a" v-model="order.row2.option1">
<strong>ZEZWALAM</strong> po otrzymaniu <option value='sygnału "Nakaz Jazdy"'>sygnału "Nakaz Jazdy"</option>
<select id="select-2a" v-model="order.row2.option1"> <option value="tylko tego rozkazu pisemnego">tylko tego rozkazu pisemnego</option>
<option value='sygnału "Nakaz Jazdy"'>sygnału "Nakaz Jazdy"</option> </select>
<option value="tylko tego rozkazu pisemnego">tylko tego rozkazu pisemnego</option> <div style="margin-top: 0.5rem">
</select> <input
type="radio"
<div style="margin-top: 0.5rem"> name="section-2"
<input id="checkbox-2a"
type="radio" value="checkbox-2a"
name="section-2" v-model="order.row2.checkbox"
id="checkbox-2a" :checked="order.row2.checkbox == 'checkbox-2a'"
value="checkbox-2a" />
v-model="order.row2.checkbox" <label for="checkbox-2a">
:checked="order.row2.checkbox == 'checkbox-2a'" przejechać obok wskazującego sygnał "Stój" semafora
/> <div style="margin-left: 1rem">
<input
<label for="checkbox-2a"> type="radio"
przejechać obok wskazującego sygnał "Stój" semafora name="section-2a"
id="radio-2a-1"
<div style="margin-left: 1rem"> value="wyjazdowego"
<input v-model="order.row2.signalType"
type="radio" />
name="section-2a" <label for="radio-2a-1">wyjazdowego <input type="text" v-model="order.row2.signal1" /> </label>
id="radio-2a-1" <br />
value="wyjazdowego" <input
v-model="order.row2.signalType" type="radio"
/> name="section-2a"
<label for="radio-2a-1">wyjazdowego <input type="text" v-model="order.row2.signal1" /> </label> id="radio-2a-2"
<br /> value="drogowskazowego"
<input v-model="order.row2.signalType"
type="radio" />
name="section-2a" <label for="radio-2a-2"
id="radio-2a-2" >drogowskazowego <input type="text" v-model="order.row2.signal2" /> (odnoszącego się do wyjazdu
value="drogowskazowego" pociągu)
v-model="order.row2.signalType" </label>
/> <br />
<label for="radio-2a-2" <input
>drogowskazowego <input type="text" v-model="order.row2.signal2" /> (odnoszącego się do wyjazdu type="radio"
pociągu) name="section-2a"
</label> id="radio-2a-3"
<br /> value="wjazdowego"
<input v-model="order.row2.signalType"
type="radio" />
name="section-2a" <label for="radio-2a-3"
id="radio-2a-3" >wjazdowego <input type="text" v-model="order.row2.signal3" /> na post. odg. bez sem.
value="wjazdowego" wyjazdowego</label
v-model="order.row2.signalType" >
/> </div>
<label for="radio-2a-3" i wyjechać w kierunku <input type="text" v-model="order.row2.direction" /> na tor szlakowy
>wjazdowego <input type="text" v-model="order.row2.signal3" /> na post. odg. bez sem. <select v-model="order.row2.option2">
wyjazdowego</label <option value="lewy">lewy</option>
> <option value="prawy">prawy</option>
</div> </select>
nr <input type="text" v-model="order.row2.trackNoTo1" />
i wyjechać w kierunku <input type="text" v-model="order.row2.direction" /> na tor szlakowy </label>
<select v-model="order.row2.option2"> </div>
<option value="lewy">lewy</option> <div style="margin-top: 0.5rem">
<option value="prawy">prawy</option> <input
</select> type="radio"
nr <input type="text" v-model="order.row2.trackNoTo1" /> name="section-2"
</label> id="checkbox-2b"
</div> value="checkbox-2b"
v-model="order.row2.checkbox"
<div style="margin-top: 0.5rem"> :checked="order.row2.checkbox == 'checkbox-2b'"
<input />
type="radio" <label for="checkbox-2b">
name="section-2" z toru nr <input type="text" v-model="order.row2.trackNoFrom" /> nie posiadającego semafora
id="checkbox-2b" wyjazdowego wyjechać w kierunku <input type="text" /> na tor szlakowy
value="checkbox-2b" <select v-model="order.row2.option3">
v-model="order.row2.checkbox" <option value="lewy">lewy</option>
:checked="order.row2.checkbox == 'checkbox-2b'" <option value="prawy">prawy</option>
/> </select>
nr <input type="text" v-model="order.row2.trackNoTo2" />
<label for="checkbox-2b"> </label>
z toru nr <input type="text" v-model="order.row2.trackNoFrom" /> nie posiadającego semafora wyjazdowego </div>
wyjechać w kierunku <input type="text" /> na tor szlakowy </td>
<select v-model="order.row2.option3"> </tr>
<option value="lewy">lewy</option> <tr>
<option value="prawy">prawy</option> <td>
</select> <label for="row-enabled-3">3</label>
nr <input type="text" v-model="order.row2.trackNoTo2" /> <div>
</label> <input type="checkbox" id="row-enabled-3" v-model="order.row3.enabled" />
</div> </div>
</td> </td>
</tr> <td>
<select v-model="order.row3.option1">
<tr> <option value="Jazda">Jazda</option>
<td> <option value="Popychanie">Popychanie</option>
<label for="row-enabled-3">3</label> </select>
<div> pociągu odbędzie się w kierunku: <input type="text" v-model="order.row3.direction" /> do km
<input type="checkbox" id="row-enabled-3" v-model="order.row3.enabled" /> <input type="text" v-model="order.row3.toKilometer" /> skąd
</div> <select v-model="order.row3.option2">
</td> <option value="pociąg">pociąg</option>
<td> <option value="popychacz">popychacz</option>
<select v-model="order.row3.option1"> </select>
<option value="Jazda">Jazda</option> ma wrócić po torze lewym nr <input type="text" v-model="order.row3.trackNo" /> najpóźniej o godz.
<option value="Popychanie">Popychanie</option> <input type="text" v-model="order.row3.untilHour" /> min.
</select> <input type="text" v-model="order.row3.untilMin" />
pociągu odbędzie się w kierunku: <input type="text" v-model="order.row3.direction" /> do km </td>
<input type="text" v-model="order.row3.toKilometer" /> skąd </tr>
<select v-model="order.row3.option2"> <tr>
<option value="pociąg">pociąg</option> <td>
<option value="popychacz">popychacz</option> <label for="row-enabled-4">4</label>
</select> <div>
ma wrócić po torze lewym nr <input type="text" v-model="order.row3.trackNo" /> najpóźniej o godz. <input type="checkbox" id="row-enabled-4" v-model="order.row4.enabled" />
<input type="text" v-model="order.row3.untilHour" /> min. </div>
<input type="text" v-model="order.row3.untilMin" /> </td>
</td> <td>
</tr> <strong>WJAZD</strong> z toru szlakowego nr <input type="text" v-model="order.row4.trackNo" /> na
<select v-model="order.row4.optionStation">
<tr> <option value="stację">stację</option>
<td> <option value="posterunek odgałęźny">posterunek odgałęźny</option>
<label for="row-enabled-4">4</label> </select>
<div> <input type="text" v-model="order.row4.stationName" /> odbędzie się po otrzymaniu:
<input type="checkbox" id="row-enabled-4" v-model="order.row4.enabled" /> <div style="margin-top: 0.5rem">
</div> <input
</td> type="radio"
<td> name="section-4"
<strong>WJAZD</strong> z toru szlakowego nr <input type="text" v-model="order.row4.trackNo" /> na id="checkbox-4a"
<select v-model="order.row4.optionStation"> value="checkbox-4a"
<option value="stację">stację</option> v-model="order.row4.checkbox"
<option value="posterunek odgałęźny">posterunek odgałęźny</option> />
</select> <label for="checkbox-4a">
<input type="text" v-model="order.row4.stationName" /> odbędzie się po otrzymaniu: sygnału zastępczego "Sz" na osobnym urządzeniu ustawionym z
<select v-model="order.row4.side">
<div style="margin-top: 0.5rem"> <option value="lewej">lewej</option>
<input type="radio" name="section-4" id="checkbox-4a" value="checkbox-4a" v-model="order.row4.checkbox" /> <option value="prawej">prawej</option>
<label for="checkbox-4a"> </select>
sygnału zastępczego "Sz" na osobnym urządzeniu ustawionym z strony toru
<select v-model="order.row4.side"> </label>
<option value="lewej">lewej</option> </div>
<option value="prawej">prawej</option> <div style="margin-top: 0.5rem">
</select> <input
strony toru type="radio"
</label> name="section-4"
</div> id="checkbox-4b"
value="checkbox-4b"
<div style="margin-top: 0.5rem"> v-model="order.row4.checkbox"
<input type="radio" name="section-4" id="checkbox-4b" value="checkbox-4b" v-model="order.row4.checkbox" /> />
<label for="checkbox-4b"> <label for="checkbox-4b">
rozkazu pisemnego "N" (doręczonego lub przekazanego przez urządzenia łączności) rozkazu pisemnego "N" (doręczonego lub przekazanego przez urządzenia łączności)
</label> </label>
</div> </div>
</td> </td>
</tr> </tr>
<tr>
<tr> <td>
<td> <label for="row-enabled-5">5</label>
<label for="row-enabled-5">5</label> <div>
<div> <input type="checkbox" id="row-enabled-5" v-model="order.row5.enabled" />
<input type="checkbox" id="row-enabled-5" v-model="order.row5.enabled" /> </div>
</div> </td>
</td> <td>
<td> <strong>ZEZWALAM</strong> wjechać z toru szlakowego nr
<strong>ZEZWALAM</strong> wjechać z toru szlakowego nr <input type="text" v-model="order.row5.trackNo" /> z <input type="text" v-model="order.row5.trackNo" /> z kierunku
kierunku <input type="text" v-model="order.row5.direction" /> na <input type="text" v-model="order.row5.direction" /> na
<select v-model="order.row5.stationType"> <select v-model="order.row5.stationType">
<option value="stację">stację</option> <option value="stację">stację</option>
<option value="posterunek odgałęźny">posterunek odgałęźny</option> <option value="posterunek odgałęźny">posterunek odgałęźny</option>
</select> </select>
<input type="text" v-model="order.row5.stationName" /> <input type="text" v-model="order.row5.stationName" />
i przejechać obok sygnału "Stój" na <input type="text" v-model="order.row5.on" /> i przejechać obok sygnału "Stój" na <input type="text" v-model="order.row5.on" />
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</section>
</section> </section>
</template> </template>
@@ -213,7 +214,7 @@ type OrderRowRange = 1 | 2 | 3 | 4 | 5;
export default defineComponent({ export default defineComponent({
name: 'OrderN', name: 'OrderN',
setup() { setup() {
const store = useStore(); const store = useStore();
const order = reactive(store.orderN); const order = reactive(store.orderN);
@@ -247,7 +248,7 @@ export default defineComponent({
if (row2.checkbox == 'checkbox-2a') { if (row2.checkbox == 'checkbox-2a') {
message += ` przejechać obok wskazującego sygnał "Stój" semafora ${row2.signalType || '_'} `; message += ` przejechać obok wskazującego sygnał "Stój" semafora ${row2.signalType || '_'} `;
if (row2.signalType == 'wyjazdowego') message += row2.signal1; if (row2.signalType == 'wyjazdowego') message += row2.signal1 || "_";
if (row2.signalType == 'drogowskazowego') if (row2.signalType == 'drogowskazowego')
message += `${row2.signal2 || '_'} (odnoszącego się do wyjazdu pociągu)`; message += `${row2.signal2 || '_'} (odnoszącego się do wyjazdu pociągu)`;
if (row2.signalType == 'wjazdowego') message += `${row2.signal3 || '_'} na post. odg. bez sem. wyjazdowego`; if (row2.signalType == 'wjazdowego') message += `${row2.signal3 || '_'} na post. odg. bez sem. wyjazdowego`;
@@ -271,7 +272,11 @@ export default defineComponent({
() => { () => {
const { row3 } = order; const { row3 } = order;
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 = `${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 || '_'}`;
return message; return message;
}, },
@@ -315,7 +320,7 @@ export default defineComponent({
}, },
}, },
mounted() { activated() {
this.generateMessage(); this.generateMessage();
}, },
@@ -330,11 +335,9 @@ export default defineComponent({
} }
this.store.orderMessage = message; this.store.orderMessage = message;
}, },
generateFooter() { generateFooter() {},
}
}, },
}); });
</script> </script>
src/components/OrderS.vue
+234 -87
View File
@@ -1,110 +1,257 @@
<template> <template>
<section class="header"> <section class="order-s">
<h2 class="flex-center"> <section class="header">
Rozkaz pisemny "S" nr <h2 class="flex-center">
<input type="text" v-model="order.header.orderNo" /> Rozkaz pisemny "S" nr
</h2> <input type="text" v-model="order.header.orderNo" />
</h2>
<div class="flex-row"> <div class="flex-row">
dla dla
<select id="select-header" v-model="order.header.for"> <select id="select-header" v-model="order.header.for">
<option value="pociągu">pociągu</option> <option value="pociągu">pociągu</option>
<option value="manewru">manewru</option> <option value="manewru">manewru</option>
</select> </select>
nr <input type="text" v-model="order.header.trainNo" /> dnia <input type="text" v-model="order.header.date" /> nr <input type="text" v-model="order.header.trainNo" /> dnia <input type="text" v-model="order.header.date" />
{{ new Date().getUTCFullYear() }}r. {{ new Date().getUTCFullYear() }}r.
</div> </div>
</section> </section>
<section class="table-section">
<section class="table-section"> <table class="options-table">
<table class="options-table"> <tbody>
<tbody> <tr>
<tr class="row" @click="chooseRow(1)" :class="{ chosen: order.chosenRows.includes(1) }"> <td>
<td class="row-number">1</td> <label for="row-enabled-2">1</label>
<td class="row-content"> <div>
zezwalam po otrzymaniu <input type="checkbox" id="row-enabled-1" v-model="order.row1.enabled" />
<select id="select-1a" v-model="order.row1.option1"> </div>
<option value="sygnału">sygnału "nakaz jazdy"</option> </td>
<option value="rozkazu">tylko tego rozkazu pisemnego</option> <td>
</select> zezwalam po otrzymaniu
<select id="select-1a" v-model="order.row1.option1">
<div style="margin-top: 0.5rem"> <option value='sygnału "nakaz jazdy"'>sygnału "nakaz jazdy"</option>
<input type="checkbox" name="section-1a" id="checkbox-1a" v-model="order.row1.checkbox1a" /> <option value="tylko tego rozkazu pisemnego">tylko tego rozkazu pisemnego</option>
<label for="checkbox-1a"> </select>
przejechać obok wskazującego sygnał "Stój" semafora wyjazdowego <div style="margin-top: 0.5rem">
<input type="text" v-model="order.row1.signal1" /> <input type="radio" name="section-1a" id="radio-1a-1" value="radio-1a-1" v-model="order.row1.radio1" />
<label for="radio-1a-1">
przejechać obok wskazującego sygnał "Stój" semafora
<select id="select-signal" v-model="order.row1.optionSignal">
<option value="wyjazdowego">wyjazdowego</option>
<option value="drogowskazowego">drogowskazowego</option>
</select>
<input type="text" v-model="order.row1.signal1" />
<br />
</label>
<hr />
<input type="radio" name="section-1a" id="radio-1a-2" value="radio-1a-2" v-model="order.row1.radio1" />
<label for="radio-1a-2">
wyjechać z toru nr <input type="text" v-model="order.row1.trackNo" /> nie posiadającego semafora
wyjazdowego
</label>
</div>
</td>
</tr>
<tr>
<td>
<label for="row-enabled-2">2</label>
<div>
<input type="checkbox" id="row-enabled-2" v-model="order.row2.enabled" />
</div>
</td>
<td>
zezwalam przejechać obok wskazującego sygnał "Stój" semafora:
<div>
<input
type="radio"
name="section-2a"
id="radio-2a-1"
value="wyjazdowego"
v-model="order.row2.signalType"
/>
<label for="radio-2a-1">wyjazdowego <input type="text" v-model="order.row2.signal1" /> </label>
<br /> <br />
drogowskazowego <input type="text" v-model="order.row1.signal2" /> <input
type="radio"
name="section-2a"
id="radio-2a-2"
value="drogowskazowego"
v-model="order.row2.signalType"
/>
<label for="radio-2a-2"
>drogowskazowego <input type="text" v-model="order.row2.signal2" /> (odnoszącego się do wyjazdu pociągu)
</label>
<br /> <br />
(odnoszącego się do wyjazdu pociągu) <input
</label> type="radio"
</div> name="section-2a"
id="radio-2a-3"
<hr /> value="odstępowego"
v-model="order.row2.signalType"
<div style="margin-top: 0.5rem"> />
<input type="checkbox" name="section-1b" id="checkbox-1b" v-model="order.row1.checkbox1b" /> <label for="radio-2a-3">odstępowego <input type="text" v-model="order.row2.signal3" /></label>
<label for="checkbox-1b"> <br />
wyjechać z toru nr <input type="text" v-model="order.row1.trackNo" /> nie posiadającego semafora <input type="radio" name="section-2a" id="radio-2a-4" value="toru" v-model="order.row2.signalType" />
wyjazdowego <label for="radio-2a-4">
</label> wjechać z zamkniętego toru nr <input type="text" v-model="order.row2.trackNo" /> nie posiadającego
</div> semafora wjazdowego
</td> </label>
</tr> </div>
</td>
<tr class="row" @click="chooseRow(2)" :class="{ chosen: order.chosenRows.includes(2) }"> </tr>
<td class="row-number">2</td> <tr>
<td class="row-content"> <td>
zezwalam przejechać obok wskazującego sygnał "Stój" semafora: <label for="row-enabled-3">3</label>
<div>
<div>- wjazdowego <input type="text" v-model="order.row2.signal1" /></div> <input type="checkbox" id="row-enabled-3" v-model="order.row3.enabled" />
<div> </div>
- drogowskazowego <input type="text" v-model="order.row2.signal2" /> </td>
<div>&nbsp;&nbsp;(odnoszącego się do wjazdu pociągu)</div> <td>
</div> Od <input type="text" v-model="order.row3.from" /> do <input type="text" v-model="order.row3.to" /> po torze
<div>- odstępowego <input type="text" v-model="order.row2.signal3" /></div> nr <input type="text" v-model="order.row3.trackNo" /> ruch pociągów prowadzony jest w odstępie posterunków
<div> następczych. Wskazania semaforów sbl są nieważne. Zachować ostrożność od ostatniego semafora ze wskaźnikiem
- wjechać z zamkniętego toru nr <input type="text" v-model="order.row2.trackNo" /> nie posiadającego "W18". Szlak wolny, ostatni pociąg nr <input type="text" v-model="order.row3.trainNo" /> przybył do
semafora wjazdowego <input type="text" v-model="order.row3.arrivedTo" /> o godzinie
</div> <input type="text" v-model="order.row3.hour" />
</td> </td>
</tr> </tr>
<tr style="height: 255px">
<tr class="row" @click="chooseRow(3)" :class="{ chosen: order.chosenRows.includes(3) }"> <td>
<td class="row-number">3</td> <label for="row-enabled-4">4</label>
<td class="row-content"> <div>
Od <input type="text" v-model="order.row3.from" /> do <input type="text" v-model="order.row3.to" /> po torze <input type="checkbox" id="row-enabled-4" v-model="order.row4.enabled" />
nr <input type="text" v-model="order.row3.trackNo" /> ruch pociągów prowadzony jest w odstępie posterunków </div>
następczych. Wskazania semaforów sbl są nieważne. Zachować ostrożność od ostatniego semafora ze wskaźnikiem </td>
"W18". Szlak wolny, ostatni pociąg nr <input type="text" v-model="order.row3.trainNo" /> przybył do <td>
<input type="text" v-model="order.row3.arrivedTo" /> o godzinie Inne:
<input type="text" v-model="order.row3.hour" /> <br />
</td> <textarea id="" cols="30" rows="10" v-model="order.row4.content"></textarea>
</tr> </td>
</tbody> </tr>
</table> </tbody>
</table>
</section>
</section> </section>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent, reactive } from 'vue';
import { useStore } from '../store/store'; import { useStore } from '../store/store';
type OrderRowRange = 1 | 2 | 3 | 4;
export default defineComponent({ export default defineComponent({
name: 'OrderS', name: 'OrderS',
setup() { setup() {
const store = useStore(); const store = useStore();
const order = reactive(store.orderS);
const rowMethods = [
() => {
const { header } = order;
return `<i>Rozkaz pisemny "S" nr ${header.orderNo || '_'} dla ${header.for || '_'} nr ${
header.trainNo || '_'
} dnia ${header.date || '_'} ${new Date().getUTCFullYear()}r.</i>`;
},
() => {
const { row1 } = order;
let message = `zezwalam po otrzymaniu ${row1.option1 || '_'}`;
if (row1.radio1 == 'radio-1a-1')
message += ` przejechać obok wskazującego sygnał "Stój" semafora ${row1.optionSignal || '_'} ${
row1.signal1 || '_'
}`;
else message += ` wyjechać z toru nr ${row1.trackNo || '_'} nie posiadającego semafora wyjazdowego`;
return message;
},
() => {
const { row2 } = order;
let message = `zezwalam przejechać obok wskazującego sygnał "Stój" semafora `;
switch (row2.signalType) {
case 'wyjazdowego':
message += `wyjazdowego ${row2.signal1 || '_'}`;
break;
case 'drogowskazowego':
message += `drogowskazowego ${row2.signal2 || '_'}`;
break;
case 'odstępowego':
message += `odstępowego ${row2.signal3 || '_'}`;
break;
case 'toru':
message += `wjechać z zamkniętego toru nr ${row2.trackNo || '_'} nie posiadającego semafora wjazdowego`;
break;
default:
break;
}
return message;
},
() => {
const { row3 } = order;
return `Od ${row3.from || '_'} do ${row3.to || '_'} po torze nr ${
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 ${
row3.trainNo || '_'
} przybył do ${row3.arrivedTo || '_'} o godzinie ${row3.hour || '_'}`;
},
() => {
const { row4 } = order;
return `Inne: ${row4.content}`;
},
];
return { return {
store,
order: store.orderS, order: store.orderS,
rowMethods,
}; };
}, },
activated() {
this.generateMessage();
},
watch: {
order: {
deep: true,
handler() {
this.generateMessage();
},
},
},
methods: { methods: {
chooseRow(index: number) { generateMessage() {
if (this.order.chosenRows.includes(index)) let message = this.rowMethods[0]();
this.order.chosenRows = this.order.chosenRows.filter((rowIndex) => rowIndex != index);
else this.order.chosenRows.push(index); for (let i = 1; i <= 4; i++) {
if (!this.order[`row${i as OrderRowRange}`].enabled) continue;
message += ` <b> [ ${i} ] </b> ${this.rowMethods[i]()}`;
}
this.store.orderMessage = message;
}, },
}, },
}); });
</script> </script>
<style lang="scss">
textarea {
width: 95%;
height: 200px;
resize: none;
}
</style>
src/store/store.ts
+15 -5
View File
@@ -3,7 +3,7 @@ import { defineStore } from 'pinia';
export const useStore = defineStore('store', { export const useStore = defineStore('store', {
state: () => { state: () => {
return { return {
chosenOrderType: 'OrderN', chosenOrderType: 'OrderS',
orderInfo: { orderInfo: {
stationName: '', stationName: '',
@@ -89,15 +89,17 @@ export const useStore = defineStore('store', {
}, },
row1: { row1: {
option1: 'sygnału', enabled: false,
checkbox1a: false, option1: 'sygnału "nakaz jazdy"',
checkbox1b: false, optionSignal: 'wyjazdowego',
radio1: 'radio-1a-1',
signal1: '', signal1: '',
signal2: '',
trackNo: '', trackNo: '',
}, },
row2: { row2: {
enabled: false,
signalType: 'wyjazdowego',
signal1: '', signal1: '',
signal2: '', signal2: '',
signal3: '', signal3: '',
@@ -105,6 +107,7 @@ export const useStore = defineStore('store', {
}, },
row3: { row3: {
enabled: false,
from: '', from: '',
to: '', to: '',
trackNo: '', trackNo: '',
@@ -112,6 +115,11 @@ export const useStore = defineStore('store', {
arrivedTo: '', arrivedTo: '',
hour: '', hour: '',
}, },
row4: {
enabled: false,
content: '',
},
}, },
}; };
}, },
@@ -119,3 +127,5 @@ export const useStore = defineStore('store', {
src/views/Home.vue
+5 -1
View File
@@ -72,7 +72,7 @@ export default defineComponent({
.message_container { .message_container {
padding: 0 1em; padding: 0 1em;
max-width: 500px; width: 500px;
h3 { h3 {
margin: 0; margin: 0;
@@ -84,6 +84,10 @@ export default defineComponent({
margin: 0 0.5em; margin: 0 0.5em;
font-size: 0.85em; font-size: 0.85em;
} }
@media screen and (max-width: 550px) {
max-width: 100%;
}
} }
.message_actions { .message_actions {