Replace all remaining uses of driverViewMixin with <router-link>

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);
     }

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: {

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';

src/mixins/driverViewMixin.ts

@@ -1,14 +0,0 @@
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  methods: {
-    driverMixin_showDriverView(id: string) {
-      this.$router.push({
-        name: 'DriverView',
-        query: {
-          trainId: id
-        }
-      });
-    }
-  }
-});

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;