Rozkaz S

src/components/Order.vue

@@ -1,8 +1,10 @@
 <template>
   <div class="rozkaz">
+    <transition name="order-anim" mode="out-in">
       <keep-alive>
         <component :is="chosenOrderComponent"></component>
       </keep-alive>
+    </transition>
 
     <section class="info">
       <table class="info-table">
@@ -145,7 +147,6 @@ select {
       width: 10%;
 
       text-align: center;
-      vertical-align: top;
 
       font-weight: bold;
     }
@@ -153,8 +154,9 @@ select {
     td {
       padding: 0.35em;
       text-align: justify;
+      vertical-align: top;
 
-      line-height: 1.4em;
+      line-height: 1.5em;
     }
   }
 
@@ -183,37 +185,15 @@ table.info-table {
   text-align: center;
 }
 
-tr:not(.chosen) > td.row-content {
-  opacity: 0.45;
-  user-select: none;
-
-  position: relative;
-
-  &::after {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-  }
-}
-
-tr.row {
-  &:not(.chosen) {
-    cursor: pointer;
+.order-anim {
+  &-enter-active,
+  &-leave-active {
+    transition: opacity 150ms ease-in-out;
   }
 
-  &.chosen > .row-number {
-    color: red;
-  }
-
-  &:hover {
-    outline: 3px solid red;
-
-    & td.row-number {
-      color: red;
-    }
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
   }
 }
 </style>

src/components/OrderN.vue

@@ -1,16 +1,15 @@
 <template>
+  <section class="order-n">
     <section class="header" ref="header">
       <h2 class="flex-center">
         Rozkaz pisemny "N" nr
         <input type="text" v-model="order.header.orderNo" />
       </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.
       </div>
     </section>
-
     <section class="table-section">
       <table class="options-table">
         <tbody>
@@ -27,7 +26,6 @@
               wprowadzono po torze nr <input type="text" v-model="order.row1.trackNo2" />
             </td>
           </tr>
-
           <tr>
             <td>
               <label for="row-enabled-2">2</label>
@@ -41,7 +39,6 @@
                 <option value='sygnału "Nakaz Jazdy"'>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"
@@ -51,10 +48,8 @@
                   v-model="order.row2.checkbox"
                   :checked="order.row2.checkbox == 'checkbox-2a'"
                 />
-
                 <label for="checkbox-2a">
                   przejechać obok wskazującego sygnał "Stój" semafora
-
                   <div style="margin-left: 1rem">
                     <input
                       type="radio"
@@ -89,7 +84,6 @@
                       wyjazdowego</label
                     >
                   </div>
-
                   i wyjechać w kierunku <input type="text" v-model="order.row2.direction" /> na tor szlakowy
                   <select v-model="order.row2.option2">
                     <option value="lewy">lewy</option>
@@ -98,7 +92,6 @@
                   nr <input type="text" v-model="order.row2.trackNoTo1" />
                 </label>
               </div>
-
               <div style="margin-top: 0.5rem">
                 <input
                   type="radio"
@@ -108,10 +101,9 @@
                   v-model="order.row2.checkbox"
                   :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" /> na tor szlakowy
+                  z toru nr <input type="text" v-model="order.row2.trackNoFrom" /> nie posiadającego semafora
+                  wyjazdowego wyjechać w kierunku <input type="text" /> na tor szlakowy
                   <select v-model="order.row2.option3">
                     <option value="lewy">lewy</option>
                     <option value="prawy">prawy</option>
@@ -121,7 +113,6 @@
               </div>
             </td>
           </tr>
-
           <tr>
             <td>
               <label for="row-enabled-3">3</label>
@@ -145,7 +136,6 @@
               <input type="text" v-model="order.row3.untilMin" />
             </td>
           </tr>
-
           <tr>
             <td>
               <label for="row-enabled-4">4</label>
@@ -160,9 +150,14 @@
                 <option value="posterunek odgałęźny">posterunek odgałęźny</option>
               </select>
               <input type="text" v-model="order.row4.stationName" /> 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" />
+                <input
+                  type="radio"
+                  name="section-4"
+                  id="checkbox-4a"
+                  value="checkbox-4a"
+                  v-model="order.row4.checkbox"
+                />
                 <label for="checkbox-4a">
                   sygnału zastępczego "Sz" na osobnym urządzeniu ustawionym z
                   <select v-model="order.row4.side">
@@ -172,16 +167,20 @@
                   strony toru
                 </label>
               </div>
-
               <div style="margin-top: 0.5rem">
-              <input type="radio" name="section-4" id="checkbox-4b" value="checkbox-4b" v-model="order.row4.checkbox" />
+                <input
+                  type="radio"
+                  name="section-4"
+                  id="checkbox-4b"
+                  value="checkbox-4b"
+                  v-model="order.row4.checkbox"
+                />
                 <label for="checkbox-4b">
                   rozkazu pisemnego "N" (doręczonego lub przekazanego przez urządzenia łączności)
                 </label>
               </div>
             </td>
           </tr>
-
           <tr>
             <td>
               <label for="row-enabled-5">5</label>
@@ -190,8 +189,9 @@
               </div>
             </td>
             <td>
-            <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
+              <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
               <select v-model="order.row5.stationType">
                 <option value="stację">stację</option>
                 <option value="posterunek odgałęźny">posterunek odgałęźny</option>
@@ -203,6 +203,7 @@
         </tbody>
       </table>
     </section>
+  </section>
 </template>
 
 <script lang="ts">
@@ -247,7 +248,7 @@ export default defineComponent({
         if (row2.checkbox == 'checkbox-2a') {
           message += ` przejechać obok wskazującego sygnał "Stój" semafora ${row2.signalType || '_'} `;
 
-          if (row2.signalType == 'wyjazdowego') message += row2.signal1;
+          if (row2.signalType == 'wyjazdowego') message += row2.signal1 || "_";
           if (row2.signalType == 'drogowskazowego')
             message += `${row2.signal2 || '_'} (odnoszącego się do wyjazdu pociągu)`;
           if (row2.signalType == 'wjazdowego') message += `${row2.signal3 || '_'} na post. odg. bez sem. wyjazdowego`;
@@ -271,7 +272,11 @@ export default defineComponent({
       () => {
         const { row3 } = order;
 
-        let message = `${row3.option1} pociągu odbędzie się w kierunku: ${row3.direction} do km ${row3.toKilometer} skąd ${row3.option2} ma wrócić po torze lewym nr ${row3.trackNo} najpóźniej o godz. ${row3.untilHour} min. ${row3.untilMin}`;
+        let message = `${row3.option1 || '_'} pociągu odbędzie się w kierunku: ${row3.direction || '_'} do km ${
+          row3.toKilometer || '_'
+        } skąd ${row3.option2 || '_'} ma wrócić po torze lewym nr ${row3.trackNo || '_'} najpóźniej o godz. ${
+          row3.untilHour || '_'
+        } min. ${row3.untilMin || '_'}`;
 
         return message;
       },
@@ -315,7 +320,7 @@ export default defineComponent({
     },
   },
 
-  mounted() {
+  activated() {
     this.generateMessage();
   },
 
@@ -330,11 +335,9 @@ export default defineComponent({
       }
 
       this.store.orderMessage = message;
-
     },
 
-    generateFooter() {
-    }
+    generateFooter() {},
   },
 });
 </script>

src/components/OrderS.vue

@@ -1,10 +1,10 @@
 <template>
+  <section class="order-s">
     <section class="header">
       <h2 class="flex-center">
         Rozkaz pisemny "S" nr
         <input type="text" v-model="order.header.orderNo" />
       </h2>
-
       <div class="flex-row">
         dla
         <select id="select-header" v-model="order.header.for">
@@ -15,64 +15,97 @@
         {{ new Date().getUTCFullYear() }}r.
       </div>
     </section>
-
     <section class="table-section">
       <table class="options-table">
         <tbody>
-        <tr class="row" @click="chooseRow(1)" :class="{ chosen: order.chosenRows.includes(1) }">
-          <td class="row-number">1</td>
-          <td class="row-content">
+          <tr>
+            <td>
+              <label for="row-enabled-2">1</label>
+              <div>
+                <input type="checkbox" id="row-enabled-1" v-model="order.row1.enabled" />
+              </div>
+            </td>
+            <td>
               zezwalam po otrzymaniu
               <select id="select-1a" v-model="order.row1.option1">
-              <option value="sygnału">sygnału "nakaz jazdy"</option>
-              <option value="rozkazu">tylko tego rozkazu pisemnego</option>
+                <option value='sygnału "nakaz jazdy"'>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="checkbox" name="section-1a" id="checkbox-1a" v-model="order.row1.checkbox1a" />
-              <label for="checkbox-1a">
-                przejechać obok wskazującego sygnał "Stój" semafora wyjazdowego
+                <input type="radio" name="section-1a" id="radio-1a-1" value="radio-1a-1" v-model="order.row1.radio1" />
+                <label for="radio-1a-1">
+                  przejechać obok wskazującego sygnał "Stój" semafora
+                  <select id="select-signal" v-model="order.row1.optionSignal">
+                    <option value="wyjazdowego">wyjazdowego</option>
+                    <option value="drogowskazowego">drogowskazowego</option>
+                  </select>
                   <input type="text" v-model="order.row1.signal1" />
                   <br />
-                drogowskazowego <input type="text" v-model="order.row1.signal2" />
-                <br />
-                (odnoszącego się do wyjazdu pociągu)
                 </label>
-            </div>
-
                 <hr />
-
-            <div style="margin-top: 0.5rem">
-              <input type="checkbox" name="section-1b" id="checkbox-1b" v-model="order.row1.checkbox1b" />
-              <label for="checkbox-1b">
+                <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
                 </label>
               </div>
             </td>
           </tr>
-
-        <tr class="row" @click="chooseRow(2)" :class="{ chosen: order.chosenRows.includes(2) }">
-          <td class="row-number">2</td>
-          <td class="row-content">
-            zezwalam przejechać obok wskazującego sygnał "Stój" semafora:
-
-            <div>- wjazdowego <input type="text" v-model="order.row2.signal1" /></div>
+          <tr>
+            <td>
+              <label for="row-enabled-2">2</label>
               <div>
-              - drogowskazowego <input type="text" v-model="order.row2.signal2" />
-              <div>&nbsp;&nbsp;(odnoszącego się do wjazdu pociągu)</div>
+                <input type="checkbox" id="row-enabled-2" v-model="order.row2.enabled" />
               </div>
-            <div>- odstępowego <input type="text" v-model="order.row2.signal3" /></div>
+            </td>
+            <td>
+              zezwalam przejechać obok wskazującego sygnał "Stój" semafora:
               <div>
-              - wjechać z zamkniętego toru nr <input type="text" v-model="order.row2.trackNo" /> nie posiadającego
+                <input
+                  type="radio"
+                  name="section-2a"
+                  id="radio-2a-1"
+                  value="wyjazdowego"
+                  v-model="order.row2.signalType"
+                />
+                <label for="radio-2a-1">wyjazdowego <input type="text" v-model="order.row2.signal1" /> </label>
+                <br />
+                <input
+                  type="radio"
+                  name="section-2a"
+                  id="radio-2a-2"
+                  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>
+                <br />
+                <input
+                  type="radio"
+                  name="section-2a"
+                  id="radio-2a-3"
+                  value="odstępowego"
+                  v-model="order.row2.signalType"
+                />
+                <label for="radio-2a-3">odstępowego <input type="text" v-model="order.row2.signal3" /></label>
+                <br />
+                <input type="radio" name="section-2a" id="radio-2a-4" value="toru" v-model="order.row2.signalType" />
+                <label for="radio-2a-4">
+                  wjechać z zamkniętego toru nr <input type="text" v-model="order.row2.trackNo" /> nie posiadającego
                   semafora wjazdowego
+                </label>
               </div>
             </td>
           </tr>
-
-        <tr class="row" @click="chooseRow(3)" :class="{ chosen: order.chosenRows.includes(3) }">
-          <td class="row-number">3</td>
-          <td class="row-content">
+          <tr>
+            <td>
+              <label for="row-enabled-3">3</label>
+              <div>
+                <input type="checkbox" id="row-enabled-3" v-model="order.row3.enabled" />
+              </div>
+            </td>
+            <td>
               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
@@ -81,30 +114,144 @@
               <input type="text" v-model="order.row3.hour" />
             </td>
           </tr>
+          <tr style="height: 255px">
+            <td>
+              <label for="row-enabled-4">4</label>
+              <div>
+                <input type="checkbox" id="row-enabled-4" v-model="order.row4.enabled" />
+              </div>
+            </td>
+            <td>
+              Inne:
+              <br />
+              <textarea id="" cols="30" rows="10" v-model="order.row4.content"></textarea>
+            </td>
+          </tr>
         </tbody>
       </table>
     </section>
+  </section>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent, reactive } from 'vue';
 import { useStore } from '../store/store';
 
+type OrderRowRange = 1 | 2 | 3 | 4;
+
 export default defineComponent({
   name: 'OrderS',
 
   setup() {
     const store = useStore();
+    const order = reactive(store.orderS);
+
+    const rowMethods = [
+      () => {
+        const { header } = order;
+
+        return `<i>Rozkaz pisemny "S" nr ${header.orderNo || '_'} dla ${header.for || '_'} nr ${
+          header.trainNo || '_'
+        } dnia ${header.date || '_'} ${new Date().getUTCFullYear()}r.</i>`;
+      },
+
+      () => {
+        const { row1 } = order;
+
+        let message = `zezwalam po otrzymaniu ${row1.option1 || '_'}`;
+
+        if (row1.radio1 == 'radio-1a-1')
+          message += ` przejechać obok wskazującego sygnał "Stój" semafora ${row1.optionSignal || '_'} ${
+            row1.signal1 || '_'
+          }`;
+        else message += ` wyjechać z toru nr ${row1.trackNo || '_'} nie posiadającego semafora wyjazdowego`;
+
+        return message;
+      },
+
+      () => {
+        const { row2 } = order;
+
+        let message = `zezwalam przejechać obok wskazującego sygnał "Stój" semafora `;
+
+        switch (row2.signalType) {
+          case 'wyjazdowego':
+            message += `wyjazdowego ${row2.signal1 || '_'}`;
+            break;
+          case 'drogowskazowego':
+            message += `drogowskazowego ${row2.signal2 || '_'}`;
+            break;
+          case 'odstępowego':
+            message += `odstępowego ${row2.signal3 || '_'}`;
+            break;
+          case 'toru':
+            message += `wjechać z zamkniętego toru nr ${row2.trackNo || '_'} nie posiadającego semafora wjazdowego`;
+            break;
+
+          default:
+            break;
+        }
+
+        return message;
+      },
+      () => {
+        const { row3 } = order;
+
+        return `Od ${row3.from || '_'} do ${row3.to || '_'} po torze nr ${
+          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 ${
+          row3.trainNo || '_'
+        } przybył do ${row3.arrivedTo || '_'} o godzinie ${row3.hour || '_'}`;
+      },
+
+      () => {
+        const { row4 } = order;
+
+        return `Inne: ${row4.content}`;
+      },
+    ];
+
     return {
+      store,
       order: store.orderS,
+      rowMethods,
     };
   },
+
+  activated() {
+    this.generateMessage();
+  },
+
+  watch: {
+    order: {
+      deep: true,
+      handler() {
+        this.generateMessage();
+      },
+    },
+  },
+
   methods: {
-    chooseRow(index: number) {
-      if (this.order.chosenRows.includes(index))
-        this.order.chosenRows = this.order.chosenRows.filter((rowIndex) => rowIndex != index);
-      else this.order.chosenRows.push(index);
+    generateMessage() {
+      let message = this.rowMethods[0]();
+
+      for (let i = 1; i <= 4; i++) {
+        if (!this.order[`row${i as OrderRowRange}`].enabled) continue;
+
+        message += ` <b> [ ${i} ] </b> ${this.rowMethods[i]()}`;
+      }
+
+      this.store.orderMessage = message;
     },
   },
 });
 </script>
+
+<style lang="scss">
+
+textarea {
+  width: 95%;
+  height: 200px;
+  resize: none;
+}
+</style>

src/store/store.ts

@@ -3,7 +3,7 @@ import { defineStore } from 'pinia';
 export const useStore = defineStore('store', {
   state: () => {
     return {
-      chosenOrderType: 'OrderN',
+      chosenOrderType: 'OrderS',
 
       orderInfo: {
         stationName: '',
@@ -89,15 +89,17 @@ export const useStore = defineStore('store', {
         },
 
         row1: {
-          option1: 'sygnału',
-          checkbox1a: false,
-          checkbox1b: false,
+          enabled: false,
+          option1: 'sygnału "nakaz jazdy"',
+          optionSignal: 'wyjazdowego',
+          radio1: 'radio-1a-1',
           signal1: '',
-          signal2: '',
           trackNo: '',
         },
 
         row2: {
+          enabled: false,
+          signalType: 'wyjazdowego',
           signal1: '',
           signal2: '',
           signal3: '',
@@ -105,6 +107,7 @@ export const useStore = defineStore('store', {
         },
 
         row3: {
+          enabled: false,
           from: '',
           to: '',
           trackNo: '',
@@ -112,6 +115,11 @@ export const useStore = defineStore('store', {
           arrivedTo: '',
           hour: '',
         },
+
+        row4: {
+          enabled: false,
+          content: '',
+        },
       },
     };
   },
@@ -119,3 +127,5 @@ export const useStore = defineStore('store', {
 
 
 
+
+

src/views/Home.vue

@@ -72,7 +72,7 @@ export default defineComponent({
 
 .message_container {
   padding: 0 1em;
-  max-width: 500px;
+  width: 500px;
 
   h3 {
     margin: 0;
@@ -84,6 +84,10 @@ export default defineComponent({
     margin: 0 0.5em;
     font-size: 0.85em;
   }
+
+  @media screen and (max-width: 550px) {
+    max-width: 100%;
+  }
 }
 
 .message_actions {