refactor: popups -> tooltips

src/store/mainStore.ts

@@ -29,10 +29,7 @@ export const useMainStore = defineStore('mainStore', {
 
       chosenModalTrainId: undefined,
 
-      modalLastClickedTarget: null,
-
-      mousePos: { x: 0, y: 0 },
-      popUpData: { key: null, content: '' }
+      modalLastClickedTarget: null
     }) as MainStoreState,
 
   getters: {

src/store/stationFiltersStore.ts

@@ -54,9 +54,7 @@ const filterInitStates: Filter = {
   withoutActiveTimetables: false,
   maxVmax: 200,
   minVmax: 0,
-
   authors: '',
-
   onlineFromHours: 0
 };
 

src/store/tooltipStore.ts

@@ -0,0 +1,52 @@
+import { defineStore } from 'pinia';
+
+const isTooltip = (v: any): v is TooltipType => tooltipKeys.includes(v);
+
+export const tooltipKeys = ['DonatorTooltip', 'BaseTooltip', 'VehiclePreviewTooltip'] as const;
+
+export type TooltipType = (typeof tooltipKeys)[number];
+
+export const useTooltipStore = defineStore('tooltipStore', {
+  state: () => ({
+    mousePos: [0, 0],
+    type: null as TooltipType | null,
+    content: ''
+  }),
+
+  actions: {
+    show(_e: MouseEvent, type: string, value?: string) {
+      if (!isTooltip(type)) return;
+
+      console.log(type, value);
+
+      this.type = type;
+      this.content = value ?? '';
+    },
+
+    hide() {
+      this.type = null;
+      this.content = '';
+    },
+
+    handle(e: MouseEvent) {
+      const targetEl = e
+        .composedPath()
+        .find((p) => p instanceof HTMLElement && p.getAttribute('data-tooltip-type'));
+
+      if (!targetEl || !(targetEl instanceof HTMLElement)) {
+        if (this.type != null) this.hide();
+
+        return;
+      }
+
+      const tooltipType = targetEl.getAttribute('data-tooltip-type');
+      const tooltipContent = targetEl.getAttribute('data-tooltip-content');
+
+      if (tooltipType && tooltipContent) this.show(e, tooltipType, tooltipContent);
+      else if (this.type != null) this.hide();
+
+      this.mousePos[0] = e.pageX;
+      this.mousePos[1] = e.pageY;
+    }
+  }
+});

src/store/typings.ts

@@ -1,8 +1,5 @@
 import { API } from '../typings/api';
-import { Availability, Station, StationRoutesInfo, Status, Train } from '../typings/common';
-
-export const popupKeys = ['DonatorPopUp', 'TrainCommentsPopUp', 'VehiclePreviewPopUp'] as const;
-export type PopUpType = (typeof popupKeys)[number];
+import { Availability, StationRoutesInfo, Status } from '../typings/common';
 
 export interface MainStoreState {
   region: { id: string; value: string; name: string };
@@ -15,8 +12,6 @@ export interface MainStoreState {
   driverStatsStatus: Status.Data;
   chosenModalTrainId?: string;
   modalLastClickedTarget: EventTarget | null;
-  mousePos: { x: number; y: number };
-  popUpData: { key: PopUpType | null; content: string };
 }
 
 export interface StationJSONData {

src/store/utils.ts

@@ -4,7 +4,9 @@ import {
   Train,
   ScheduledTrain,
   Station,
-  StationTrain
+  StationTrain,
+  ScenerySpawn,
+  ScenerySpawnType
 } from '../typings/common';
 
 export function getLocoURL(locoType: string): string {
@@ -36,7 +38,7 @@ export function getStatusTimestamp(stationStatus: any): number {
   return -1;
 }
 
-export function parseSpawns(spawnString: string | null) {
+export function parseSpawns(spawnString: string | null): ScenerySpawn[] {
   if (!spawnString) return [];
   if (spawnString === 'NO_SPAWN') return [];
 
@@ -46,7 +48,15 @@ export function parseSpawns(spawnString: string | null) {
     const spawnLength = parseInt(spawnArray[2]);
     const isElectrified = spawnArray[3] == 'True';
 
-    return { spawnName, spawnLength, isElectrified };
+    let spawnType: ScenerySpawnType = /EZT|POS|OSOB|PAS/i.test(spawnName)
+      ? 'passenger'
+      : /TOW/i.test(spawnName)
+        ? 'freight'
+        : /LUZ/i.test(spawnName)
+          ? 'loco'
+          : 'all';
+
+    return { spawnName, spawnLength, isElectrified, spawnType };
   });
 }