mirror of
https://github.com/Spythere/genera-tor.git
synced 2026-05-03 05:28:13 +00:00
Store i responsywność inputów
This commit is contained in:
@@ -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
@@ -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
@@ -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> (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 są 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>
|
||||
|
||||
+5
-5
@@ -1,6 +1,6 @@
|
||||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
import store from './store'
|
||||
import { createApp } from 'vue';
|
||||
import App from './App.vue';
|
||||
import router from './router';
|
||||
import { createPinia } from 'pinia';
|
||||
|
||||
createApp(App).use(store).use(router).mount('#app')
|
||||
createApp(App).use(router).use(createPinia()).mount('#app');
|
||||
|
||||
@@ -1,12 +0,0 @@
|
||||
import { createStore } from 'vuex'
|
||||
|
||||
export default createStore({
|
||||
state: {
|
||||
},
|
||||
mutations: {
|
||||
},
|
||||
actions: {
|
||||
},
|
||||
modules: {
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,98 @@
|
||||
import { defineStore } from 'pinia';
|
||||
|
||||
export const useStore = defineStore('store', {
|
||||
state: () => {
|
||||
return {
|
||||
orderInfo: {
|
||||
stationName: '',
|
||||
checkpointName: '',
|
||||
hour: '',
|
||||
minutes: '',
|
||||
dispatcherName: '',
|
||||
secondaryDispatcherName: '',
|
||||
},
|
||||
|
||||
orderN: {
|
||||
header: {
|
||||
orderNo: '',
|
||||
trainNo: '',
|
||||
date: '',
|
||||
},
|
||||
|
||||
row1: {
|
||||
from: '',
|
||||
to: '',
|
||||
trackNo: '',
|
||||
trackNo2: '',
|
||||
},
|
||||
|
||||
row2: {
|
||||
option1: 'signal',
|
||||
option2: 'lewy',
|
||||
option3: 'lewy',
|
||||
checkbox: 'checkbox-2a',
|
||||
},
|
||||
|
||||
row3: {
|
||||
option1: 'jazda',
|
||||
option2: 'pociąg',
|
||||
|
||||
direction: '',
|
||||
toKilometer: '',
|
||||
trackNo: '',
|
||||
untilHour: '',
|
||||
untilMin: '',
|
||||
},
|
||||
|
||||
row4: {
|
||||
trackNo: '',
|
||||
optionStation: 'stację',
|
||||
stationName: '',
|
||||
checkbox: 'checkbox-4a',
|
||||
},
|
||||
|
||||
row5: {
|
||||
trackNo: '',
|
||||
direction: '',
|
||||
stationOption: 'stację',
|
||||
on: '',
|
||||
},
|
||||
},
|
||||
|
||||
orderS: {
|
||||
header: {
|
||||
orderNo: '',
|
||||
trainNo: '',
|
||||
for: 'pociągu',
|
||||
date: '',
|
||||
},
|
||||
|
||||
row1: {
|
||||
option1: 'sygnału',
|
||||
checkbox1a: false,
|
||||
checkbox1b: false,
|
||||
signal1: '',
|
||||
signal2: '',
|
||||
trackNo: '',
|
||||
},
|
||||
|
||||
row2: {
|
||||
signal1: '',
|
||||
signal2: '',
|
||||
signal3: '',
|
||||
trackNo: '',
|
||||
},
|
||||
|
||||
row3: {
|
||||
from: '',
|
||||
to: '',
|
||||
trackNo: '',
|
||||
trainNo: '',
|
||||
arrivedTo: '',
|
||||
hour: '',
|
||||
},
|
||||
},
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
@@ -1,97 +0,0 @@
|
||||
.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;
|
||||
}
|
||||
|
||||
+4
-5
@@ -1,17 +1,16 @@
|
||||
<template>
|
||||
<div class="home">
|
||||
<OrderN />
|
||||
<OrderS v-if="false" />
|
||||
<Order />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import OrderN from '@/components/OrderN.vue';
|
||||
import OrderS from '@/components/OrderS.vue';
|
||||
import { defineComponent } from 'vue';
|
||||
import Order from "@/components/Order.vue";
|
||||
|
||||
|
||||
export default defineComponent({
|
||||
components: { OrderN, OrderS },
|
||||
components: { Order },
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user