fix: show device point info popup when hovering device history

The Vue 3 migration stopped rendering DeviceHoverMarker, so hovering a
device history line no longer showed the point info (date, altitude,
battery, accuracy) like in 1.6.0. Render it again from DevicesLayer and
make the hover marker interactive so its tooltip opens on hover.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

Signed-off-by: Area52_Nader <86432017+NaderArea52@users.noreply.github.com>

Author: NaderArea52

src/components/map/DeviceHoverMarker.vue

@@ -70,21 +70,25 @@ export default {
 
 	watch: {
 		point: {
-			handler(newPoint) {
+			handler(newPoint, oldPoint) {
 				if (this.marker) {
 					this.marker.setLatLng([newPoint.lat, newPoint.lng])
-					this.marker.setIcon(this.icon)
-					this.marker.setTooltipContent(this.$el) // Force update DOM
+					// only replace the icon element when needed, replacing it under the mouse breaks hover events
+					if (!oldPoint || newPoint.color !== oldPoint.color) {
+						this.marker.setIcon(this.icon)
+					}
+					// show the info of the newly hovered point
+					this.marker.openTooltip()
 				}
 			},
 			deep: true
 		}
 	},
 
 	mounted() {
-		this.marker = L.marker([this.point.lat, this.point.lng], { 
-			icon: this.icon, 
-			interactive: false 
+		// interactive (like in 1.6.0) so hovering the point opens its tooltip
+		this.marker = L.marker([this.point.lat, this.point.lng], {
+			icon: this.icon,
 		}).addTo(this.map)
 
 		this.marker.bindTooltip(this.$el, this.tooltipOptions)

src/components/map/DevicesLayer.vue

@@ -1,5 +1,8 @@
 <template>
 	<div style="display: none;">
+		<DeviceHoverMarker v-if="hoverPoint"
+			:point="hoverPoint"
+			:map="map" />
 		<LHeatMap v-if="points.length >= 2500"
 			ref="devicesHeatMap"
 			:map="map"
@@ -14,6 +17,7 @@ import { isComputer } from '../../utils.js'
 import { binSearch, isPublic } from '../../utils/common.js'
 import moment from '@nextcloud/moment'
 import LHeatMap from './LHeatMap.vue'
+import DeviceHoverMarker from './DeviceHoverMarker.vue'
 import optionsController from '../../optionsController.js'
 
 const DEVICE_MARKER_VIEW_SIZE = 40
@@ -22,6 +26,7 @@ export default {
 	name: 'DevicesLayer',
 	components: {
 		LHeatMap,
+		DeviceHoverMarker,
 	},
 
 	props: {
@@ -38,6 +43,7 @@ export default {
 				blur: 10,
 				gradient: { 0.4: 'blue', 0.65: 'lime', 1: 'red' },
 			},
+			hoverPoint: null,
 		}
 	},
 
@@ -50,6 +56,9 @@ export default {
 		displayedDevices() {
 			return this.devices.filter(d => d.enabled && d.points && d.points.length > 0);
 		},
+		enabledDevices() {
+			return this.devices.map(d => d.enabled);
+		},
 		points() {
 			return this.devices.reduce((pts, device) => {
 				if (device.enabled && device.historyEnabled) {
@@ -71,6 +80,9 @@ export default {
 
 	watch: {
 		displayedDevices: { handler: 'renderDevices', deep: true },
+		enabledDevices() {
+			this.hoverPoint = null;
+		},
 		start: 'renderDevices',
 		end: 'renderDevices',
 	},
@@ -131,7 +143,7 @@ export default {
 					</div>
 				`, { sticky: true, className: 'leaflet-marker-device-tooltip', direction: 'top', offset: L.point(0, 0) });
 
-				marker.on('mouseover', () => this.$emit('point-hover', { ...device.points[device.points.length - 1], color, user_agent: device.user_agent }));
+				marker.on('mouseover', () => this.onPointHover({ ...device.points[device.points.length - 1], color, user_agent: device.user_agent }));
 				marker.on('click', () => this.$emit('click', device));
 				marker.on('contextmenu', (e) => this.showDevicePopup(e, device));
 
@@ -191,9 +203,14 @@ export default {
 			}, { minDist: 40000000, hoverPoint: null });
 
 			if (closestPoint.hoverPoint) {
-				this.$emit('point-hover', { ...closestPoint.hoverPoint, color, user_agent: device.user_agent });
+				this.onPointHover({ ...closestPoint.hoverPoint, color, user_agent: device.user_agent });
 			}
-		}
+		},
+
+		onPointHover(point) {
+			this.hoverPoint = point;
+			this.$emit('point-hover', point);
+		},
 	},
 }
 </script>