feature: open spawns tooltip

src/components/SceneryView/SceneryInfo/SceneryInfoSpawnList.vue

@@ -8,7 +8,7 @@
 
     <transition-group name="spawns-anim" tag="ul">
       <li
-        class="badge spawn badge-none"
+        class="badge badge-none"
         v-if="!onlineScenery || onlineScenery.spawns.length == 0"
         key="no-spawns"
       >
@@ -16,13 +16,13 @@
       </li>
 
       <li
-        class="badge spawn"
+        class="badge spawn-badge"
         v-for="(spawn, i) in sortedSpawns"
         :key="spawn.spawnName + onlineScenery?.dispatcherName + i"
         :data-electrified="spawn.isElectrified"
       >
-        <span class="spawn_name">{{ spawn.spawnName }}</span>
-        <span class="spawn_length">{{ spawn.spawnLength }}m</span>
+        <span class="name">{{ spawn.spawnName }}</span>
+        <span class="length">{{ spawn.spawnLength }}m</span>
       </li>
     </transition-group>
   </section>
@@ -59,19 +59,6 @@ ul {
   position: relative;
 }
 
-.spawn {
-  color: white;
-
-  &_length {
-    background-color: #404040;
-    color: #cfcfcf;
-  }
-
-  &[data-electrified='true'] > &_name {
-    background-color: #007599;
-  }
-}
-
 .spawns-anim {
   &-move,
   &-enter-active,

src/components/StationsView/StationTable.vue

@@ -260,8 +260,8 @@
             <td
               class="station-spawns"
               :class="{ inactive: !station.onlineInfo }"
-              data-tooltip-type="TestTooltip"
-              data-tooltip-content="test123"
+              data-tooltip-type="SpawnsTooltip"
+              :data-tooltip-content="JSON.stringify(station.onlineInfo?.spawns ?? [])"
             >
               <span>{{ station.onlineInfo?.spawns.length ?? '-' }}</span>
             </td>
@@ -302,7 +302,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType } from 'vue';
+import { defineComponent } from 'vue';
 import dateMixin from '../../mixins/dateMixin';
 import styleMixin from '../../mixins/styleMixin';
 import { useStationFiltersStore } from '../../store/stationFiltersStore';
@@ -358,6 +358,7 @@ export default defineComponent({
       if (!station) return;
 
       this.lastSelectedStationName = station.name;
+      this.tooltipStore.hide();
 
       this.$router.push({
         name: 'SceneryView',

src/components/Tooltip/SpawnsTooltip.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="tooltip-content" v-if="spawns.length != 0">
+    <span v-for="(spawn, i) in spawns">
+      <template v-if="i > 0"> | </template>
+      <b>{{ spawn.spawnName }}</b> ({{ spawn.spawnLength }}m)
+    </span>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { useTooltipStore } from '../../store/tooltipStore';
+import { ScenerySpawn } from '../../typings/common';
+
+export default defineComponent({
+  data() {
+    return {
+      tooltipStore: useTooltipStore()
+    };
+  },
+
+  computed: {
+    spawns() {
+      if (this.tooltipStore.content == '') return [];
+
+      const parsedSpawns = JSON.parse(this.tooltipStore.content) as ScenerySpawn[];
+      return parsedSpawns ?? [];
+    }
+  }
+});
+</script>
+
+<style scoped>
+.tooltip-content {
+  width: 300px;
+
+  padding: 0.25em 0.5em;
+  border-radius: 0.25em;
+
+  width: 100%;
+  background-color: #1b1b1b;
+  box-shadow: 0 0 5px 2px #aaa;
+}
+</style>

src/components/Tooltip/Tooltip.vue

@@ -10,9 +10,10 @@ import { useTooltipStore } from '../../store/tooltipStore';
 import DonatorTooltip from './DonatorTooltip.vue';
 import VehiclePreviewTooltip from './VehiclePreviewTooltip.vue';
 import BaseTooltip from './BaseTooltip.vue';
+import SpawnsTooltip from './SpawnsTooltip.vue';
 
 export default defineComponent({
-  components: { DonatorTooltip, VehiclePreviewTooltip, BaseTooltip },
+  components: { DonatorTooltip, VehiclePreviewTooltip, BaseTooltip, SpawnsTooltip },
 
   data() {
     return {
@@ -30,7 +31,7 @@ export default defineComponent({
           const clientWidth = document.body.clientWidth;
           const boxWidth = previewEl.getBoundingClientRect().width;
 
-          let translateX = '0px',
+          let translateX = '0',
             translateY = '30px';
 
           if (clientWidth < 500) {

src/store/tooltipStore.ts

@@ -2,7 +2,12 @@ import { defineStore } from 'pinia';
 
 const isTooltip = (v: any): v is TooltipType => tooltipKeys.includes(v);
 
-export const tooltipKeys = ['DonatorTooltip', 'BaseTooltip', 'VehiclePreviewTooltip'] as const;
+export const tooltipKeys = [
+  'DonatorTooltip',
+  'BaseTooltip',
+  'VehiclePreviewTooltip',
+  'SpawnsTooltip'
+] as const;
 
 export type TooltipType = (typeof tooltipKeys)[number];
 

src/styles/badge.scss

@@ -101,3 +101,16 @@
     background-color: #be3728;
   }
 }
+
+.spawn-badge {
+  color: white;
+
+  .length {
+    background-color: #404040;
+    color: #cfcfcf;
+  }
+
+  &[data-electrified='true'] > .name {
+    background-color: #007599;
+  }
+}