chore: added multiline support

src/components/OrderMessage.vue

@@ -2,7 +2,7 @@
   <section class="order-message">
     <h3>Wiadomość do wyświetlenia na czacie symulatora:</h3>
 
-    <div class="message_body" v-html="fullOrderMessage"></div>
+    <div class="message_body" v-html="orderMessagePreview"></div>
     <p class="message_info">
       Po wygenerowaniu rozkazu skopiuj jego treść lub zapisz w pamięci przeglądarki za pomocą
       przycisków poniżej
@@ -116,6 +116,11 @@ export default defineComponent({
   computed: {
     fullOrderMessage() {
       return this.store.orderMessage + this.store.footerMessage;
+    },
+
+    // Replace all new line tags with <br> for preview and get rid of the first one (visible only on simulator's chat)
+    orderMessagePreview() {
+      return this.fullOrderMessage.replace(/\n/g, '<br>').replace('<br>', '');
     }
   },
 

src/components/OrderN.vue

@@ -350,7 +350,7 @@ export default defineComponent({
       () => {
         const { header } = order;
 
-        const message = `<i>Rozkaz pisemny "N" nr ${header.orderNo || '_'} dla pociągu nr ${
+        const message = `\n<i><b>Rozkaz pisemny "N" nr ${header.orderNo || '_'}</b> dla pociągu nr ${
           header.trainNo || '_'
         } dnia ${header.date}</i>`;
 
@@ -508,7 +508,7 @@ export default defineComponent({
       for (let i = 0; i < this.order.rows.length; i++) {
         if (!this.order.rows[i].enabled) continue;
 
-        message += ` <b> [ ${i + 1} ] </b> ${this.rowMethods[i + 1]()}`;
+        message += `\n--------\n<b>[ ${i + 1} ]</b> ${this.rowMethods[i + 1]()}`;
       }
 
       this.store.orderMessage = message;

src/components/OrderO.vue

@@ -90,7 +90,7 @@ export default defineComponent({
       () => {
         const { header } = order;
 
-        return `<i>Rozkaz pisemny "O" nr ${header.orderNo || '_'} dla pociągu nr ${
+        return `\n<i><b>Rozkaz pisemny "O" nr ${header.orderNo || '_'}</b> dla pociągu nr ${
           header.trainNo || '_'
         } dnia ${header.date || '_'}</i>`;
       }
@@ -120,28 +120,24 @@ export default defineComponent({
     generateMessage() {
       let message = this.rowMethods[0]();
 
-      if (this.order.orderList.some((row) => row.name)) message += `<b> [ 1 ] </b>`;
+      if (this.order.orderList.some((row) => row.name)) message += `\n--------\n<b>[ 1 ]</b>`;
 
-      const rowsMessageList = [];
+      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;
 
-        let rowMessage = '';
+        message += `\n- ${row.name || '_'} od ${row.from || '_'} do ${row.to || '_'} kilometra`;
-        rowMessage += ` ${row.name || '_'} od ${row.from || '_'} do ${row.to || '_'} kilometra`;
 
-        if (row.vmax) rowMessage += ` prędkość najwyżej ${row.vmax} km/h`;
+        if (row.vmax) message += ` prędkość najwyżej ${row.vmax} km/h`;
-        if (row.jo) rowMessage += ` jechać ostrożnie`;
+        if (row.jo) message += ` jechać ostrożnie`;
 
-        rowMessage += ` z powodu: ${row.reason || '_'}`;
+        message += ` z powodu: ${row.reason || '_'}`;
-
-        rowsMessageList.push(rowMessage);
       }
 
-      message += rowsMessageList.join('; ');
+      if (this.order.other) message += `\n--------\n<b>[ 2 ]</b> Inne: ${this.order.other}`;
-
-      if (this.order.other) message += ` <b> [ 2 ] </b> Inne: ${this.order.other}`;
 
       this.store.orderMessage = message;
     }

src/components/OrderS.vue

@@ -300,7 +300,7 @@ export default defineComponent({
       () => {
         const { header } = order;
 
-        return `<i>Rozkaz pisemny "S" nr ${header.orderNo || '_'} dla ${header.for || '_'} nr ${
+        return `\n<i><b>Rozkaz pisemny "S" nr ${header.orderNo || '_'}</b> dla ${header.for || '_'} nr ${
           header.trainNo || '_'
         } dnia ${header.date || '_'}</i>`;
       },
@@ -429,7 +429,7 @@ export default defineComponent({
       for (let i = 0; i < 4; i++) {
         if (!this.order.rows[i].enabled) continue;
 
-        message += ` <b> [ ${i + 1} ] </b> ${this.rowMethods[i + 1]()}`;
+        message += `\n--------\n<b>[ ${i + 1} ]</b> ${this.rowMethods[i + 1]()}`;
       }
 
       this.store.orderMessage = message;

src/mixins/orderFooterMixin.ts

@@ -14,7 +14,7 @@ export default defineComponent({
 
       const messageArray = [];
 
-      if (footer.stationName) messageArray.push(`stacja: ${footer.stationName}`);
+      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}`);
@@ -22,9 +22,9 @@ export default defineComponent({
       if (footer.secondaryDispatcherName)
         messageArray.push(`z polecenia dyżurnego ruchu ${footer.secondaryDispatcherName}`);
 
-      this.store.footerMessage = ` <b>|</b> ${messageArray.join(
+      this.store.footerMessage = `\n--------\n${messageArray.join(
         ', '
-      )} <b>|</b> Rozkaz otrzymałem, maszynista: (potwierdzić otrzymanie rozkazu)`;
+      )}\n--------\nRozkaz otrzymałem, maszynista: <i>(potwierdzić otrzymanie rozkazu)</i>`;
     }
   }
 });