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,68 +206,41 @@
 </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);
 
-    return {
+    const rowMethods = [
-      order: store.orderN,
+      () => {
-      message: store.orderMessage,
+        const { header } = order;
-    };
-  },
 
-  watch: {
+        const message = `<i>Rozkaz pisemny "N" nr ${header.orderNo || '_'} dla pociągu nr ${
-    order: {
+          header.trainNo || '_'
-      deep: true,
+        } dnia ${header.date} ${new Date().getUTCFullYear()}r.</i>`;
-      handler() {
-        this.generateMessage();
-      },
-    },
-  },
-
-  methods: {
-    generateMessage() {
-      let message = this.generateHeaderMessage();
-
-      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();
-
-      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 { row1 } = order;
 
-      const message = ` <b> [ 1 ] </b> Od ${row1.from || '_'} do ${row1.to || '_'} tor nr ${
+        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;
       },
 
-    generate2ndRowMessage() {
+      () => {
-      const { row2 } = this.order;
+        const { row2 } = order;
 
-      let message = ` <b> [ 2 ] </b> <b>ZEZWALAM</b> po otrzymaniu ${row2.option1 || '_'}`;
+        let message = `ZEZWALAM po otrzymaniu ${row2.option1 || '_'}`;
 
         if (row2.checkbox == 'checkbox-2a') {
           message += ` przejechać obok wskazującego sygnał "Stój" semafora ${row2.signalType || '_'} `;
@@ -283,26 +256,28 @@ export default defineComponent({
         }
 
         if (row2.checkbox == 'checkbox-2b') {
-        message += ` z toru nr ${row2.trackNoFrom || '_'} nie posiadającego semafora wyjazdowego wyjechać w kierunku ${
+          message += ` z toru nr ${
-          row2.trackNoTo2 || '_'
+            row2.trackNoFrom || '_'
-        } na tor szlakowy ${row2.option3 || '_'}`;
+          } nie posiadającego semafora wyjazdowego wyjechać w kierunku ${row2.trackNoTo2 || '_'} na tor szlakowy ${
+            row2.option3 || '_'
+          }`;
         }
 
         return message;
       },
 
-    generate3rdRowMessage() {
+      () => {
-      const { row3 } = this.order;
+        const { row3 } = 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}`;
+        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;
       },
 
-    generate4thRowMessage() {
+      () => {
-      const { row4 } = this.order;
+        const { row4 } = 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: `;
+        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`;
@@ -313,13 +288,51 @@ export default defineComponent({
         return message;
       },
 
-    generate5thRowMessage() {
+      () => {
-      const { row5 } = this.order;
+        const { row5 } = 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} `;
+        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,
+      rowMethods,
+    };
+  },
+
+  watch: {
+    order: {
+      deep: true,
+      handler() {
+        this.generateMessage();
+      },
+    },
+  },
+
+  mounted() {
+    this.generateMessage();
+  },
+
+  methods: {
+    generateMessage() {
+      let message = this.rowMethods[0]();
+
+      for (let i = 1; i <= 5; i++) {
+        if (!this.order[`row${i as OrderRowRange}`].enabled) continue;
+
+        message += ` <b> [ ${i} ] </b> ${this.rowMethods[i]()}`;
+      }
+
+      this.store.orderMessage = message;
+
+    },
+
+    generateFooter() {
+    }
   },
 });
 </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 {
+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">
+    <div class="home_container">
+      <div class="order_container">
         <OrderVue />
-
-    <div class="generated-message">
-      Wygenerowana wiadomość:
-      <div v-html="store.orderMessage"></div>
       </div>
-    <button @click="copyMessage">Kopiuj wiadomość rozkazu</button>
+
+      <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>
   </div>
 </template>
 
@@ -37,26 +46,57 @@ export default defineComponent({
   justify-content: center;
   align-items: center;
 
+  flex-wrap: wrap;
+
+  min-height: 100vh;
+
   overflow-x: auto;
-}
 
-.container {
+  .home_container {
     display: flex;
-  align-items: start;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    justify-content: center;
   }
 
-.generated-message {
+  .order_container {
-  position: sticky;
+    font-size: 0.9rem;
-  top: 0;
+    margin-right: 0.5em;
+  }
+}
 
-  padding: 1em 0.5em;
+.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;
+  justify-content: center;
+  margin-top: 1em;
+}
+
+.message_body {
+  min-height: 250px;
   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>
-