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

Interakcja wyboru rubryki

Browse Source
This commit is contained in:
Spythere
2022-06-10 21:31:50 +02:00
parent 8271756b9b
commit 6dc5cb5c17
3 changed files with 125 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Order.vue
+37 -1
View File
@@ -1,7 +1,7 @@
<template> <template>
<div class="rozkaz"> <div class="rozkaz">
<OrderN v-if="orderType == 'N'" /> <OrderN v-if="orderType == 'N'" />
<OrderS v-if="orderType == 'S'"/> <OrderS v-if="orderType == 'S'" />
<section class="info"> <section class="info">
<table class="info-table"> <table class="info-table">
@@ -77,6 +77,8 @@ export default defineComponent({
</script> </script>
<style lang="scss"> <style lang="scss">
@import '../styles/global.scss';
.rozkaz { .rozkaz {
width: 500px; width: 500px;
background-color: white; background-color: white;
@@ -172,4 +174,38 @@ table.info-table {
text-align: center; text-align: center;
} }
tr:not(.chosen) > td.row-content {
opacity: 0.45;
user-select: none;
position: relative;
&::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
tr.row {
&:not(.chosen) {
cursor: pointer;
}
&.chosen > .row-number {
color: red;
}
&:hover {
outline: 3px solid red;
& td.row-number {
color: red;
}
}
}
</style> </style>
src/components/OrderS.vue
+86 -75
View File
@@ -1,85 +1,89 @@
<template> <template>
<section class="header"> <section class="header">
<h2 class="flex-center"> <h2 class="flex-center">
Rozkaz pisemny "S" nr Rozkaz pisemny "S" nr
<input type="text" v-model="order.header.orderNo" /> <input type="text" v-model="order.header.orderNo" />
</h2> </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>1</td> <td class="row-number">1</td>
<td> <td class="row-content">
zezwalam po otrzymaniu zezwalam po otrzymaniu
<select id="select-1a" v-model="order.row1.option1"> <select id="select-1a" v-model="order.row1.option1">
<option value="sygnału">sygnału "nakaz jazdy"</option> <option value="sygnału">sygnału "nakaz jazdy"</option>
<option value="rozkazu">tylko tego rozkazu pisemnego</option> <option value="rozkazu">tylko tego rozkazu pisemnego</option>
</select> </select>
<div style="margin-top: 0.5rem"> <div style="margin-top: 0.5rem">
<input type="checkbox" name="section-1a" id="checkbox-1a" v-model="order.row1.checkbox1a" /> <input type="checkbox" name="section-1a" id="checkbox-1a" v-model="order.row1.checkbox1a" />
<label for="checkbox-1a"> <label for="checkbox-1a">
przejechać obok wskazującego sygnał "Stój" semafora wyjazdowego przejechać obok wskazującego sygnał "Stój" semafora wyjazdowego
<input type="text" v-model="order.row1.signal1" /> <input type="text" v-model="order.row1.signal1" />
<br /> <br />
drogowskazowego <input type="text" v-model="order.row1.signal2" /> drogowskazowego <input type="text" v-model="order.row1.signal2" />
<br /> <br />
(odnoszącego się do wyjazdu pociągu) (odnoszącego się do wyjazdu pociągu)
</label> </label>
</div> </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>
<tr> <hr />
<td>2</td>
<td>
zezwalam przejechać obok wskazującego sygnał "Stój" semafora:
<div>- wjazdowego <input type="text" v-model="order.row2.signal1" /></div> <div style="margin-top: 0.5rem">
<div> <input type="checkbox" name="section-1b" id="checkbox-1b" v-model="order.row1.checkbox1b" />
- drogowskazowego <input type="text" v-model="order.row2.signal2" /> <label for="checkbox-1b">
<div>&nbsp;&nbsp;(odnoszącego się do wjazdu pociągu)</div> wyjechać z toru nr <input type="text" v-model="order.row1.trackNo" /> nie posiadającego semafora
</div> wyjazdowego
<div>- odstępowego <input type="text" v-model="order.row2.signal3" /></div> </label>
<div> </div>
- wjechać z zamkniętego toru nr <input type="text" v-model="order.row2.trackNo" /> nie posiadającego </td>
semafora wjazdowego </tr>
</div>
</td>
</tr>
<tr> <tr class="row" @click="chooseRow(2)" :class="{ chosen: order.chosenRows.includes(2) }">
<td>3</td> <td class="row-number">2</td>
<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 zezwalam przejechać obok wskazującego sygnał "Stój" semafora:
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 <div>- wjazdowego <input type="text" v-model="order.row2.signal1" /></div>
<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" /> <div>
</td> - drogowskazowego <input type="text" v-model="order.row2.signal2" />
</tr> <div>&nbsp;&nbsp;(odnoszącego się do wjazdu pociągu)</div>
</tbody> </div>
</table> <div>- odstępowego <input type="text" v-model="order.row2.signal3" /></div>
</section> <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 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" />
</td>
</tr>
</tbody>
</table>
</section>
</template> </template>
<script lang="ts"> <script lang="ts">
@@ -93,5 +97,12 @@ export default defineComponent({
order: store.orderS, 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> </script>
src/store/store.ts
+2
View File
@@ -60,6 +60,8 @@ export const useStore = defineStore('store', {
}, },
orderS: { orderS: {
chosenRows: [1],
header: { header: {
orderNo: '', orderNo: '',
trainNo: '', trainNo: '',