Store i responsywność inputów

This commit is contained in:
2022-06-10 16:50:04 +02:00
parent 67cfb93cb0
commit 8271756b9b
8 changed files with 443 additions and 370 deletions
+175
View File
@@ -0,0 +1,175 @@
<template>
<div class="rozkaz">
<OrderN v-if="orderType == 'N'" />
<OrderS v-if="orderType == 'S'"/>
<section class="info">
<table class="info-table">
<tbody>
<tr>
<td colspan="4">
<input type="text" v-model="info.stationName" />
<br />
stacja
</td>
<td colspan="3">
<input type="text" v-model="info.checkpointName" />
<br />
posterunek
</td>
<td colspan="2">
<input type="text" v-model="info.hour" />
<br />
godz.
</td>
<td colspan="1">
<input type="text" v-model="info.minutes" />
<br />
min.
</td>
</tr>
<tr>
<td colspan="5">
<input type="text" v-model="info.dispatcherName" />
<br />
dyżurny ruchu
</td>
<td colspan="5">
<input type="text" v-model="info.secondaryDispatcherName" />
<br />
z polecenia dyżurnego ruchu
</td>
</tr>
</tbody>
</table>
</section>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import OrderN from '@/components/OrderN.vue';
import OrderS from '@/components/OrderS.vue';
import { useStore } from '@/store/store';
export default defineComponent({
components: { OrderN, OrderS },
data() {
return {
orderType: 'S',
};
},
setup() {
const store = useStore();
return {
info: store.orderInfo,
};
},
});
</script>
<style lang="scss">
.rozkaz {
width: 500px;
background-color: white;
color: black;
padding: 0.5em;
box-shadow: 0 0 15px 2px white;
h2 {
margin: 0;
padding: 0;
}
.header {
padding: 0.5em;
border: 2px solid black;
border-bottom: none;
}
}
.flex-row {
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.flex-center {
display: flex;
justify-content: center;
align-items: center;
}
input {
max-width: 100px;
background-color: transparent;
outline: none;
border: none;
border-bottom: 2px dotted black;
font-size: 0.9em;
text-align: center;
color: black;
}
select {
margin-top: 0.5rem;
margin-right: 0.5rem;
font-size: 0.8rem;
}
.table-section {
table {
width: 100%;
td:first-child {
width: 10%;
text-align: center;
vertical-align: top;
font-weight: bold;
}
td {
padding: 0.35em;
text-align: justify;
line-height: 1.4em;
}
}
table,
td {
border: 2px solid black;
border-collapse: collapse;
}
}
table.info-table {
border-collapse: collapse;
width: 100%;
table-layout: fixed;
td {
border: 2px solid black;
border-collapse: collapse;
padding: 0.35em;
}
input {
max-width: 95%;
}
text-align: center;
}
</style>
+135 -183
View File
@@ -1,207 +1,159 @@
<template>
<div class="rozkaz rozkaz-n">
<section class="header">
<h2 class="flex-center">
Rozkaz pisemny "N" nr
<input type="text" v-model="orderNo" />
</h2>
<section class="header">
<h2 class="flex-center">
Rozkaz pisemny "N" nr
<input type="text" v-model="order.header.orderNo" />
</h2>
<div class="flex-row">
dla pociągu nr <input type="text" v-model="trainNo" /> dnia <input type="text" v-model="date" />
{{ new Date().getUTCFullYear() }}r.
</div>
</section>
<div class="flex-row">
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.
</div>
</section>
<section class="table-section">
<table class="options-table">
<tbody>
<tr>
<td>1</td>
<td>
Od <input type="text" v-model="row1.from" /> do <input type="text" v-model="row1.to" /> tor nr
<input type="text" v-model="row1.trackNo" /> jest zamknięty, ruch jednotorowy dwukierunkowy wprowadzono po
torze nr <input type="text" v-model="row1.trackNo2" />
</td>
</tr>
<section class="table-section">
<table class="options-table">
<tbody>
<tr>
<td>1</td>
<td>
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
wprowadzono po torze nr <input type="text" v-model="order.row1.trackNo2" />
</td>
</tr>
<tr>
<td>2</td>
<td>
<strong>ZEZWALAM</strong> po otrzymaniu
<select id="select-2a" v-model="row2.choice1">
<option value="option-2a-1" :checked="row2.choice1 == 'option-2a-1'">sygnału "Nakaz Jazdy"</option>
<option value="option-2a-2" :checked="row2.choice1 == 'option-2a-2'">tylko tego rozkazu pisemnego</option>
</select>
<tr>
<td>2</td>
<td>
<strong>ZEZWALAM</strong> po otrzymaniu
<select id="select-2a" v-model="order.row2.option1">
<option value="signal">sygnału "Nakaz Jazdy"</option>
<option value="order">tylko tego rozkazu pisemnego</option>
</select>
{{ row2.choice1 }}
<div style="margin-top: 0.5rem">
<input
type="radio"
name="section-2"
id="checkbox-2a"
value="checkbox-2a"
v-model="order.row2.checkbox"
:checked="order.row2.checkbox == 'checkbox-2a'"
/>
<div style="margin-top: 0.5rem">
<input type="radio" name="section-2" id="checkbox-2a" />
<label for="checkbox-2a">
przejechać obok wskazującego sygnał "Stój" semafora wyjazdowego <input type="text" /> i wyjechać w
kierunku <input type="text" /> na tor szlakowy
<select>
<option value="lewy">lewy</option>
<option value="prawy">prawy</option>
</select>
nr <input type="text" />
</label>
</div>
<label for="checkbox-2a">
przejechać obok wskazującego sygnał "Stój" semafora wyjazdowego <input type="text" /> i wyjechać w
kierunku <input type="text" /> na tor szlakowy
<select v-model="order.row2.option2">
<option value="lewy">lewy</option>
<option value="prawy">prawy</option>
</select>
nr <input type="text" />
</label>
</div>
<div style="margin-top: 0.5rem">
<input type="radio" name="section-2" id="checkbox-2b" />
<label for="checkbox-2b">
z toru nr <input type="text" /> nie posiadającego semafora wyjazdowego wyjechać w kierunku
<input type="text" /> na tor szlakowy
<select>
<option value="lewy">lewy</option>
<option value="prawy">prawy</option>
</select>
nr <input type="text" />
</label>
</div>
</td>
</tr>
<div style="margin-top: 0.5rem">
<input
type="radio"
name="section-2"
id="checkbox-2b"
value="checkbox-2b"
v-model="order.row2.checkbox"
:checked="order.row2.checkbox == 'checkbox-2b'"
/>
<tr>
<td>3</td>
<td>
<select>
<option value="jazda">Jazda</option>
<option value="popychanie">Popychanie</option>
</select>
pociągu odbędzie się w kierunku: <input type="text" /> do km <input type="text" /> skąd
<select>
<option value="pociąg">pociąg</option>
<option value="popychacz">popychacz</option>
</select>
ma wrócić po torze lewym nr <input type="text" /> najpóźniej o godz. <input type="text" /> min.
<input type="text" />
</td>
</tr>
<label for="checkbox-2b">
z toru nr <input type="text" /> nie posiadającego semafora wyjazdowego wyjechać w kierunku
<input type="text" /> na tor szlakowy
<select v-model="order.row2.option3">
<option value="lewy">lewy</option>
<option value="prawy">prawy</option>
</select>
nr <input type="text" />
</label>
</div>
</td>
</tr>
<tr>
<td>4</td>
<td>
<strong>WJAZD</strong> z toru szlakowego nr <input type="text" /> na
<select>
<option value="stację">stację</option>
<option value="posterunek odgałęźny">posterunek odgałęźny</option>
</select>
<input type="text" /> odbędzie się po otrzymaniu:
<tr>
<td>3</td>
<td>
<select v-model="order.row3.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" /> do km
<input type="text" v-model="order.row3.toKilometer" /> skąd
<select v-model="order.row3.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" /> najpóźniej o godz.
<input type="text" v-model="order.row3.untilHour" /> min.
<input type="text" v-model="order.row3.untilMin" />
</td>
</tr>
<div style="margin-top: 0.5rem">
<input type="radio" name="section-4" id="checkbox-4a" />
<label for="checkbox-4a">
sygnału zastępczego "Sz" na osobnym urządzeniu ustawionym z
<select>
<option value="lewej">lewej</option>
<option value="prawej">prawej</option>
</select>
strony toru
</label>
</div>
<tr>
<td>4</td>
<td>
<strong>WJAZD</strong> z toru szlakowego nr <input type="text" v-model="order.row4.trackNo" /> na
<select v-model="order.row4.optionStation">
<option value="stację">stację</option>
<option value="posterunek odgałęźny">posterunek odgałęźny</option>
</select>
<input type="text" v-model="order.row4.stationName" /> odbędzie się po otrzymaniu:
<div style="margin-top: 0.5rem">
<input type="radio" name="section-4" id="checkbox-4b" />
<label for="checkbox-4b">
rozkazu pisemnego "N" (doręczonego lub przekazanego przez urządzenia łączności)
</label>
</div>
</td>
</tr>
<div style="margin-top: 0.5rem">
<input type="radio" name="section-4" id="checkbox-4a" value="checkbox-4a" v-model="order.row4.checkbox" />
<label for="checkbox-4a">
sygnału zastępczego "Sz" na osobnym urządzeniu ustawionym z
<select>
<option value="lewej">lewej</option>
<option value="prawej">prawej</option>
</select>
strony toru
</label>
</div>
<tr>
<td>5</td>
<td>
<strong>ZEZWALAM</strong> wjechać z toru szlakowego nr <input type="text" /> z kierunku
<input type="text" /> na
<select>
<option value="stację">stację</option>
<option value="posterunek odgałęźny">posterunek odgałęźny</option>
</select>
i przejechać obok sygnału "Stój" na <input type="text" />
</td>
</tr>
</tbody>
</table>
</section>
<div style="margin-top: 0.5rem">
<input type="radio" name="section-4" id="checkbox-4b" value="checkbox-4b" v-model="order.row4.checkbox" />
<label for="checkbox-4b">
rozkazu pisemnego "N" (doręczonego lub przekazanego przez urządzenia łączności)
</label>
</div>
</td>
</tr>
<section class="info">
<table class="info-table">
<tbody>
<tr>
<td colspan="4">
<input type="text" />
<br />
stacja
</td>
<td colspan="3">
<input type="text" />
<br />
posterunek
</td>
<td colspan="2">
<input type="text" />
<br />
godz.
</td>
<td colspan="1">
<input type="text" />
<br />
min.
</td>
</tr>
<tr>
<td colspan="5">
<input type="text" />
<br />
dyżurny ruchu
</td>
<td colspan="5">
<input type="text" />
<br />
z polecenia dyżurnego ruchu
</td>
</tr>
</tbody>
</table>
</section>
</div>
<tr>
<td>5</td>
<td>
<strong>ZEZWALAM</strong> wjechać z toru szlakowego nr <input type="text" v-model="order.row5.trackNo" /> z
kierunku <input type="text" v-model="order.row5.direction" /> na
<select v-model="order.row5.stationOption">
<option value="stację">stację</option>
<option value="posterunek odgałęźny">posterunek odgałęźny</option>
</select>
i przejechać obok sygnału "Stój" na <input type="text" v-model="order.row5.on" />
</td>
</tr>
</tbody>
</table>
</section>
</template>
<script lang="ts">
import { useStore } from '@/store/store';
import { defineComponent } from 'vue';
export default defineComponent({
data() {
setup() {
const store = useStore();
return {
orderNo: '',
trainNo: '',
date: '',
row1: {
from: '',
to: '',
trackNo: '',
trackNo2: '',
},
row2: {
choice1: 'option-2a-1',
choice2: '',
}
order: store.orderN,
};
},
});
</script>
<style lang="scss" scoped>
@import '../styles/rozkaz.scss';
</style>
+26 -68
View File
@@ -1,18 +1,18 @@
<template>
<div class="rozkaz rozkaz-n">
<section class="header">
<h2 class="flex-center">
Rozkaz pisemny "S" nr
<input type="text" />
<input type="text" v-model="order.header.orderNo" />
</h2>
<div class="flex-row">
dla
<select id="select-header">
<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" /> dnia <input type="text" /> {{ new Date().getUTCFullYear() }}r.
nr <input type="text" v-model="order.header.trainNo" /> dnia <input type="text" v-model="order.header.date" />
{{ new Date().getUTCFullYear() }}r.
</div>
</section>
@@ -23,26 +23,28 @@
<td>1</td>
<td>
zezwalam po otrzymaniu
<select id="select-1a">
<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" />
<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" />
przejechać obok wskazującego sygnał "Stój" semafora wyjazdowego
<input type="text" v-model="order.row1.signal1" />
<br />
drogowskazowego <input type="text" />
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" />
<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" /> nie posiadającego semafora wyjazdowego
wyjechać z toru nr <input type="text" v-model="order.row1.trackNo" /> nie posiadającego semafora
wyjazdowego
</label>
</div>
</td>
@@ -53,87 +55,43 @@
<td>
zezwalam przejechać obok wskazującego sygnał "Stój" semafora:
<div>- wjazdowego <input type="text" /></div>
<div>- wjazdowego <input type="text" v-model="order.row2.signal1" /></div>
<div>
- drogowskazowego <input type="text" />
- 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" /></div>
<div>- wjechać z zamkniętego toru nr <input type="text" /> nie posiadającego semafora wjazdowego</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>
<td>3</td>
<td>
Od <input type="text" /> do <input type="text" /> po torze nr <input type="text" /> ruch pociągów
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" /> przybył do <input type="text" /> o godzinie <input type="text" />
<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>
<section class="info">
<table class="info-table">
<tbody>
<tr>
<td colspan="4">
<input type="text" />
<br />
stacja
</td>
<td colspan="3">
<input type="text" />
<br />
posterunek
</td>
<td colspan="2">
<input type="text" />
<br />
godz.
</td>
<td colspan="1">
<input type="text" />
<br />
min.
</td>
</tr>
<tr>
<td colspan="5">
<input type="text" />
<br />
dyżurny ruchu
</td>
<td colspan="5">
<input type="text" />
<br />
z polecenia dyżurnego ruchu
</td>
</tr>
</tbody>
</table>
</section>
</div>
</template>
<script lang="ts">
import { useStore } from '@/store/store';
import { defineComponent } from 'vue';
export default defineComponent({
setup() {
return {};
const store = useStore();
return {
order: store.orderS,
};
},
});
</script>
<style lang="scss" scoped>
@import '../styles/rozkaz.scss';
</style>