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

refactor: components restructure; removed deprecated files

Browse Source
This commit is contained in:
Spythere
2025-10-03 00:57:57 +02:00
parent 6dcc96a677
commit 3a3ba61454
18 changed files with 51 additions and 1877 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.vue
+1 -1
View File
@@ -52,7 +52,7 @@ function handleQueries() {
const id = query.get('sceneryId');
if (id != null) {
store.panelMode = 'OrderTrainPicker';
store.panelMode = 'OrderTrainPickerPanel';
}
}
src/components/Order.vue
-232
View File
@@ -1,232 +0,0 @@
<template>
<div class="order" :class="{ dark: store.orderDarkMode }">
<div class="order_content">
<transition name="order-anim" mode="out-in">
<keep-alive>
<component :is="chosenOrderComponent" :key="chosenOrderComponent.name"></component>
</keep-alive>
</transition>
<OrderFooter />
</div>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { useStore } from '../store/store';
import OrderNVue from './OrderN.vue';
import OrderSVue from './OrderS.vue';
import OrderFooter from './OrderFooter.vue';
import OrderOVue from './OrderO.vue';
const orderComponents = { orderN: OrderNVue, orderS: OrderSVue, orderO: OrderOVue };
export default defineComponent({
components: { OrderNVue, OrderSVue, OrderFooter },
setup() {
const store = useStore();
return { store };
},
computed: {
chosenOrderComponent() {
return orderComponents[this.store.chosenOrderType];
}
}
});
</script>
<style lang="scss" scoped>
@use '../styles/colors';
$darkModeTextCol: #eee;
.order {
background-color: white;
color: black;
&.dark {
background-color: colors.$bgColDarker;
color: $darkModeTextCol;
}
max-height: 95vh;
overflow: auto;
font-size: 15px;
h2 {
margin: 0;
padding: 0;
}
textarea:focus-visible {
outline: 2px solid colors.$accentCol;
}
input[type='checkbox']:focus-visible,
input[type='radio']:focus-visible {
outline: 2px solid colors.$accentCol;
}
input[type='checkbox'],
input[type='radio'],
select {
margin-top: 0.5em;
margin-right: 0.5em;
font-size: 0.8em;
color: black;
}
textarea.others {
width: 100%;
min-height: 200px;
resize: vertical;
}
@media screen and (max-width: 550px) {
font-size: 3vw;
}
}
.order_header {
padding: 0.5em;
border: 2px solid black;
border-bottom: none;
}
.order_content {
padding: 0.5em;
}
.flex-row {
display: flex;
justify-content: space-around;
align-items: flex-end;
margin-top: 0.5em;
input {
max-width: 10em;
}
}
.flex-center {
display: flex;
justify-content: center;
align-items: center;
}
.horizontal-bar {
width: 100%;
height: 2px;
background-color: black;
margin: 0.5em 0;
}
.order input {
max-width: 100px;
background-color: transparent;
outline: none;
border: none;
font-size: 1em;
text-align: center;
border-bottom: 2px dotted black;
&:focus-visible {
border-bottom: 2px solid colors.$accentCol;
}
&.row-checkbox + input::placeholder {
color: red;
}
}
/* Dark mode */
.order.dark {
input {
border-color: $darkModeTextCol !important;
color: $darkModeTextCol !important;
&:focus-visible {
border-bottom: 2px solid colors.$accentCol !important;
}
&::placeholder {
color: #ccc !important;
}
}
select {
color: $darkModeTextCol !important;
border-color: $darkModeTextCol;
&:focus-visible {
border-color: colors.$accentCol;
}
}
option,
textarea {
color: $darkModeTextCol !important;
border-color: $darkModeTextCol !important;
background-color: colors.$bgColDarker !important;
}
.horizontal-bar {
background-color: white;
}
.order_header,
.order_other,
table,
tr,
td {
border-color: $darkModeTextCol !important;
}
}
.order_table-container {
table {
width: 100%;
td:first-child {
width: 10%;
text-align: center;
font-weight: bold;
}
td {
padding: 0.35em;
text-align: justify;
vertical-align: top;
line-height: 1.5em;
}
}
table,
td {
border: 2px solid black;
border-collapse: collapse;
}
}
.order-anim {
&-enter-active,
&-leave-active {
transition: opacity 150ms ease-in-out;
}
&-enter-from,
&-leave-to {
opacity: 0;
}
}
</style>
src/components/OrderFooter.vue
-101
View File
@@ -1,101 +0,0 @@
<template>
<section class="order_info">
<table>
<tbody>
<tr>
<td colspan="4">
<input type="text" v-model="footerInfo.stationName" placeholder="nazwa stacji" />
<br />
stacja
</td>
<td colspan="3">
<input type="text" v-model="footerInfo.checkpointName" placeholder="skrót posterunku" />
<br />
posterunek
</td>
<td colspan="2">
<input type="text" v-model="footerInfo.hour" placeholder="godzina" />
<br />
godz.
</td>
<td colspan="1">
<input type="text" v-model="footerInfo.minutes" placeholder="minuta" />
<br />
min.
</td>
</tr>
<tr>
<td colspan="5">
<input type="text" v-model="footerInfo.dispatcherName" placeholder="dyżurny" />
<br />
dyżurny ruchu
</td>
<td colspan="5">
<input
type="text"
v-model="footerInfo.secondaryDispatcherName"
placeholder="dyżurny (wypełnić jedno)"
/>
<br />
z polecenia dyżurnego ruchu
</td>
</tr>
</tbody>
</table>
</section>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import orderFooterMixin from '../mixins/orderFooterMixin';
import { useStore } from '../store/store';
export default defineComponent({
mixins: [orderFooterMixin],
setup() {
const store = useStore();
return {
store,
footerInfo: store.orderFooter
};
},
watch: {
footerInfo: {
deep: true,
handler() {
this.generateFooter();
}
}
}
});
</script>
<style lang="scss" scoped>
.order_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
-518
View File
@@ -1,518 +0,0 @@
<template>
<section class="order-n">
<section class="order_header" ref="header">
<h2 class="flex-center">
Rozkaz pisemny "N" nr &nbsp;
<input type="number" v-model="order.header.orderNo" placeholder="nr rozkazu" min="1" />
</h2>
<div class="flex-row">
dla pociągu nr
<input type="text" v-model="order.header.trainNo" placeholder="nr pociągu" />
dnia
<input type="text" v-model="order.header.date" placeholder="data" />
</div>
</section>
<section class="order_table-container">
<table>
<tbody>
<tr>
<td>
<label for="row-enabled-1">1</label>
<div>
<input type="checkbox" id="row-enabled-1" v-model="order.rows[0].enabled" />
</div>
</td>
<td ref="row-1">
Od
<input type="text" v-model="order.rows[0].from" holder="stacja / post." />
do
<input type="text" v-model="order.rows[0].to" holder="stacja / post." />
tor nr
<input type="text" v-model="order.rows[0].trackNo" holder="nr toru" />
jest zamknięty, ruch jednotorowy dwukierunkowy wprowadzono po torze nr
<input type="text" v-model="order.rows[0].trackNo2" holder="nr toru" />
</td>
</tr>
<tr>
<td>
<label for="row-enabled-2">2</label>
<div>
<input type="checkbox" id="row-enabled-2" v-model="order.rows[1].enabled" />
</div>
</td>
<td ref="row-2">
<strong>ZEZWALAM</strong> po otrzymaniu
<select id="select-2a" v-model="order.rows[1].option1">
<option :value="`sygnału &quot;Nakaz Jazdy&quot;`">sygnału "Nakaz Jazdy"</option>
<option value="tylko tego rozkazu pisemnego">tylko tego rozkazu pisemnego</option>
</select>
<div style="margin-top: 0.5rem">
<input
type="radio"
name="section-2"
id="checkbox-2a"
value="checkbox-2a"
v-model="order.rows[1].checkbox"
:checked="order.rows[1].checkbox == 'checkbox-2a'"
@change="handleRowCheckboxChange(2)"
/>
<label for="checkbox-2a">
przejechać obok wskazującego sygnał "Stój" semafora
<div style="margin-left: 1rem">
<input
type="radio"
name="section-2a"
id="radio-2a-1"
value="wyjazdowego"
v-model="order.rows[1].signalType"
@change="handleRowCheckboxChange(2)"
/>
<label for="radio-2a-1">
wyjazdowego
<input
type="text"
v-model="order.rows[1].signal1"
holder="nazwa sem."
:radio-checked="
order.rows[1].checkbox == 'checkbox-2a' &&
order.rows[1].signalType == 'wyjazdowego'
"
/>
</label>
<br />
<input
type="radio"
name="section-2a"
id="radio-2a-2"
value="drogowskazowego"
v-model="order.rows[1].signalType"
@change="handleRowCheckboxChange(2)"
/>
<label for="radio-2a-2">
drogowskazowego
<input
type="text"
v-model="order.rows[1].signal2"
holder="nazwa sem."
:radio-checked="
order.rows[1].checkbox == 'checkbox-2a' &&
order.rows[1].signalType == 'drogowskazowego'
"
/>
(odnoszącego się do wyjazdu pociągu)
</label>
<br />
<input
type="radio"
name="section-2a"
id="radio-2a-3"
value="wjazdowego"
v-model="order.rows[1].signalType"
@change="handleRowCheckboxChange(2)"
/>
<label for="radio-2a-3">
wjazdowego
<input
type="text"
v-model="order.rows[1].signal3"
holder="nazwa sem."
:radio-checked="
order.rows[1].checkbox == 'checkbox-2a' &&
order.rows[1].signalType == 'wjazdowego'
"
/>
na post. odg. bez sem. wyjazdowego
</label>
</div>
i wyjechać w kierunku
<input
type="text"
v-model="order.rows[1].direction1"
holder="stacja / post."
:radio-checked="order.rows[1].checkbox == 'checkbox-2a'"
/>
na tor szlakowy
<select v-model="order.rows[1].option2">
<option value="lewy">lewy</option>
<option value="prawy">prawy</option>
</select>
nr
<input
type="text"
v-model="order.rows[1].trackNoTo1"
holder="nr toru"
:radio-checked="order.rows[1].checkbox == 'checkbox-2a'"
/>
</label>
</div>
<div style="margin-top: 0.5rem">
<input
type="radio"
name="section-2"
id="checkbox-2b"
value="checkbox-2b"
v-model="order.rows[1].checkbox"
:checked="order.rows[1].checkbox == 'checkbox-2b'"
@change="handleRowCheckboxChange(2)"
/>
<label for="checkbox-2b">
z toru nr
<input
type="text"
v-model="order.rows[1].trackNoFrom"
holder="nr toru"
:radio-checked="order.rows[1].checkbox == 'checkbox-2b'"
/>
nie posiadającego semafora wyjazdowego wyjechać w kierunku
<input
type="text"
v-model="order.rows[1].direction2"
holder="stacja / post."
:radio-checked="order.rows[1].checkbox == 'checkbox-2b'"
/>
na tor szlakowy
<select v-model="order.rows[1].option3">
<option value="lewy">lewy</option>
<option value="prawy">prawy</option>
</select>
nr
<input
type="text"
v-model="order.rows[1].trackNoTo2"
holder="nr toru"
:radio-checked="order.rows[1].checkbox == 'checkbox-2b'"
/>
</label>
</div>
</td>
</tr>
<tr>
<td>
<label for="row-enabled-3">3</label>
<div>
<input type="checkbox" id="row-enabled-3" v-model="order.rows[2].enabled" />
</div>
</td>
<td ref="row-3">
<select v-model="order.rows[2].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.rows[2].direction" holder="stacja / post." />
do km
<input type="text" v-model="order.rows[2].toKilometer" holder="kilometry" />
skąd
<select v-model="order.rows[2].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.rows[2].trackNo" holder="nr toru" />
najpóźniej o godz.
<input type="text" v-model="order.rows[2].untilHour" holder="godzina" />
min.
<input type="text" v-model="order.rows[2].untilMin" holder="minuta" />
</td>
</tr>
<tr>
<td>
<label for="row-enabled-4">4</label>
<div>
<input type="checkbox" id="row-enabled-4" v-model="order.rows[3].enabled" />
</div>
</td>
<td ref="row-4">
<strong>WJAZD</strong> z toru szlakowego nr
<input type="text" v-model="order.rows[3].trackNo" holder="nr toru" />
na
<select v-model="order.rows[3].optionStation">
<option value="stację">stację</option>
<option value="posterunek odgałęźny">posterunek odgałęźny</option>
</select>
<input type="text" v-model="order.rows[3].stationName" holder="stacja / post." />
odbędzie się po otrzymaniu:
<div style="margin-top: 0.5rem">
<input
type="radio"
name="section-4"
id="checkbox-4a"
value="checkbox-4a"
v-model="order.rows[3].checkbox"
/>
<label for="checkbox-4a">
sygnału zastępczego "Sz" na osobnym urządzeniu ustawionym z
<select v-model="order.rows[3].side">
<option value="lewej">lewej</option>
<option value="prawej">prawej</option>
</select>
strony toru
</label>
</div>
<div style="margin-top: 0.5rem">
<input
type="radio"
name="section-4"
id="checkbox-4b"
value="checkbox-4b"
v-model="order.rows[3].checkbox"
/>
<label for="checkbox-4b">
rozkazu pisemnego "N" (doręczonego lub przekazanego przez urządzenia łączności)
</label>
</div>
</td>
</tr>
<tr>
<td>
<label for="row-enabled-5">5</label>
<div>
<input type="checkbox" id="row-enabled-5" v-model="order.rows[4].enabled" />
</div>
</td>
<td ref="row-5">
<strong>ZEZWALAM</strong> wjechać z toru szlakowego nr
<input type="text" v-model="order.rows[4].trackNo" holder="nr toru" />
z kierunku
<input type="text" v-model="order.rows[4].direction" holder="stacja / post." />
na
<select v-model="order.rows[4].stationType">
<option value="stację">stację</option>
<option value="posterunek odgałęźny">posterunek odgałęźny</option>
</select>
<input type="text" v-model="order.rows[4].stationName" holder="stacja / post." />
i przejechać obok sygnału "Stój" na
<input type="text" v-model="order.rows[4].on" holder="nazwa sygnału" />
</td>
</tr>
<tr style="height: 270px">
<td>
<label for="row-enabled-6">6</label>
<div>
<input type="checkbox" id="row-enabled-6" v-model="order.rows[5].enabled" />
</div>
</td>
<td ref="row-6">
<button
class="g-button text"
@click="order.rows[5].twoWay.enabled = !order.rows[5].twoWay.enabled"
>
&gt;
<span v-if="!order.rows[5].twoWay.enabled">
Wygeneruj treść na wprowadzenie ruchu dwukierunkowego
</span>
<span v-else>Wpisz treść własnoręcznie</span>
</button>
<div>Inne:</div>
<div v-if="order.rows[5].twoWay.enabled">
od
<input type="text" v-model="order.rows[5].twoWay.from" holder="stacja / post." />
do
<input type="text" v-model="order.rows[5].twoWay.to" holder="stacja / post." />
po torze nr
<input type="text" v-model="order.rows[5].twoWay.trackNo" holder="nr toru" />
wprowadzono ruch dwukierunkowy.
</div>
<textarea
v-else
class="others"
cols="30"
rows="10"
v-model="order.rows[5].content"
></textarea>
</td>
</tr>
</tbody>
</table>
</section>
</section>
</template>
<script lang="ts">
import { defineComponent, reactive } from 'vue';
import { useStore } from '../store/store';
import { handleOrderPlaceholders } from '../handlers/orderPlaceholderHandler';
type TOrderRows = 1 | 2 | 3 | 4 | 5;
export default defineComponent({
name: 'OrderN',
setup() {
const store = useStore();
const order = reactive(store.orderN);
const rowMethods = [
() => {
const { header } = order;
const message = `\n<i><b>Rozkaz pisemny "N" nr ${header.orderNo || '_'}</b> dla pociągu nr ${
header.trainNo || '_'
} dnia ${header.date}</i>`;
return message;
},
() => {
const row = order.rows[0];
const message = `Od ${row.from || '_'} do ${row.to || '_'} tor nr ${
row.trackNo || '_'
} jest zamknięty, ruch jednotorowy dwukierunkowy wprowadzono po torze nr ${
row.trackNo2 || '_'
}`;
return message;
},
() => {
const row = order.rows[1];
let message = `ZEZWALAM po otrzymaniu ${row.option1 || '_'}`;
if (row.checkbox == 'checkbox-2a') {
message += ` przejechać obok wskazującego sygnał "Stój" semafora ${
row.signalType || '_'
} `;
if (row.signalType == 'wyjazdowego') message += row.signal1 || '_';
if (row.signalType == 'drogowskazowego')
message += `${row.signal2 || '_'} (odnoszącego się do wyjazdu pociągu)`;
if (row.signalType == 'wjazdowego')
message += `${row.signal3 || '_'} na post. odg. bez sem. wyjazdowego`;
message += ` i wyjechać w kierunku ${row.direction1 || '_'} na tor szlakowy ${
row.option2 || '_'
} nr ${row.trackNoTo1 || '_'}`;
}
if (row.checkbox == 'checkbox-2b') {
message += ` z toru nr ${
row.trackNoFrom || '_'
} nie posiadającego semafora wyjazdowego wyjechać w kierunku ${
row.direction2 || '_'
} na tor szlakowy ${row.option3 || '_'} nr ${row.trackNoTo2 || '_'}`;
}
return message;
},
() => {
const row = order.rows[2];
let message = `${row.option1 || '_'} pociągu odbędzie się w kierunku: ${
row.direction || '_'
} do km ${row.toKilometer || '_'} skąd ${row.option2 || '_'} ma wrócić po torze lewym nr ${
row.trackNo || '_'
} najpóźniej o godz. ${row.untilHour || '_'} min. ${row.untilMin || '_'}`;
return message;
},
() => {
const row = order.rows[3];
let message = `WJAZD z toru szlakowego nr ${row.trackNo || '_'} na ${
row.optionStation || '_'
} ${row.stationName || '_'} odbędzie się po otrzymaniu: `;
if (row.checkbox == 'checkbox-4a')
message += `sygnału zastępczego "Sz" na osobnym urządzeniu ustawionym z ${
row.side || '_'
} strony toru`;
if (row.checkbox == 'checkbox-4b')
message +=
'rozkazu pisemnego "N" (doręczonego lub przekazanego przez urządzenia łączności)';
return message;
},
() => {
const row = order.rows[4];
const message = `ZEZWALAM wjechać z toru szlakowego nr ${row.trackNo || '_'} z kierunku ${
row.direction || '_'
} na ${row.stationType || '_'} ${
row.stationName || '_'
} i przejechać obok sygnału "Stój" na ${row.on || '_'} `;
return message;
},
() => {
const row = order.rows[5];
if (row.twoWay.enabled)
return `Inne: od ${row.twoWay.from || '_'} do ${row.twoWay.to || '_'} po torze nr ${
row.twoWay.trackNo || '_'
} wprowadzono ruch dwukierunkowy.`;
return 'Inne: ' + row.content;
}
];
return {
store,
order,
rowMethods
};
},
watch: {
order: {
deep: true,
handler() {
this.generateMessage();
}
},
'order.rows': {
deep: true,
handler() {
this.updatePlaceholders();
}
}
},
mounted() {
this.updatePlaceholders();
},
activated() {
this.generateMessage();
},
methods: {
updatePlaceholders() {
this.order.rows.forEach((_, i) => {
this.handleRowCheckboxChange((i + 1) as TOrderRows);
});
},
handleRowCheckboxChange(rowIndex: TOrderRows) {
const isRowEnabled = this.order.rows[rowIndex - 1].enabled;
const rowRef = this.$refs[`row-${rowIndex}`] as HTMLTableElement;
this.$nextTick(() => {
handleOrderPlaceholders(isRowEnabled, rowRef);
});
},
generateMessage() {
let message = this.rowMethods[0]();
for (let i = 0; i < this.order.rows.length; i++) {
if (!this.order.rows[i].enabled) continue;
message += `\n--------\n<b>[ ${i + 1} ]</b> ${this.rowMethods[i + 1]()}`;
}
this.store.orderMessage = message;
}
}
});
</script>
src/components/OrderO.vue
-199
View File
@@ -1,199 +0,0 @@
<template>
<section class="order-o">
<section class="order_header">
<h2 class="flex-center" style="padding: 0 0.5em">
Rozkaz pisemny "O" nr &nbsp;
<input type="number" v-model="order.header.orderNo" placeholder="nr rozkazu" min="1" />
</h2>
<div class="flex-row" style="padding: 0 0.5em">
dla pociągu nr
<input type="text" v-model="order.header.trainNo" placeholder="nr pociągu" />
dnia
<input type="text" v-model="order.header.date" />
</div>
<div class="horizontal-bar"></div>
<div style="display: flex; padding: 0 0.5em">
<b>1.</b>
<div style="margin-left: 1.5em">
1) zmniejszyć prędkość jazdy i zachować ostrożność <br />2) jechać ostrożnie (j.o.)
</div>
</div>
</section>
<section class="order_table">
<table cellborder="1">
<tbody>
<tr class="tr-header">
<td rowspan="2" width="35%">
Na posterunku, <br />
na szlaku
</td>
<td width="20%">od</td>
<td width="20%">do</td>
<td rowspan="2">1) prędkość najwyżej km/h</td>
<td rowspan="2">2) j.o.</td>
<td rowspan="2" width="35%">z powodu</td>
</tr>
<tr class="tr-header">
<td colspan="2">kilometra</td>
</tr>
<tr v-for="(row, i) in order.orderList" :key="i" class="tr-data">
<td>
<textarea v-model="row.name"></textarea>
</td>
<td>
<textarea v-model="row.from"></textarea>
</td>
<td>
<textarea v-model="row.to"></textarea>
</td>
<td>
<input type="text" v-model="row.vmax" />
</td>
<td>
<input type="checkbox" v-model="row.jo" />
</td>
<td>
<textarea v-model="row.reason"></textarea>
</td>
</tr>
</tbody>
</table>
</section>
<div class="order_other">
<span><b>2.</b> Inne:</span>
<br />
<textarea class="others" cols="30" rows="10" v-model="order.other"></textarea>
</div>
</section>
</template>
<script lang="ts">
import { defineComponent, reactive } from 'vue';
import { useStore } from '../store/store';
export default defineComponent({
name: 'OrderO',
setup() {
const store = useStore();
const order = reactive(store.orderO);
const rowMethods = [
() => {
const { header } = order;
return `\n<i><b>Rozkaz pisemny "O" nr ${header.orderNo || '_'}</b> dla pociągu nr ${
header.trainNo || '_'
} dnia ${header.date || '_'}</i>`;
}
];
return {
store,
order,
rowMethods
};
},
activated() {
this.generateMessage();
},
watch: {
order: {
deep: true,
handler() {
this.generateMessage();
}
}
},
methods: {
generateMessage() {
let message = this.rowMethods[0]();
if (this.order.orderList.some((row) => row.name)) {
message += `\n--------\n<b>[ 1 ]</b>`;
message += '\n1) zmniejszyć prędkość jazdy i zachować ostrożność'
message += '\n2) jechać ostrożnie (j.o.)\n'
}
for (let i = 0; i < this.order.orderList.length; i++) {
const row = this.order.orderList[i];
if (!row.name) continue;
message += `\n- ${row.name || '_'} od ${row.from || '_'} do ${row.to || '_'} kilometra`;
if (row.vmax) message += ` prędkość najwyżej ${row.vmax} km/h`;
if (row.jo) message += ` jechać ostrożnie`;
message += ` z powodu: ${row.reason || '_'}`;
}
if (this.order.other) message += `\n--------\n<b>[ 2 ]</b> Inne: ${this.order.other}`;
this.store.orderMessage = message;
}
}
});
</script>
<style lang="scss" scoped>
table,
td,
th {
border: 2px solid black;
border-collapse: collapse;
}
.order_header {
padding: 0.5em 0;
}
.order_table {
.tr-header td {
padding: 1em 0.5em;
}
.tr-data td {
padding: 0.5em 0;
}
tbody {
font-weight: normal;
text-align: center;
vertical-align: middle;
}
input {
width: 80%;
}
}
.order_table {
textarea {
width: 90%;
min-height: 50px;
resize: vertical;
}
}
.order_other {
border-left: 2px solid black;
border-right: 2px solid black;
display: flex;
flex-direction: column;
padding: 0.5em;
}
</style>
src/components/OrderS.vue
-448
View File
@@ -1,448 +0,0 @@
<template>
<section class="order-s">
<section class="order_header">
<h2 class="flex-center">
Rozkaz pisemny "S" nr &nbsp;
<input type="number" v-model="order.header.orderNo" placeholder="nr rozkazu" min="1" />
</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" :placeholder="`nr ${order.header.for}`" />
dnia
<input type="text" v-model="order.header.date" placeholder="data" />
</div>
</section>
<section class="order_table-container">
<table>
<tbody>
<tr>
<td>
<label for="row-enabled-1">1</label>
<div>
<input
type="checkbox"
id="row-enabled-1"
v-model="order.rows[0].enabled"
@change="handleRowCheckboxChange(1)"
/>
</div>
</td>
<td ref="row-1">
zezwalam po otrzymaniu
<select id="select-1a" v-model="order.rows[0].option1">
<option :value="`sygnału &quot;nakaz jazdy&quot;`">sygnału "nakaz jazdy"</option>
<option value="tylko tego rozkazu pisemnego">tylko tego rozkazu pisemnego</option>
</select>
<div style="margin-top: 0.5rem">
<input
type="radio"
name="section-1a"
id="radio-1a-1"
value="radio-1a-1"
v-model="order.rows[0].radio1"
@change="handleRowCheckboxChange(1)"
/>
<label for="radio-1a-1">
przejechać obok wskazującego sygnał "Stój" semafora
<select id="select-signal" v-model="order.rows[0].optionSignal">
<option value="wyjazdowego">wyjazdowego</option>
<option value="drogowskazowego">drogowskazowego</option>
</select>
<input
type="text"
v-model="order.rows[0].signal1"
holder="nazwa sem."
:radio-checked="order.rows[0].radio1 == 'radio-1a-1'"
/>
<span v-if="order.rows[0].optionSignal == 'drogowskazowego'"> (odnoszącego się do wyjazdu pociągu)</span>
<br />
</label>
<hr />
<input
type="radio"
name="section-1a"
id="radio-1a-2"
value="radio-1a-2"
v-model="order.rows[0].radio1"
@change="handleRowCheckboxChange(1)"
/>
<label for="radio-1a-2">
wyjechać z toru nr
<input
type="text"
v-model="order.rows[0].trackNo"
holder="nr toru"
:radio-checked="order.rows[0].radio1 == 'radio-1a-2'"
/>
nie posiadającego semafora wyjazdowego
</label>
</div>
</td>
</tr>
<tr>
<td>
<label for="row-enabled-2">2</label>
<div>
<input
type="checkbox"
id="row-enabled-2"
v-model="order.rows[1].enabled"
@change="handleRowCheckboxChange(2)"
/>
</div>
</td>
<td ref="row-2">
zezwalam przejechać obok wskazującego sygnał "Stój" semafora:
<div>
<input
type="radio"
name="section-2a"
id="radio-2a-1"
value="wyjazdowego"
@change="handleRowCheckboxChange(2)"
v-model="order.rows[1].signalType"
/>
<label for="radio-2a-1">
wjazdowego
<input
type="text"
v-model="order.rows[1].signal1"
holder="nazwa sem."
:radio-checked="order.rows[1].signalType == 'wyjazdowego'"
/>
</label>
<br />
<input
type="radio"
name="section-2a"
id="radio-2a-2"
value="drogowskazowego"
@change="handleRowCheckboxChange(2)"
v-model="order.rows[1].signalType"
/>
<label for="radio-2a-2">
drogowskazowego
<input
type="text"
v-model="order.rows[1].signal2"
holder="nazwa sem."
:radio-checked="order.rows[1].signalType == 'drogowskazowego'"
/>
(odnoszącego się do wjazdu pociągu)
</label>
<br />
<input
type="radio"
name="section-2a"
id="radio-2a-3"
value="odstępowego"
@change="handleRowCheckboxChange(2)"
v-model="order.rows[1].signalType"
/>
<label for="radio-2a-3">
odstępowego
<input
type="text"
v-model="order.rows[1].signal3"
holder="nazwa sem."
:radio-checked="order.rows[1].signalType == 'odstępowego'"
/></label>
<br />
<input
type="radio"
name="section-2a"
id="radio-2a-4"
value="toru"
v-model="order.rows[1].signalType"
@change="handleRowCheckboxChange(2)"
/>
<label for="radio-2a-4">
wjechać z zamkniętego toru nr
<input
type="text"
v-model="order.rows[1].trackNo"
holder="nr toru"
:radio-checked="order.rows[1].signalType == 'toru'"
/>
nie posiadającego semafora wjazdowego
</label>
</div>
</td>
</tr>
<tr>
<td>
<label for="row-enabled-3">3</label>
<div>
<input
type="checkbox"
id="row-enabled-3"
v-model="order.rows[2].enabled"
@change="handleRowCheckboxChange(3)"
/>
</div>
</td>
<td ref="row-3">
Od
<input type="text" v-model="order.rows[2].from" holder="stacja / post." />
do
<input type="text" v-model="order.rows[2].to" holder="stacja / post." />
po torze nr
<input type="text" v-model="order.rows[2].trackNo" holder="nr toru" />
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.rows[2].trainNo" holder="nr pociągu" />
przybył do
<input type="text" v-model="order.rows[2].arrivedTo" holder="stacja / post." />
o godzinie
<input type="text" v-model="order.rows[2].hour" holder="godzina" />
</td>
</tr>
<tr style="height: 270px">
<td>
<label for="row-enabled-4">4</label>
<div>
<input
type="checkbox"
id="row-enabled-4"
v-model="order.rows[3].enabled"
@change="handleRowCheckboxChange(4)"
/>
</div>
</td>
<td ref="row-4">
<button
class="g-button text"
@click="order.rows[3].w5.enabled = !order.rows[3].w5.enabled"
>
&gt;
<span v-if="!order.rows[3].w5.enabled"
>Wygeneruj treść na pominięcie wskaźnika W5</span
>
<span v-else>Wpisz treść własnoręcznie</span>
</button>
<div>Inne:</div>
<div v-if="order.rows[3].w5.enabled">
zezwalam na wyjazd poza
<select id="select-borderType" v-model="order.rows[3].w5.borderType">
<option value="wskaźnik przetaczania W5">wskaźnik przetaczania W5</option>
<option value="granicę przetaczania">granicę przetaczania</option>
</select>
po torze szlakowym nr
<input type="text" v-model="order.rows[3].w5.trackNo" holder="nr szlaku" />
do kilometra
<input type="text" v-model="order.rows[3].w5.maxKm" holder="km szlaku" />. Powrót
odbędzie się na
<select
id="select-returnWay"
v-model="order.rows[3].w5.returnWay"
style="width: 250px"
>
<option :value="`sygnał ręczny &quot;Do mnie&quot;`">
sygnał ręczny "Do mnie"
</option>
<option
:value="`sygnał &quot;Do mnie&quot; przekazany przez urządzenia radiołączności`"
>
sygnał "Do mnie" przekazany przez urządzenia radiołączności
</option>
<option value="sygnał Ms2 podany na tarczy manewrowej">
sygnał Ms2 podany na tarczy manewrowej
</option>
</select>
<input
type="text"
v-model="order.rows[3].w5.tmName"
holder="nazwa tarczy"
v-if="order.rows[3].w5.returnWay.includes('tarczy')"
/>
do godziny
<input type="text" v-model="order.rows[3].w5.maxHour" holder="godzina" />
</div>
<textarea
v-else
class="others"
cols="30"
rows="10"
v-model="order.rows[3].content"
></textarea>
</td>
</tr>
</tbody>
</table>
</section>
</section>
</template>
<script lang="ts">
import { defineComponent, reactive } from 'vue';
import { handleOrderPlaceholders } from '../handlers/orderPlaceholderHandler';
import { useStore } from '../store/store';
type TOrderRows = 1 | 2 | 3 | 4;
export default defineComponent({
name: 'OrderS',
setup() {
const store = useStore();
const order = reactive(store.orderS);
const rowMethods = [
() => {
const { header } = order;
return `\n<i><b>Rozkaz pisemny "S" nr ${header.orderNo || '_'}</b> dla ${header.for || '_'} nr ${
header.trainNo || '_'
} dnia ${header.date || '_'}</i>`;
},
() => {
const row = order.rows[0];
let message = `zezwalam po otrzymaniu ${row.option1 || '_'}`;
if (row.radio1 == 'radio-1a-1')
message += ` przejechać obok wskazującego sygnał "Stój" semafora ${
row.optionSignal || '_'
} ${row.signal1 || '_'}${row.optionSignal == 'drogowskazowego' ? ' (odnoszącego się do wyjazdu pociągu)' : ''}`;
else
message += ` wyjechać z toru nr ${
row.trackNo || '_'
} nie posiadającego semafora wyjazdowego`;
return message;
},
() => {
const row = order.rows[1];
let message = `zezwalam przejechać obok wskazującego sygnał "Stój" semafora `;
switch (row.signalType) {
case 'wyjazdowego':
message += `wjazdowego ${row.signal1 || '_'}`;
break;
case 'drogowskazowego':
message += `drogowskazowego ${row.signal2 || '_'} (odnoszącego się do wjazdu pociągu)`;
break;
case 'odstępowego':
message += `odstępowego ${row.signal3 || '_'}`;
break;
case 'toru':
message += `wjechać z zamkniętego toru nr ${
row.trackNo || '_'
} nie posiadającego semafora wjazdowego`;
break;
default:
break;
}
return message;
},
() => {
const row = order.rows[2];
return `Od ${row.from || '_'} do ${row.to || '_'} po torze nr ${
row.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 ${
row.trainNo || '_'
} przybył do ${row.arrivedTo || '_'} o godzinie ${row.hour || '_'}`;
},
() => {
const row = order.rows[3];
if (row.w5.enabled) {
const { borderType, trackNo, maxHour, maxKm, returnWay, tmName } = row.w5;
const textArray = [];
textArray.push(
'Inne: zezwalam na wyjazd poza',
borderType || '_',
'po torze szlakowym nr',
trackNo || '_'
);
if (maxKm) textArray.push(`do kilometra ${maxKm}`);
textArray.push('.');
textArray.push('Powrót odbędzie się na', returnWay || '_');
if (returnWay.includes('tarczy')) textArray.push(tmName || '_');
textArray.push(`do godziny ${maxHour || '_'}`);
return textArray.join(' ').replace(/ \./, '.');
}
return `Inne: ${row.content}`;
}
];
return {
store,
order,
rowMethods
};
},
activated() {
this.generateMessage();
},
mounted() {
this.updatePlaceholders();
},
watch: {
order: {
deep: true,
handler() {
this.generateMessage();
}
},
'order.rows': {
deep: true,
handler() {
this.updatePlaceholders();
}
}
},
methods: {
updatePlaceholders() {
this.order.rows.forEach((_, i) => {
this.handleRowCheckboxChange((i + 1) as TOrderRows);
});
},
generateMessage() {
let message = this.rowMethods[0]();
for (let i = 0; i < 4; i++) {
if (!this.order.rows[i].enabled) continue;
message += `\n--------\n<b>[ ${i + 1} ]</b> ${this.rowMethods[i + 1]()}`;
}
this.store.orderMessage = message;
},
handleRowCheckboxChange(rowIndex: TOrderRows) {
const isRowEnabled = this.order.rows[rowIndex - 1].enabled;
const rowRef = this.$refs[`row-${rowIndex}`] as HTMLTableElement;
this.$nextTick(() => {
handleOrderPlaceholders(isRowEnabled, rowRef);
});
}
}
});
</script>
src/components/OrderList.vue → src/components/Panels/OrderListPanel.vue
+5 -5
View File
@@ -61,10 +61,10 @@
<script lang="ts" setup>
import { computed, onActivated, onMounted, Reactive, reactive } from 'vue';
import { useStore } from '../store/store';
import { IStorageOrderData, LocalStorageOrderLegacy } from '../types/orderTypes';
import StorageManager from '../managers/storageManager';
import { useI18n } from 'vue-i18n';
import { useStore } from '../../store/store';
import { IStorageOrderData, LocalStorageOrderLegacy } from '../../types/orderTypes';
import StorageManager from '../../managers/storageManager';
const { t } = useI18n();
const store = useStore();
@@ -96,7 +96,7 @@ function selectLocalOrder(order: IStorageOrderData) {
(store.orderData['instructions'] as any)[k] = v;
});
store.panelMode = 'OrderMessage';
store.panelMode = 'OrderMessagePanel';
store.chosenLocalOrderId = order.id;
}
@@ -141,7 +141,7 @@ onActivated(() => {
</script>
<style lang="scss" scoped>
@use '../styles/colors';
@use '../../styles/colors';
.list {
&-move,
src/components/OrderMessage.vue → src/components/Panels/OrderMessagePanel.vue
+4 -4
View File
@@ -86,12 +86,12 @@
<script lang="ts" setup>
import { computed, onMounted, Reactive, reactive, ref, watch } from 'vue';
import { useStore } from '../store/store';
import { useI18n } from 'vue-i18n';
import StorageManager from '../managers/storageManager';
import { IOrderFooter, IOrderHeader, IStorageOrderData } from '../types/orderTypes';
import { LucideCopy, LucidePencil, LucideRotateCcw, LucideSave } from 'lucide-vue-next';
import { useStore } from '../../store/store';
import { IOrderHeader, IOrderFooter, IStorageOrderData } from '../../types/orderTypes';
import StorageManager from '../../managers/storageManager';
type TActionMonitType = 'warning' | 'info' | 'success';
@@ -380,7 +380,7 @@ function resetOrder() {
</script>
<style lang="scss" scoped>
@use '../styles/colors';
@use '../../styles/colors';
.order-message {
h3 {
src/components/OrderTrainPicker.vue → src/components/Panels/OrderTrainPickerPanel.vue
+14 -31
View File
@@ -111,14 +111,13 @@
</template>
<script lang="ts" setup>
import { useStore } from '../store/store';
import http from '../http';
import { ISceneryData } from '../types/dataTypes';
import { API } from '../types/apiTypes';
import { getRegionNameById } from '../utils/sceneryUtils';
import { computed, onActivated, onDeactivated, onMounted, ref } from 'vue';
import StorageManager from '../managers/storageManager';
import { ref, onMounted, onActivated, onDeactivated, computed } from 'vue';
import http from '../../http';
import { useStore } from '../../store/store';
import { API } from '../../types/apiTypes';
import { ISceneryData } from '../../types/dataTypes';
import StorageManager from '../../managers/storageManager';
import { getRegionNameById } from '../../utils/sceneryUtils';
const store = useStore();
const regions = ['eu', 'cae', 'usw', 'us', 'ru'];
@@ -238,29 +237,13 @@ function fillOrderData(train: API.ActiveTrains.Data) {
store.orderData.footer.V = train.driverName;
store.orderData.footer.W = scenery.dispatcherName;
store.orderData.footer.Z = scenery.stationName + Date.now().toString();
// store.orderData.header
const sceneryAbbrev = sceneriesData.value
? (sceneriesData.value.find(({ name }) => name === scenery.stationName)?.abbr ?? null)
: null;
// const chosenOrder = store[this.store.chosenOrderType];
// chosenOrder.header.trainNo = trainNo.toString();
// chosenOrder.header.date = currentFormattedDate();
// store.orderFooter.dispatcherName = selectedScenery.dispatcherName;
// store.orderFooter.stationName =
// selectedCheckpointName?.split(',')[0] || selectedScenery.stationName;
// store.orderFooter.hour = currentFormattedHours();
// store.orderFooter.minutes = currentFormattedMinutes();
if (autofillCheckpointName.value) {
const sceneryAbbrev = sceneriesData.value?.find(
({ name }) => name === selectedScenery!.value?.stationName
)?.abbr;
// store.orderFooter.checkpointName = sceneryAbbrev || store.orderFooter.stationName.slice(0, 2);
}
store.panelMode = 'OrderMessage';
store.orderData.footer.Z = `${sceneryAbbrev || scenery.stationName} ${StorageManager.getNumericValue('orderCount') || 1}`;
store.panelMode = 'OrderMessagePanel';
}
function handleQueries() {
@@ -282,14 +265,14 @@ function handleQueries() {
selectCheckpointOption();
store.panelMode = 'OrderTrainPicker';
store.panelMode = 'OrderTrainPickerPanel';
}
}
}
</script>
<style lang="scss" scoped>
@use '../styles/colors';
@use '../../styles/colors';
.order-train-picker {
display: flex;
src/components/SideBar.vue
-145
View File
@@ -1,145 +0,0 @@
<template>
<section class="sidebar">
<div class="sidebar_content">
<!-- <button class="option-save" @click="toggleOrderMode" :data-selected="store.orderMode == 'OrderList'">
<img :src="saveIcon" alt="save icon" />
</button> -->
<!-- <button @click="store.helperModalOpen = true">?</button> -->
<button
v-for="orderType in orderTypeList"
:key="orderType.id"
@click="selectOrderType(orderType.id)"
:data-selected="store.chosenOrderType == orderType.id"
>
{{ orderType.name }}
<div class="bar"></div>
</button>
</div>
</section>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { useStore } from '../store/store';
export default defineComponent({
data() {
return {
orderTypeList: [
{
id: 'orderN',
name: 'N'
},
{
id: 'orderS',
name: 'S'
},
{
id: 'orderO',
name: 'O'
}
]
};
},
setup() {
return {
store: useStore()
};
},
methods: {
selectOrderType(type: any) {
if (type != this.store.chosenOrderType) this.store.chosenLocalOrderId = '';
this.store.chosenOrderType = type;
}
}
});
</script>
<style lang="scss" scoped>
@use '../styles/colors';
.sidebar_content {
display: grid;
grid-template-rows: repeat(3, 1fr);
gap: 0.25em;
font-size: 1.5em;
font-weight: bold;
height: 100%;
& > button {
position: relative;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
color: white;
background-color: colors.$bgColDarker;
width: 50px;
height: 85px;
.bar {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 4px;
transform: translateX(100%);
transition: all 200ms ease-in-out;
}
&[data-selected='true'] .bar {
transform: translateX(0);
background-color: colors.$accentCol;
}
&:hover {
cursor: pointer;
}
&:focus-visible {
background-color: #6d6d6d;
}
}
}
button.option-save {
background-color: #000000aa;
img {
width: 80%;
height: 80%;
}
&[data-selected='true'] {
background-color: colors.$accentCol;
}
}
@media screen and (max-width: 650px) {
.sidebar_content {
display: flex;
justify-content: space-between;
& > button {
height: 40px;
width: 100px;
.bar {
width: 100%;
height: 4px;
}
}
}
}
</style>
src/locales/en.json
+3 -3
View File
@@ -4,9 +4,9 @@
"en": "ENG"
},
"navbar": {
"order-message": "ORDER MESSAGE",
"order-list": "SAVED ORDERS",
"order-train-picker": "TRAINS"
"OrderMessagePanel": "ORDER MESSAGE",
"OrderListPanel": "SAVED ORDERS",
"OrderTrainPickerPanel": "TRAINS"
},
"update": {
"update-available-text": "New GeneraTOR version is available!",
src/locales/pl.json
+3 -3
View File
@@ -13,9 +13,9 @@
"info-2": "Pełny changelog dostępny na <a href='https://github.com/Spythere/genera-tor' target='_blank'>GitHubie projektu</a>"
},
"navbar": {
"order-message": "TREŚĆ ROZKAZU",
"order-list": "ZAPISANE ROZ.",
"order-train-picker": "POCIĄGI"
"OrderMessagePanel": "TREŚĆ ROZKAZU",
"OrderListPanel": "ZAPISANE ROZKAZY",
"OrderTrainPickerPanel": "POCIĄGI"
},
"order-message": {
"title": "Wiadomość do wyświetlenia na czacie symulatora:",
src/mixins/orderFooterMixin.ts
-30
View File
@@ -1,30 +0,0 @@
import { defineComponent } from 'vue';
import { useStore } from '../store/store';
export default defineComponent({
setup() {
return {
store: useStore()
};
},
methods: {
generateFooter() {
const footer = this.store.orderFooter;
const messageArray = [];
messageArray.push(`stacja: ${footer.stationName ?? ''}`);
if (footer.checkpointName) messageArray.push(`posterunek: ${footer.checkpointName}`);
if (footer.hour) messageArray.push(`godz. ${footer.hour}`);
if (footer.minutes) messageArray.push(`min. ${footer.minutes}`);
if (footer.dispatcherName) messageArray.push(`dyżurny ruchu ${footer.dispatcherName}`);
if (footer.secondaryDispatcherName)
messageArray.push(`z polecenia dyżurnego ruchu ${footer.secondaryDispatcherName}`);
this.store.footerMessage = `\n--------\n${messageArray.join(
', '
)}\n--------\nRozkaz otrzymałem, maszynista: <i>(potwierdzić otrzymanie rozkazu)</i>`;
}
}
});
src/mixins/orderStorageMixin.ts
-94
View File
@@ -1,94 +0,0 @@
import { defineComponent } from 'vue';
import { useStore } from '../store/store';
import { LocalStorageOrderLegacy } from '../types/orderTypes';
function alertWrongOrderFormat() {
alert('Wystąpił błąd podczas przetwarzania rozkazu! Informacje mogą być niepoprawne!');
console.warn('Zły format zapisanego rozkazu!');
}
export default defineComponent({
setup() {
return {
store: useStore()
};
},
methods: {
removeLocalOrder(order: LocalStorageOrderLegacy) {
localStorage.removeItem(order.id);
if (this.store.chosenLocalOrderId == order.id) this.store.chosenLocalOrderId = '';
// localStorage.setItem('orderCount', (Number(localStorage.getItem('orderCount')) - 1).toString());
},
selectLocalOrder(localOrder: LocalStorageOrderLegacy) {
// const localOrder = JSON.parse(JSON.stringify(order));
const { orderBody: localOrderBody, orderFooter: localOrderFooter } = localOrder;
this.store[localOrder.orderType].header.date = localOrderBody.header.date;
this.store[localOrder.orderType].header.orderNo = localOrderBody.header.orderNo;
this.store[localOrder.orderType].header.trainNo = localOrderBody.header.trainNo;
if (localOrder.orderType == 'orderN' || localOrder.orderType == 'orderS') {
const currentOrder = this.store[localOrder.orderType];
if (localOrderBody.rows.length != currentOrder.rows.length) {
alertWrongOrderFormat();
return;
}
for (let rowIndex = 0; rowIndex < currentOrder.rows.length; rowIndex++) {
const row = currentOrder.rows[rowIndex];
if (localOrderBody.rows[rowIndex] === undefined) {
alertWrongOrderFormat();
continue;
}
for (const rowProp in row) {
if (localOrderBody.rows[rowIndex][rowProp] === undefined) {
alertWrongOrderFormat();
continue;
}
(currentOrder.rows[rowIndex] as any)[rowProp] = localOrderBody.rows[rowIndex][rowProp];
}
}
}
if (localOrder.orderType == 'orderO') {
const currentOrder = this.store[localOrder.orderType];
for (let rowIndex = 0; rowIndex < currentOrder.orderList.length; rowIndex++) {
const row = currentOrder.orderList[rowIndex];
if (localOrderBody.orderList[rowIndex] === undefined) {
alertWrongOrderFormat();
continue;
}
for (const rowProp in row) {
if (localOrderBody.orderList[rowIndex][rowProp] === undefined) {
alertWrongOrderFormat();
continue;
}
(currentOrder.orderList[rowIndex] as any)[rowProp] =
localOrderBody.orderList[rowIndex][rowProp];
}
}
currentOrder.other = localOrderBody.other;
}
for (const key in this.store.orderFooter) {
(this.store.orderFooter as any)[key] = localOrderFooter[key];
}
this.store.chosenOrderType = localOrder.orderType;
this.store.chosenLocalOrderId = localOrder.id;
this.store.panelMode = 'OrderMessage';
}
}
});
src/mixins/orderValidationMixin.ts
-32
View File
@@ -1,32 +0,0 @@
import { defineComponent } from 'vue';
import { useStore } from '../store/store';
export default defineComponent({
setup() {
return {
store: useStore(),
};
},
methods: {
verifyOrderFields() {
// const header = this.store[this.store.chosenOrderType].header;
const footer = this.store.orderFooter;
const fieldsToCorrect = [];
// if (!header.orderNo) fieldsToCorrect.push('numer rozkazu');
// if (!header.trainNo) fieldsToCorrect.push('numer pociągu / manewru');
// if (!header.date) fieldsToCorrect.push('data');
if (!footer.stationName) fieldsToCorrect.push('stacja');
if (!footer.checkpointName) fieldsToCorrect.push('posterunek');
if (!footer.hour) fieldsToCorrect.push('godzina');
if (!footer.minutes) fieldsToCorrect.push('minuta');
if (!footer.dispatcherName && !footer.secondaryDispatcherName)
fieldsToCorrect.push('dyżurny ruchu (lub z polecenia dyżurnego ruchu)');
return fieldsToCorrect;
}
}
});
src/store/store.ts
+2 -1
View File
@@ -8,6 +8,7 @@ import {
import StorageManager from '../managers/storageManager';
import i18n from '../i18n';
import { TPanelMode } from '../types/dataTypes';
export const useStore = defineStore('store', {
state: () => {
@@ -24,7 +25,7 @@ export const useStore = defineStore('store', {
helperModalOpen: false,
orderDarkMode: false,
panelMode: 'OrderMessage',
panelMode: 'OrderMessagePanel' as TPanelMode,
chosenOrderType: 'orderN' as TOrder,
chosenLocalOrderId: '',
src/types/dataTypes.ts
+3 -1
View File
@@ -32,4 +32,6 @@ export interface ISceneryData {
routes: string;
signalType: string;
url: string;
}
}
export type TPanelMode = 'OrderListPanel' | 'OrderMessagePanel' | 'OrderTrainPickerPanel';
src/views/Home.vue
+16 -29
View File
@@ -9,12 +9,12 @@
<div class="panel-nav">
<button
v-for="(action, i) in navActions"
:key="action.mode"
:key="action"
class="g-button option"
:data-active="store.panelMode == action.mode"
@click="selectOrderMode(action.mode)"
:data-active="store.panelMode == action"
@click="selectOrderMode(action)"
>
{{ t(`navbar.${action.value}`) }}
{{ t(`navbar.${action}`) }}
</button>
</div>
@@ -34,42 +34,29 @@ import { useStore } from '../store/store';
import { useI18n } from 'vue-i18n';
import Order from '../components/Order/Order.vue';
import OrderMessage from '../components/OrderMessage.vue';
import OrderList from '../components/OrderList.vue';
import OrderTrainPicker from '../components/OrderTrainPicker.vue';
import OrderMessagePanel from '../components/Panels/OrderMessagePanel.vue';
import OrderListPanel from '../components/Panels/OrderListPanel.vue';
import OrderTrainPickerPanel from '../components/Panels/OrderTrainPickerPanel.vue';
import { TPanelMode } from '../types/dataTypes';
const { t } = useI18n();
const store = useStore();
const navActions = [
{
mode: 'OrderMessage',
value: 'order-message'
},
{
mode: 'OrderList',
value: 'order-list'
},
{
mode: 'OrderTrainPicker',
value: 'order-train-picker'
}
];
const navActions: TPanelMode[] = ['OrderListPanel', 'OrderMessagePanel', 'OrderTrainPickerPanel'];
function selectOrderMode(mode: string) {
function selectOrderMode(mode: TPanelMode) {
store.panelMode = mode;
}
const panelComponent = computed(() => {
switch (store.panelMode) {
case 'OrderMessage':
return OrderMessage;
case 'OrderList':
return OrderList;
case 'OrderTrainPicker':
return OrderTrainPicker;
case 'OrderListPanel':
return OrderListPanel;
case 'OrderTrainPickerPanel':
return OrderTrainPickerPanel;
case 'OrderMessagePanel':
default:
return OrderMessage;
return OrderMessagePanel;
}
});
</script>