OrderN: wygląd i optymalizacja generowania tekstu

src/App.vue

@@ -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);

src/components/Order.vue

@@ -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>
 

src/components/OrderN.vue

@@ -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({
+type OrderRowRange = 1 | 2 | 3 | 4 | 5;
-  emits: ['generateMessage'],
 
+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();
+      for (let i = 1; i <= 5; i++) {
-      if (this.order.row2.enabled) message += this.generate2ndRowMessage();
+        if (!this.order[`row${i as OrderRowRange}`].enabled) continue;
-      if (this.order.row3.enabled) message += this.generate3rdRowMessage();
-      if (this.order.row4.enabled) message += this.generate4thRowMessage();
-      if (this.order.row5.enabled) message += this.generate5thRowMessage();
 
-      this.$emit('generateMessage', message);
+        message += ` <b> [ ${i} ] </b> ${this.rowMethods[i]()}`;
-      // 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 || '_'
-        }`;
       }
 
-      if (row2.checkbox == 'checkbox-2b') {
+      this.store.orderMessage = message;
-        message += ` z toru nr ${row2.trackNoFrom || '_'} nie posiadającego semafora wyjazdowego wyjechać w kierunku ${
-          row2.trackNoTo2 || '_'
-        } na tor szlakowy ${row2.option3 || '_'}`;
-      }
 
-      return message;
     },
 
-    generate3rdRowMessage() {
+    generateFooter() {
-      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;
-    },
   },
 });
 </script>

src/store/store.ts

@@ -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', {
   },
 });
 
+

src/styles/global.scss

@@ -1,9 +1,35 @@
-$bgCol: #012E40;
+$bgCol: #313638;
-$accentCol: #F28705;
+$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;
+  }
 }

src/views/Home.vue

@@ -1,12 +1,21 @@
 <template>
   <div class="home">
-    <OrderVue />
+    <div class="home_container">
+      <div class="order_container">
+        <OrderVue />
+      </div>
 
-    <div class="generated-message">
+      <div class="message_container">
-      Wygenerowana wiadomość:
+        <h3>Wiadomość do wyświetlenia na czacie symulatora:</h3>
-      <div v-html="store.orderMessage"></div>
+
+        <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 {
+.message_body {
-  position: sticky;
+  min-height: 250px;
-  top: 0;
-
-  padding: 1em 0.5em;
   text-align: justify;
-  margin-left: 1em;
-  width: 450px;
-  height: auto;
 
-  border: 1px solid white;
+  background-color: #fff;
-  // user-select: none;
+  border-radius: 0.5em;
+  color: black;
+  padding: 0.5em;
+  user-select: none;
+  -moz-user-select: none;
+  -webkit-user-select: none;
 }
 </style>
-