chore(scenery): advanced active train tooltip information

src/components/SceneryView/SceneryTimetable.vue

@@ -124,7 +124,7 @@
                 <!-- Train info -->
                 <span
                   data-tooltip-type="TrainInfoTooltip"
-                  :data-tooltip-content="JSON.stringify(row.train)"
+                  :data-tooltip-content="row.train.id"
                   class="tooltip-help"
                 >
                   <b class="text--primary">
@@ -239,7 +239,7 @@ import { useMainStore } from '../../store/mainStore';
 import { useApiStore } from '../../store/apiStore';
 import ScheduledTrainStatus from './ScheduledTrainStatus.vue';
 import { SceneryTimetableRow } from './typings';
-import { ActiveScenery, Station, Train } from '../../typings/common';
+import { ActiveScenery, Station, TooltipTrainInfo, Train } from '../../typings/common';
 import { getTrainStopStatus, stopStatusPriority } from './utils';
 
 export default defineComponent({

src/components/StationsView/StationTable.vue

@@ -248,9 +248,7 @@
             class="station-users"
             :class="{ inactive: !station.onlineInfo }"
             data-tooltip-type="UsersTooltip"
-            :data-tooltip-content="
+            :data-tooltip-content="getUsersTooltipContent(station.onlineInfo?.stationTrains ?? [])"
-              JSON.stringify(getStationUsersTrains(station.onlineInfo?.stationTrains ?? []))
-            "
           >
             <span class="text--primary">{{
               station.onlineInfo?.stationTrains?.length ?? '-'
@@ -398,11 +396,13 @@ export default defineComponent({
       this.activeSorter.headerName = headerName;
     },
 
-    getStationUsersTrains(stationTrains: Train[]): TooltipUserTrain[] {
+    getUsersTooltipContent(stationTrains: Train[]): string {
-      return stationTrains.map((train) => ({
+      const usersTrains: TooltipUserTrain[] = stationTrains.map((train) => ({
         driverName: train.driverName,
         trainNo: train.trainNo
       }));
+
+      return JSON.stringify(usersTrains);
     }
   }
 });

src/components/Tooltip/TrainInfoTooltip.vue

@@ -1,37 +1,49 @@
 <template>
   <div class="tooltip-content">
-    <span v-if="trainInfoObj">
+    <span v-if="trainInfo">
-      {{ trainInfoObj.driverName }}
+      <b v-if="trainInfo.timetableData" style="text-transform: uppercase">
+        {{ getCategoryExplanation(trainInfo.timetableData.category) }}
+      </b>
+
+      <div class="text--primary">
+        <b>{{ trainInfo.stockList[0] }}</b> &bull;
+        {{ trainInfo.length }}m &bull; {{ (trainInfo.mass / 1000).toFixed(2) }}t &bull;
+        {{ trainInfo.speed }}km/h
+      </div>
+
+      <div class="text--grayed">{{ displayTrainPosition(trainInfo) }}</div>
     </span>
   </div>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts">
-import { computed } from 'vue';
+import { defineComponent } from 'vue';
 import { useTooltipStore } from '../../store/tooltipStore';
-import { Train } from '../../typings/common';
+import trainCategoryMixin from '../../mixins/trainCategoryMixin';
+import trainInfoMixin from '../../mixins/trainInfoMixin';
+import { useMainStore } from '../../store/mainStore';
 
-const tooltipStore = useTooltipStore();
+export default defineComponent({
+  mixins: [trainCategoryMixin, trainInfoMixin],
 
-const trainInfoObj = computed(() => {
+  data: () => ({
-  if (tooltipStore.content == '') return null;
+    tooltipStore: useTooltipStore(),
+    mainStore: useMainStore()
+  }),
 
-  try {
+  computed: {
-    return (JSON.parse(tooltipStore.content) as Train) ?? null;
+    trainInfo() {
-  } catch (error) {
+      if (this.tooltipStore.content == '') return null;
-    return null;
+
+      // Passed "content" string should be the desired train's ID
+      return this.mainStore.trainList.find((t) => t.id === this.tooltipStore.content);
+    }
   }
 });
 </script>
 
 <style lang="scss" scoped>
 .tooltip-content {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 0.5em;
-  white-space: pre-line;
-
   padding: 0.25em 0.5em;
   border-radius: 0.25em;
 

src/store/tooltipStore.ts

@@ -34,6 +34,7 @@ export const useTooltipStore = defineStore('tooltipStore', {
       this.content = '';
     },
 
+    // Tooltip handler reading attributes of DOM elements
     handle(e: MouseEvent) {
       const targetEl = e
         .composedPath()
@@ -45,6 +46,7 @@ export const useTooltipStore = defineStore('tooltipStore', {
         return;
       }
 
+      // Tooltip content is a string but may be parsed to objects / html in corresponding tooltip type components
       const tooltipType = targetEl.getAttribute('data-tooltip-type');
       const tooltipContent = targetEl.getAttribute('data-tooltip-content');
 

src/typings/common.ts

@@ -272,5 +272,6 @@ export interface TooltipTrainInfo {
   currentStationName: string;
   currentStationHash: string;
   headVehicleName: string;
-  stockLength: number;
+  stockCount: number;
+  trainTimetableCategory?: string;
 }