From f953d8fe7fd3a393dab18845e1a00a1bb1149413 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Wed, 20 Jul 2022 19:19:54 +0200
Subject: [PATCH] Rozkaz S

---
 src/components/Order.vue  |  50 ++---
 src/components/OrderN.vue | 423 +++++++++++++++++++-------------------
 src/components/OrderS.vue | 321 +++++++++++++++++++++--------
 src/store/store.ts        |  20 +-
 src/views/Home.vue        |   6 +-
 5 files changed, 482 insertions(+), 338 deletions(-)

diff --git a/src/components/Order.vue b/src/components/Order.vue
index 450a6fb..50b4428 100644
--- a/src/components/Order.vue
+++ b/src/components/Order.vue
@@ -1,8 +1,10 @@
 <template>
   <div class="rozkaz">
-    <keep-alive>
-      <component :is="chosenOrderComponent"></component>
-    </keep-alive>
+    <transition name="order-anim" mode="out-in">
+      <keep-alive>
+        <component :is="chosenOrderComponent"></component>
+      </keep-alive>
+    </transition>
 
     <section class="info">
       <table class="info-table">
@@ -103,7 +105,7 @@ export default defineComponent({
   }
 
   @media screen and (max-width: 550px) {
-   font-size: 3vw;
+    font-size: 3vw;
   }
 }
 
@@ -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>
diff --git a/src/components/OrderN.vue b/src/components/OrderN.vue
index efda8c5..665974d 100644
--- a/src/components/OrderN.vue
+++ b/src/components/OrderN.vue
@@ -1,207 +1,208 @@
 <template>
-  <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>
-        <tr>
-          <td>
-            <label for="row-enabled-1">1</label>
-            <div>
-              <input type="checkbox" id="row-enabled-1" v-model="order.row1.enabled" />
-            </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>
-        </tr>
-
-        <tr>
-          <td>
-            <label for="row-enabled-2">2</label>
-            <div>
-              <input type="checkbox" id="row-enabled-2" v-model="order.row2.enabled" />
-            </div>
-          </td>
-          <td>
-            <strong>ZEZWALAM</strong> po otrzymaniu
-            <select id="select-2a" v-model="order.row2.option1">
-              <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"
-                name="section-2"
-                id="checkbox-2a"
-                value="checkbox-2a"
-                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"
-                    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="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
-                  >
-                </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>
-                  <option value="prawy">prawy</option>
-                </select>
-                nr <input type="text" v-model="order.row2.trackNoTo1" />
-              </label>
-            </div>
-
-            <div style="margin-top: 0.5rem">
-              <input
-                type="radio"
-                name="section-2"
-                id="checkbox-2b"
-                value="checkbox-2b"
-                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
-                <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" />
-              </label>
-            </div>
-          </td>
-        </tr>
-
-        <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>
-            <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
-            <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" />
-          </td>
-        </tr>
-
-        <tr>
-          <td>
-            <label for="row-enabled-4">4</label>
-            <div>
-              <input type="checkbox" id="row-enabled-4" v-model="order.row4.enabled" />
-            </div>
-          </td>
-          <td>
-            <strong>WJAZD</strong> z toru szlakowego nr <input type="text" v-model="order.row4.trackNo" /> 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:
-
-            <div style="margin-top: 0.5rem">
-              <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">
-                  <option value="lewej">lewej</option>
-                  <option value="prawej">prawej</option>
-                </select>
-                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" />
-              <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>
-            <div>
-              <input type="checkbox" id="row-enabled-5" v-model="order.row5.enabled" />
-            </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
-            <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" />
-          </td>
-        </tr>
-      </tbody>
-    </table>
+  <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>
+          <tr>
+            <td>
+              <label for="row-enabled-1">1</label>
+              <div>
+                <input type="checkbox" id="row-enabled-1" v-model="order.row1.enabled" />
+              </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>
+          </tr>
+          <tr>
+            <td>
+              <label for="row-enabled-2">2</label>
+              <div>
+                <input type="checkbox" id="row-enabled-2" v-model="order.row2.enabled" />
+              </div>
+            </td>
+            <td>
+              <strong>ZEZWALAM</strong> po otrzymaniu
+              <select id="select-2a" v-model="order.row2.option1">
+                <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"
+                  name="section-2"
+                  id="checkbox-2a"
+                  value="checkbox-2a"
+                  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"
+                      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="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
+                    >
+                  </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>
+                    <option value="prawy">prawy</option>
+                  </select>
+                  nr <input type="text" v-model="order.row2.trackNoTo1" />
+                </label>
+              </div>
+              <div style="margin-top: 0.5rem">
+                <input
+                  type="radio"
+                  name="section-2"
+                  id="checkbox-2b"
+                  value="checkbox-2b"
+                  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
+                  <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" />
+                </label>
+              </div>
+            </td>
+          </tr>
+          <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>
+              <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
+              <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" />
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <label for="row-enabled-4">4</label>
+              <div>
+                <input type="checkbox" id="row-enabled-4" v-model="order.row4.enabled" />
+              </div>
+            </td>
+            <td>
+              <strong>WJAZD</strong> z toru szlakowego nr <input type="text" v-model="order.row4.trackNo" /> 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:
+              <div style="margin-top: 0.5rem">
+                <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">
+                    <option value="lewej">lewej</option>
+                    <option value="prawej">prawej</option>
+                  </select>
+                  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"
+                />
+                <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>
+              <div>
+                <input type="checkbox" id="row-enabled-5" v-model="order.row5.enabled" />
+              </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
+              <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" />
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </section>
   </section>
 </template>
 
@@ -213,7 +214,7 @@ type OrderRowRange = 1 | 2 | 3 | 4 | 5;
 
 export default defineComponent({
   name: 'OrderN',
-  
+
   setup() {
     const store = useStore();
     const order = reactive(store.orderN);
@@ -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>
diff --git a/src/components/OrderS.vue b/src/components/OrderS.vue
index bec9ece..e571564 100644
--- a/src/components/OrderS.vue
+++ b/src/components/OrderS.vue
@@ -1,110 +1,257 @@
 <template>
-  <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">
-        <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.
-    </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">
-            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>
-            </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="text" v-model="order.row1.signal1" />
+  <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">
+          <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.
+      </div>
+    </section>
+    <section class="table-section">
+      <table class="options-table">
+        <tbody>
+          <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 "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" 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 />
+                </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
+                </label>
+              </div>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <label for="row-enabled-2">2</label>
+              <div>
+                <input type="checkbox" id="row-enabled-2" v-model="order.row2.enabled" />
+              </div>
+            </td>
+            <td>
+              zezwalam przejechać obok wskazującego sygnał "Stój" semafora:
+              <div>
+                <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 />
-                drogowskazowego <input type="text" v-model="order.row1.signal2" />
+                <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 />
-                (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">
-                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>
-            <div>
-              - drogowskazowego <input type="text" v-model="order.row2.signal2" />
-              <div>&nbsp;&nbsp;(odnoszącego się do wjazdu pociągu)</div>
-            </div>
-            <div>- odstępowego <input type="text" v-model="order.row2.signal3" /></div>
-            <div>
-              - wjechać z zamkniętego toru nr <input type="text" v-model="order.row2.trackNo" /> nie posiadającego
-              semafora wjazdowego
-            </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">
-            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" />
-          </td>
-        </tr>
-      </tbody>
-    </table>
+                <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>
+            <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
+              "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" />
+            </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>
diff --git a/src/store/store.ts b/src/store/store.ts
index 8ae59c5..d590ef8 100644
--- a/src/store/store.ts
+++ b/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', {
 
 
 
+
+
diff --git a/src/views/Home.vue b/src/views/Home.vue
index cab494c..b069e12 100644
--- a/src/views/Home.vue
+++ b/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 {