mirror of
https://github.com/Spythere/genera-tor.git
synced 2026-05-03 05:28:13 +00:00
OrderN: wygląd i optymalizacja generowania tekstu
This commit is contained in:
@@ -14,10 +14,6 @@
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
#app_wrapper {
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 500px) {
|
||||
#app {
|
||||
font-size: calc(1vw + 0.5rem);
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="rozkaz">
|
||||
<OrderNVue @generate-message="generateMessage" v-if="orderType == 'N'" />
|
||||
<OrderNVue v-if="orderType == 'N'" />
|
||||
<OrderSVue v-if="orderType == 'S'" />
|
||||
|
||||
<section class="info">
|
||||
@@ -74,12 +74,6 @@ export default defineComponent({
|
||||
info: store.orderInfo,
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
generateMessage(orderBody: string) {
|
||||
this.store.orderMessage = orderBody;
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
+98
-85
@@ -206,18 +206,101 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import { defineComponent, reactive } from 'vue';
|
||||
import { useStore } from '../store/store';
|
||||
|
||||
export default defineComponent({
|
||||
emits: ['generateMessage'],
|
||||
type OrderRowRange = 1 | 2 | 3 | 4 | 5;
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const store = useStore();
|
||||
const order = reactive(store.orderN);
|
||||
|
||||
const rowMethods = [
|
||||
() => {
|
||||
const { header } = order;
|
||||
|
||||
const message = `<i>Rozkaz pisemny "N" nr ${header.orderNo || '_'} dla pociągu nr ${
|
||||
header.trainNo || '_'
|
||||
} dnia ${header.date} ${new Date().getUTCFullYear()}r.</i>`;
|
||||
|
||||
return message;
|
||||
},
|
||||
|
||||
() => {
|
||||
const { row1 } = order;
|
||||
|
||||
const message = `Od ${row1.from || '_'} do ${row1.to || '_'} tor nr ${
|
||||
row1.trackNo || '_'
|
||||
} jest zamknięty, ruch jednotorowy dwukierunkowy wprowadzono po torze nr ${row1.trackNo2 || '_'}`;
|
||||
|
||||
return message;
|
||||
},
|
||||
|
||||
() => {
|
||||
const { row2 } = order;
|
||||
|
||||
let message = `ZEZWALAM po otrzymaniu ${row2.option1 || '_'}`;
|
||||
|
||||
if (row2.checkbox == 'checkbox-2a') {
|
||||
message += ` przejechać obok wskazującego sygnał "Stój" semafora ${row2.signalType || '_'} `;
|
||||
|
||||
if (row2.signalType == 'wyjazdowego') message += row2.signal1;
|
||||
if (row2.signalType == 'drogowskazowego')
|
||||
message += `${row2.signal2 || '_'} (odnoszącego się do wyjazdu pociągu)`;
|
||||
if (row2.signalType == 'wjazdowego') message += `${row2.signal3 || '_'} na post. odg. bez sem. wyjazdowego`;
|
||||
|
||||
message += ` i wyjechać w kierunku ${row2.direction || '_'} na tor szlakowy ${row2.option2 || '_'} nr ${
|
||||
row2.trackNoTo1 || '_'
|
||||
}`;
|
||||
}
|
||||
|
||||
if (row2.checkbox == 'checkbox-2b') {
|
||||
message += ` z toru nr ${
|
||||
row2.trackNoFrom || '_'
|
||||
} nie posiadającego semafora wyjazdowego wyjechać w kierunku ${row2.trackNoTo2 || '_'} na tor szlakowy ${
|
||||
row2.option3 || '_'
|
||||
}`;
|
||||
}
|
||||
|
||||
return message;
|
||||
},
|
||||
|
||||
() => {
|
||||
const { row3 } = order;
|
||||
|
||||
let message = `${row3.option1} pociągu odbędzie się w kierunku: ${row3.direction} do km ${row3.toKilometer} skąd ${row3.option2} ma wrócić po torze lewym nr ${row3.trackNo} najpóźniej o godz. ${row3.untilHour} min. ${row3.untilMin}`;
|
||||
|
||||
return message;
|
||||
},
|
||||
|
||||
() => {
|
||||
const { row4 } = order;
|
||||
|
||||
let message = `WJAZD z toru szlakowego nr ${row4.trackNo} na ${row4.optionStation} ${row4.stationName} odbędzie się po otrzymaniu: `;
|
||||
|
||||
if (row4.checkbox == 'checkbox-4a')
|
||||
message += `sygnału zastępczego "Sz" na osobnym urządzeniu ustawionym z ${row4.side} strony toru`;
|
||||
|
||||
if (row4.checkbox == 'checkbox-4b')
|
||||
message += 'rozkazu pisemnego "N" (doręczonego lub przekazanego przez urządzenia łączności)';
|
||||
|
||||
return message;
|
||||
},
|
||||
|
||||
() => {
|
||||
const { row5 } = order;
|
||||
|
||||
const message = `ZEZWALAM wjechać z toru szlakowego nr ${row5.trackNo} z kierunku ${row5.direction} na ${row5.stationType} ${row5.stationName} i przejechać obok sygnału "Stój" na ${row5.on} `;
|
||||
|
||||
return message;
|
||||
},
|
||||
];
|
||||
|
||||
return {
|
||||
store,
|
||||
order: store.orderN,
|
||||
message: store.orderMessage,
|
||||
rowMethods,
|
||||
};
|
||||
},
|
||||
|
||||
@@ -230,96 +313,26 @@ export default defineComponent({
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.generateMessage();
|
||||
},
|
||||
|
||||
methods: {
|
||||
generateMessage() {
|
||||
let message = this.generateHeaderMessage();
|
||||
let message = this.rowMethods[0]();
|
||||
|
||||
if (this.order.row1.enabled) message += this.generate1stRowMessage();
|
||||
if (this.order.row2.enabled) message += this.generate2ndRowMessage();
|
||||
if (this.order.row3.enabled) message += this.generate3rdRowMessage();
|
||||
if (this.order.row4.enabled) message += this.generate4thRowMessage();
|
||||
if (this.order.row5.enabled) message += this.generate5thRowMessage();
|
||||
for (let i = 1; i <= 5; i++) {
|
||||
if (!this.order[`row${i as OrderRowRange}`].enabled) continue;
|
||||
|
||||
this.$emit('generateMessage', message);
|
||||
// const row1Message = `Od ${header.} do tor nr jest zamknięty, ruch jednotorowy dwukierunkowy wprowadzono po torze nr `
|
||||
},
|
||||
|
||||
generateHeaderMessage() {
|
||||
const { header } = this.order;
|
||||
|
||||
const message = `<i>Rozkaz pisemny "N" nr ${header.orderNo || '_'} dla pociągu nr ${header.trainNo || '_'} dnia ${
|
||||
header.date
|
||||
} ${new Date().getUTCFullYear()}r.</i>`;
|
||||
|
||||
return message;
|
||||
},
|
||||
|
||||
generate1stRowMessage() {
|
||||
const { row1 } = this.order;
|
||||
|
||||
const message = ` <b> [ 1 ] </b> Od ${row1.from || '_'} do ${row1.to || '_'} tor nr ${
|
||||
row1.trackNo || '_'
|
||||
} jest zamknięty, ruch jednotorowy dwukierunkowy wprowadzono po torze nr ${row1.trackNo2 || '_'}`;
|
||||
|
||||
return message;
|
||||
},
|
||||
|
||||
generate2ndRowMessage() {
|
||||
const { row2 } = this.order;
|
||||
|
||||
let message = ` <b> [ 2 ] </b> <b>ZEZWALAM</b> po otrzymaniu ${row2.option1 || '_'}`;
|
||||
|
||||
if (row2.checkbox == 'checkbox-2a') {
|
||||
message += ` przejechać obok wskazującego sygnał "Stój" semafora ${row2.signalType || '_'} `;
|
||||
|
||||
if (row2.signalType == 'wyjazdowego') message += row2.signal1;
|
||||
if (row2.signalType == 'drogowskazowego')
|
||||
message += `${row2.signal2 || '_'} (odnoszącego się do wyjazdu pociągu)`;
|
||||
if (row2.signalType == 'wjazdowego') message += `${row2.signal3 || '_'} na post. odg. bez sem. wyjazdowego`;
|
||||
|
||||
message += ` i wyjechać w kierunku ${row2.direction || '_'} na tor szlakowy ${row2.option2 || '_'} nr ${
|
||||
row2.trackNoTo1 || '_'
|
||||
}`;
|
||||
message += ` <b> [ ${i} ] </b> ${this.rowMethods[i]()}`;
|
||||
}
|
||||
|
||||
if (row2.checkbox == 'checkbox-2b') {
|
||||
message += ` z toru nr ${row2.trackNoFrom || '_'} nie posiadającego semafora wyjazdowego wyjechać w kierunku ${
|
||||
row2.trackNoTo2 || '_'
|
||||
} na tor szlakowy ${row2.option3 || '_'}`;
|
||||
}
|
||||
this.store.orderMessage = message;
|
||||
|
||||
return message;
|
||||
},
|
||||
|
||||
generate3rdRowMessage() {
|
||||
const { row3 } = this.order;
|
||||
|
||||
let message = ` <b> [ 3 ] </b> ${row3.option1} pociągu odbędzie się w kierunku: ${row3.direction} do km ${row3.toKilometer} skąd ${row3.option2} ma wrócić po torze lewym nr ${row3.trackNo} najpóźniej o godz. ${row3.untilHour} min. ${row3.untilMin}`;
|
||||
|
||||
return message;
|
||||
},
|
||||
|
||||
generate4thRowMessage() {
|
||||
const { row4 } = this.order;
|
||||
|
||||
let message = ` <b> [ 4 ] </b> <b>WJAZD</b> z toru szlakowego nr ${row4.trackNo} na ${row4.optionStation} ${row4.stationName} odbędzie się po otrzymaniu: `;
|
||||
|
||||
if (row4.checkbox == 'checkbox-4a')
|
||||
message += `sygnału zastępczego "Sz" na osobnym urządzeniu ustawionym z ${row4.side} strony toru`;
|
||||
|
||||
if (row4.checkbox == 'checkbox-4b')
|
||||
message += 'rozkazu pisemnego "N" (doręczonego lub przekazanego przez urządzenia łączności)';
|
||||
|
||||
return message;
|
||||
},
|
||||
|
||||
generate5thRowMessage() {
|
||||
const { row5 } = this.order;
|
||||
|
||||
const message = ` <b> [ 5 ] </b> <b>ZEZWALAM</b> wjechać z toru szlakowego nr ${row5.trackNo} z kierunku ${row5.direction} na ${row5.stationType} ${row5.stationName} i przejechać obok sygnału "Stój" na ${row5.on} `;
|
||||
|
||||
return message;
|
||||
},
|
||||
generateFooter() {
|
||||
}
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
+3
-2
@@ -16,9 +16,9 @@ export const useStore = defineStore('store', {
|
||||
|
||||
orderN: {
|
||||
header: {
|
||||
orderNo: '',
|
||||
orderNo: '1',
|
||||
trainNo: '',
|
||||
date: '',
|
||||
date: new Date().toLocaleDateString('pl-PL', { day: '2-digit', month: 'long' }),
|
||||
},
|
||||
|
||||
row1: {
|
||||
@@ -115,3 +115,4 @@ export const useStore = defineStore('store', {
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
|
||||
+34
-8
@@ -1,9 +1,35 @@
|
||||
$bgCol: #012E40;
|
||||
$accentCol: #F28705;
|
||||
$bgCol: #313638;
|
||||
$accentCol: #0defff;
|
||||
|
||||
body, html {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
|
||||
}
|
||||
body,
|
||||
html {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
button.g-button {
|
||||
outline: 2px solid white;
|
||||
border: none;
|
||||
background: none;
|
||||
color: white;
|
||||
|
||||
text-align: center;
|
||||
|
||||
padding: 0.5em;
|
||||
|
||||
font-size: 1em;
|
||||
|
||||
cursor: pointer;
|
||||
transition: all 150ms ease-in;
|
||||
font-weight: bold;
|
||||
|
||||
&:hover {
|
||||
color: $accentCol;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px solid $accentCol;
|
||||
color: $accentCol;
|
||||
}
|
||||
}
|
||||
|
||||
+58
-18
@@ -1,12 +1,21 @@
|
||||
<template>
|
||||
<div class="home">
|
||||
<OrderVue />
|
||||
<div class="home_container">
|
||||
<div class="order_container">
|
||||
<OrderVue />
|
||||
</div>
|
||||
|
||||
<div class="generated-message">
|
||||
Wygenerowana wiadomość:
|
||||
<div v-html="store.orderMessage"></div>
|
||||
<div class="message_container">
|
||||
<h3>Wiadomość do wyświetlenia na czacie symulatora:</h3>
|
||||
|
||||
<div class="message_body" v-html="store.orderMessage"></div>
|
||||
|
||||
<div class="message_actions">
|
||||
<button class="g-button" @click="copyMessage">Zapisz ten rozkaz</button>
|
||||
<button class="g-button" @click="copyMessage">Kopiuj wiadomość rozkazu</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button @click="copyMessage">Kopiuj wiadomość rozkazu</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -37,26 +46,57 @@ export default defineComponent({
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
flex-wrap: wrap;
|
||||
|
||||
min-height: 100vh;
|
||||
|
||||
overflow-x: auto;
|
||||
|
||||
.home_container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.order_container {
|
||||
font-size: 0.9rem;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
.message_container {
|
||||
padding: 0 1em;
|
||||
width: 500px;
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
margin-bottom: 1em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
button {
|
||||
margin: 0 0.5em;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
}
|
||||
|
||||
.message_actions {
|
||||
display: flex;
|
||||
align-items: start;
|
||||
justify-content: center;
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.generated-message {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
|
||||
padding: 1em 0.5em;
|
||||
.message_body {
|
||||
min-height: 250px;
|
||||
text-align: justify;
|
||||
margin-left: 1em;
|
||||
width: 450px;
|
||||
height: auto;
|
||||
|
||||
border: 1px solid white;
|
||||
// user-select: none;
|
||||
background-color: #fff;
|
||||
border-radius: 0.5em;
|
||||
color: black;
|
||||
padding: 0.5em;
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user