Ismail/nodeMap
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(gma): dauerhafte Tooltips mit Messwerten für GMA-Geräte hinzugefügt

Browse Source 
- Tooltip mit Temperatur, FBT, GT und RLF aus gisStationsMeasurements.js
- Tooltip dauerhaft sichtbar rechts über dem GMA-Marker
- bestehende Popup-Funktionalität bleibt erhalten
- Refactoring in createAndSetDevices.js zur besseren Wartbarkeit
- useCreateAndSetDevices und useDynamicDeviceLayers eingebunden
This commit is contained in:
Ismail Ali
2025-05-29 14:00:27 +02:00
parent 534f8f062b
commit fda7476872
2 changed files with 33 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
utils/devices/createAndSetDevices.js
View File

@@ -2,11 +2,10 @@
import L from "leaflet";
import "leaflet.smooth_marker_bouncing";
import { store } from "../../redux/store.js";
import { updateLineStatus } from "../../redux/slices/lineVisibilitySlice.js";
import { setSelectedDevice } from "../../redux/slices/selectedDeviceSlice.js";
import { selectGisStationsStaticDistrict } from "../../redux/slices/webservice/gisStationsStaticDistrictSlice.js";
import { selectGisStationsStatusDistrict } from "../../redux/slices/webservice/gisStationsStatusDistrictSlice.js";
import { selectGisStationsMeasurements } from "../../redux/slices/webservice/gisStationsMeasurementsSlice.js"; // ✅
import { selectGisStationsMeasurements } from "../../redux/slices/webservice/gisStationsMeasurementsSlice.js";
const determinePriority = (iconPath, priorityConfig) => {
for (let priority of priorityConfig) {
@@ -18,7 +17,6 @@ const determinePriority = (iconPath, priorityConfig) => {
};
export const createAndSetDevices = async (systemId, setMarkersFunction, GisSystemStatic, priorityConfig, measurements) => {
const mode = process.env.NEXT_PUBLIC_API_PORT_MODE;
const basePath = process.env.NEXT_PUBLIC_BASE_PATH || "";
try {
@@ -61,6 +59,7 @@ export const createAndSetDevices = async (systemId, setMarkersFunction, GisSyste
idDevice: station.IdLD,
});
// ✅ Popups nur für Statusdaten
let popupContent = `
<div class="bg-white rounded-lg">
<span class="text-lg font-semibold text-gray-900">${station.LD_Name}</span>
@@ -79,60 +78,52 @@ export const createAndSetDevices = async (systemId, setMarkersFunction, GisSyste
</div>`
)
.join("")}
</div>`;
if (station.System === 11 && messung) {
popupContent += `
<div class="mt-2 text-xs text-blue-800 bg-blue-100 p-2 rounded">
🌡️ Temperatur: ${messung.Temp} °C<br>
💧 Feuchte: ${messung.Humidity} %<br>
⚡ Spannung: ${messung.U} V
</div>`;
}
popupContent += `</div>`;
</div>
</div>`;
marker.bindPopup(popupContent);
// ✅ Permanenter Tooltip über dem Marker
// ✅ Tooltip im GMA-Stil mit Messwerten
if (station.System === 11 && messung) {
const tooltipText = `🌡 ${messung.Temp ?? "-"}°C | 💧 ${messung.Humidity ?? "-"}% | ⚡ ${messung.U ?? "-"}V`;
marker.bindTooltip(tooltipText, {
const lt = messung["LT"] ?? "-";
const fbt = messung["FBT"] ?? "-";
const gt = messung["GT"] ?? "-";
const rlf = messung["RLF"] ?? "-";
const gmaTooltipHtml = `
<div class="p-0 rounded-lg bg-white bg-opacity-90 tooltip-content">
<div class="font-bold text-sm text-black">${station.Area_Name}</div>
<div class="font-bold text-xxs text-blue-700">LT: ${lt} °C</div>
<div class="font-bold text-xxs text-red-700">FBT: ${fbt} °C</div>
<div class="font-bold text-xxs text-yellow-500">GT: ${gt} °C</div>
<div class="font-bold text-xxs text-green-700">RLF: ${rlf} %</div>
</div>
`;
marker.bindTooltip(gmaTooltipHtml, {
permanent: true,
direction: "top",
offset: [0, -40],
className: "gma-tooltip",
direction: "right",
offset: [50, -20],
interactive: true,
className: "leaflet-tooltip gma-tooltip",
});
}
marker.on("mouseover", () => {
store.dispatch(setSelectedDevice({ id: station.IdLD, name: station.Device, area: station.Area_Name }));
store.dispatch(
setSelectedDevice({
id: station.IdLD,
name: station.Device,
area: station.Area_Name,
})
);
marker.openPopup();
});
marker.on("contextmenu", (event) => {
event.originalEvent?.preventDefault();
marker.openPopup();
marker.bindContextMenu({
contextmenu: true,
contextmenuWidth: 160,
contextmenuItems: [
{ separator: true },
{
text: "Station öffnen (Tab)",
icon: "/img/screen_new.png",
callback: () => {
const link = `${window.location.origin}${basePath}/cpl.aspx?ver=35&kue=24&id=${station.IdLD}`;
window.open(link, "_blank");
},
},
],
});
});
if (typeof marker.bounce === "function" && statis) {
marker.on("add", () => marker.bounce(3));
}
return marker;
});