From 81cd165fe7f0b534fd0d4c3008a7f62321476d6a Mon Sep 17 00:00:00 2001
From: dominik-korsa <29484605+dominik-korsa@users.noreply.github.com>
Date: Wed, 21 Aug 2024 14:41:11 +0200
Subject: [PATCH] Use <router-link> instead of <tr> with click handler in
 StationTable

---
 .../SceneryInfo/SceneryInfoUserList.vue       |  2 +-
 .../SceneryView/SceneryTimetable.vue          |  4 +--
 src/components/StationsView/StationTable.vue  | 28 ++++++++-----------
 src/components/TrainsView/TrainTable.vue      |  2 +-
 src/styles/global.scss                        | 17 ++++++-----
 5 files changed, 26 insertions(+), 27 deletions(-)

diff --git a/src/components/SceneryView/SceneryInfo/SceneryInfoUserList.vue b/src/components/SceneryView/SceneryInfo/SceneryInfoUserList.vue
index c4a377c..375c528 100644
--- a/src/components/SceneryView/SceneryInfo/SceneryInfoUserList.vue
+++ b/src/components/SceneryView/SceneryInfo/SceneryInfoUserList.vue
@@ -19,7 +19,7 @@
         :key="train.id"
         :data-status="status"
       >
-        <router-link :to="train.driverRouteLocation" class="block-link">
+        <router-link :to="train.driverRouteLocation" class="a-block">
           <span class="user_train">{{ train.trainNo }}</span>
           <span class="user_name">{{ train.driverName }}</span>
         </router-link>
diff --git a/src/components/SceneryView/SceneryTimetable.vue b/src/components/SceneryView/SceneryTimetable.vue
index ec1eb47..3dc53d0 100644
--- a/src/components/SceneryView/SceneryTimetable.vue
+++ b/src/components/SceneryView/SceneryTimetable.vue
@@ -64,7 +64,7 @@
         </div>
 
         <router-link
-          class="timetable-item block-link"
+          class="timetable-item a-block"
           v-else
           v-for="(row, i) in sceneryTimetables"
           :key="row.train.id + i"
@@ -175,7 +175,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, ref, watch } from 'vue';
+import { computed, defineComponent, PropType, ref } from 'vue';
 import { useRoute } from 'vue-router';
 
 import Loading from '../Global/Loading.vue';
diff --git a/src/components/StationsView/StationTable.vue b/src/components/StationsView/StationTable.vue
index c49a0e5..9296853 100644
--- a/src/components/StationsView/StationTable.vue
+++ b/src/components/StationsView/StationTable.vue
@@ -52,15 +52,15 @@
       </thead>
 
       <tbody>
-        <tr
+        <router-link
           v-for="station in filteredStationList"
-          :class="{ 'last-selected': lastSelectedStationName == station.name }"
+          class="a-row"
+          role="row"
           :key="station.name"
-          @click.left="setScenery(station.name)"
-          @click.right="openForumSite($event, station.generalInfo?.url)"
-          @keydown.enter="setScenery(station.name)"
-          @keydown.space="openForumSite($event, station.generalInfo?.url)"
+          @click.right.prevent="openForumSite($event, station.generalInfo?.url)"
+          @keydown.space.prevent="openForumSite($event, station.generalInfo?.url)"
           tabindex="0"
+          :to="getSceneryRoute(station.name)"
         >
           <td class="station-name" :class="station.generalInfo?.availability">
             <b v-if="station.generalInfo?.project" style="color: salmon">{{
@@ -294,7 +294,7 @@
           >
             {{ station.onlineInfo?.scheduledTrainCount.confirmed ?? '-' }}
           </td>
-        </tr>
+        </router-link>
       </tbody>
     </table>
 
@@ -334,7 +334,6 @@ export default defineComponent({
   data: () => ({
     headIconsIds,
     headIds,
-    lastSelectedStationName: '',
     getChangedFilters
   }),
 
@@ -364,21 +363,18 @@ export default defineComponent({
   },
 
   methods: {
-    setScenery(name: string) {
+    getSceneryRoute(name: string) {
       const station = this.filteredStationList.find((station) => station.name === name);
 
-      if (!station) return;
+      // TODO: Hide tooltips when navigating away
 
-      this.lastSelectedStationName = station.name;
-      this.tooltipStore.hide();
-
-      this.$router.push({
+      return {
         name: 'SceneryView',
         query: {
           station: station.name,
           region: this.$route.query.region || undefined
         }
-      });
+      };
     },
 
     openDonationCard(e: Event) {
@@ -503,7 +499,7 @@ table {
   }
 }
 
-tr {
+tr, .a-row {
   background-color: $rowCol;
 
   &:nth-child(even) {
diff --git a/src/components/TrainsView/TrainTable.vue b/src/components/TrainsView/TrainTable.vue
index 2be3642..acb7c20 100644
--- a/src/components/TrainsView/TrainTable.vue
+++ b/src/components/TrainsView/TrainTable.vue
@@ -18,7 +18,7 @@
           v-for="train in trains"
           :key="train.id"
         >
-          <router-link class="block-link" :to="train.driverRouteLocation">
+          <router-link class="a-block" :to="train.driverRouteLocation">
             <TrainInfo :train="train" :extended="false" />
           </router-link>
         </li>
diff --git a/src/styles/global.scss b/src/styles/global.scss
index cd55b7f..69f9f96 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -123,11 +123,13 @@ input {
   border-radius: 50%;
 }
 
-a:not(.block-link):not(.a-button) {
-  display: inline-block;
-
-  color: white;
+a {
   text-decoration: none;
+  color: inherit;
+}
+
+a:not(.a-block):not(.a-button):not(.a-row) {
+  display: inline-block;
 
   transition: color 0.3s;
 
@@ -138,11 +140,12 @@ a:not(.block-link):not(.a-button) {
   }
 }
 
-a.block-link {
+a.a-block {
   display: block;
+}
 
-  color: inherit;
-  text-decoration: none;
+a.a-row {
+  display: table-row;
 }
 
 ul {