feat(poi): Mouseover-Tooltip für POIs mit Tailwind-Styling ersetzt Popup

- bindPopup entfernt und durch bindTooltip ersetzt
- Tooltip zeigt POI-Details bei Hover
- Tailwind-Klassen sorgen für einheitliches Design (rund, schatten, padding)
- Version auf 1.1.177 erhöht
This commit is contained in:
ISA
2025-05-26 14:08:26 +02:00
parent cd46401f14
commit 873ce0ba5e
3 changed files with 45 additions and 9 deletions

View File

@@ -4,6 +4,34 @@ Alle bedeutenden Änderungen an diesem Projekt werden in dieser Datei dokumentie
---
[1.1.177] 2025-05-26
✨ UI-Verbesserung
POI-Tooltip auf der Karte wird jetzt bei Mouseover angezeigt (nicht mehr per Klick).
Tooltip ist einheitlich gestaltet mit Tailwind CSS:
Abgerundete Ecken (rounded-xl)
Schatten (shadow-lg)
Innenabstände (px-4 py-2)
Blaue Überschrift, graue Beschriftung
Einheitlicher Stil für alle Marker-Tooltips (setupPOIs.js angepasst).
✅ Clean
Alte bindPopup()-Logik entfernt kein manuelles Öffnen/Schließen mehr nötig
closePopup() aus mouseout-Handler entfernt
Tooltip verwendet sticky: true, folgt der Maus
🔧 Version
📦 Version erhöht auf 1.1.177
---
[1.1.176] 2025-05-26
🐞 Fixed
Problem behoben, dass das Modal „POI hinzufügen“ nach erfolgreichem Submit nicht geschlossen wurde und die Meldung „Wird hinzugefügt…“ dauerhaft sichtbar blieb.

View File

@@ -1,2 +1,2 @@
// /config/appVersion
export const APP_VERSION = "1.1.177";
export const APP_VERSION = "1.1.178";

View File

@@ -78,13 +78,21 @@ export const setupPOIs = async (
});
}
marker.bindPopup(`
<div>
<b class="text-xl text-black-700">${poi.description || "Unbekannt"}</b><br>
${deviceName || "unbekannt"} <br>
${poiTypName}<br>
marker.bindTooltip(
`
<div class="bg-white text-gray-800 text-sm rounded-xl px-4 py-2 w-56">
<div class="font-semibold text-blue-500 mb-1">${poi.description || "Unbekannt"}</div>
<div class="text-gray-600 text-sm">Gerät: ${deviceName || "unbekannt"}</div>
<div class="text-gray-600 text-sm">Typ: ${poiTypName}</div>
</div>
`);
`,
{
direction: "top",
offset: [0, -10],
opacity: 0.95,
sticky: true,
}
);
marker.on("mouseover", function () {
dispatch(setSelectedPoi(poi));
@@ -94,7 +102,7 @@ export const setupPOIs = async (
marker.on("mouseout", function () {
dispatch(clearSelectedPoi());
this.closePopup();
//this.closePopup();
});
marker.on("dragend", (e) => {