From 392a6437f850892d9c7cea385195ddfcf1b0f737 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Thu, 9 May 2024 17:19:22 +0200
Subject: [PATCH] feature: current users tooltip

---
 src/components/StationsView/StationTable.vue | 11 ++++-
 src/components/Tooltip/Tooltip.vue           |  3 +-
 src/components/Tooltip/UsersTooltip.vue      | 44 ++++++++++++++++++++
 src/scripts/utils/stationFilterUtils.ts      |  4 +-
 src/store/tooltipStore.ts                    |  3 +-
 5 files changed, 59 insertions(+), 6 deletions(-)
 create mode 100644 src/components/Tooltip/UsersTooltip.vue

diff --git a/src/components/StationsView/StationTable.vue b/src/components/StationsView/StationTable.vue
index e59eb0e..9059faa 100644
--- a/src/components/StationsView/StationTable.vue
+++ b/src/components/StationsView/StationTable.vue
@@ -247,8 +247,15 @@
               />
             </td>
 
-            <td class="station-users" :class="{ inactive: !station.onlineInfo }">
-              <span class="text--primary">{{ station.onlineInfo?.currentUsers ?? '-' }}</span>
+            <td
+              class="station-users"
+              :class="{ inactive: !station.onlineInfo }"
+              data-tooltip-type="UsersTooltip"
+              :data-tooltip-content="JSON.stringify(station.onlineInfo?.stationTrains ?? [])"
+            >
+              <span class="text--primary">{{
+                station.onlineInfo?.stationTrains?.length ?? '-'
+              }}</span>
               /
               <span class="text--primary">{{ station.onlineInfo?.maxUsers ?? '-' }}</span>
             </td>
diff --git a/src/components/Tooltip/Tooltip.vue b/src/components/Tooltip/Tooltip.vue
index 899ce95..0433a4b 100644
--- a/src/components/Tooltip/Tooltip.vue
+++ b/src/components/Tooltip/Tooltip.vue
@@ -11,9 +11,10 @@ import DonatorTooltip from './DonatorTooltip.vue';
 import VehiclePreviewTooltip from './VehiclePreviewTooltip.vue';
 import BaseTooltip from './BaseTooltip.vue';
 import SpawnsTooltip from './SpawnsTooltip.vue';
+import UsersTooltip from './UsersTooltip.vue';
 
 export default defineComponent({
-  components: { DonatorTooltip, VehiclePreviewTooltip, BaseTooltip, SpawnsTooltip },
+  components: { DonatorTooltip, VehiclePreviewTooltip, BaseTooltip, SpawnsTooltip, UsersTooltip },
 
   data() {
     return {
diff --git a/src/components/Tooltip/UsersTooltip.vue b/src/components/Tooltip/UsersTooltip.vue
new file mode 100644
index 0000000..3d07f8d
--- /dev/null
+++ b/src/components/Tooltip/UsersTooltip.vue
@@ -0,0 +1,44 @@
+<template>
+  <div class="tooltip-content" v-if="trains.length != 0">
+    <span v-for="(train, i) in trains">
+      <template v-if="i > 0"> | </template>
+      <b>{{ train.trainNo }}</b> {{ train.driverName }}
+    </span>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { useTooltipStore } from '../../store/tooltipStore';
+import { StationTrain } from '../../typings/common';
+
+export default defineComponent({
+  data() {
+    return {
+      tooltipStore: useTooltipStore()
+    };
+  },
+
+  computed: {
+    trains() {
+      if (this.tooltipStore.content == '') return [];
+
+      const parsedTrains = JSON.parse(this.tooltipStore.content) as StationTrain[];
+      return (parsedTrains ?? []).sort((a, b) => a.trainNo - b.trainNo);
+    }
+  }
+});
+</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>
diff --git a/src/scripts/utils/stationFilterUtils.ts b/src/scripts/utils/stationFilterUtils.ts
index 59cfd83..1bc04a1 100644
--- a/src/scripts/utils/stationFilterUtils.ts
+++ b/src/scripts/utils/stationFilterUtils.ts
@@ -68,8 +68,8 @@ export const sortStations = (
 
     case 'user':
       diff =
-        (b.onlineInfo ? b.onlineInfo.currentUsers : -1) -
-        (a.onlineInfo ? a.onlineInfo.currentUsers : -1);
+        (b.onlineInfo?.stationTrains ? b.onlineInfo.stationTrains.length : -1) -
+        (a.onlineInfo?.stationTrains ? a.onlineInfo.stationTrains.length : -1);
       break;
 
     case 'like':
diff --git a/src/store/tooltipStore.ts b/src/store/tooltipStore.ts
index f03e6c7..7ac18f4 100644
--- a/src/store/tooltipStore.ts
+++ b/src/store/tooltipStore.ts
@@ -6,7 +6,8 @@ export const tooltipKeys = [
   'DonatorTooltip',
   'BaseTooltip',
   'VehiclePreviewTooltip',
-  'SpawnsTooltip'
+  'SpawnsTooltip',
+  'UsersTooltip'
 ] as const;
 
 export type TooltipType = (typeof tooltipKeys)[number];