feature: order 'N' 6th row; chore: textareas sizing

src/components/Order.vue

@@ -186,4 +186,10 @@ select {
     opacity: 0;
   }
 }
+
+textarea.others {
+  width: 100%;
+  min-height: 200px;
+  resize: vertical;
+}
 </style>

src/components/OrderN.vue

@@ -285,6 +285,46 @@
               <input type="text" v-model="order.rows[4].on" holder="nazwa sygnału" />
             </td>
           </tr>
+          <tr style="height: 270px">
+            <td>
+              <label for="row-enabled-6">6</label>
+              <div>
+                <input type="checkbox" id="row-enabled-6" v-model="order.rows[5].enabled" />
+              </div>
+            </td>
+            <td ref="row-6">
+              <button
+                class="g-button text"
+                @click="order.rows[5].twoWay.enabled = !order.rows[5].twoWay.enabled"
+              >
+                &gt;
+                <span v-if="!order.rows[5].twoWay.enabled">
+                  Wygeneruj treść na wprowadzenie ruchu dwukierunkowego
+                </span>
+                <span v-else>Wpisz treść własnoręcznie</span>
+              </button>
+
+              <div>Inne:</div>
+
+              <div v-if="order.rows[5].twoWay.enabled">
+                od
+                <input type="text" v-model="order.rows[5].twoWay.from" holder="stacja / post." />
+                do
+                <input type="text" v-model="order.rows[5].twoWay.to" holder="stacja / post." />
+                po torze nr
+                <input type="text" v-model="order.rows[5].twoWay.trackNo" holder="nr toru" />
+                wprowadzono ruch dwukierunkowy.
+              </div>
+
+              <textarea
+                v-else
+                class="others"
+                cols="30"
+                rows="10"
+                v-model="order.rows[5].content"
+              ></textarea>
+            </td>
+          </tr>
         </tbody>
       </table>
     </section>
@@ -401,6 +441,17 @@ export default defineComponent({
         } i przejechać obok sygnału "Stój" na ${row.on || '_'} `;
 
         return message;
+      },
+
+      () => {
+        const row = order.rows[5];
+
+        if (row.twoWay.enabled)
+          return `Inne: od ${row.twoWay.from || '_'} do ${row.twoWay.to || '_'} po torze nr ${
+            row.twoWay.trackNo || '_'
+          } wprowadzono ruch dwukierunkowy.`;
+
+        return 'Inne: ' + row.content;
       }
     ];
 
@@ -453,7 +504,7 @@ export default defineComponent({
     generateMessage() {
       let message = this.rowMethods[0]();
 
-      for (let i = 0; i < 5; i++) {
+      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]()}`;

src/components/OrderO.vue

@@ -65,13 +65,13 @@
           </tr>
         </tbody>
       </table>
-
-      <div class="order_other">
-        <span><b>2.</b> Inne:</span>
-        <br />
-        <textarea v-model="order.other"></textarea>
-      </div>
     </section>
+
+    <div class="order_other">
+      <span><b>2.</b> Inne:</span>
+      <br />
+      <textarea class="others" cols="30" rows="10" v-model="order.other"></textarea>
+    </div>
   </section>
 </template>
 
@@ -189,10 +189,12 @@ th {
   input {
     width: 80%;
   }
+}
 
+.order_table {
   textarea {
-    width: 80%;
+    width: 90%;
-    height: 40px;
+    min-height: 50px;
     resize: vertical;
   }
 }
@@ -203,14 +205,7 @@ th {
 
   display: flex;
   flex-direction: column;
-  height: 285px;
 
   padding: 0.5em;
-
-  textarea {
-    resize: vertical;
-    height: 220px;
-    width: 95%;
-  }
 }
 </style>

src/components/OrderS.vue

@@ -202,7 +202,7 @@
               <input type="text" v-model="order.rows[2].hour" holder="godzina" />
             </td>
           </tr>
-          <tr style="height: 255px">
+          <tr style="height: 270px">
             <td>
               <label for="row-enabled-4">4</label>
               <div>
@@ -265,7 +265,13 @@
                 <input type="text" v-model="order.rows[3].w5.maxHour" holder="godzina" />
               </div>
 
-              <textarea id="" cols="30" rows="10" v-model="order.rows[3].content" v-else></textarea>
+              <textarea
+                v-else
+                class="others"
+                cols="30"
+                rows="10"
+                v-model="order.rows[3].content"
+              ></textarea>
             </td>
           </tr>
         </tbody>
@@ -438,11 +444,3 @@ export default defineComponent({
   }
 });
 </script>
-
-<style lang="scss" scoped>
-textarea {
-  width: 95%;
-  height: 200px;
-  resize: none;
-}
-</style>

src/store/store.ts

@@ -137,6 +137,16 @@ export const useStore = defineStore('store', {
             stationType: 'stację',
             stationName: '',
             on: ''
+          },
+          {
+            enabled: false,
+            content: '',
+            twoWay: {
+              enabled: false,
+              from: '',
+              to: '',
+              trackNo: ''
+            }
           }
         ]
       } as IOrderN,

src/types/orderTypes.ts

@@ -66,6 +66,16 @@ export interface IOrderN {
       stationType: string;
       stationName: string;
       on: string;
+    },
+    {
+      enabled: boolean;
+      content: string;
+      twoWay: {
+        enabled: boolean;
+        from: string;
+        to: string;
+        trackNo: string;
+      };
     }
   ];
 }