Interakcja wyboru rubryki

src/components/Order.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="rozkaz">
     <OrderN v-if="orderType == 'N'" />
-    <OrderS v-if="orderType == 'S'"/>
+    <OrderS v-if="orderType == 'S'" />
 
     <section class="info">
       <table class="info-table">
@@ -77,6 +77,8 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
+@import '../styles/global.scss';
+
 .rozkaz {
   width: 500px;
   background-color: white;
@@ -172,4 +174,38 @@ 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;
+  }
+
+  &.chosen > .row-number {
+    color: red;
+  }
+
+  &:hover {
+    outline: 3px solid red;
+
+    & td.row-number {
+      color: red;
+    }
+  }
+}
 </style>

src/components/OrderS.vue

@@ -1,85 +1,89 @@
 <template>
-    <section class="header">
-      <h2 class="flex-center">
-        Rozkaz pisemny "S" nr
-        <input type="text" v-model="order.header.orderNo" />
-      </h2>
+  <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>
+    <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>1</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>
-              </select>
+  <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" />
-                  <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">
-                  wyjechać z toru nr <input type="text" v-model="order.row1.trackNo" /> nie posiadającego semafora
-                  wyjazdowego
-                </label>
-              </div>
-            </td>
-          </tr>
+            <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" />
+                <br />
+                drogowskazowego <input type="text" v-model="order.row1.signal2" />
+                <br />
+                (odnoszącego się do wyjazdu pociągu)
+              </label>
+            </div>
 
-          <tr>
-            <td>2</td>
-            <td>
-              zezwalam przejechać obok wskazującego sygnał "Stój" semafora:
+            <hr />
 
-              <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>
+            <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>
-            <td>3</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>
-        </tbody>
-      </table>
-    </section>
+        <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>
+  </section>
 </template>
 
 <script lang="ts">
@@ -93,5 +97,12 @@ export default defineComponent({
       order: store.orderS,
     };
   },
+  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);
+    },
+  },
 });
 </script>

src/store/store.ts

@@ -60,6 +60,8 @@ export const useStore = defineStore('store', {
       },
 
       orderS: {
+        chosenRows: [1],
+
         header: {
           orderNo: '',
           trainNo: '',