Interakcja wyboru rubryki

This commit is contained in:
2022-06-10 21:31:50 +02:00
parent 8271756b9b
commit 6dc5cb5c17
3 changed files with 125 additions and 76 deletions
+86 -75
View File
@@ -1,85 +1,89 @@
<template>
<section class="header">
<h2 class="flex-center">
Rozkaz pisemny "S" nr
<input type="text" v-model="order.header.orderNo" />
</h2>
<section class="header">
<h2 class="flex-center">
Rozkaz pisemny "S" nr
<input type="text" v-model="order.header.orderNo" />
</h2>
<div class="flex-row">
dla
<select id="select-header" v-model="order.header.for">
<option value="pociągu">pociągu</option>
<option value="manewru">manewru</option>
</select>
nr <input type="text" v-model="order.header.trainNo" /> dnia <input type="text" v-model="order.header.date" />
{{ new Date().getUTCFullYear() }}r.
</div>
</section>
<div class="flex-row">
dla
<select id="select-header" v-model="order.header.for">
<option value="pociągu">pociągu</option>
<option value="manewru">manewru</option>
</select>
nr <input type="text" v-model="order.header.trainNo" /> dnia <input type="text" v-model="order.header.date" />
{{ new Date().getUTCFullYear() }}r.
</div>
</section>
<section class="table-section">
<table class="options-table">
<tbody>
<tr>
<td>1</td>
<td>
zezwalam po otrzymaniu
<select id="select-1a" v-model="order.row1.option1">
<option value="sygnału">sygnału "nakaz jazdy"</option>
<option value="rozkazu">tylko tego rozkazu pisemnego</option>
</select>
<section class="table-section">
<table class="options-table">
<tbody>
<tr class="row" @click="chooseRow(1)" :class="{ chosen: order.chosenRows.includes(1) }">
<td class="row-number">1</td>
<td class="row-content">
zezwalam po otrzymaniu
<select id="select-1a" v-model="order.row1.option1">
<option value="sygnału">sygnału "nakaz jazdy"</option>
<option value="rozkazu">tylko tego rozkazu pisemnego</option>
</select>
<div style="margin-top: 0.5rem">
<input type="checkbox" name="section-1a" id="checkbox-1a" v-model="order.row1.checkbox1a" />
<label for="checkbox-1a">
przejechać obok wskazującego sygnał "Stój" semafora wyjazdowego
<input type="text" v-model="order.row1.signal1" />
<br />
drogowskazowego <input type="text" v-model="order.row1.signal2" />
<br />
(odnoszącego się do wyjazdu pociągu)
</label>
</div>
<hr />
<div style="margin-top: 0.5rem">
<input type="checkbox" name="section-1b" id="checkbox-1b" v-model="order.row1.checkbox1b" />
<label for="checkbox-1b">
wyjechać z toru nr <input type="text" v-model="order.row1.trackNo" /> nie posiadającego semafora
wyjazdowego
</label>
</div>
</td>
</tr>
<div style="margin-top: 0.5rem">
<input type="checkbox" name="section-1a" id="checkbox-1a" v-model="order.row1.checkbox1a" />
<label for="checkbox-1a">
przejechać obok wskazującego sygnał "Stój" semafora wyjazdowego
<input type="text" v-model="order.row1.signal1" />
<br />
drogowskazowego <input type="text" v-model="order.row1.signal2" />
<br />
(odnoszącego się do wyjazdu pociągu)
</label>
</div>
<tr>
<td>2</td>
<td>
zezwalam przejechać obok wskazującego sygnał "Stój" semafora:
<hr />
<div>- wjazdowego <input type="text" v-model="order.row2.signal1" /></div>
<div>
- drogowskazowego <input type="text" v-model="order.row2.signal2" />
<div>&nbsp;&nbsp;(odnoszącego się do wjazdu pociągu)</div>
</div>
<div>- odstępowego <input type="text" v-model="order.row2.signal3" /></div>
<div>
- wjechać z zamkniętego toru nr <input type="text" v-model="order.row2.trackNo" /> nie posiadającego
semafora wjazdowego
</div>
</td>
</tr>
<div style="margin-top: 0.5rem">
<input type="checkbox" name="section-1b" id="checkbox-1b" v-model="order.row1.checkbox1b" />
<label for="checkbox-1b">
wyjechać z toru nr <input type="text" v-model="order.row1.trackNo" /> nie posiadającego semafora
wyjazdowego
</label>
</div>
</td>
</tr>
<tr>
<td>3</td>
<td>
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 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" />
</td>
</tr>
</tbody>
</table>
</section>
<tr class="row" @click="chooseRow(2)" :class="{ chosen: order.chosenRows.includes(2) }">
<td class="row-number">2</td>
<td class="row-content">
zezwalam przejechać obok wskazującego sygnał "Stój" semafora:
<div>- wjazdowego <input type="text" v-model="order.row2.signal1" /></div>
<div>
- drogowskazowego <input type="text" v-model="order.row2.signal2" />
<div>&nbsp;&nbsp;(odnoszącego się do wjazdu pociągu)</div>
</div>
<div>- odstępowego <input type="text" v-model="order.row2.signal3" /></div>
<div>
- wjechać z zamkniętego toru nr <input type="text" v-model="order.row2.trackNo" /> nie posiadającego
semafora wjazdowego
</div>
</td>
</tr>
<tr class="row" @click="chooseRow(3)" :class="{ chosen: order.chosenRows.includes(3) }">
<td class="row-number">3</td>
<td class="row-content">
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 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" />
</td>
</tr>
</tbody>
</table>
</section>
</template>
<script lang="ts">
@@ -93,5 +97,12 @@ export default defineComponent({
order: store.orderS,
};
},
methods: {
chooseRow(index: number) {
if (this.order.chosenRows.includes(index))
this.order.chosenRows = this.order.chosenRows.filter((rowIndex) => rowIndex != index);
else this.order.chosenRows.push(index);
},
},
});
</script>