chore: added & optimized users tooltip data typings

src/components/SceneryView/SceneryTimetable.vue

@@ -122,28 +122,24 @@
                 </span>
 
                 <!-- Train info -->
-                <span>
+                <span
-                  <b
+                  data-tooltip-type="TrainInfoTooltip"
-                    data-tooltip-type="BaseTooltip"
+                  :data-tooltip-content="JSON.stringify(row.train)"
-                    :data-tooltip-content="
+                  class="tooltip-help"
-                      getCategoryExplanation(row.train.timetableData!.category)
+                >
-                    "
+                  <b class="text--primary">
-                    class="text--primary tooltip-help"
-                  >
                     {{ row.train.timetableData!.category }}
                   </b>
 
                   <b>&nbsp;{{ row.train.trainNo }}</b>
+                  &bull;
+                  {{ row.train.driverName }}
                 </span>
-                <span>&bull;</span>
-                <span>{{ row.train.driverName }}</span>
-                <span>&bull;</span>
-                <b style="color: #ddd">{{ row.train.stockList[0] }}</b>
 
                 <!-- Train stop comments -->
                 <span
-                  class="stop-comments-icon"
                   v-if="row.checkpointStop.comments"
+                  class="stop-comments-icon"
                   data-tooltip-type="BaseTooltip"
                   :data-tooltip-content="row.checkpointStop.comments"
                 >
@@ -243,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 } from '../../typings/common';
+import { ActiveScenery, Station, Train } from '../../typings/common';
 import { getTrainStopStatus, stopStatusPriority } from './utils';
 
 export default defineComponent({
@@ -530,8 +526,8 @@ export default defineComponent({
 }
 
 .stop-comments-icon > img {
-  width: 1.2em;
+  width: 1.3em;
-  vertical-align: middle;
+  vertical-align: top;
 }
 
 .schedule {

src/components/StationsView/StationTable.vue

@@ -248,7 +248,9 @@
             class="station-users"
             :class="{ inactive: !station.onlineInfo }"
             data-tooltip-type="UsersTooltip"
-            :data-tooltip-content="JSON.stringify(station.onlineInfo?.stationTrains ?? [])"
+            :data-tooltip-content="
+              JSON.stringify(getStationUsersTrains(station.onlineInfo?.stationTrains ?? []))
+            "
           >
             <span class="text--primary">{{
               station.onlineInfo?.stationTrains?.length ?? '-'
@@ -318,7 +320,7 @@ import dateMixin from '../../mixins/dateMixin';
 import styleMixin from '../../mixins/styleMixin';
 import { useApiStore } from '../../store/apiStore';
 import { useMainStore } from '../../store/mainStore';
-import { Station, Status } from '../../typings/common';
+import { Station, Status, TooltipUserTrain, Train } from '../../typings/common';
 import { useTooltipStore } from '../../store/tooltipStore';
 import { getChangedFilters } from '../../managers/stationFilterManager';
 import { ActiveSorter, HeadIdsType, headIconsIds, headIds } from './typings';
@@ -394,6 +396,13 @@ export default defineComponent({
       else this.activeSorter.dir = 1;
 
       this.activeSorter.headerName = headerName;
+    },
+
+    getStationUsersTrains(stationTrains: Train[]): TooltipUserTrain[] {
+      return stationTrains.map((train) => ({
+        driverName: train.driverName,
+        trainNo: train.trainNo
+      }));
     }
   }
 });

src/components/Tooltip/Tooltip.vue

@@ -13,6 +13,7 @@ import BaseTooltip from './BaseTooltip.vue';
 import SpawnsTooltip from './SpawnsTooltip.vue';
 import UsersTooltip from './UsersTooltip.vue';
 import HtmlTooltip from './HtmlTooltip.vue';
+import TrainInfoTooltip from "./TrainInfoTooltip.vue";
 
 const BOX_PADDING_PX = 20;
 
@@ -23,7 +24,8 @@ export default defineComponent({
     BaseTooltip,
     SpawnsTooltip,
     UsersTooltip,
-    HtmlTooltip
+    HtmlTooltip,
+    TrainInfoTooltip
   },
 
   data() {

src/components/Tooltip/TrainInfoTooltip.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="tooltip-content">
+    <span v-if="trainInfoObj">
+      {{ trainInfoObj.driverName }}
+    </span>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { useTooltipStore } from '../../store/tooltipStore';
+import { Train } from '../../typings/common';
+
+const tooltipStore = useTooltipStore();
+
+const trainInfoObj = computed(() => {
+  if (tooltipStore.content == '') return null;
+
+  try {
+    return (JSON.parse(tooltipStore.content) as Train) ?? null;
+  } catch (error) {
+    return null;
+  }
+});
+</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;
+
+  width: 100%;
+  background-color: #1f1f1f;
+  box-shadow: 0 0 5px 2px #aaa;
+}
+
+img {
+  height: 1em;
+}
+</style>

src/components/Tooltip/UsersTooltip.vue

@@ -10,7 +10,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import { useTooltipStore } from '../../store/tooltipStore';
-import { Train } from '../../typings/common';
+import { TooltipUserTrain } from '../../typings/common';
 
 export default defineComponent({
   data() {
@@ -23,7 +23,7 @@ export default defineComponent({
     trains() {
       if (this.tooltipStore.content == '') return [];
 
-      const parsedTrains = JSON.parse(this.tooltipStore.content) as Train[];
+      const parsedTrains = JSON.parse(this.tooltipStore.content) as TooltipUserTrain[];
       return (parsedTrains ?? []).sort((a, b) => a.trainNo - b.trainNo);
     }
   }

src/store/tooltipStore.ts

@@ -8,7 +8,8 @@ export const tooltipKeys = [
   'VehiclePreviewTooltip',
   'SpawnsTooltip',
   'UsersTooltip',
-  'HtmlTooltip'
+  'HtmlTooltip',
+  'TrainInfoTooltip'
 ] as const;
 
 export type TooltipType = (typeof tooltipKeys)[number];

src/typings/common.ts

@@ -253,3 +253,24 @@ export interface VehicleCargo {
   id: string;
   weight: number;
 }
+
+export interface TooltipUserTrain {
+  driverName: string;
+  trainNo: number;
+}
+
+export interface TooltipTrainInfo {
+  mass: number;
+  length: number;
+  speed: number;
+  signal: string;
+  distance: number;
+  connectedTrack: string;
+  trainNo: number;
+  driverName: string;
+  driverLevel: number;
+  currentStationName: string;
+  currentStationHash: string;
+  headVehicleName: string;
+  stockLength: number;
+}