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

@@ -19,9 +19,9 @@
   <section class="table-section">
     <table class="options-table">
       <tbody>
-          <tr>
-            <td>1</td>
-            <td>
+        <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>
@@ -39,7 +39,9 @@
                 (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">
@@ -50,9 +52,9 @@
           </td>
         </tr>
 
-          <tr>
-            <td>2</td>
-            <td>
+        <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>
@@ -68,13 +70,15 @@
           </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" />
+        <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>
@@ -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: '',