Interaktywne placeholdery (wip)

.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,1666564269542,70d2f2079501d80e601fb45c73b19c76e5045940ac64e346376c6551b644b851
-assets/icon-save.5a12487e.svg,1666564269543,5c75b0d4e35cdaf019c7292f7fd98c2e60466ae6f8b30d49b96cf2380c08299c
-assets/index.c14514ca.css,1666564269543,584a9268e2ca5f0c8bbb8912cfe018dd5e249a16cadacccf3f96dd60db73e221
-assets/index.72b72171.js,1666564269543,654c54634cbe11c57aa1d03001d33e3cde14fa2a56516f0b3816c92920cad2c2
+index.html,1666616986687,d56712a3ae1b21063a53c53732d47257ae92c62a670c6cf3e366d7bb4fc26574
+assets/icon-save.5a12487e.svg,1666616986687,5c75b0d4e35cdaf019c7292f7fd98c2e60466ae6f8b30d49b96cf2380c08299c
+assets/index.fb05c726.css,1666616986687,f030c87b6540ca5a65e06a802889fab0cfa07a1a0650f453110806104d32f7d2
+assets/index.28881d1a.js,1666616986687,6a819fe792ae2df4904fa2e9d95909a2d6c0cfcf44974fd4f71041e002fe6f45

src/components/Order.vue

@@ -120,6 +120,10 @@ input {
   &:focus-visible {
     border-bottom: 2px solid $accentCol;
   }
+
+  &.row-checkbox + input::placeholder {
+    color: red;
+  }
 }
 
 input[type='checkbox'],

src/components/OrderFooter.vue

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

src/components/OrderN.vue

@@ -3,11 +3,11 @@
     <section class="header" ref="header">
       <h2 class="flex-center">
         Rozkaz pisemny "N" nr
-        <input type="text" v-model="order.header.orderNo" />
+        <input type="text" v-model="order.header.orderNo" placeholder="nr rozkazu" />
       </h2>
       <div class="flex-row">
-        dla pociągu nr <input type="text" v-model="order.header.trainNo" /> dnia
-        <input type="text" v-model="order.header.date" /> {{ new Date().getUTCFullYear() }}r.
+        dla pociągu nr <input type="text" v-model="order.header.trainNo" placeholder="nr pociągu" /> dnia
+        <input type="text" v-model="order.header.date" placeholder="data" /> {{ new Date().getUTCFullYear() }}r.
       </div>
     </section>
     <section class="table-section">
@@ -17,23 +17,35 @@
             <td>
               <label for="row-enabled-1">1</label>
               <div>
-                <input type="checkbox" id="row-enabled-1" v-model="order.row1.enabled" />
+                <input
+                  type="checkbox"
+                  id="row-enabled-1"
+                  v-model="order.row1.enabled"
+                  @change="handleRowCheckboxChange(1)"
+                />
               </div>
             </td>
-            <td>
-              Od <input type="text" v-model="order.row1.from" /> do <input type="text" v-model="order.row1.to" /> tor nr
-              <input type="text" v-model="order.row1.trackNo" /> jest zamknięty, ruch jednotorowy dwukierunkowy
-              wprowadzono po torze nr <input type="text" v-model="order.row1.trackNo2" />
+            <td ref="row-1">
+              Od <input type="text" v-model="order.row1.from" holder="stacja / post." /> do
+              <input type="text" v-model="order.row1.to" holder="stacja / post." /> tor nr
+              <input type="text" v-model="order.row1.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" />
             </td>
           </tr>
           <tr>
             <td>
               <label for="row-enabled-2">2</label>
               <div>
-                <input type="checkbox" id="row-enabled-2" v-model="order.row2.enabled" />
+                <input
+                  type="checkbox"
+                  id="row-enabled-2"
+                  v-model="order.row2.enabled"
+                  @change="handleRowCheckboxChange(2)"
+                />
               </div>
             </td>
-            <td>
+            <td ref="row-2">
               <strong>ZEZWALAM</strong> po otrzymaniu
               <select id="select-2a" v-model="order.row2.option1">
                 <option :value="`sygnału &quot;Nakaz Jazdy&quot;`">sygnału "Nakaz Jazdy"</option>
@@ -58,7 +70,9 @@
                       value="wyjazdowego"
                       v-model="order.row2.signalType"
                     />
-                    <label for="radio-2a-1">wyjazdowego <input type="text" v-model="order.row2.signal1" /> </label>
+                    <label for="radio-2a-1">
+                      wyjazdowego <input type="text" v-model="order.row2.signal1" holder="nazwa sem." />
+                    </label>
                     <br />
                     <input
                       type="radio"
@@ -67,9 +81,10 @@
                       value="drogowskazowego"
                       v-model="order.row2.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.row2.signal2" holder="nazwa sem." /> (odnoszącego się do
+                      wyjazdu pociągu)
                     </label>
                     <br />
                     <input
@@ -79,17 +94,18 @@
                       value="wjazdowego"
                       v-model="order.row2.signalType"
                     />
-                    <label for="radio-2a-3"
-                      >wjazdowego <input type="text" v-model="order.row2.signal3" /> na post. odg. bez sem.
-                      wyjazdowego</label
-                    >
+                    <label for="radio-2a-3">
+                      wjazdowego <input type="text" v-model="order.row2.signal3" holder="nazwa sem." /> na post.
+                      odg. bez sem. wyjazdowego
+                    </label>
                   </div>
-                  i wyjechać w kierunku <input type="text" v-model="order.row2.direction1" /> na tor szlakowy
+                  i wyjechać w kierunku
+                  <input type="text" v-model="order.row2.direction1" holder="stacja / post." /> na tor szlakowy
                   <select v-model="order.row2.option2">
                     <option value="lewy">lewy</option>
                     <option value="prawy">prawy</option>
                   </select>
-                  nr <input type="text" v-model="order.row2.trackNoTo1" />
+                  nr <input type="text" v-model="order.row2.trackNoTo1" holder="nr toru" />
                 </label>
               </div>
               <div style="margin-top: 0.5rem">
@@ -102,13 +118,14 @@
                   :checked="order.row2.checkbox == 'checkbox-2b'"
                 />
                 <label for="checkbox-2b">
-                  z toru nr <input type="text" v-model="order.row2.trackNoFrom" /> nie posiadającego semafora
-                  wyjazdowego wyjechać w kierunku <input type="text" v-model="order.row2.direction2" /> na tor szlakowy
+                  z toru nr <input type="text" v-model="order.row2.trackNoFrom" holder="nr toru" /> nie
+                  posiadającego semafora wyjazdowego wyjechać w kierunku
+                  <input type="text" v-model="order.row2.direction2" holder="stacja / post." /> na tor szlakowy
                   <select v-model="order.row2.option3">
                     <option value="lewy">lewy</option>
                     <option value="prawy">prawy</option>
                   </select>
-                  nr <input type="text" v-model="order.row2.trackNoTo2" />
+                  nr <input type="text" v-model="order.row2.trackNoTo2" holder="nr toru" />
                 </label>
               </div>
             </td>
@@ -117,39 +134,53 @@
             <td>
               <label for="row-enabled-3">3</label>
               <div>
-                <input type="checkbox" id="row-enabled-3" v-model="order.row3.enabled" />
+                <input
+                  type="checkbox"
+                  id="row-enabled-3"
+                  v-model="order.row3.enabled"
+                  @change="handleRowCheckboxChange(3)"
+                />
               </div>
             </td>
-            <td>
+            <td ref="row-3">
               <select v-model="order.row3.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" /> do km
-              <input type="text" v-model="order.row3.toKilometer" /> skąd
+              pociągu odbędzie się w kierunku:
+              <input type="text" v-model="order.row3.direction" holder="stacja / post." /> do km
+              <input type="text" v-model="order.row3.toKilometer" holder="kilometry" /> skąd
               <select v-model="order.row3.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" /> najpóźniej o godz.
-              <input type="text" v-model="order.row3.untilHour" /> min.
-              <input type="text" v-model="order.row3.untilMin" />
+              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.row3.untilHour" holder="godzina" /> min.
+              <input type="text" v-model="order.row3.untilMin" holder="minuta" />
             </td>
           </tr>
           <tr>
             <td>
               <label for="row-enabled-4">4</label>
               <div>
-                <input type="checkbox" id="row-enabled-4" v-model="order.row4.enabled" />
+                <input
+                  type="checkbox"
+                  id="row-enabled-4"
+                  v-model="order.row4.enabled"
+                  @change="handleRowCheckboxChange(4)"
+                />
               </div>
             </td>
-            <td>
-              <strong>WJAZD</strong> z toru szlakowego nr <input type="text" v-model="order.row4.trackNo" /> na
+            <td ref="row-4">
+              <strong>WJAZD</strong> z toru szlakowego nr
+              <input type="text" v-model="order.row4.trackNo" holder="nr toru" /> na
               <select v-model="order.row4.optionStation">
                 <option value="stację">stację</option>
                 <option value="posterunek odgałęźny">posterunek odgałęźny</option>
               </select>
-              <input type="text" v-model="order.row4.stationName" /> odbędzie się po otrzymaniu:
+              <input type="text" v-model="order.row4.stationName" holder="stacja / post." /> odbędzie się po
+              otrzymaniu:
               <div style="margin-top: 0.5rem">
                 <input
                   type="radio"
@@ -185,19 +216,25 @@
             <td>
               <label for="row-enabled-5">5</label>
               <div>
-                <input type="checkbox" id="row-enabled-5" v-model="order.row5.enabled" />
+                <input
+                  type="checkbox"
+                  id="row-enabled-5"
+                  v-model="order.row5.enabled"
+                  @change="handleRowCheckboxChange(5)"
+                />
               </div>
             </td>
-            <td>
+            <td ref="row-5">
               <strong>ZEZWALAM</strong> wjechać z toru szlakowego nr
-              <input type="text" v-model="order.row5.trackNo" /> z kierunku
-              <input type="text" v-model="order.row5.direction" /> na
+              <input type="text" v-model="order.row5.trackNo" holder="nr toru" /> z kierunku
+              <input type="text" v-model="order.row5.direction" holder="stacja / post." /> na
               <select v-model="order.row5.stationType">
                 <option value="stację">stację</option>
                 <option value="posterunek odgałęźny">posterunek odgałęźny</option>
               </select>
-              <input type="text" v-model="order.row5.stationName" />
-              i przejechać obok sygnału "Stój" na <input type="text" v-model="order.row5.on" />
+              <input type="text" v-model="order.row5.stationName" holder="stacja / post." />
+              i przejechać obok sygnału "Stój" na
+              <input type="text" v-model="order.row5.on" holder="nazwa sygnału" />
             </td>
           </tr>
         </tbody>
@@ -331,6 +368,25 @@ export default defineComponent({
   },
 
   methods: {
+    handleRowCheckboxChange(rowIndex: 1 | 2 | 3 | 4 | 5) {
+      const isRowEnabled = this.order[`row${rowIndex}`].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')) node.setAttribute('placeholder', node.getAttribute('holder')!);
+        node.removeAttribute('holder');
+      });
+    },
+
     generateMessage() {
       let message = this.rowMethods[0]();
 
@@ -345,3 +401,4 @@ export default defineComponent({
   },
 });
 </script>
+

src/components/OrderS.vue

@@ -3,7 +3,7 @@
     <section class="header">
       <h2 class="flex-center">
         Rozkaz pisemny "S" nr
-        <input type="text" v-model="order.header.orderNo" />
+        <input type="text" v-model="order.header.orderNo" placeholder="nr rozkazu" />
       </h2>
       <div class="flex-row">
         dla
@@ -11,8 +11,8 @@
           <option value="pociągu">pociągu</option>
           <option value="manewru">manewru</option>
         </select>
-        nr <input type="text" v-model="order.header.trainNo" /> dnia <input type="text" v-model="order.header.date" />
-        {{ new Date().getUTCFullYear() }}r.
+        nr <input type="text" v-model="order.header.trainNo" :placeholder="`nr ${order.header.for}`" /> dnia
+        <input type="text" v-model="order.header.date" placeholder="data" /> {{ new Date().getUTCFullYear() }}r.
       </div>
     </section>
     <section class="table-section">
@@ -20,12 +20,17 @@
         <tbody>
           <tr>
             <td>
-              <label for="row-enabled-2">1</label>
+              <label for="row-enabled-1">1</label>
               <div>
-                <input type="checkbox" id="row-enabled-1" v-model="order.row1.enabled" />
+                <input
+                  type="checkbox"
+                  id="row-enabled-1"
+                  v-model="order.row1.enabled"
+                  @click="handleRowCheckboxChange(1)"
+                />
               </div>
             </td>
-            <td>
+            <td ref="row-1">
               zezwalam po otrzymaniu
               <select id="select-1a" v-model="order.row1.option1">
                 <option :value="`sygnału &quot;nakaz jazdy&quot;`">sygnału "nakaz jazdy"</option>
@@ -39,14 +44,14 @@
                     <option value="wyjazdowego">wyjazdowego</option>
                     <option value="drogowskazowego">drogowskazowego</option>
                   </select>
-                  <input type="text" v-model="order.row1.signal1" />
+                  <input type="text" v-model="order.row1.signal1" holder="nazwa sem." />
                   <br />
                 </label>
                 <hr />
                 <input type="radio" name="section-1a" id="radio-1a-2" value="radio-1a-2" v-model="order.row1.radio1" />
                 <label for="radio-1a-2">
-                  wyjechać z toru nr <input type="text" v-model="order.row1.trackNo" /> nie posiadającego semafora
-                  wyjazdowego
+                  wyjechać z toru nr <input type="text" v-model="order.row1.trackNo" holder="nr toru" /> nie
+                  posiadającego semafora wyjazdowego
                 </label>
               </div>
             </td>
@@ -55,10 +60,15 @@
             <td>
               <label for="row-enabled-2">2</label>
               <div>
-                <input type="checkbox" id="row-enabled-2" v-model="order.row2.enabled" />
+                <input
+                  type="checkbox"
+                  id="row-enabled-2"
+                  v-model="order.row2.enabled"
+                  @click="handleRowCheckboxChange(2)"
+                />
               </div>
             </td>
-            <td>
+            <td ref="row-2">
               zezwalam przejechać obok wskazującego sygnał "Stój" semafora:
               <div>
                 <input
@@ -103,10 +113,15 @@
             <td>
               <label for="row-enabled-3">3</label>
               <div>
-                <input type="checkbox" id="row-enabled-3" v-model="order.row3.enabled" />
+                <input
+                  type="checkbox"
+                  id="row-enabled-3"
+                  v-model="order.row3.enabled"
+                  @click="handleRowCheckboxChange(3)"
+                />
               </div>
             </td>
-            <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
@@ -120,10 +135,15 @@
             <td>
               <label for="row-enabled-4">4</label>
               <div>
-                <input type="checkbox" id="row-enabled-4" v-model="order.row4.enabled" />
+                <input
+                  type="checkbox"
+                  id="row-enabled-4"
+                  v-model="order.row4.enabled"
+                  @click="handleRowCheckboxChange(4)"
+                />
               </div>
             </td>
-            <td>
+            <td ref="row-4">
               Inne:
               <br />
               <textarea id="" cols="30" rows="10" v-model="order.row4.content"></textarea>
@@ -245,6 +265,26 @@ export default defineComponent({
 
       this.store.orderMessage = message;
     },
+
+    handleRowCheckboxChange(rowIndex: OrderRowRange) {
+      const isRowEnabled = this.order[`row${rowIndex}`].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) => {
+        console.log(node.getAttribute('holder'));
+
+        if (node.getAttribute('holder') != null) node.setAttribute('placeholder', node.getAttribute('holder')!);
+      });
+    },
   },
 });
 </script>
@@ -256,3 +296,4 @@ textarea {
   resize: none;
 }
 </style>
+