From a818cd980ba965c673cebfb11452e252dc0b083e Mon Sep 17 00:00:00 2001
From: dominik-korsa <29484605+dominik-korsa@users.noreply.github.com>
Date: Wed, 21 Aug 2024 12:58:47 +0200
Subject: [PATCH 1/5] Use <router-link> instead of a @click handler in
 TrainTable

---
 src/components/TrainsView/TrainTable.vue | 23 ++++++++++++++---------
 src/styles/global.scss                   |  9 ++++++++-
 2 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/src/components/TrainsView/TrainTable.vue b/src/components/TrainsView/TrainTable.vue
index e7de17b..505361a 100644
--- a/src/components/TrainsView/TrainTable.vue
+++ b/src/components/TrainsView/TrainTable.vue
@@ -17,11 +17,10 @@
           class="train-row"
           v-for="train in trains"
           :key="train.id"
-          tabindex="0"
-          @click.stop="driverMixin_showDriverView(train.id)"
-          @keydown.enter="driverMixin_showDriverView(train.id)"
         >
-          <TrainInfo :train="train" :extended="false" />
+          <router-link class="block-link" :to="getTrainRoute(train.id)">
+            <TrainInfo :train="train" :extended="false" />
+          </router-link>
         </li>
       </transition-group>
     </div>
@@ -35,13 +34,10 @@ import Loading from '../Global/Loading.vue';
 import TrainInfo from './TrainInfo.vue';
 import { Status, Train } from '../../typings/common';
 import { useApiStore } from '../../store/apiStore';
-import driverViewMixin from '../../mixins/driverViewMixin';
 
 export default defineComponent({
   components: { Loading, TrainInfo },
 
-  mixins: [driverViewMixin],
-
   props: {
     trains: {
       type: Array as PropType<Train[]>,
@@ -68,6 +64,17 @@ export default defineComponent({
     };
   },
 
+  methods: {
+    getTrainRoute(trainId: string) {
+      return {
+        name: 'DriverView',
+        query: {
+          trainId,
+        }
+      }
+    }
+  },
+
   computed: {
     dataStatus() {
       if (this.store.isOffline) return Status.Data.Offline;
@@ -107,7 +114,5 @@ li.train-row {
   background-color: var(--clr-secondary);
   margin-bottom: 1em;
   width: 100%;
-
-  cursor: pointer;
 }
 </style>
diff --git a/src/styles/global.scss b/src/styles/global.scss
index 4307443..3abd59a 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -123,7 +123,7 @@ input {
   border-radius: 50%;
 }
 
-a {
+a:not(.block-link) {
   display: inline-block;
 
   color: white;
@@ -138,6 +138,13 @@ a {
   }
 }
 
+a.block-link {
+  display: block;
+
+  color: inherit;
+  text-decoration: none;
+}
+
 ul {
   padding: 0;
   list-style: none;

From 9837ae97e1e09723d26b201dc55be5373459e8d1 Mon Sep 17 00:00:00 2001
From: dominik-korsa <29484605+dominik-korsa@users.noreply.github.com>
Date: Wed, 21 Aug 2024 13:29:53 +0200
Subject: [PATCH 2/5] Use <router-link> instead of a @click handler in
 SceneryTimetable

---
 src/components/SceneryView/SceneryTimetable.vue | 12 +++++-------
 src/components/TrainsView/TrainTable.vue        | 13 +------------
 src/router/index.ts                             |  4 ++--
 src/store/mainStore.ts                          |  7 +++++++
 src/typings/common.ts                           |  4 ++++
 5 files changed, 19 insertions(+), 21 deletions(-)

diff --git a/src/components/SceneryView/SceneryTimetable.vue b/src/components/SceneryView/SceneryTimetable.vue
index acd0c9e..c61c7e4 100644
--- a/src/components/SceneryView/SceneryTimetable.vue
+++ b/src/components/SceneryView/SceneryTimetable.vue
@@ -63,14 +63,13 @@
           {{ $t('scenery.no-timetables') }}
         </div>
 
-        <div
-          class="timetable-item"
+        <router-link
+          class="timetable-item block-link"
           v-else
           v-for="(row, i) in sceneryTimetables"
           :key="row.train.id + i"
           tabindex="0"
-          @click.prevent.stop="driverMixin_showDriverView(row.train.id)"
-          @keydown.enter.prevent="driverMixin_showDriverView(row.train.id)"
+          :to="row.train.driverRouteLocation"
         >
           <span class="timetable-general">
             <span class="general-info">
@@ -169,7 +168,7 @@
               </span>
             </span>
           </span>
-        </div>
+        </router-link>
       </transition-group>
     </div>
   </section>
@@ -196,7 +195,7 @@ export default defineComponent({
 
   components: { Loading, ScheduledTrainStatus },
 
-  mixins: [dateMixin, routerMixin, trainCategoryMixin, driverViewMixin],
+  mixins: [dateMixin, routerMixin, trainCategoryMixin],
 
   props: {
     station: {
@@ -391,7 +390,6 @@ export default defineComponent({
 
     background: #353535;
 
-    cursor: pointer;
     z-index: 10;
 
     &.empty {
diff --git a/src/components/TrainsView/TrainTable.vue b/src/components/TrainsView/TrainTable.vue
index 505361a..2be3642 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="getTrainRoute(train.id)">
+          <router-link class="block-link" :to="train.driverRouteLocation">
             <TrainInfo :train="train" :extended="false" />
           </router-link>
         </li>
@@ -64,17 +64,6 @@ export default defineComponent({
     };
   },
 
-  methods: {
-    getTrainRoute(trainId: string) {
-      return {
-        name: 'DriverView',
-        query: {
-          trainId,
-        }
-      }
-    }
-  },
-
   computed: {
     dataStatus() {
       if (this.store.isOffline) return Status.Data.Offline;
diff --git a/src/router/index.ts b/src/router/index.ts
index 49cd8e1..524bc0b 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -7,7 +7,7 @@ const routes: Array<RouteRecordRaw> = [
     component: () => import('../views/StationsView.vue'),
     props: (route) => ({
       region: route.query.region
-    })
+    }),
   },
   {
     path: '/trains',
@@ -55,7 +55,7 @@ const routes: Array<RouteRecordRaw> = [
     component: () => import('../views/JournalDispatchers.vue'),
     props: (route) => ({
       region: route.query.region
-    })
+    }),
   },
   {
     path: '/:catchAll(.*)',
diff --git a/src/store/mainStore.ts b/src/store/mainStore.ts
index 129e5bb..1434165 100644
--- a/src/store/mainStore.ts
+++ b/src/store/mainStore.ts
@@ -86,6 +86,13 @@ export const useMainStore = defineStore('mainStore', {
             isSupporter: train.driverIsSupporter,
             driverLevel: train.driverLevel,
 
+            driverRouteLocation: {
+              name: 'DriverView',
+              query: {
+                trainId: train.id
+              }
+            },
+
             timetableData: timetable
               ? {
                   timetableId: timetable.timetableId,
diff --git a/src/typings/common.ts b/src/typings/common.ts
index a8e049a..97f7ad4 100644
--- a/src/typings/common.ts
+++ b/src/typings/common.ts
@@ -1,3 +1,5 @@
+import { RouteLocationRaw } from 'vue-router';
+
 export type Availability = 'default' | 'unavailable' | 'nonPublic' | 'abandoned' | 'nonDefault';
 export type ScenerySpawnType = 'passenger' | 'freight' | 'loco' | 'all';
 
@@ -70,6 +72,8 @@ export interface Train {
   isTimeout: boolean;
   isSupporter: boolean;
 
+  driverRouteLocation: RouteLocationRaw,
+
   timetableData?: {
     timetableId: number;
     category: string;

From 462dd7dd7a35acd0fa89c681d98cbd575753b8b2 Mon Sep 17 00:00:00 2001
From: dominik-korsa <29484605+dominik-korsa@users.noreply.github.com>
Date: Wed, 21 Aug 2024 13:49:31 +0200
Subject: [PATCH 3/5] Replace all remaining uses of driverViewMixin with
 <router-link>

---
 .../JournalTimetables/TimetableDetails.vue    | 29 ++++++++++---------
 .../SceneryInfo/SceneryInfoUserList.vue       | 13 ++++-----
 .../SceneryView/SceneryTimetable.vue          |  1 -
 src/mixins/driverViewMixin.ts                 | 14 ---------
 src/styles/global.scss                        |  3 +-
 5 files changed, 23 insertions(+), 37 deletions(-)
 delete mode 100644 src/mixins/driverViewMixin.ts

diff --git a/src/components/JournalView/JournalTimetables/TimetableDetails.vue b/src/components/JournalView/JournalTimetables/TimetableDetails.vue
index 86687bd..a81f12b 100644
--- a/src/components/JournalView/JournalTimetables/TimetableDetails.vue
+++ b/src/components/JournalView/JournalTimetables/TimetableDetails.vue
@@ -6,14 +6,14 @@
         <img :src="`/images/icon-arrow-${showExtraInfo ? 'asc' : 'desc'}.svg`" alt="Arrow icon" />
       </button>
 
-      <button
-        v-if="timetable.terminated == false"
-        class="btn--action btn-timetable"
-        @click.stop="showTimetable(timetable, $event.currentTarget)"
+      <router-link
+        v-if="driverRouteLocation !== null"
+        class="a-button btn--action btn-timetable"
+        :to="driverRouteLocation"
       >
         <img src="/images/icon-train.svg" alt="train icon" />
         <b>{{ $t('journal.timetable-online-button') }}</b>
-      </button>
+      </router-link>
     </div>
 
     <div class="details-body" v-if="timetable.stockString && timetable.stockMass && showExtraInfo">
@@ -86,13 +86,11 @@
 import { PropType, defineComponent } from 'vue';
 import StockList from '../../Global/StockList.vue';
 import { API } from '../../../typings/api';
-import driverViewMixin from '../../../mixins/driverViewMixin';
+import { RouteLocationRaw } from 'vue-router';
 
 export default defineComponent({
   components: { StockList },
 
-  mixins: [driverViewMixin],
-
   emits: ['toggleExtraInfo'],
 
   props: {
@@ -127,6 +125,15 @@ export default defineComponent({
             stockLength: Number(historyData[3]) || undefined
           };
         });
+    },
+    driverRouteLocation(): RouteLocationRaw | null {
+      if (this.timetable.terminated) return null;
+      return {
+        name: 'DriverView',
+        query: {
+          trainId: `${this.timetable.driverId}|${this.timetable.trainNo}|eu`
+        }
+      }
     }
   },
   methods: {
@@ -135,12 +142,6 @@ export default defineComponent({
       imageEl.src = '/images/icon-unknown.png';
     },
 
-    showTimetable(timetable: API.TimetableHistory.Data, target: EventTarget | null) {
-      if (timetable?.terminated) return;
-
-      this.driverMixin_showDriverView(`${timetable.driverId}|${timetable.trainNo}|eu`);
-    },
-
     toggleExtraInfo() {
       this.$emit('toggleExtraInfo', this.timetable.id);
     }
diff --git a/src/components/SceneryView/SceneryInfo/SceneryInfoUserList.vue b/src/components/SceneryView/SceneryInfo/SceneryInfoUserList.vue
index 4e9ffd0..c4a377c 100644
--- a/src/components/SceneryView/SceneryInfo/SceneryInfoUserList.vue
+++ b/src/components/SceneryView/SceneryInfo/SceneryInfoUserList.vue
@@ -18,11 +18,11 @@
         tabindex="0"
         :key="train.id"
         :data-status="status"
-        @click.prevent="driverMixin_showDriverView(train.id)"
-        @keydown.enter="driverMixin_showDriverView(train.id)"
       >
-        <span class="user_train">{{ train.trainNo }}</span>
-        <span class="user_name">{{ train.driverName }}</span>
+        <router-link :to="train.driverRouteLocation" class="block-link">
+          <span class="user_train">{{ train.trainNo }}</span>
+          <span class="user_name">{{ train.driverName }}</span>
+        </router-link>
       </li>
     </transition-group>
   </section>
@@ -31,13 +31,12 @@
 <script lang="ts">
 import { PropType, defineComponent } from 'vue';
 import routerMixin from '../../../mixins/routerMixin';
-import { ActiveScenery, Station, StopStatus } from '../../../typings/common';
+import { ActiveScenery, Station } from '../../../typings/common';
 import { getTrainStopStatus } from '../utils';
 import { useMainStore } from '../../../store/mainStore';
-import driverViewMixin from '../../../mixins/driverViewMixin';
 
 export default defineComponent({
-  mixins: [routerMixin, driverViewMixin],
+  mixins: [routerMixin],
 
   props: {
     onlineScenery: {
diff --git a/src/components/SceneryView/SceneryTimetable.vue b/src/components/SceneryView/SceneryTimetable.vue
index c61c7e4..ec1eb47 100644
--- a/src/components/SceneryView/SceneryTimetable.vue
+++ b/src/components/SceneryView/SceneryTimetable.vue
@@ -182,7 +182,6 @@ import Loading from '../Global/Loading.vue';
 import dateMixin from '../../mixins/dateMixin';
 import routerMixin from '../../mixins/routerMixin';
 import trainCategoryMixin from '../../mixins/trainCategoryMixin';
-import driverViewMixin from '../../mixins/driverViewMixin';
 import { useMainStore } from '../../store/mainStore';
 import { useApiStore } from '../../store/apiStore';
 import ScheduledTrainStatus from './ScheduledTrainStatus.vue';
diff --git a/src/mixins/driverViewMixin.ts b/src/mixins/driverViewMixin.ts
deleted file mode 100644
index 2bd75c1..0000000
--- a/src/mixins/driverViewMixin.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  methods: {
-    driverMixin_showDriverView(id: string) {
-      this.$router.push({
-        name: 'DriverView',
-        query: {
-          trainId: id
-        }
-      });
-    }
-  }
-});
diff --git a/src/styles/global.scss b/src/styles/global.scss
index 3abd59a..cd55b7f 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -123,7 +123,7 @@ input {
   border-radius: 50%;
 }
 
-a:not(.block-link) {
+a:not(.block-link):not(.a-button) {
   display: inline-block;
 
   color: white;
@@ -191,6 +191,7 @@ a.a-button {
   color: white;
   background: none;
   border-radius: 0.25em;
+  text-decoration: none;
 
   display: flex;
   align-items: center;

From 41e4b4559917e93e50b793cf37c2329da631939d Mon Sep 17 00:00:00 2001
From: dominik-korsa <29484605+dominik-korsa@users.noreply.github.com>
Date: Wed, 21 Aug 2024 13:54:48 +0200
Subject: [PATCH 4/5] Use <router-link> for driver journal button in TrainInfo

---
 src/components/TrainsView/TrainInfo.vue | 15 ++++++---------
 1 file changed, 6 insertions(+), 9 deletions(-)

diff --git a/src/components/TrainsView/TrainInfo.vue b/src/components/TrainsView/TrainInfo.vue
index b387049..bf5fbe0 100644
--- a/src/components/TrainsView/TrainInfo.vue
+++ b/src/components/TrainsView/TrainInfo.vue
@@ -49,12 +49,12 @@
         </div>
 
         <div class="top-bar-controls" v-if="extended">
-          <button class="btn-timetable btn--image btn--action" @click="navigateToJournal">
+          <router-link class="a-button btn-timetable btn--image btn--action" :to="journalRouteLocation">
             <img src="/images/icon-train.svg" alt="train icon" />
             <span>
               {{ $t('trains.journal-button') }}
             </span>
-          </button>
+          </router-link>
         </div>
       </div>
 
@@ -200,17 +200,14 @@ export default defineComponent({
 
         return Math.min(vehicleSpeed, acc);
       }, 300);
-    }
-  },
-
-  methods: {
-    navigateToJournal() {
-      this.$router.push({
+    },
+    journalRouteLocation() {
+      return {
         path: '/journal/timetables',
         query: {
           'search-driver': this.train.driverName
         }
-      });
+      }
     }
   }
 });

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 5/5] 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 {