Poprawiono działanie placeholderów dla rozkazów N i S

.firebase/hosting.ZGlzdA.cache

@@ -25,7 +25,7 @@ ms-icon-144x144.png,1658609937000,aede59be6881a13db2df2635cc1e7b258a39f5ab107713
 ms-icon-150x150.png,1658609937021,e2c169c428949765d1e695b05a48f4b982ae2fa3068e426ed41447eba0e19234
 ms-icon-310x310.png,1658609937042,9680db857d251ecdb422aa8c1cc186ffe67e74c2b6655067e7d7fc2e324476c3
 ms-icon-70x70.png,1658609936980,e61ef4f24726f3f017de2ece28c2701413764d02310881d0d99642d18582a14a
-index.html,1666616986687,d56712a3ae1b21063a53c53732d47257ae92c62a670c6cf3e366d7bb4fc26574
+index.html,1666810286156,89deda4447e48e5633c80ff58647b5285dea60771814bad3a10251640795f62c
-assets/icon-save.5a12487e.svg,1666616986687,5c75b0d4e35cdaf019c7292f7fd98c2e60466ae6f8b30d49b96cf2380c08299c
+assets/icon-save.5a12487e.svg,1666810286155,5c75b0d4e35cdaf019c7292f7fd98c2e60466ae6f8b30d49b96cf2380c08299c
-assets/index.fb05c726.css,1666616986687,f030c87b6540ca5a65e06a802889fab0cfa07a1a0650f453110806104d32f7d2
+assets/index.f04e20fa.css,1666810286162,f6b429354ceb854e2194d03ab61a9849d1d7c18093e455a181d4ea266aef79d3
-assets/index.28881d1a.js,1666616986687,6a819fe792ae2df4904fa2e9d95909a2d6c0cfcf44974fd4f71041e002fe6f45
+assets/index.94c91b26.js,1666810286156,f02ea5c814ca05573d7951ec52ffa2bb97c4c134aa6963ac01178ecb34116606

src/components/OrderFooter.vue

@@ -4,25 +4,25 @@
       <tbody>
         <tr>
           <td colspan="4">
-            <input type="text" v-model="footerInfo.stationName" holder="nazwa stacji" />
+            <input type="text" v-model="footerInfo.stationName" placeholder="nazwa stacji" />
             <br />
             stacja
           </td>
 
           <td colspan="3">
-            <input type="text" v-model="footerInfo.checkpointName" holder="skrót posterunku" />
+            <input type="text" v-model="footerInfo.checkpointName" placeholder="skrót posterunku" />
             <br />
             posterunek
           </td>
 
           <td colspan="2">
-            <input type="text" v-model="footerInfo.hour" holder="godzina" />
+            <input type="text" v-model="footerInfo.hour" placeholder="godzina" />
             <br />
             godz.
           </td>
 
           <td colspan="1">
-            <input type="text" v-model="footerInfo.minutes" holder="minuta" />
+            <input type="text" v-model="footerInfo.minutes" placeholder="minuta" />
             <br />
             min.
           </td>
@@ -30,13 +30,13 @@
 
         <tr>
           <td colspan="5">
-            <input type="text" v-model="footerInfo.dispatcherName" holder="nick dyżurnego" />
+            <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" holder="nick osoby uprawnionej*" />
+            <input type="text" v-model="footerInfo.secondaryDispatcherName" placeholder="dyżurny (wypełnić jedno)" />
             <br />
             z polecenia dyżurnego ruchu
           </td>

src/components/OrderN.vue

@@ -17,37 +17,27 @@
             <td>
               <label for="row-enabled-1">1</label>
               <div>
-                <input
+                <input type="checkbox" id="row-enabled-1" v-model="order.rows[0].enabled" />
-                  type="checkbox"
-                  id="row-enabled-1"
-                  v-model="order.row1.enabled"
-                  @change="handleRowCheckboxChange(1)"
-                />
               </div>
             </td>
             <td ref="row-1">
-              Od <input type="text" v-model="order.row1.from" holder="nazwa stacji" /> do
+              Od <input type="text" v-model="order.rows[0].from" holder="stacja / post." /> do
-              <input type="text" v-model="order.row1.to" holder="nazwa stacji" /> tor nr
+              <input type="text" v-model="order.rows[0].to" holder="stacja / post." /> tor nr
-              <input type="text" v-model="order.row1.trackNo" holder="nr toru" /> jest zamknięty, ruch jednotorowy
+              <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.row1.trackNo2" holder="nr toru" />
+              <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
+                <input type="checkbox" id="row-enabled-2" v-model="order.rows[1].enabled" />
-                  type="checkbox"
-                  id="row-enabled-2"
-                  v-model="order.row2.enabled"
-                  @change="handleRowCheckboxChange(2)"
-                />
               </div>
             </td>
             <td ref="row-2">
               <strong>ZEZWALAM</strong> po otrzymaniu
-              <select id="select-2a" v-model="order.row2.option1">
+              <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>
@@ -57,8 +47,8 @@
                   name="section-2"
                   id="checkbox-2a"
                   value="checkbox-2a"
-                  v-model="order.row2.checkbox"
+                  v-model="order.rows[1].checkbox"
-                  :checked="order.row2.checkbox == 'checkbox-2a'"
+                  :checked="order.rows[1].checkbox == 'checkbox-2a'"
                   @change="handleRowCheckboxChange(2)"
                 />
                 <label for="checkbox-2a">
@@ -69,16 +59,18 @@
                       name="section-2a"
                       id="radio-2a-1"
                       value="wyjazdowego"
-                      v-model="order.row2.signalType"
+                      v-model="order.rows[1].signalType"
                       @change="handleRowCheckboxChange(2)"
                     />
                     <label for="radio-2a-1">
                       wyjazdowego
                       <input
                         type="text"
-                        v-model="order.row2.signal1"
+                        v-model="order.rows[1].signal1"
                         holder="nazwa sem."
-                        :radio-checked="order.row2.checkbox == 'checkbox-2a' && order.row2.signalType == 'wyjazdowego'"
+                        :radio-checked="
+                          order.rows[1].checkbox == 'checkbox-2a' && order.rows[1].signalType == 'wyjazdowego'
+                        "
                       />
                     </label>
                     <br />
@@ -87,17 +79,17 @@
                       name="section-2a"
                       id="radio-2a-2"
                       value="drogowskazowego"
-                      v-model="order.row2.signalType"
+                      v-model="order.rows[1].signalType"
                       @change="handleRowCheckboxChange(2)"
                     />
                     <label for="radio-2a-2">
                       drogowskazowego
                       <input
                         type="text"
-                        v-model="order.row2.signal2"
+                        v-model="order.rows[1].signal2"
                         holder="nazwa sem."
                         :radio-checked="
-                          order.row2.checkbox == 'checkbox-2a' && order.row2.signalType == 'drogowskazowego'
+                          order.rows[1].checkbox == 'checkbox-2a' && order.rows[1].signalType == 'drogowskazowego'
                         "
                       />
                       (odnoszącego się do wyjazdu pociągu)
@@ -108,16 +100,18 @@
                       name="section-2a"
                       id="radio-2a-3"
                       value="wjazdowego"
-                      v-model="order.row2.signalType"
+                      v-model="order.rows[1].signalType"
                       @change="handleRowCheckboxChange(2)"
                     />
                     <label for="radio-2a-3">
                       wjazdowego
                       <input
                         type="text"
-                        v-model="order.row2.signal3"
+                        v-model="order.rows[1].signal3"
                         holder="nazwa sem."
-                        :radio-checked="order.row2.checkbox == 'checkbox-2a' && order.row2.signalType == 'wjazdowego'"
+                        :radio-checked="
+                          order.rows[1].checkbox == 'checkbox-2a' && order.rows[1].signalType == 'wjazdowego'
+                        "
                       />
                       na post. odg. bez sem. wyjazdowego
                     </label>
@@ -125,21 +119,21 @@
                   i wyjechać w kierunku
                   <input
                     type="text"
-                    v-model="order.row2.direction1"
+                    v-model="order.rows[1].direction1"
-                    holder="nazwa stacji"
+                    holder="stacja / post."
-                    :radio-checked="order.row2.checkbox == 'checkbox-2a'"
+                    :radio-checked="order.rows[1].checkbox == 'checkbox-2a'"
                   />
                   na tor szlakowy
-                  <select v-model="order.row2.option2">
+                  <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.row2.trackNoTo1"
+                    v-model="order.rows[1].trackNoTo1"
                     holder="nr toru"
-                    :radio-checked="order.row2.checkbox == 'checkbox-2a'"
+                    :radio-checked="order.rows[1].checkbox == 'checkbox-2a'"
                   />
                 </label>
               </div>
@@ -149,36 +143,36 @@
                   name="section-2"
                   id="checkbox-2b"
                   value="checkbox-2b"
-                  v-model="order.row2.checkbox"
+                  v-model="order.rows[1].checkbox"
-                  :checked="order.row2.checkbox == 'checkbox-2b'"
+                  :checked="order.rows[1].checkbox == 'checkbox-2b'"
                   @change="handleRowCheckboxChange(2)"
                 />
                 <label for="checkbox-2b">
                   z toru nr
                   <input
                     type="text"
-                    v-model="order.row2.trackNoFrom"
+                    v-model="order.rows[1].trackNoFrom"
                     holder="nr toru"
-                    :radio-checked="order.row2.checkbox == 'checkbox-2b'"
+                    :radio-checked="order.rows[1].checkbox == 'checkbox-2b'"
                   />
                   nie posiadającego semafora wyjazdowego wyjechać w kierunku
                   <input
                     type="text"
-                    v-model="order.row2.direction2"
+                    v-model="order.rows[1].direction2"
-                    holder="nazwa stacji"
+                    holder="stacja / post."
-                    :radio-checked="order.row2.checkbox == 'checkbox-2b'"
+                    :radio-checked="order.rows[1].checkbox == 'checkbox-2b'"
                   />
                   na tor szlakowy
-                  <select v-model="order.row2.option3">
+                  <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.row2.trackNoTo2"
+                    v-model="order.rows[1].trackNoTo2"
                     holder="nr toru"
-                    :radio-checked="order.row2.checkbox == 'checkbox-2b'"
+                    :radio-checked="order.rows[1].checkbox == 'checkbox-2b'"
                   />
                 </label>
               </div>
@@ -188,63 +182,54 @@
             <td>
               <label for="row-enabled-3">3</label>
               <div>
-                <input
+                <input type="checkbox" id="row-enabled-3" v-model="order.rows[2].enabled" />
-                  type="checkbox"
-                  id="row-enabled-3"
-                  v-model="order.row3.enabled"
-                  @change="handleRowCheckboxChange(3)"
-                />
               </div>
             </td>
             <td ref="row-3">
-              <select v-model="order.row3.option1">
+              <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.row3.direction" holder="nazwa stacji" /> do km
+              <input type="text" v-model="order.rows[2].direction" holder="stacja / post." /> do km
-              <input type="text" v-model="order.row3.toKilometer" holder="kilometry" /> skąd
+              <input type="text" v-model="order.rows[2].toKilometer" holder="kilometry" /> skąd
-              <select v-model="order.row3.option2">
+              <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.row3.trackNo" holder="nr toru" /> najpóźniej o godz.
+              <input type="text" v-model="order.rows[2].trackNo" holder="nr toru" /> najpóźniej o godz.
-              <input type="text" v-model="order.row3.untilHour" holder="godzina" /> min.
+              <input type="text" v-model="order.rows[2].untilHour" holder="godzina" /> min.
-              <input type="text" v-model="order.row3.untilMin" holder="minuta" />
+              <input type="text" v-model="order.rows[2].untilMin" holder="minuta" />
             </td>
           </tr>
           <tr>
             <td>
               <label for="row-enabled-4">4</label>
               <div>
-                <input
+                <input type="checkbox" id="row-enabled-4" v-model="order.rows[3].enabled" />
-                  type="checkbox"
-                  id="row-enabled-4"
-                  v-model="order.row4.enabled"
-                  @change="handleRowCheckboxChange(4)"
-                />
               </div>
             </td>
             <td ref="row-4">
               <strong>WJAZD</strong> z toru szlakowego nr
-              <input type="text" v-model="order.row4.trackNo" holder="nr toru" /> na
+              <input type="text" v-model="order.rows[3].trackNo" holder="nr toru" /> na
-              <select v-model="order.row4.optionStation">
+              <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.row4.stationName" holder="nazwa stacji" /> odbędzie się po otrzymaniu:
+              <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.row4.checkbox"
+                  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.row4.side">
+                  <select v-model="order.rows[3].side">
                     <option value="lewej">lewej</option>
                     <option value="prawej">prawej</option>
                   </select>
@@ -257,7 +242,7 @@
                   name="section-4"
                   id="checkbox-4b"
                   value="checkbox-4b"
-                  v-model="order.row4.checkbox"
+                  v-model="order.rows[3].checkbox"
                 />
                 <label for="checkbox-4b">
                   rozkazu pisemnego "N" (doręczonego lub przekazanego przez urządzenia łączności)
@@ -269,25 +254,20 @@
             <td>
               <label for="row-enabled-5">5</label>
               <div>
-                <input
+                <input type="checkbox" id="row-enabled-5" v-model="order.rows[4].enabled" />
-                  type="checkbox"
-                  id="row-enabled-5"
-                  v-model="order.row5.enabled"
-                  @change="handleRowCheckboxChange(5)"
-                />
               </div>
             </td>
             <td ref="row-5">
               <strong>ZEZWALAM</strong> wjechać z toru szlakowego nr
-              <input type="text" v-model="order.row5.trackNo" holder="nr toru" /> z kierunku
+              <input type="text" v-model="order.rows[4].trackNo" holder="nr toru" /> z kierunku
-              <input type="text" v-model="order.row5.direction" holder="nazwa stacji" /> na
+              <input type="text" v-model="order.rows[4].direction" holder="stacja / post." /> na
-              <select v-model="order.row5.stationType">
+              <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.row5.stationName" holder="nazwa stacji" />
+              <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.row5.on" holder="nazwa sygnału" />
+              <input type="text" v-model="order.rows[4].on" holder="nazwa sygnału" />
             </td>
           </tr>
         </tbody>
@@ -299,8 +279,9 @@
 <script lang="ts">
 import { defineComponent, reactive } from 'vue';
 import { useStore } from '../store/store';
+import { handleOrderPlaceholders } from '../handlers/orderPlaceholderHandler';
 
-type OrderRowRange = 1 | 2 | 3 | 4 | 5;
+type TOrderRows = 1 | 2 | 3 | 4 | 5;
 
 export default defineComponent({
   name: 'OrderN',
@@ -321,80 +302,76 @@ export default defineComponent({
       },
 
       () => {
-        const { row1 } = order;
+        const row = order.rows[0];
 
-        const message = `Od ${row1.from || '_'} do ${row1.to || '_'} tor nr ${
+        const message = `Od ${row.from || '_'} do ${row.to || '_'} tor nr ${
-          row1.trackNo || '_'
+          row.trackNo || '_'
-        } jest zamknięty, ruch jednotorowy dwukierunkowy wprowadzono po torze nr ${row1.trackNo2 || '_'}`;
+        } jest zamknięty, ruch jednotorowy dwukierunkowy wprowadzono po torze nr ${row.trackNo2 || '_'}`;
 
         return message;
       },
 
       () => {
-        const { row2 } = order;
+        const row = order.rows[1];
 
-        let message = `ZEZWALAM po otrzymaniu ${row2.option1 || '_'}`;
+        let message = `ZEZWALAM po otrzymaniu ${row.option1 || '_'}`;
 
-        if (row2.checkbox == 'checkbox-2a') {
+        if (row.checkbox == 'checkbox-2a') {
-          message += ` przejechać obok wskazującego sygnał "Stój" semafora ${row2.signalType || '_'} `;
+          message += ` przejechać obok wskazującego sygnał "Stój" semafora ${row.signalType || '_'} `;
 
-          if (row2.signalType == 'wyjazdowego') message += row2.signal1 || '_';
+          if (row.signalType == 'wyjazdowego') message += row.signal1 || '_';
-          if (row2.signalType == 'drogowskazowego')
+          if (row.signalType == 'drogowskazowego')
-            message += `${row2.signal2 || '_'} (odnoszącego się do wyjazdu pociągu)`;
+            message += `${row.signal2 || '_'} (odnoszącego się do wyjazdu pociągu)`;
-          if (row2.signalType == 'wjazdowego') message += `${row2.signal3 || '_'} na post. odg. bez sem. wyjazdowego`;
+          if (row.signalType == 'wjazdowego') message += `${row.signal3 || '_'} na post. odg. bez sem. wyjazdowego`;
 
-          message += ` i wyjechać w kierunku ${row2.direction1 || '_'} na tor szlakowy ${row2.option2 || '_'} nr ${
+          message += ` i wyjechać w kierunku ${row.direction1 || '_'} na tor szlakowy ${row.option2 || '_'} nr ${
-            row2.trackNoTo1 || '_'
+            row.trackNoTo1 || '_'
           }`;
         }
 
-        if (row2.checkbox == 'checkbox-2b') {
+        if (row.checkbox == 'checkbox-2b') {
-          message += ` z toru nr ${
+          message += ` z toru nr ${row.trackNoFrom || '_'} nie posiadającego semafora wyjazdowego wyjechać w kierunku ${
-            row2.trackNoFrom || '_'
+            row.direction2 || '_'
-          } nie posiadającego semafora wyjazdowego wyjechać w kierunku ${row2.direction2 || '_'} na tor szlakowy ${
+          } na tor szlakowy ${row.option3 || '_'} nr ${row.trackNoTo2 || '_'}`;
-            row2.option3 || '_'
-          } nr ${row2.trackNoTo2 || '_'}`;
         }
 
         return message;
       },
 
       () => {
-        const { row3 } = order;
+        const row = order.rows[2];
 
-        let message = `${row3.option1 || '_'} pociągu odbędzie się w kierunku: ${row3.direction || '_'} do km ${
+        let message = `${row.option1 || '_'} pociągu odbędzie się w kierunku: ${row.direction || '_'} do km ${
-          row3.toKilometer || '_'
+          row.toKilometer || '_'
-        } skąd ${row3.option2 || '_'} ma wrócić po torze lewym nr ${row3.trackNo || '_'} najpóźniej o godz. ${
+        } skąd ${row.option2 || '_'} ma wrócić po torze lewym nr ${row.trackNo || '_'} najpóźniej o godz. ${
-          row3.untilHour || '_'
+          row.untilHour || '_'
-        } min. ${row3.untilMin || '_'}`;
+        } min. ${row.untilMin || '_'}`;
 
         return message;
       },
 
       () => {
-        const { row4 } = order;
+        const row = order.rows[3];
 
-        let message = `WJAZD z toru szlakowego nr ${row4.trackNo || '_'} na ${row4.optionStation || '_'} ${
+        let message = `WJAZD z toru szlakowego nr ${row.trackNo || '_'} na ${row.optionStation || '_'} ${
-          row4.stationName || '_'
+          row.stationName || '_'
         } odbędzie się po otrzymaniu: `;
 
-        if (row4.checkbox == 'checkbox-4a')
+        if (row.checkbox == 'checkbox-4a')
-          message += `sygnału zastępczego "Sz" na osobnym urządzeniu ustawionym z ${row4.side || '_'} strony toru`;
+          message += `sygnału zastępczego "Sz" na osobnym urządzeniu ustawionym z ${row.side || '_'} strony toru`;
 
-        if (row4.checkbox == 'checkbox-4b')
+        if (row.checkbox == 'checkbox-4b')
           message += 'rozkazu pisemnego "N" (doręczonego lub przekazanego przez urządzenia łączności)';
 
         return message;
       },
 
       () => {
-        const { row5 } = order;
+        const row = order.rows[4];
 
-        const message = `ZEZWALAM wjechać z toru szlakowego nr ${row5.trackNo || '_'} z kierunku ${
+        const message = `ZEZWALAM wjechać z toru szlakowego nr ${row.trackNo || '_'} z kierunku ${
-          row5.direction || '_'
+          row.direction || '_'
-        } na ${row5.stationType || '_'} ${row5.stationName || '_'} i przejechać obok sygnału "Stój" na ${
+        } na ${row.stationType || '_'} ${row.stationName || '_'} i przejechać obok sygnału "Stój" na ${row.on || '_'} `;
-          row5.on || '_'
-        } `;
 
         return message;
       },
@@ -414,6 +391,16 @@ export default defineComponent({
         this.generateMessage();
       },
     },
+    'order.rows': {
+      deep: true,
+      handler() {
+        this.updatePlaceholders();
+      },
+    },
+  },
+
+  mounted() {
+    this.updatePlaceholders();
   },
 
   activated() {
@@ -421,33 +408,28 @@ export default defineComponent({
   },
 
   methods: {
-    handleRowCheckboxChange(rowIndex: 1 | 2 | 3 | 4 | 5) {
+    updatePlaceholders() {
-      const isRowEnabled = this.order[`row${rowIndex}`].enabled;
+      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;
 
-      if (!isRowEnabled) {
+      this.$nextTick(() => {
-        rowRef.querySelectorAll('input[type="text"]').forEach((node) => {
+        handleOrderPlaceholders(isRowEnabled, rowRef);
-          if (node.getAttribute('placeholder') != null) {
-            node.setAttribute('holder', node.getAttribute('placeholder')!);
-            node.removeAttribute('placeholder');
-          }
-        });
-
-        return;
-      }
-
-      rowRef.querySelectorAll('input[type="text"]').forEach((node) => {
-        if (node.getAttribute('holder')) node.setAttribute('placeholder', node.getAttribute('holder')!);
       });
     },
 
     generateMessage() {
       let message = this.rowMethods[0]();
 
-      for (let i = 1; i <= 5; i++) {
+      for (let i = 0; i < 5; i++) {
-        if (!this.order[`row${i as OrderRowRange}`].enabled) continue;
+        if (!this.order.rows[i].enabled) continue;
 
-        message += ` <b> [ ${i} ] </b> ${this.rowMethods[i]()}`;
+        message += ` <b> [ ${i + 1} ] </b> ${this.rowMethods[i + 1]()}`;
       }
 
       this.store.orderMessage = message;

src/components/OrderS.vue

@@ -25,33 +25,58 @@
                 <input
                   type="checkbox"
                   id="row-enabled-1"
-                  v-model="order.row1.enabled"
+                  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.row1.option1">
+              <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.row1.radio1" />
+                <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.row1.optionSignal">
+                  <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.row1.signal1" holder="nazwa sem." />
+                  <input
+                    type="text"
+                    v-model="order.rows[0].signal1"
+                    holder="nazwa sem."
+                    :radio-checked="order.rows[0].radio1 == 'radio-1a-1'"
+                  />
                   <br />
                 </label>
                 <hr />
-                <input type="radio" name="section-1a" id="radio-1a-2" value="radio-1a-2" v-model="order.row1.radio1" />
+                <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.row1.trackNo" holder="nr toru" /> nie
+                  wyjechać z toru nr
-                  posiadającego semafora wyjazdowego
+                  <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>
@@ -63,7 +88,7 @@
                 <input
                   type="checkbox"
                   id="row-enabled-2"
-                  v-model="order.row2.enabled"
+                  v-model="order.rows[1].enabled"
                   @change="handleRowCheckboxChange(2)"
                 />
               </div>
@@ -76,20 +101,36 @@
                   name="section-2a"
                   id="radio-2a-1"
                   value="wyjazdowego"
-                  v-model="order.row2.signalType"
+                  @change="handleRowCheckboxChange(2)"
+                  v-model="order.rows[1].signalType"
                 />
-                <label for="radio-2a-1">wjazdowego <input type="text" v-model="order.row2.signal1" /> </label>
+                <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"
-                  v-model="order.row2.signalType"
+                  @change="handleRowCheckboxChange(2)"
+                  v-model="order.rows[1].signalType"
                 />
-                <label for="radio-2a-2"
+                <label for="radio-2a-2">
-                  >drogowskazowego <input type="text" v-model="order.row2.signal2" /> (odnoszącego się do wyjazdu
+                  drogowskazowego
-                  pociągu)
+                  <input
+                    type="text"
+                    v-model="order.rows[1].signal2"
+                    holder="nazwa sem."
+                    :radio-checked="order.rows[1].signalType == 'drogowskazowego'"
+                  />
+                  (odnoszącego się do wyjazdu pociągu)
                 </label>
                 <br />
                 <input
@@ -97,14 +138,35 @@
                   name="section-2a"
                   id="radio-2a-3"
                   value="odstępowego"
-                  v-model="order.row2.signalType"
+                  @change="handleRowCheckboxChange(2)"
+                  v-model="order.rows[1].signalType"
                 />
-                <label for="radio-2a-3">odstępowego <input type="text" v-model="order.row2.signal3" /></label>
+                <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.row2.signalType" />
+                <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.row2.trackNo" /> nie posiadającego
+                  wjechać z zamkniętego toru nr
-                  semafora wjazdowego
+                  <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>
@@ -116,19 +178,20 @@
                 <input
                   type="checkbox"
                   id="row-enabled-3"
-                  v-model="order.row3.enabled"
+                  v-model="order.rows[2].enabled"
                   @change="handleRowCheckboxChange(3)"
                 />
               </div>
             </td>
             <td ref="row-3">
-              Od <input type="text" v-model="order.row3.from" /> do <input type="text" v-model="order.row3.to" /> po
+              Od <input type="text" v-model="order.rows[2].from" holder="stacja / post." /> do
-              torze nr <input type="text" v-model="order.row3.trackNo" /> ruch pociągów prowadzony jest w odstępie
+              <input type="text" v-model="order.rows[2].to" holder="stacja / post." /> po torze nr
-              posterunków następczych. Wskazania semaforów sbl są nieważne. Zachować ostrożność od ostatniego semafora
+              <input type="text" v-model="order.rows[2].trackNo" holder="nr toru" /> ruch pociągów prowadzony jest w
-              ze wskaźnikiem "W18". Szlak wolny, ostatni pociąg nr
+              odstępie posterunków następczych. Wskazania semaforów sbl są nieważne. Zachować ostrożność od ostatniego
-              <input type="text" v-model="order.row3.trainNo" /> przybył do
+              semafora ze wskaźnikiem "W18". Szlak wolny, ostatni pociąg nr
-              <input type="text" v-model="order.row3.arrivedTo" /> o godzinie
+              <input type="text" v-model="order.rows[2].trainNo" holder="nr pociągu" /> przybył do
-              <input type="text" v-model="order.row3.hour" />
+              <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: 255px">
@@ -138,7 +201,7 @@
                 <input
                   type="checkbox"
                   id="row-enabled-4"
-                  v-model="order.row4.enabled"
+                  v-model="order.rows[3].enabled"
                   @change="handleRowCheckboxChange(4)"
                 />
               </div>
@@ -146,7 +209,7 @@
             <td ref="row-4">
               Inne:
               <br />
-              <textarea id="" cols="30" rows="10" v-model="order.row4.content"></textarea>
+              <textarea id="" cols="30" rows="10" v-model="order.rows[3].content" placeholder="Np.: "></textarea>
             </td>
           </tr>
         </tbody>
@@ -157,9 +220,10 @@
 
 <script lang="ts">
 import { defineComponent, reactive } from 'vue';
+import { handleOrderPlaceholders } from '../handlers/orderPlaceholderHandler';
 import { useStore } from '../store/store';
 
-type OrderRowRange = 1 | 2 | 3 | 4;
+type TOrderRows = 1 | 2 | 3 | 4;
 
 export default defineComponent({
   name: 'OrderS',
@@ -178,36 +242,36 @@ export default defineComponent({
       },
 
       () => {
-        const { row1 } = order;
+        const row = order.rows[0];
 
-        let message = `zezwalam po otrzymaniu ${row1.option1 || '_'}`;
+        let message = `zezwalam po otrzymaniu ${row.option1 || '_'}`;
 
-        if (row1.radio1 == 'radio-1a-1')
+        if (row.radio1 == 'radio-1a-1')
-          message += ` przejechać obok wskazującego sygnał "Stój" semafora ${row1.optionSignal || '_'} ${
+          message += ` przejechać obok wskazującego sygnał "Stój" semafora ${row.optionSignal || '_'} ${
-            row1.signal1 || '_'
+            row.signal1 || '_'
           }`;
-        else message += ` wyjechać z toru nr ${row1.trackNo || '_'} nie posiadającego semafora wyjazdowego`;
+        else message += ` wyjechać z toru nr ${row.trackNo || '_'} nie posiadającego semafora wyjazdowego`;
 
         return message;
       },
 
       () => {
-        const { row2 } = order;
+        const row = order.rows[1];
 
         let message = `zezwalam przejechać obok wskazującego sygnał "Stój" semafora `;
 
-        switch (row2.signalType) {
+        switch (row.signalType) {
           case 'wyjazdowego':
-            message += `wjazdowego ${row2.signal1 || '_'}`;
+            message += `wjazdowego ${row.signal1 || '_'}`;
             break;
           case 'drogowskazowego':
-            message += `drogowskazowego ${row2.signal2 || '_'}`;
+            message += `drogowskazowego ${row.signal2 || '_'}`;
             break;
           case 'odstępowego':
-            message += `odstępowego ${row2.signal3 || '_'}`;
+            message += `odstępowego ${row.signal3 || '_'}`;
             break;
           case 'toru':
-            message += `wjechać z zamkniętego toru nr ${row2.trackNo || '_'} nie posiadającego semafora wjazdowego`;
+            message += `wjechać z zamkniętego toru nr ${row.trackNo || '_'} nie posiadającego semafora wjazdowego`;
             break;
 
           default:
@@ -217,19 +281,19 @@ export default defineComponent({
         return message;
       },
       () => {
-        const { row3 } = order;
+        const row = order.rows[2];
 
-        return `Od ${row3.from || '_'} do ${row3.to || '_'} po torze nr ${
+        return `Od ${row.from || '_'} do ${row.to || '_'} po torze nr ${
-          row3.trackNo || '_'
+          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 ${
-          row3.trainNo || '_'
+          row.trainNo || '_'
-        } przybył do ${row3.arrivedTo || '_'} o godzinie ${row3.hour || '_'}`;
+        } przybył do ${row.arrivedTo || '_'} o godzinie ${row.hour || '_'}`;
       },
 
       () => {
-        const { row4 } = order;
+        const row = order.rows[3];
 
-        return `Inne: ${row4.content}`;
+        return `Inne: ${row.content}`;
       },
     ];
 
@@ -244,6 +308,10 @@ export default defineComponent({
     this.generateMessage();
   },
 
+  mounted() {
+    this.updatePlaceholders();
+  },
+
   watch: {
     order: {
       deep: true,
@@ -251,37 +319,40 @@ export default defineComponent({
         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 = 1; i <= 4; i++) {
+      for (let i = 0; i < 4; i++) {
-        if (!this.order[`row${i as OrderRowRange}`].enabled) continue;
+        if (!this.order.rows[i].enabled) continue;
 
-        message += ` <b> [ ${i} ] </b> ${this.rowMethods[i]()}`;
+        message += ` <b> [ ${i + 1} ] </b> ${this.rowMethods[i]()}`;
       }
 
       this.store.orderMessage = message;
     },
 
-    handleRowCheckboxChange(rowIndex: OrderRowRange) {
+    handleRowCheckboxChange(rowIndex: TOrderRows) {
-      const isRowEnabled = this.order[`row${rowIndex}`].enabled;
+      const isRowEnabled = this.order.rows[rowIndex - 1].enabled;
       const rowRef = this.$refs[`row-${rowIndex}`] as HTMLTableElement;
 
-      if (!isRowEnabled) {
+      this.$nextTick(() => {
-        rowRef.querySelectorAll('input[type="text"]').forEach((node) => {
+        handleOrderPlaceholders(isRowEnabled, rowRef);
-          node.setAttribute('holder', node.getAttribute('placeholder') || '');
-          node.removeAttribute('placeholder');
-        });
-
-        return;
-      }
-
-      rowRef.querySelectorAll('input[type="text"]').forEach((node) => {
-        if (node.getAttribute('holder') != null) node.setAttribute('placeholder', node.getAttribute('holder')!);
-        node.removeAttribute('holder');
       });
     },
   },

src/handlers/orderPlaceholderHandler.ts

@@ -0,0 +1,23 @@
+// For use inside OrderS and OrderN
+export const handleOrderPlaceholders = (isRowEnabled: boolean, rowRef: HTMLTableElement) => {
+  rowRef.querySelectorAll('input[type="text"]').forEach((node) => {
+    if (!isRowEnabled) {
+      if (node.getAttribute('placeholder') != null) {
+        node.setAttribute('holder', node.getAttribute('placeholder')!);
+        node.removeAttribute('placeholder');
+      }
+
+      return;
+    }
+
+    if (!node.getAttribute('holder')) return;
+    const radioCheckedAttr = node.getAttribute('radio-checked');
+
+    if (radioCheckedAttr == null) return node.setAttribute('placeholder', node.getAttribute('holder')!);
+    if (radioCheckedAttr == 'true') return node.setAttribute('placeholder', node.getAttribute('holder')!);
+    if (node.getAttribute('placeholder') == null) return;
+
+    node.setAttribute('holder', node.getAttribute('placeholder')!);
+    node.removeAttribute('placeholder');
+  });
+};

src/mixins/orderStorageMixin.ts

@@ -19,21 +19,6 @@ export default defineComponent({
         createdAt: Date.now(),
       };
 
-      // switch (this.store.chosenOrderType) {
-      //   case 'orderN':
-      //     orderObj['orderBody'] = this.store.orderN;
-      //     break;
-      //   case 'orderS':
-      //     orderObj['orderBody'] = this.store.orderS;
-      //     break;
-      //   case 'orderO':
-      //     orderObj['orderBody'] = this.store.orderO;
-      //     break;
-
-      //   default:
-      //     break;
-      // }
-
       const headerInfo = orderObj['orderBody']['header'];
 
       if (!headerInfo['orderNo']) return -1;
@@ -129,6 +114,8 @@ export default defineComponent({
         (this.store.orderFooter as any)[key] = localOrderFooter[key];
       }
 
+      console.log(this.store[this.store.chosenOrderType]);
+
       this.store.orderMode = 'OrderMessage';
     },
   },

src/store/store.ts

@@ -1,11 +1,12 @@
 import { defineStore } from 'pinia';
+import { IOrderN, IOrderO, IOrderS, TOrder } from '../types/orderTypes';
 
 export const useStore = defineStore('store', {
   state: () => {
     return {
       helperModalOpen: false,
 
-      chosenOrderType: 'orderN' as 'orderO' | 'orderS' | 'orderN',
+      chosenOrderType: 'orderN' as TOrder,
       chosenLocalOrderId: '',
 
       orderMode: 'OrderMessage',
@@ -72,7 +73,7 @@ export const useStore = defineStore('store', {
           },
         ],
         other: '',
-      },
+      } as IOrderO,
 
       orderN: {
         header: {
@@ -81,61 +82,59 @@ export const useStore = defineStore('store', {
           date: new Date().toLocaleDateString('pl-PL', { day: '2-digit', month: 'long' }),
         },
 
-        row1: {
+        rows: [
-          enabled: false,
+          {
-          from: '',
+            enabled: false,
-          to: '',
+            from: '',
-          trackNo: '',
+            to: '',
-          trackNo2: '',
+            trackNo: '',
-        },
+            trackNo2: '',
+          },
+          {
+            enabled: false,
+            option1: 'sygnału "Nakaz Jazdy"',
+            option2: 'lewy',
+            option3: 'lewy',
+            signal1: '',
+            signal2: '',
+            signal3: '',
+            signalType: 'wyjazdowego',
+            checkbox: 'checkbox-2a',
+            direction1: '',
+            direction2: '',
+            trackNoFrom: '',
+            trackNoTo1: '',
+            trackNoTo2: '',
+          },
+          {
+            enabled: false,
+            option1: 'Jazda',
+            option2: 'pociąg',
 
-        row2: {
+            direction: '',
-          enabled: false,
+            toKilometer: '',
-          option1: 'sygnału "Nakaz Jazdy"',
+            trackNo: '',
-          option2: 'lewy',
+            untilHour: '',
-          option3: 'lewy',
+            untilMin: '',
-          signal1: '',
+          },
-          signal2: '',
+          {
-          signal3: '',
+            enabled: false,
-          signalType: 'wyjazdowego',
+            trackNo: '',
-          checkbox: 'checkbox-2a',
+            optionStation: 'stację',
-          direction1: '',
+            stationName: '',
-          direction2: '',
+            checkbox: 'checkbox-4a',
-          trackNoFrom: '',
+            side: 'lewej',
-          trackNoTo1: '',
+          },
-          trackNoTo2: '',
+          {
-        },
+            enabled: false,
-
+            trackNo: '',
-        row3: {
+            direction: '',
-          enabled: false,
+            stationType: 'stację',
-          option1: 'Jazda',
+            stationName: '',
-          option2: 'pociąg',
+            on: '',
-
+          },
-          direction: '',
+        ],
-          toKilometer: '',
+      } as IOrderN,
-          trackNo: '',
-          untilHour: '',
-          untilMin: '',
-        },
-
-        row4: {
-          enabled: false,
-          trackNo: '',
-          optionStation: 'stację',
-          stationName: '',
-          checkbox: 'checkbox-4a',
-          side: 'lewej',
-        },
-
-        row5: {
-          enabled: false,
-          trackNo: '',
-          direction: '',
-          stationType: 'stację',
-          stationName: '',
-          on: '',
-        },
-      },
 
       orderS: {
         header: {
@@ -145,42 +144,42 @@ export const useStore = defineStore('store', {
           date: new Date().toLocaleDateString('pl-PL', { day: '2-digit', month: 'long' }),
         },
 
-        row1: {
+        rows: [
-          enabled: false,
+          {
-          option1: 'sygnału "nakaz jazdy"',
+            enabled: false,
-          optionSignal: 'wyjazdowego',
+            option1: 'sygnału "nakaz jazdy"',
-          radio1: 'radio-1a-1',
+            optionSignal: 'wyjazdowego',
-          signal1: '',
+            radio1: 'radio-1a-1',
-          trackNo: '',
+            signal1: '',
-        },
+            trackNo: '',
+          },
 
-        row2: {
+          {
-          enabled: false,
+            enabled: false,
-          signalType: 'wyjazdowego',
+            signalType: 'wyjazdowego',
-          signal1: '',
+            signal1: '',
-          signal2: '',
+            signal2: '',
-          signal3: '',
+            signal3: '',
-          trackNo: '',
+            trackNo: '',
-        },
+          },
 
-        row3: {
+          {
-          enabled: false,
+            enabled: false,
-          from: '',
+            from: '',
-          to: '',
+            to: '',
-          trackNo: '',
+            trackNo: '',
-          trainNo: '',
+            trainNo: '',
-          arrivedTo: '',
+            arrivedTo: '',
-          hour: '',
+            hour: '',
-        },
+          },
 
-        row4: {
+          {
-          enabled: false,
+            enabled: false,
-          content: '',
+            content: '',
-        },
+          },
-      },
+        ],
+      } as IOrderS,
     };
   },
 });
 
-
-

src/types/orderTypes.ts

@@ -1,8 +1,165 @@
+export type TOrder = 'orderO' | 'orderS' | 'orderN';
+
 export interface LocalStorageOrder {
   id: string;
-  orderType: 'orderO' | 'orderS' | 'orderN';
+  orderType: TOrder;
   orderBody: any;
   orderFooter: any;
   createdAt?: number;
   updatedAt?: number;
 }
+
+export interface IOrderN {
+  header: {
+    orderNo: string;
+    trainNo: string;
+    date: string;
+  };
+
+  rows: [
+    {
+      enabled: boolean;
+      from: string;
+      to: string;
+      trackNo: string;
+      trackNo2: string;
+    },
+    {
+      enabled: boolean;
+      option1: string;
+      option2: string;
+      option3: string;
+      signal1: string;
+      signal2: string;
+      signal3: string;
+      signalType: string;
+      checkbox: string;
+      direction1: string;
+      direction2: string;
+      trackNoFrom: string;
+      trackNoTo1: string;
+      trackNoTo2: string;
+    },
+    {
+      enabled: boolean;
+      option1: string;
+      option2: string;
+
+      direction: string;
+      toKilometer: string;
+      trackNo: string;
+      untilHour: string;
+      untilMin: string;
+    },
+    {
+      enabled: boolean;
+      trackNo: string;
+      optionStation: string;
+      stationName: string;
+      checkbox: string;
+      side: string;
+    },
+    {
+      enabled: boolean;
+      trackNo: string;
+      direction: string;
+      stationType: string;
+      stationName: string;
+      on: string;
+    }
+  ];
+}
+
+export interface IOrderS {
+  header: {
+    orderNo: string;
+    trainNo: string;
+    for: string;
+    date: string;
+  };
+
+  rows: [
+    {
+      enabled: boolean;
+      option1: string;
+      optionSignal: string;
+      radio1: string;
+      signal1: string;
+      trackNo: string;
+    },
+    {
+      enabled: boolean;
+      signalType: string;
+      signal1: string;
+      signal2: string;
+      signal3: string;
+      trackNo: string;
+    },
+    {
+      enabled: boolean;
+      from: string;
+      to: string;
+      trackNo: string;
+      trainNo: string;
+      arrivedTo: string;
+      hour: string;
+    },
+    {
+      enabled: boolean;
+      content: string;
+    }
+  ];
+}
+
+export interface IOrderO {
+  header: {
+    orderNo: string;
+    trainNo: string;
+    date: string;
+  };
+
+  orderList: [
+    {
+      name: string;
+      from: string;
+      to: string;
+      vmax: string;
+      jo: boolean;
+      reason: string;
+    },
+    {
+      name: string;
+      from: string;
+      to: string;
+      vmax: string;
+      jo: boolean;
+      reason: string;
+    },
+    {
+      name: string;
+      from: string;
+      to: string;
+      vmax: string;
+      jo: boolean;
+      reason: string;
+    },
+    {
+      name: string;
+      from: string;
+      to: string;
+      vmax: string;
+      jo: boolean;
+      reason: string;
+    },
+    {
+      name: string;
+      from: string;
+      to: string;
+      vmax: string;
+      jo: boolean;
+      reason: string;
+    }
+  ];
+
+  other: string;
+}