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

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
-                  posiadającego semafora wyjazdowego
+                  wyjechać z toru nr
+                  <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"
-                  >drogowskazowego <input type="text" v-model="order.row2.signal2" /> (odnoszącego się do wyjazdu
-                  pociągu)
+                <label for="radio-2a-2">
+                  drogowskazowego
+                  <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
-                  semafora wjazdowego
+                  wjechać z zamkniętego toru nr
+                  <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
-              torze nr <input type="text" v-model="order.row3.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
-              <input type="text" v-model="order.row3.trainNo" /> przybył do
-              <input type="text" v-model="order.row3.arrivedTo" /> o godzinie
-              <input type="text" v-model="order.row3.hour" />
+              Od <input type="text" v-model="order.rows[2].from" holder="stacja / post." /> do
+              <input type="text" v-model="order.rows[2].to" holder="stacja / post." /> po torze nr
+              <input type="text" v-model="order.rows[2].trackNo" holder="nr toru" /> 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
+              <input type="text" v-model="order.rows[2].trainNo" holder="nr pociągu" /> przybył do
+              <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')
-          message += ` przejechać obok wskazującego sygnał "Stój" semafora ${row1.optionSignal || '_'} ${
-            row1.signal1 || '_'
+        if (row.radio1 == 'radio-1a-1')
+          message += ` przejechać obok wskazującego sygnał "Stój" semafora ${row.optionSignal || '_'} ${
+            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 ${
-          row3.trackNo || '_'
+        return `Od ${row.from || '_'} do ${row.to || '_'} po torze nr ${
+          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 || '_'
-        } przybył do ${row3.arrivedTo || '_'} o godzinie ${row3.hour || '_'}`;
+          row.trainNo || '_'
+        } 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++) {
-        if (!this.order[`row${i as OrderRowRange}`].enabled) continue;
+      for (let i = 0; i < 4; i++) {
+        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) {
-      const isRowEnabled = this.order[`row${rowIndex}`].enabled;
+    handleRowCheckboxChange(rowIndex: TOrderRows) {
+      const isRowEnabled = this.order.rows[rowIndex - 1].enabled;
       const rowRef = this.$refs[`row-${rowIndex}`] as HTMLTableElement;
 
-      if (!isRowEnabled) {
-        rowRef.querySelectorAll('input[type="text"]').forEach((node) => {
-          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');
+      this.$nextTick(() => {
+        handleOrderPlaceholders(isRowEnabled, rowRef);
       });
     },
   },