Spythere/genera-tor
1
0
Fork 0
mirror of https://github.com/Spythere/genera-tor.git synced 2026-05-03 13:38:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Store i responsywność inputów

Browse Source
This commit is contained in:
Spythere
2022-06-10 16:50:04 +02:00
parent 67cfb93cb0
commit 8271756b9b
8 changed files with 443 additions and 370 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Order.vue
+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>
src/components/OrderN.vue
+135 -183
View File
@@ -1,207 +1,159 @@
<template> <template>
<div class="rozkaz rozkaz-n"> <section class="header">
<section class="header"> <h2 class="flex-center">
<h2 class="flex-center"> Rozkaz pisemny "N" nr
Rozkaz pisemny "N" nr <input type="text" v-model="order.header.orderNo" />
<input type="text" v-model="orderNo" /> </h2>
</h2>
<div class="flex-row"> <div class="flex-row">
dla pociągu nr <input type="text" v-model="trainNo" /> dnia <input type="text" v-model="date" /> dla pociągu nr <input type="text" v-model="order.header.trainNo" /> dnia
{{ 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>1</td> <td>1</td>
<td> <td>
Od <input type="text" v-model="row1.from" /> do <input type="text" v-model="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="row1.trackNo" /> jest zamknięty, ruch jednotorowy dwukierunkowy wprowadzono po <input type="text" v-model="order.row1.trackNo" /> jest zamknięty, ruch jednotorowy dwukierunkowy
torze nr <input type="text" v-model="row1.trackNo2" /> wprowadzono po torze nr <input type="text" v-model="order.row1.trackNo2" />
</td> </td>
</tr> </tr>
<tr> <tr>
<td>2</td> <td>2</td>
<td> <td>
<strong>ZEZWALAM</strong> po otrzymaniu <strong>ZEZWALAM</strong> po otrzymaniu
<select id="select-2a" v-model="row2.choice1"> <select id="select-2a" v-model="order.row2.option1">
<option value="option-2a-1" :checked="row2.choice1 == 'option-2a-1'">sygnału "Nakaz Jazdy"</option> <option value="signal">sygnału "Nakaz Jazdy"</option>
<option value="option-2a-2" :checked="row2.choice1 == 'option-2a-2'">tylko tego rozkazu pisemnego</option> <option value="order">tylko tego rozkazu pisemnego</option>
</select> </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"> <label for="checkbox-2a">
<input type="radio" name="section-2" id="checkbox-2a" /> przejechać obok wskazującego sygnał "Stój" semafora wyjazdowego <input type="text" /> i wyjechać w
<label for="checkbox-2a"> kierunku <input type="text" /> na tor szlakowy
przejechać obok wskazującego sygnał "Stój" semafora wyjazdowego <input type="text" /> i wyjechać w <select v-model="order.row2.option2">
kierunku <input type="text" /> na tor szlakowy <option value="lewy">lewy</option>
<select> <option value="prawy">prawy</option>
<option value="lewy">lewy</option> </select>
<option value="prawy">prawy</option> nr <input type="text" />
</select> </label>
nr <input type="text" /> </div>
</label>
</div>
<div style="margin-top: 0.5rem"> <div style="margin-top: 0.5rem">
<input type="radio" name="section-2" id="checkbox-2b" /> <input
<label for="checkbox-2b"> type="radio"
z toru nr <input type="text" /> nie posiadającego semafora wyjazdowego wyjechać w kierunku name="section-2"
<input type="text" /> na tor szlakowy id="checkbox-2b"
<select> value="checkbox-2b"
<option value="lewy">lewy</option> v-model="order.row2.checkbox"
<option value="prawy">prawy</option> :checked="order.row2.checkbox == 'checkbox-2b'"
</select> />
nr <input type="text" />
</label>
</div>
</td>
</tr>
<tr> <label for="checkbox-2b">
<td>3</td> z toru nr <input type="text" /> nie posiadającego semafora wyjazdowego wyjechać w kierunku
<td> <input type="text" /> na tor szlakowy
<select> <select v-model="order.row2.option3">
<option value="jazda">Jazda</option> <option value="lewy">lewy</option>
<option value="popychanie">Popychanie</option> <option value="prawy">prawy</option>
</select> </select>
pociągu odbędzie się w kierunku: <input type="text" /> do km <input type="text" /> skąd nr <input type="text" />
<select> </label>
<option value="pociąg">pociąg</option> </div>
<option value="popychacz">popychacz</option> </td>
</select> </tr>
ma wrócić po torze lewym nr <input type="text" /> najpóźniej o godz. <input type="text" /> min.
<input type="text" />
</td>
</tr>
<tr> <tr>
<td>4</td> <td>3</td>
<td> <td>
<strong>WJAZD</strong> z toru szlakowego nr <input type="text" /> na <select v-model="order.row3.option1">
<select> <option value="jazda">Jazda</option>
<option value="stację">stację</option> <option value="popychanie">Popychanie</option>
<option value="posterunek odgałęźny">posterunek odgałęźny</option> </select>
</select> pociągu odbędzie się w kierunku: <input type="text" v-model="order.row3.direction" /> do km
<input type="text" /> odbędzie się po otrzymaniu: <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"> <tr>
<input type="radio" name="section-4" id="checkbox-4a" /> <td>4</td>
<label for="checkbox-4a"> <td>
sygnału zastępczego "Sz" na osobnym urządzeniu ustawionym z <strong>WJAZD</strong> z toru szlakowego nr <input type="text" v-model="order.row4.trackNo" /> na
<select> <select v-model="order.row4.optionStation">
<option value="lewej">lewej</option> <option value="stację">stację</option>
<option value="prawej">prawej</option> <option value="posterunek odgałęźny">posterunek odgałęźny</option>
</select> </select>
strony toru <input type="text" v-model="order.row4.stationName" /> odbędzie się po otrzymaniu:
</label>
</div>
<div style="margin-top: 0.5rem"> <div style="margin-top: 0.5rem">
<input type="radio" name="section-4" id="checkbox-4b" /> <input type="radio" name="section-4" id="checkbox-4a" value="checkbox-4a" v-model="order.row4.checkbox" />
<label for="checkbox-4b"> <label for="checkbox-4a">
rozkazu pisemnego "N" (doręczonego lub przekazanego przez urządzenia łączności) sygnału zastępczego "Sz" na osobnym urządzeniu ustawionym z
</label> <select>
</div> <option value="lewej">lewej</option>
</td> <option value="prawej">prawej</option>
</tr> </select>
strony toru
</label>
</div>
<tr> <div style="margin-top: 0.5rem">
<td>5</td> <input type="radio" name="section-4" id="checkbox-4b" value="checkbox-4b" v-model="order.row4.checkbox" />
<td> <label for="checkbox-4b">
<strong>ZEZWALAM</strong> wjechać z toru szlakowego nr <input type="text" /> z kierunku rozkazu pisemnego "N" (doręczonego lub przekazanego przez urządzenia łączności)
<input type="text" /> na </label>
<select> </div>
<option value="stację">stację</option> </td>
<option value="posterunek odgałęźny">posterunek odgałęźny</option> </tr>
</select>
i przejechać obok sygnału "Stój" na <input type="text" />
</td>
</tr>
</tbody>
</table>
</section>
<section class="info"> <tr>
<table class="info-table"> <td>5</td>
<tbody> <td>
<tr> <strong>ZEZWALAM</strong> wjechać z toru szlakowego nr <input type="text" v-model="order.row5.trackNo" /> z
<td colspan="4"> kierunku <input type="text" v-model="order.row5.direction" /> na
<input type="text" /> <select v-model="order.row5.stationOption">
<br /> <option value="stację">stację</option>
stacja <option value="posterunek odgałęźny">posterunek odgałęźny</option>
</td> </select>
i przejechać obok sygnału "Stój" na <input type="text" v-model="order.row5.on" />
<td colspan="3"> </td>
<input type="text" /> </tr>
<br /> </tbody>
posterunek </table>
</td> </section>
<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> </template>
<script lang="ts"> <script lang="ts">
import { useStore } from '@/store/store';
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
export default defineComponent({ export default defineComponent({
data() { setup() {
const store = useStore();
return { return {
orderNo: '', order: store.orderN,
trainNo: '',
date: '',
row1: {
from: '',
to: '',
trackNo: '',
trackNo2: '',
},
row2: {
choice1: 'option-2a-1',
choice2: '',
}
}; };
}, },
}); });
</script> </script>
<style lang="scss" scoped>
@import '../styles/rozkaz.scss';
</style>
src/components/OrderS.vue
+26 -68
View File
@@ -1,18 +1,18 @@
<template> <template>
<div class="rozkaz rozkaz-n">
<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" /> <input type="text" v-model="order.header.orderNo" />
</h2> </h2>
<div class="flex-row"> <div class="flex-row">
dla dla
<select id="select-header"> <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" /> 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> </div>
</section> </section>
@@ -23,26 +23,28 @@
<td>1</td> <td>1</td>
<td> <td>
zezwalam po otrzymaniu 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="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" /> <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 <input type="text" /> przejechać obok wskazującego sygnał "Stój" semafora wyjazdowego
<input type="text" v-model="order.row1.signal1" />
<br /> <br />
drogowskazowego <input type="text" /> 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 /> <hr />
<div style="margin-top: 0.5rem"> <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"> <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> </label>
</div> </div>
</td> </td>
@@ -53,87 +55,43 @@
<td> <td>
zezwalam przejechać obok wskazującego sygnał "Stój" semafora: 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> <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>&nbsp;&nbsp;(odnoszącego się do wjazdu pociągu)</div>
</div> </div>
<div>- odstępowego <input type="text" /></div> <div>- odstępowego <input type="text" v-model="order.row2.signal3" /></div>
<div>- wjechać z zamkniętego toru nr <input type="text" /> nie posiadającego semafora wjazdowego</div> <div>
- wjechać z zamkniętego toru nr <input type="text" v-model="order.row2.trackNo" /> nie posiadającego
semafora wjazdowego
</div>
</td> </td>
</tr> </tr>
<tr> <tr>
<td>3</td> <td>3</td>
<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ć 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 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> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</section> </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> </template>
<script lang="ts"> <script lang="ts">
import { useStore } from '@/store/store';
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
export default defineComponent({ export default defineComponent({
setup() { setup() {
return {}; const store = useStore();
return {
order: store.orderS,
};
}, },
}); });
</script> </script>
<style lang="scss" scoped>
@import '../styles/rozkaz.scss';
</style>
src/main.ts
+5 -5
View File
@@ -1,6 +1,6 @@
import { createApp } from 'vue' import { createApp } from 'vue';
import App from './App.vue' import App from './App.vue';
import router from './router' import router from './router';
import store from './store' import { createPinia } from 'pinia';
createApp(App).use(store).use(router).mount('#app') createApp(App).use(router).use(createPinia()).mount('#app');
src/store/index.ts
-12
View File
@@ -1,12 +0,0 @@
import { createStore } from 'vuex'
export default createStore({
state: {
},
mutations: {
},
actions: {
},
modules: {
}
})
src/store/store.ts
+98
View File
@@ -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: '',
},
},
};
},
});
src/styles/rozkaz.scss
-97
View File
@@ -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;
}
src/views/Home.vue
+4 -5
View File
@@ -1,17 +1,16 @@
<template> <template>
<div class="home"> <div class="home">
<OrderN /> <Order />
<OrderS v-if="false" />
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import OrderN from '@/components/OrderN.vue';
import OrderS from '@/components/OrderS.vue';
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import Order from "@/components/Order.vue";
export default defineComponent({ export default defineComponent({
components: { OrderN, OrderS }, components: { Order },
}); });
</script> </script>