merge: 'dominik-korsa-links' into development

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="a-block">
+          <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

@@ -63,14 +63,13 @@
           {{ $t('scenery.no-timetables') }}
         </div>
 
-        <div
-          class="timetable-item"
+        <router-link
+          class="timetable-item a-block"
           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,21 +168,20 @@
               </span>
             </span>
           </span>
-        </div>
+        </router-link>
       </transition-group>
     </div>
   </section>
 </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';
 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';
@@ -196,7 +194,7 @@ export default defineComponent({
 
   components: { Loading, ScheduledTrainStatus },
 
-  mixins: [dateMixin, routerMixin, trainCategoryMixin, driverViewMixin],
+  mixins: [dateMixin, routerMixin, trainCategoryMixin],
 
   props: {
     station: {
@@ -391,7 +389,6 @@ export default defineComponent({
 
     background: #353535;
 
-    cursor: pointer;
     z-index: 10;
 
     &.empty {

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

src/components/TrainsView/TrainInfo.vue

@@ -192,17 +192,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
         }
-      });
+      }
     }
   }
 });

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="a-block" :to="train.driverRouteLocation">
+            <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[]>,
@@ -107,7 +103,5 @@ li.train-row {
   background-color: var(--clr-secondary);
   margin-bottom: 1em;
   width: 100%;
-
-  cursor: pointer;
 }
 </style>

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/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(.*)',

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,

src/styles/global.scss

@@ -124,10 +124,12 @@ input {
 }
 
 a {
-  display: inline-block;
-
-  color: white;
   text-decoration: none;
+  color: inherit;
+}
+
+a:not(.a-block):not(.a-button):not(.a-row) {
+  display: inline-block;
 
   transition: color 0.3s;
 
@@ -138,6 +140,14 @@ a {
   }
 }
 
+a.a-block {
+  display: block;
+}
+
+a.a-row {
+  display: table-row;
+}
+
 ul {
   padding: 0;
   list-style: none;
@@ -184,6 +194,7 @@ a.a-button {
   color: white;
   background: none;
   border-radius: 0.25em;
+  text-decoration: none;
 
   display: flex;
   align-items: center;

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;