refactor+docs: BASE_URL entfernt, Port-Logik vereinheitlicht (v1.1.75)
- setupPolylines.js und createAndSetDevices.js auf dynamische Link-Generierung umgestellt
- Entfernung von NEXT_PUBLIC_BASE_URL aus .env.local
- Verwendung von NEXT_PUBLIC_API_PORT_MODE zur Steuerung von :80 in Dev
- Neue Dokumentationen unter /docs/frontend/utils/{polylines,devices}/
- CHANGELOG.md und appVersion.js auf Version 1.1.75 aktualisiert
This commit is contained in:
Ismail Ali
177
utils/devices/createAndSetDevices.js
Normal file
177
utils/devices/createAndSetDevices.js
Normal file
@@ -0,0 +1,177 @@
|
||||
// /utils/devices/createAndSetDevices.js
|
||||
import L from "leaflet";
|
||||
import "leaflet.smooth_marker_bouncing";
|
||||
import { toast } from "react-toastify";
|
||||
import * as config from "../../config/config.js";
|
||||
import { disablePolylineEvents, enablePolylineEvents } from "../polylines/setupPolylines.js";
|
||||
import { store } from "../../redux/store.js";
|
||||
import { updateLineStatus } from "../../redux/slices/lineVisibilitySlice.js";
|
||||
import { setSelectedDevice, clearSelectedDevice } from "../../redux/slices/selectedDeviceSlice.js";
|
||||
import { addContextMenuToMarker } from "../contextMenuUtils.js";
|
||||
|
||||
const determinePriority = (iconPath, priorityConfig) => {
|
||||
for (let priority of priorityConfig) {
|
||||
if (iconPath.includes(priority.name.toLowerCase())) {
|
||||
return priority.level;
|
||||
}
|
||||
}
|
||||
return 5;
|
||||
};
|
||||
|
||||
const fetchJsonSafely = async (url) => {
|
||||
try {
|
||||
const response = await fetch(url);
|
||||
const text = await response.text(); // Erst als Text lesen
|
||||
|
||||
try {
|
||||
return JSON.parse(text); // Falls es JSON ist, parsen
|
||||
} catch (error) {
|
||||
console.error(`❌ Fehler beim Parsen der JSON-Daten von ${url}. Antwort:`, text);
|
||||
return null; // Falls die Antwort HTML ist, keine JSON-Verarbeitung versuchen
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(`❌ Fehler beim Abrufen der Daten von ${url}:`, error);
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
export const createAndSetDevices = async (systemId, setMarkersFunction, GisSystemStatic, priorityConfig) => {
|
||||
try {
|
||||
let staticDistrictData, statusDistrictData;
|
||||
|
||||
if (config.isMockMode()) {
|
||||
console.log("⚠️ Mock-API: Geräte-Daten geladen");
|
||||
|
||||
staticDistrictData = await fetchJsonSafely(config.mapGisStationsStaticDistrictUrl);
|
||||
statusDistrictData = await fetchJsonSafely(config.mapGisStationsStatusDistrictUrl);
|
||||
} else {
|
||||
staticDistrictData = await fetchJsonSafely(config.mapGisStationsStaticDistrictUrl);
|
||||
statusDistrictData = await fetchJsonSafely(config.mapGisStationsStatusDistrictUrl);
|
||||
}
|
||||
|
||||
if (!staticDistrictData?.Points || !statusDistrictData?.Statis) {
|
||||
console.error("❌ Fehlende oder fehlerhafte Daten in API- oder Mock-Response!");
|
||||
return;
|
||||
}
|
||||
|
||||
const statisMap = new Map(statusDistrictData.Statis.map((s) => [s.IdLD, s]));
|
||||
|
||||
const allLines = staticDistrictData.Points.filter((station) => station.System === systemId).map((station) => {
|
||||
store.dispatch(updateLineStatus({ idLD: station.IdLD, active: station.Active }));
|
||||
return { idLD: station.IdLD, active: station.Active };
|
||||
});
|
||||
|
||||
//console.log("🔄 Alle Linien gespeichert:", allLines);
|
||||
|
||||
const activeStations = staticDistrictData.Points.filter((station) => station.System === systemId && station.Active === 1);
|
||||
|
||||
const markersData = activeStations.map((station) => {
|
||||
const statis = statisMap.get(station.IdLD);
|
||||
const iconPath = statis ? `img/icons/${statis.Na}-marker-icon-${station.Icon}.png` : `img/icons/marker-icon-${station.Icon}.png`;
|
||||
|
||||
const priority = determinePriority(iconPath, priorityConfig);
|
||||
const zIndexOffset = 100 * (5 - priority);
|
||||
|
||||
const marker = L.marker([station.X, station.Y], {
|
||||
icon: L.icon({
|
||||
iconUrl: iconPath,
|
||||
iconSize: [25, 41],
|
||||
iconAnchor: [12, 41],
|
||||
popupAnchor: [1, -34],
|
||||
}),
|
||||
areaName: station.Area_Name,
|
||||
link: station.Link,
|
||||
zIndexOffset: zIndexOffset,
|
||||
deviceName: station.Device,
|
||||
idDevice: station.IdLD, // ✅ Sicherstellen, dass `idDevice` existiert
|
||||
});
|
||||
const popupContent = `
|
||||
<div class="bg-white rounded-lg">
|
||||
<span class="text-lg font-semibold text-gray-900">${station.LD_Name}</span>
|
||||
<span class="text-md font-bold text-gray-800">${station.Device}</span><br>
|
||||
<span class="text-gray-800"><strong>${station.Area_Short}</strong> (${station.Area_Name})</span><br>
|
||||
<span class="text-gray-800"><strong>${station.Location_Short}</strong> (${station.Location_Name})</span>
|
||||
<div class="mt-2">
|
||||
${statusDistrictData.Statis.filter((status) => status.IdLD === station.IdLD)
|
||||
.reverse()
|
||||
.map(
|
||||
(status) => `
|
||||
<div class="flex items-center my-1">
|
||||
<div class="w-2 h-2 mr-2 inline-block rounded-full" style="background-color: ${status.Co};"></div>
|
||||
${status.Me} <span style="color: ${status.Co};">(${status.Na})</span>
|
||||
</div>
|
||||
`
|
||||
)
|
||||
.join("")}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
marker.bindPopup(popupContent);
|
||||
|
||||
// Redux: Gerät setzen
|
||||
marker.on("mouseover", () => {
|
||||
//console.log("✅ Gerät erkannt:", station);
|
||||
store.dispatch(setSelectedDevice({ id: station.IdLD, name: station.Device, area: station.Area_Name }));
|
||||
marker.openPopup(); // Bestehender Code bleibt erhalten
|
||||
});
|
||||
|
||||
//-----------------------------------
|
||||
//-----------------------------------
|
||||
// Variable zum Speichern der hinzugefügten Menüeinträge
|
||||
let contextMenuItemIds = new Set();
|
||||
|
||||
const addDeviceContextMenu = (map, marker) => {
|
||||
if (map && map.contextmenu) {
|
||||
if (contextMenuItemIds.size > 0) {
|
||||
contextMenuItemIds.forEach((id) => map.contextmenu.removeItem(id));
|
||||
contextMenuItemIds.clear();
|
||||
}
|
||||
|
||||
const separator = map.contextmenu.addItem({ separator: true });
|
||||
|
||||
const mode = process.env.NEXT_PUBLIC_API_PORT_MODE;
|
||||
const baseUrl = mode === "dev" ? `${window.location.protocol}//${window.location.hostname}:80/talas5/` : `${window.location.origin}/talas5/`;
|
||||
|
||||
const detailsItem = map.contextmenu.addItem({
|
||||
text: "Station öffnen (Tab)",
|
||||
icon: "/img/screen_new.png",
|
||||
callback: () => {
|
||||
const link = `${baseUrl}cpl.aspx?ver=35&kue=24&id=${station.IdLD}`;
|
||||
window.open(link, "_blank");
|
||||
},
|
||||
});
|
||||
|
||||
contextMenuItemIds.add(detailsItem);
|
||||
contextMenuItemIds.add(separator);
|
||||
}
|
||||
};
|
||||
|
||||
// `contextmenu`-Event für Marker
|
||||
marker.on("contextmenu", (event) => {
|
||||
event.originalEvent?.preventDefault();
|
||||
marker.openPopup();
|
||||
addDeviceContextMenu(map, marker);
|
||||
});
|
||||
|
||||
// Menü entfernen, wenn außerhalb des Markers geklickt wird
|
||||
map.on("click", () => {
|
||||
if (map.contextmenu && contextMenuItemIds.size > 0) {
|
||||
contextMenuItemIds.forEach((id) => map.contextmenu.removeItem(id));
|
||||
contextMenuItemIds.clear();
|
||||
}
|
||||
});
|
||||
|
||||
//-----------------------------------
|
||||
//-----------------------------------
|
||||
if (typeof marker.bounce === "function" && statis) {
|
||||
marker.on("add", () => marker.bounce(3));
|
||||
}
|
||||
|
||||
return marker;
|
||||
});
|
||||
|
||||
setMarkersFunction(markersData);
|
||||
} catch (error) {
|
||||
console.error("❌ Fehler beim Abrufen der Daten in createAndSetDevices.js: ", error);
|
||||
}
|
||||
};
|
||||
Reference in New Issue
Block a user