diff --git a/components/MapComponent.js b/components/MapComponent.js index a95788daf..90b10a004 100644 --- a/components/MapComponent.js +++ b/components/MapComponent.js @@ -77,8 +77,12 @@ import { useMapComponentState } from "../hooks/useMapComponentState"; import { polylineEventsDisabledState } from "../store/atoms/polylineEventsDisabledState"; import { disablePolylineEvents, enablePolylineEvents } from "../utils/setupPolylines"; import { polylineLayerVisibleState } from "../store/atoms/polylineLayerVisibleState"; +import { useSelector } from "react-redux"; const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { + // **Hole nur die aktiven idLDs aus Redux** + const activeLines = useSelector((state) => state.lineVisibility.activeLines); + const activeIds = Object.keys(activeLines).filter((id) => activeLines[id] === 1); const polylineVisible = useRecoilValue(polylineLayerVisibleState); const [editMode, setEditMode] = useState(false); // editMode Zustand const { deviceName, setDeviceName } = useMapComponentState(); diff --git a/pages/api - Kopie/talas_v5_DB/gisLines/readGisLines.js b/pages/api - Kopie/talas_v5_DB/gisLines/readGisLines.js index d734ed011..b73448205 100644 --- a/pages/api - Kopie/talas_v5_DB/gisLines/readGisLines.js +++ b/pages/api - Kopie/talas_v5_DB/gisLines/readGisLines.js @@ -1,5 +1,6 @@ // /pages/api/talas_v5_DB/gisLines/readGisLines.js import mysql from "mysql2/promise"; +import { store } from "../../../redux/store"; // Redux-Store importieren // Erstellen eines Pools von Datenbankverbindungen const pool = mysql.createPool({ @@ -18,14 +19,29 @@ export default async function handler(req, res) { return res.status(405).json({ error: "Nur GET Methode erlaubt" }); } - const query = "SELECT * FROM talas_v5.gis_lines;"; + // **Hole `idLD`-Werte aus Redux** + const state = store.getState(); + const activeLines = state.lineVisibility.activeLines; + const activeIds = Object.keys(activeLines); // Alle `idLD` in Redux + + if (activeIds.length === 0) { + return res.status(404).json({ error: "Keine aktiven Geräte in Redux gefunden" }); + } + + // **SQL-Query mit Filterung** + const query = ` + SELECT * + FROM talas_v5.gis_lines + WHERE idLD IN (${activeIds.map(() => "?").join(",")});`; try { - const [results] = await pool.query(query); + console.log("🔍 Aktive Linien in Redux:", activeIds); + const [results] = await pool.query(query, activeIds); // Verwende aktive `idLD` als Parameter if (results.length > 0) { res.status(200).json(results); + console.log("✅ GIS-Linien erfolgreich abgerufen:", results.length, "Linien gefunden."); } else { - res.status(404).json({ error: "Gerät nicht gefunden" }); + res.status(404).json({ error: "Keine passenden Linien gefunden" }); } } catch (error) { console.error("Fehler beim Abrufen der gis_lines:", error); diff --git a/utils/createAndSetDevices.js b/utils/createAndSetDevices.js index e59a717d6..edd328522 100644 --- a/utils/createAndSetDevices.js +++ b/utils/createAndSetDevices.js @@ -1,26 +1,26 @@ // /utils/createAndSetDevices.js +import circleIcon from "../components/gisPolylines/icons/CircleIcon"; +import { saveLineData, redrawPolyline } from "./mapUtils"; 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 "./setupPolylines"; -import { store } from "../redux/store"; // Redux-Store importieren -import { updateLineStatus } from "../redux/slices/lineVisibilitySlice"; // Redux-Slice importieren +import { setPolylineEventsDisabled } from "../store/atoms/polylineEventsDisabledState"; +import { store } from "../redux/store"; +import { updateLineStatus } from "../redux/slices/lineVisibilitySlice"; -// Funktion zum Bestimmen der Priorität basierend auf dem Icon-Pfad const determinePriority = (iconPath, priorityConfig) => { for (let priority of priorityConfig) { if (iconPath.includes(priority.name.toLowerCase())) { return priority.level; } } - return 5; // Standardpriorität (niedrigste) + return 5; }; -// **Funktion zum Erstellen und Setzen von Markern** export const createAndSetDevices = async (systemId, setMarkersFunction, GisSystemStatic, priorityConfig) => { try { - // API-Daten abrufen const response1 = await fetch(config.mapGisStationsStaticDistrictUrl); const jsonResponse = await response1.json(); const response2 = await fetch(config.mapGisStationsStatusDistrictUrl); @@ -33,12 +33,31 @@ export const createAndSetDevices = async (systemId, setMarkersFunction, GisSyste console.log("✅ API-Daten geladen:", jsonResponse.Points.length, "Punkte gefunden."); - // **Filter: Nur Stationen mit `Active === 1`** - const activeStations = jsonResponse.Points.filter((station) => station.System === systemId && station.Active === 1); - console.log("🔍 Gefilterte aktive Stationen:", activeStations.length, activeStations); - + // Erstelle eine Map für Statusinformationen const statisMap = new Map(statusResponse.Statis.map((s) => [s.IdLD, s])); + // Speichere `idLD` und `Active` Werte in Redux + const allLines = jsonResponse.Points.filter((station) => station.System === systemId).map((station) => { + console.log("------------------------"); + console.log("station.IdLD: ", station.IdLD); + console.log("station.Active: ", station.Active); + console.log("------------------------"); + + // Redux: Aktualisiere `idLD` und `Active` Werte + store.dispatch(updateLineStatus({ idLD: station.IdLD, active: station.Active })); + + return { + idLD: station.IdLD, + active: station.Active, + }; + }); + + console.log("🔄 Alle Linien gespeichert:", allLines); + + // Filtere nur aktive Stationen für Marker + const activeStations = jsonResponse.Points.filter((station) => station.System === systemId && station.Active === 1); + console.log("🔍 Gefilterte aktive Stationen:", activeStations); + let 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`; @@ -53,9 +72,8 @@ export const createAndSetDevices = async (systemId, setMarkersFunction, GisSyste iconAnchor: [12, 41], popupAnchor: [1, -34], }), - title: station.LD_Name, - contextmenu: true, - data: { Active: station.Active, idLD: station.IdLD }, // Speichere Active & idLD + areaName: station.Area_Name, + link: station.Link, zIndexOffset: zIndexOffset, }); @@ -65,26 +83,52 @@ export const createAndSetDevices = async (systemId, setMarkersFunction, GisSyste ${station.Device}
${station.Area_Short} (${station.Area_Name})
${station.Location_Short} (${station.Location_Name}) +
+ ${statusResponse.Statis.filter((status) => status.IdLD === station.IdLD) + .reverse() + .map( + (status) => ` +
+
+ ${status.Me} (${status.Na}) +
+ ` + ) + .join("")} +
`); - // **Speichere `idLD` und `Active` in Redux** - store.dispatch(updateLineStatus({ idLD: station.IdLD, active: station.Active })); + marker.on("mouseover", function () { + this.openPopup(); + }); + + marker.on("mouseout", function () { + this.closePopup(); + }); + + marker.on("contextmenu", function (event) { + if (event && event.preventDefault) event.preventDefault(); + this.openPopup(); + }); + + document.addEventListener("mouseout", function (event) { + if (event.relatedTarget === null || event.relatedTarget.nodeName === "BODY") { + enablePolylineEvents(window.polylines, window.lineColors); + } + }); + + if (typeof marker.bounce === "function" && statis) { + marker.on("add", () => marker.bounce(3)); + } return marker; }); console.log("📌 Marker erstellt:", markersData.length, markersData); - // **Sicherstellen, dass vorhandene Marker nicht überschrieben werden** - setMarkersFunction((prevMarkers) => [...prevMarkers, ...markersData]); - - // **Debugging: Alle Marker in der Konsole anzeigen** - console.log( - "📌 Alle Marker (Debugging):", - markersData.map((m) => m.options.title) - ); + setMarkersFunction(markersData); } catch (error) { - console.error("❌ Fehler beim Abrufen der Daten: ", error); + console.error("❌ Fehler beim Abrufen der Daten in createAndSetDevices.js: ", error); } };