refactor: popups -> tooltips

src/App.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="app_container">
-    <PopUp />
+    <Tooltip />
 
     <transition name="modal-anim">
       <keep-alive>
@@ -36,19 +36,20 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import axios from 'axios';
-import { version } from '.././package.json';
 
+import { version } from '.././package.json';
+import { Status } from './typings/common';
 import { useMainStore } from './store/mainStore';
-import popupMixin from './mixins/popupMixin';
+import { useApiStore } from './store/apiStore';
+import { useTooltipStore } from './store/tooltipStore';
 
 import Clock from './components/App/Clock.vue';
 import StatusIndicator from './components/App/StatusIndicator.vue';
 import AppHeader from './components/App/AppHeader.vue';
 import TrainModal from './components/TrainsView/TrainModal.vue';
+import Tooltip from './components/Tooltip/Tooltip.vue';
+
 import StorageManager from './managers/storageManager';
-import PopUp from './components/PopUp/PopUp.vue';
-import { useApiStore } from './store/apiStore';
-import { Status } from './typings/common';
 
 const STORAGE_VERSION_KEY = 'app_version';
 
@@ -58,15 +59,14 @@ export default defineComponent({
     StatusIndicator,
     AppHeader,
     TrainModal,
-    PopUp
+    Tooltip
   },
 
-  mixins: [popupMixin],
-
   data: () => ({
     VERSION: version,
     store: useMainStore(),
     apiStore: useApiStore(),
+    tooltipStore: useTooltipStore(),
 
     currentLang: 'pl',
     releaseURL: '',
@@ -80,7 +80,7 @@ export default defineComponent({
   },
 
   async mounted() {
-    window.addEventListener('mousemove', (e: MouseEvent) => this.handlePopUpEvents(e));
+    window.addEventListener('mousemove', (e: MouseEvent) => this.tooltipStore.handle(e));
   },
 
   methods: {
@@ -142,27 +142,6 @@ export default defineComponent({
       this.apiStore.connectToAPI();
     },
 
-    handlePopUpEvents(e: MouseEvent) {
-      const targetEl = e
-        .composedPath()
-        .find((p) => p instanceof HTMLElement && p.getAttribute('data-popup-key'));
-
-      if (!targetEl || !(targetEl instanceof HTMLElement)) {
-        if (this.store.popUpData.key != null) this.hidePopUp();
-
-        return;
-      }
-
-      const popupComponentKey = targetEl.getAttribute('data-popup-key');
-      const popupContent = targetEl.getAttribute('data-popup-content');
-
-      if (popupComponentKey && popupContent) this.showPopUp(e, popupComponentKey, popupContent);
-      else if (this.store.popUpData.key != null) this.hidePopUp();
-
-      this.store.mousePos.x = e.pageX;
-      this.store.mousePos.y = e.pageY;
-    },
-
     changeLang(lang: string) {
       this.$i18n.locale = lang;
       this.currentLang = lang;

src/components/Global/StockList.vue

@@ -27,8 +27,8 @@
         <span>
           <img
             :data-mouseover="stockName"
-            data-popup-key="VehiclePreviewPopUp"
+            data-tooltip-type="VehiclePreviewTooltip"
-            :data-popup-content="stockName.split(':')[0]"
+            :data-tooltip-content="stockName.split(':')[0]"
             :src="`https://rj.td2.info.pl/dist/img/thumbnails/${stockName.split(':')[0]}${
               /^EN/.test(stockName) ? 'rb' : ''
             }.png`"
@@ -41,8 +41,8 @@
           <!-- /// Manualne dodawanie miniaturek członów dla kibelków /// -->
           <img
             :data-mouseover="stockName"
-            data-popup-key="VehiclePreviewPopUp"
+            data-tooltip-type="VehiclePreviewTooltip"
-            :data-popup-content="stockName.split(':')[0]"
+            :data-tooltip-content="stockName.split(':')[0]"
             v-if="/^(EN|2EN)/.test(stockName)"
             :src="`https://rj.td2.info.pl/dist/img/thumbnails/${stockName.split(':')[0]}s.png`"
             @error="
@@ -53,8 +53,8 @@
 
           <img
             :data-mouseover="stockName"
-            data-popup-key="VehiclePreviewPopUp"
+            data-tooltip-type="VehiclePreviewTooltip"
-            :data-popup-content="stockName.split(':')[0]"
+            :data-tooltip-content="stockName.split(':')[0]"
             v-if="/^EN71/.test(stockName)"
             :src="`https://rj.td2.info.pl/dist/img/thumbnails/${stockName.split(':')[0]}s.png`"
             @error="
@@ -65,8 +65,8 @@
 
           <img
             :data-mouseover="stockName"
-            data-popup-key="VehiclePreviewPopUp"
+            data-tooltip-type="VehiclePreviewTooltip"
-            :data-popup-content="stockName.split(':')[0]"
+            :data-tooltip-content="stockName.split(':')[0]"
             v-if="/^(EN|2EN)/.test(stockName)"
             :src="`https://rj.td2.info.pl/dist/img/thumbnails/${stockName.split(':')[0]}ra.png`"
             @error="
@@ -120,10 +120,10 @@ export default defineComponent({
         fallbackName += /^\d?EN\d{2}/.test(stockName)
           ? 'ezt'
           : /^SN\d{2}/.test(stockName)
-          ? 'szt'
+            ? 'szt'
-          : /^\d?E/.test(stockName)
+            : /^\d?E/.test(stockName)
-          ? 'e'
+              ? 'e'
-          : 's';
+              : 's';
       } else {
         const isCarPassenger = /(\d{3}a|(Bau|Gor)\d{2}|304C)_/.test(stockName);
 

src/components/JournalView/JournalDispatchers/JournalDispatchersList.vue

@@ -43,7 +43,7 @@
                     :to="`/journal/dispatchers?search-dispatcher=${historyItem.dispatcherName}`"
                   >
                     <b
-                      v-if="isDonator(historyItem.dispatcherName)"
+                      v-if="apiStore.donatorsData.includes(historyItem.dispatcherName)"
                       class="text--donator"
                       :title="$t('donations.dispatcher-message')"
                     >
@@ -128,13 +128,13 @@ import { Status } from '../../../typings/common';
 import Loading from '../../Global/Loading.vue';
 import AddDataButton from '../../Global/AddDataButton.vue';
 import dateMixin from '../../../mixins/dateMixin';
-import donatorMixin from '../../../mixins/donatorMixin';
 import styleMixin from '../../../mixins/styleMixin';
+import { useApiStore } from '../../../store/apiStore';
 
 export default defineComponent({
   components: { Loading, AddDataButton },
 
-  mixins: [dateMixin, styleMixin, donatorMixin],
+  mixins: [dateMixin, styleMixin],
 
   props: {
     dispatcherHistory: {
@@ -159,6 +159,7 @@ export default defineComponent({
     return {
       Status,
       store: useMainStore(),
+      apiStore: useApiStore(),
       regions
     };
   },

src/components/JournalView/JournalTimetables/TimetableGeneral.vue

@@ -24,7 +24,7 @@
       </strong>
 
       <strong
-        v-if="isDonator(timetable.driverName)"
+        v-if="apiStore.donatorsData.includes(timetable.driverName)"
         class="text--donator"
         :title="$t('donations.driver-message')"
       >
@@ -57,8 +57,8 @@
           !timetable.terminated
             ? $t('journal.timetable-active')
             : timetable.fulfilled
-            ? $t('journal.timetable-fulfilled')
+              ? $t('journal.timetable-fulfilled')
-            : `${$t('journal.timetable-abandoned')} ${localeTime(timetable.endDate, $i18n.locale)}`
+              : `${$t('journal.timetable-abandoned')} ${localeTime(timetable.endDate, $i18n.locale)}`
         }}
       </b>
 
@@ -81,10 +81,16 @@ import { API } from '../../../typings/api';
 import dateMixin from '../../../mixins/dateMixin';
 import modalTrainMixin from '../../../mixins/modalTrainMixin';
 import styleMixin from '../../../mixins/styleMixin';
-import donatorMixin from '../../../mixins/donatorMixin';
+import { useApiStore } from '../../../store/apiStore';
 
 export default defineComponent({
-  mixins: [dateMixin, modalTrainMixin, styleMixin, donatorMixin],
+  mixins: [dateMixin, modalTrainMixin, styleMixin],
+
+  data() {
+    return {
+      apiStore: useApiStore()
+    };
+  },
 
   props: {
     timetable: {

src/components/SceneryView/SceneryDispatchersHistory.vue

@@ -74,14 +74,13 @@ import { defineComponent, PropType } from 'vue';
 import dateMixin from '../../mixins/dateMixin';
 import Loading from '../Global/Loading.vue';
 import styleMixin from '../../mixins/styleMixin';
-import listObserverMixin from '../../mixins/listObserverMixin';
 import { API } from '../../typings/api';
 import { ActiveScenery, Station, Status } from '../../typings/common';
 import { useApiStore } from '../../store/apiStore';
 
 export default defineComponent({
   name: 'SceneryDispatchersHistory',
-  mixins: [dateMixin, styleMixin, listObserverMixin],
+  mixins: [dateMixin, styleMixin],
   components: { Loading },
   props: {
     station: {

src/components/SceneryView/SceneryInfo/SceneryInfoDispatcher.vue

@@ -14,7 +14,7 @@
       >
         <span
           class="text--donator"
-          v-if="isDonator(onlineScenery.dispatcherName)"
+          v-if="apiStore.donatorsData.includes(onlineScenery.dispatcherName)"
           :title="$t('donations.dispatcher-message')"
         >
           {{ onlineScenery.dispatcherName }}
@@ -49,11 +49,18 @@ import dateMixin from '../../../mixins/dateMixin';
 import routerMixin from '../../../mixins/routerMixin';
 import styleMixin from '../../../mixins/styleMixin';
 import StationStatusBadge from '../../Global/StationStatusBadge.vue';
-import donatorMixin from '../../../mixins/donatorMixin';
 import { ActiveScenery } from '../../../typings/common';
+import { useApiStore } from '../../../store/apiStore';
 
 export default defineComponent({
-  mixins: [styleMixin, dateMixin, routerMixin, donatorMixin],
+  mixins: [styleMixin, dateMixin, routerMixin],
+
+  data() {
+    return {
+      apiStore: useApiStore()
+    };
+  },
+
   props: {
     onlineScenery: {
       type: Object as PropType<ActiveScenery>,

src/components/SceneryView/SceneryTimetablesHistory.vue

@@ -72,14 +72,13 @@ import { defineComponent, PropType } from 'vue';
 import dateMixin from '../../mixins/dateMixin';
 
 import Loading from '../Global/Loading.vue';
-import listObserverMixin from '../../mixins/listObserverMixin';
 import { API } from '../../typings/api';
 import { ActiveScenery, Station, Status } from '../../typings/common';
 import { useApiStore } from '../../store/apiStore';
 
 export default defineComponent({
   name: 'SceneryTimetablesHistory',
-  mixins: [dateMixin, listObserverMixin],
+  mixins: [dateMixin],
   props: {
     station: {
       type: Object as PropType<Station>

src/components/StationsView/StationTable.vue

@@ -123,8 +123,8 @@
                 <b
                   v-if="apiStore.donatorsData.includes(station.onlineInfo.dispatcherName)"
                   @click.stop="openDonationModal"
-                  data-popup-key="DonatorPopUp"
+                  data-tooltip-type="DonatorTooltip"
-                  :data-popup-content="$t('donations.dispatcher-message')"
+                  :data-tooltip-content="$t('donations.dispatcher-message')"
                 >
                   <img src="/images/icon-diamond.svg" alt="" />
                   {{ station.onlineInfo.dispatcherName }}
@@ -257,7 +257,12 @@
               <span>{{ station.onlineInfo?.dispatcherRate ?? '-' }}</span>
             </td>
 
-            <td class="station-spawns" :class="{ inactive: !station.onlineInfo }">
+            <td
+              class="station-spawns"
+              :class="{ inactive: !station.onlineInfo }"
+              data-tooltip-type="TestTooltip"
+              data-tooltip-content="test123"
+            >
               <span>{{ station.onlineInfo?.spawns.length ?? '-' }}</span>
             </td>
 
@@ -307,12 +312,12 @@ import { HeadIdsTypes, headIconsIds, headIds } from '../../scripts/data/stationH
 import StationStatusBadge from '../Global/StationStatusBadge.vue';
 import { Station, Status } from '../../typings/common';
 import { useApiStore } from '../../store/apiStore';
-import popupMixin from '../../mixins/popupMixin';
+import { useTooltipStore } from '../../store/tooltipStore';
 
 export default defineComponent({
   emits: ['toggleDonationModal'],
   components: { Loading, StationStatusBadge },
-  mixins: [styleMixin, dateMixin, popupMixin],
+  mixins: [styleMixin, dateMixin],
 
   data: () => ({
     headIconsIds,
@@ -333,6 +338,7 @@ export default defineComponent({
   setup() {
     const mainStore = useMainStore();
     const apiStore = useApiStore();
+    const tooltipStore = useTooltipStore();
 
     const stationFiltersStore = useStationFiltersStore();
 
@@ -340,7 +346,8 @@ export default defineComponent({
       Status: Status.Data,
       stationFiltersStore,
       mainStore,
-      apiStore
+      apiStore,
+      tooltipStore
     };
   },
 
@@ -364,7 +371,7 @@ export default defineComponent({
     openDonationModal(e: Event) {
       this.$emit('toggleDonationModal', true);
       this.mainStore.modalLastClickedTarget = e.target;
-      this.hidePopUp();
+      this.tooltipStore.hide();
     },
 
     openForumSite(e: Event, url: string | undefined) {

src/components/Tooltip/BaseTooltip.vue

@@ -1,24 +1,24 @@
 <template>
-  <div class="popup-content">
+  <div class="tooltip-content">
-    <span>{{ store.popUpData.content }}</span>
+    <span>{{ tooltipStore.content }}</span>
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { useMainStore } from '../../store/mainStore';
+import { useTooltipStore } from '../../store/tooltipStore';
 
 export default defineComponent({
   data() {
     return {
-      store: useMainStore()
+      tooltipStore: useTooltipStore()
     };
   }
 });
 </script>
 
 <style lang="scss" scoped>
-.popup-content {
+.tooltip-content {
   display: flex;
   justify-content: center;
   align-items: center;

src/components/Tooltip/DonatorTooltip.vue

@@ -1,25 +1,25 @@
 <template>
-  <div class="popup-content">
+  <div class="tooltip-content">
     <img src="/images/icon-diamond.svg" alt="" />
-    <span>{{ store.popUpData.content }}</span>
+    <span>{{ tooltipStore.content }}</span>
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { useMainStore } from '../../store/mainStore';
+import { useTooltipStore } from '../../store/tooltipStore';
 
 export default defineComponent({
   data() {
     return {
-      store: useMainStore()
+      tooltipStore: useTooltipStore()
     };
   }
 });
 </script>
 
 <style lang="scss" scoped>
-.popup-content {
+.tooltip-content {
   gap: 0.5em;
 
   padding: 0.5em;

src/components/Tooltip/Tooltip.vue

@@ -1,29 +1,30 @@
 <template>
-  <div class="popup" v-show="store.popUpData.key" ref="preview">
+  <div class="tooltip" v-show="tooltipStore.type" ref="preview">
-    <component v-if="store.popUpData.key" :is="store.popUpData.key" />
+    <component v-if="tooltipStore.type" :is="tooltipStore.type" />
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import DonatorPopUp from './DonatorPopUp.vue';
+import { useTooltipStore } from '../../store/tooltipStore';
-import TrainCommentsPopUp from './TrainCommentsPopUp.vue';
+import DonatorTooltip from './DonatorTooltip.vue';
-import VehiclePreviewPopUp from './VehiclePreviewPopUp.vue';
+import VehiclePreviewTooltip from './VehiclePreviewTooltip.vue';
-import { useMainStore } from '../../store/mainStore';
+import BaseTooltip from './BaseTooltip.vue';
 
 export default defineComponent({
-  components: { DonatorPopUp, TrainCommentsPopUp, VehiclePreviewPopUp },
+  components: { DonatorTooltip, VehiclePreviewTooltip, BaseTooltip },
 
   data() {
     return {
-      store: useMainStore()
+      tooltipStore: useTooltipStore()
     };
   },
 
   watch: {
-    'store.mousePos': {
+    'tooltipStore.mousePos': {
       deep: true,
-      handler(val: typeof this.store.mousePos) {
+      // [x, y]
+      handler(val: [number, number]) {
         this.$nextTick(() => {
           const previewEl = this.$refs['preview'] as HTMLElement;
           const clientWidth = document.body.clientWidth;
@@ -35,21 +36,21 @@ export default defineComponent({
           if (clientWidth < 500) {
             previewEl.style.left = '50%';
             translateX = '-50%';
-          } else if (val.x <= boxWidth / 2) {
+          } else if (val[0] <= boxWidth / 2) {
             previewEl.style.left = '0';
             translateX = '0px';
-          } else if (val.x >= clientWidth - boxWidth / 2) {
+          } else if (val[0] >= clientWidth - boxWidth / 2) {
             previewEl.style.left = '100%';
             translateX = '-100%';
           } else {
-            previewEl.style.left = `${val.x}px`;
+            previewEl.style.left = `${val[0]}px`;
             translateX = '-50%';
           }
 
-          previewEl.style.top = `${val.y}px`;
+          previewEl.style.top = `${val[1]}px`;
 
           const isOutside =
-            val.y + previewEl.getBoundingClientRect().height + 30 >=
+            val[1] + previewEl.getBoundingClientRect().height + 30 >=
             window.innerHeight + window.scrollY;
 
           if (isOutside) translateY = 'calc(-100% - 30px)';
@@ -62,7 +63,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.popup {
+.tooltip {
   position: absolute;
   z-index: 250;
   max-width: 400px;

src/components/Tooltip/VehiclePreviewTooltip.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="popup-content">
+  <div class="tooltip-content">
     <div v-if="imageState == 'loading'" class="loading-info">
       {{ $t('vehicle-preview.loading') }}
     </div>
@@ -7,29 +7,29 @@
     <div v-if="imageState == 'error'">{{ $t('vehicle-preview.error') }}</div>
 
     <img
-      v-if="store.popUpData.key"
+      v-if="tooltipStore.type"
       @load="onImageLoad"
       @error="onImageError"
       width="300"
       height="176"
       class="rounded-md w-full h-auto"
-      :src="`https://static.spythere.eu/images/${store.popUpData.content}--300px.jpg`"
+      :src="`https://static.spythere.eu/images/${tooltipStore.content}--300px.jpg`"
     />
 
     <div class="vehicle-name" v-if="imageState != 'error'">
-      {{ store.popUpData.content.replace(/_/g, ' ') }}
+      {{ tooltipStore.content.replace(/_/g, ' ') }}
     </div>
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { useMainStore } from '../../store/mainStore';
+import { useTooltipStore } from '../../store/tooltipStore';
 
 export default defineComponent({
   data() {
     return {
-      store: useMainStore(),
+      tooltipStore: useTooltipStore(),
       imageState: 'loading'
     };
   },
@@ -53,9 +53,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.popup-content {
+.tooltip-content {
-  // min-w-[300px] min-h-[200px] p-2 bg-slate-800 rounded-md
-
   width: 300px;
   min-height: 200px;
   background-color: #333;

src/components/TrainsView/TrainInfo.vue

@@ -45,8 +45,8 @@
           <div class="train-driver">
             <b
               v-if="apiStore.donatorsData.includes(train.driverName)"
-              data-popup-key="DonatorPopUp"
+              data-tooltip-type="DonatorTooltip"
-              :data-popup-content="$t('donations.driver-message')"
+              :data-tooltip-content="$t('donations.driver-message')"
             >
               {{ train.driverName }}
               <img src="/images/icon-diamond.svg" alt="donator diamond icon" />
@@ -74,8 +74,8 @@
         <strong>{{ train.timetableData.route.replace('|', ' - ') }}</strong>
         <span
           v-if="getSceneriesWithComments(train.timetableData).length > 0"
-          data-popup-key="TrainCommentsPopUp"
+          data-tooltip-type="BaseTooltip"
-          :data-popup-content="`${$t('trains.timetable-comments')} (${getSceneriesWithComments(
+          :data-tooltip-content="`${$t('trains.timetable-comments')} (${getSceneriesWithComments(
             train.timetableData
           )})`"
         >

src/locales/en.json

@@ -182,7 +182,8 @@
       "addons": "ADDITIONAL PROGRAMS",
       "blockades": "BLOCK SIGNALLING",
       "status": "ONLINE STATUS",
-      "timetables": "ACTIVE TIMETABLES"
+      "timetables": "ACTIVE TIMETABLES",
+      "spawns": "OPEN SPAWNS"
     },
 
     "all-available": "ALL AVAILABLE",
@@ -242,6 +243,7 @@
       "routes-2t-cat": "MIN. CATENARY DOUBLE TRACK ROUTES",
       "routes-2t-other": "MIN. OTHER DOUBLE TRACK ROUTES"
     },
+
     "authors-search": "SEARCH BY AUTHOR NAME (other filters apply):",
     "authors-placeholder": "Enter the author nickname...",
     "authors-button-title": "Search",

src/locales/pl.json

@@ -179,7 +179,8 @@
       "addons": "SZCZEGÓŁY",
       "blockades": "BLOKADY LINIOWE",
       "status": "STATUS ONLINE",
-      "timetables": "AKTYWNE ROZKŁADY JAZDY"
+      "timetables": "AKTYWNE ROZKŁADY JAZDY",
+      "spawns": "OTWARTE SPAWNY"
     },
 
     "all-available": "WSZYSTKIE DOSTĘPNE",
@@ -222,7 +223,6 @@
     "semaphores": "KSZTAŁTOWA",
     "mixed": "MIESZANA",
     "historical": "HISTORYCZNA",
-
     "free": "WOLNA",
     "occupied": "ZAJĘTA",
 

src/mixins/donatorMixin.ts

@@ -1,16 +0,0 @@
-import { defineComponent } from 'vue';
-import { useApiStore } from '../store/apiStore';
-
-export default defineComponent({
-  data() {
-    return {
-      apiStore: useApiStore()
-    };
-  },
-
-  methods: {
-    isDonator(name: string) {
-      return this.apiStore.donatorsData.includes(name);
-    }
-  }
-});

src/mixins/listObserverMixin.ts

@@ -1,27 +0,0 @@
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  data: () => ({
-    observer: null as IntersectionObserver | null,
-    observerTarget: null as Element | null
-  }),
-
-  methods: {
-    mountObserver(actionFunction: () => void, target: Element) {
-      this.observer = new IntersectionObserver(
-        (entries) => {
-          if (entries[0].intersectionRatio > 0.5) actionFunction();
-        },
-        { threshold: 0.2 }
-      );
-
-      this.observer.observe(target);
-    },
-
-    unmountObserver() {
-      if (!this.observerTarget) return;
-
-      this.observer?.unobserve(this.observerTarget);
-    }
-  }
-});

src/mixins/modalTrainMixin.ts

@@ -1,10 +1,12 @@
 import { defineComponent } from 'vue';
 import { useMainStore } from '../store/mainStore';
+import { useTooltipStore } from '../store/tooltipStore';
 
 export default defineComponent({
   data() {
     return {
-      store: useMainStore()
+      store: useMainStore(),
+      tooltipStore: useTooltipStore()
     };
   },
 
@@ -17,7 +19,7 @@ export default defineComponent({
 
     closeModal() {
       this.store.chosenModalTrainId = undefined;
-      this.store.popUpData.key = null;
+      this.tooltipStore.hide();
 
       setTimeout(() => {
         (this.store.modalLastClickedTarget as any)?.focus();

src/mixins/popupMixin.ts

@@ -1,27 +0,0 @@
-import { defineComponent } from 'vue';
-import { useMainStore } from '../store/mainStore';
-import { PopUpType, popupKeys } from '../store/typings';
-
-const isPopUp = (v: any): v is PopUpType => popupKeys.includes(v);
-
-export default defineComponent({
-  data() {
-    return {
-      store: useMainStore()
-    };
-  },
-
-  methods: {
-    showPopUp(e: MouseEvent, componentKey: string, value?: string) {
-      if (!isPopUp(componentKey)) return;
-
-      this.store.popUpData['key'] = componentKey;
-      this.store.popUpData['content'] = value ?? '';
-    },
-
-    hidePopUp() {
-      this.store.popUpData['key'] = null;
-      this.store.popUpData['content'] = '';
-    }
-  }
-});

src/store/mainStore.ts

@@ -29,10 +29,7 @@ export const useMainStore = defineStore('mainStore', {
 
       chosenModalTrainId: undefined,
 
-      modalLastClickedTarget: null,
+      modalLastClickedTarget: null
-
-      mousePos: { x: 0, y: 0 },
-      popUpData: { key: null, content: '' }
     }) 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';
+import { Availability, StationRoutesInfo, Status } from '../typings/common';
-
-export const popupKeys = ['DonatorPopUp', 'TrainCommentsPopUp', 'VehiclePreviewPopUp'] as const;
-export type PopUpType = (typeof popupKeys)[number];
 
 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 };
   });
 }
 

src/typings/common.ts

@@ -1,4 +1,5 @@
 export type Availability = 'default' | 'unavailable' | 'nonPublic' | 'abandoned' | 'nonDefault';
+export type ScenerySpawnType = 'passenger' | 'freight' | 'loco' | 'all';
 
 export enum StopStatus {
   ARRIVING = 'arriving',
@@ -138,21 +139,17 @@ export interface ActiveScenery {
   region: string;
   maxUsers: number;
   currentUsers: number;
-  spawns: { spawnName: string; spawnLength: number; isElectrified: boolean }[];
+  spawns: ScenerySpawn[];
   dispatcherName: string;
   dispatcherRate: number;
   dispatcherId: number;
   dispatcherExp: number;
   dispatcherIsSupporter: boolean;
-
   dispatcherStatus: Status.ActiveDispatcher | number;
   dispatcherTimestamp: number | null;
-
   isOnline: boolean;
-
   stationTrains?: StationTrain[];
   scheduledTrains?: ScheduledTrain[];
-
   scheduledTrainCount: {
     all: number;
     confirmed: number;
@@ -160,6 +157,13 @@ export interface ActiveScenery {
   };
 }
 
+export interface ScenerySpawn {
+  spawnName: string;
+  spawnLength: number;
+  isElectrified: boolean;
+  spawnType: ScenerySpawnType;
+}
+
 export interface StationTrain {
   driverName: string;
   driverId: number;