diff --git a/components/MapComponent.js b/components/MapComponent.js index a502e71b3..3e40d43a9 100644 --- a/components/MapComponent.js +++ b/components/MapComponent.js @@ -28,12 +28,6 @@ const MapComponent = ({ locations, onLocationUpdate }) => { const mapGisSystemStaticUrl = config.mapGisSystemStaticUrl; const mapDataIconUrl = config.mapDataIconUrl; - console.log("GisStationsStaticDistrict 1 :", GisStationsStaticDistrict); - console.log("GisStationsStatusDistrict 1 :", GisStationsStatusDistrict); - console.log("GisStationsMeasurements 1 :", GisStationsMeasurements); - console.log("GisSystemStatic 1 :", GisSystemStatic); - console.log("map 1:", map); - // Funktion zum Aktualisieren der Position in der Datenbank const updateLocationInDatabase = async (id, newLatitude, newLongitude) => { const response = await fetch("/api/updateLocation", { @@ -47,12 +41,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => { }); if (response.ok) { - console.log("Position erfolgreich aktualisiert"); //schreib die neue Kooridnaten in die Console - console.log("Latitude: " + newLatitude); - console.log("Longitude: " + newLongitude); - console.log("ID: " + id); - console.log("Response: " + response); //akuellisiere die Position in der Datenbank mit den neuen Koordinaten mit updateLocation mit SQL Anweisung UPDATE } else { console.error("Fehler beim Aktualisieren der Position"); @@ -64,16 +53,11 @@ const MapComponent = ({ locations, onLocationUpdate }) => { useEffect(() => { const fetchData = async () => { try { - console.log("Datenabruf gestartet..."); const response = await fetch(mapGisStationsStaticDistrictUrl); const jsonResponse = await response.json(); // Prüfen, ob die Antwort das erwartete Format hat und Daten enthält if (jsonResponse && jsonResponse.Points) { - console.log( - "GisStationsStaticDistrict geladen:", - jsonResponse.Points - ); setGisStationsStaticDistrict(jsonResponse.Points); // Direkter Zugriff auf 'Points' } else { console.error( @@ -94,9 +78,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => { //------------------------------------------ //\talas5\TileMap\img\icons\icon1.png // minor-marker-icon-23.png - function getIconPath(iconNumber) { - return `TileMap/img/icons/marker-icon-${iconNumber}.png`; - } + // Marker hinzufügen für GisStationsStaticDistrict useEffect(() => { if (map && GisStationsStaticDistrict.length > 0) { @@ -156,23 +138,12 @@ const MapComponent = ({ locations, onLocationUpdate }) => { useEffect(() => { const fetchData = async () => { try { - console.log("Datenabruf gestartet..."); const response = await fetch(mapGisStationsStaticDistrictUrl); const jsonResponse = await response.json(); // Prüfen, ob die Antwort das erwartete Format hat und Daten enthält if (jsonResponse && jsonResponse.Points) { - console.log( - "GisStationsStaticDistrict geladen:", - jsonResponse.Points - ); setGisStationsStaticDistrict(jsonResponse.Points); // Direkter Zugriff auf 'Points' - - // Anzeigen eines spezifischen Details aus dem JSON - console.log( - "etwas von json zeigen :", - jsonResponse.Points[0].LD_Name - ); // Beispiel für das Anzeigen des LD_Name des ersten Points } else { console.error( 'Erwartete Daten im "Points"-Array nicht gefunden', @@ -193,16 +164,11 @@ const MapComponent = ({ locations, onLocationUpdate }) => { useEffect(() => { const fetchData = async () => { try { - console.log("Datenabruf gestartet..."); const response = await fetch(mapGisStationsStatusDistrictUrl); const jsonResponse = await response.json(); // Prüfen, ob die Antwort das erwartete Format hat und Daten enthält if (jsonResponse && jsonResponse.Statis) { - console.log( - "GisStationsStatusDistrict geladen:", - jsonResponse.Statis - ); setGisStationsStatusDistrict(jsonResponse.Statis); // Direkter Zugriff auf 'Statis' } else { console.error( @@ -224,13 +190,11 @@ const MapComponent = ({ locations, onLocationUpdate }) => { useEffect(() => { const fetchData = async () => { try { - console.log("Datenabruf gestartet..."); const response = await fetch(mapGisStationsMeasurementsUrl); const jsonResponse = await response.json(); // Prüfen, ob die Antwort das erwartete Format hat und Daten enthält if (jsonResponse && jsonResponse.Statis) { - console.log("GisStationsMeasurements geladen:", jsonResponse.Statis); setGisStationsMeasurements(jsonResponse.Statis); // Direkter Zugriff auf 'Statis' } else { console.error( @@ -253,13 +217,11 @@ const MapComponent = ({ locations, onLocationUpdate }) => { useEffect(() => { const fetchData = async () => { try { - console.log("Datenabruf gestartet..."); const response = await fetch(mapGisSystemStaticUrl); const jsonResponse = await response.json(); // Prüfen, ob die Antwort das erwartete Format hat und Daten enthält if (jsonResponse && jsonResponse.Systems) { - console.log("GisSystemStatic geladen:", jsonResponse.Systems); setGisSystemStatic(jsonResponse.Systems); // Direkter Zugriff auf 'Systems' } else { console.error( @@ -297,7 +259,6 @@ const MapComponent = ({ locations, onLocationUpdate }) => { let initialMap = []; useEffect(() => { - console.log("Server URL from config:", config.serverURL); if (typeof window !== "undefined") { console.log("Window height from config:", config.windowHeight); } @@ -305,7 +266,6 @@ const MapComponent = ({ locations, onLocationUpdate }) => { // Funktionen zur Überwachung der Internetverbindung const checkInternet = () => { - console.log("Checking internet connectivity..."); fetch("https://tile.openstreetmap.org/1/1/1.png", { method: "HEAD" }) .then((response) => setOnline(response.ok)) .catch(() => setOnline(false)); @@ -500,9 +460,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => { const showCoordinates = (e) => { alert("Breitengrad: " + e.latlng.lat + "\nLängengrad: " + e.latlng.lng); }; - const showData = (e) => { - console.log(e); - }; + const showData = (e) => {}; const showTalas = (e) => { map.addLayer(TALAS); loadData(); @@ -523,7 +481,6 @@ const MapComponent = ({ locations, onLocationUpdate }) => { // Ensure this function is only called when map is initialized and available const showAddStationPopup = (e) => { if (!initialMap) { - console.log("Map is not initialized."); return; } @@ -630,7 +587,6 @@ const MapComponent = ({ locations, onLocationUpdate }) => { const result = await response.json(); if (response.ok) { - console.log("Standort hinzugefügt:", result); alert("Standort erfolgreich hinzugefügt!"); form.reset(); // Formular zurücksetzen // Hier könntest du weitere Aktionen durchführen, wie das Schließen des Popups oder das Aktualisieren der Marker auf der Karte @@ -693,24 +649,34 @@ const MapComponent = ({ locations, onLocationUpdate }) => { }); GisStationsStaticDistrict.forEach((station) => { + // Filtere alle Statusobjekte für diese station.Na + const statusObjects = GisStationsStatusDistrict.filter( + (status) => status.IdLD === station.IdLD + ); + // Alle Status-Objekte mit gleicher IdLD finden const matchingStatuses = GisStationsStatusDistrict.filter( (status) => status.IdLD === station.IdLD ); - let additionalInfo = ""; + let status2 = ""; + let statusInfo = ""; // Umdrehen der Reihenfolge der Statusmeldungen matchingStatuses.reverse().forEach((status) => { - additionalInfo += ` + statusInfo += `
${status.Me} (${status.Na})
`; + + status2 = status.Na; }); + let iconPath = getIconPath(status2, station.Icon); + const marker = L.marker([station.X, station.Y], { icon: L.icon({ - iconUrl: getIconPath(station.Icon), + iconUrl: iconPath, iconSize: [25, 41], iconAnchor: [12, 41], popupAnchor: [1, -34], @@ -728,7 +694,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => { marker .bindPopup( - `${station.LD_Name}
${station.Device}
${station.Area_Short} (${station.Area_Name})
${station.Location_Short} (${station.Location_Name})
${additionalInfo}

` + `${station.LD_Name}
${station.Device}
${station.Area_Short} (${station.Area_Name})
${station.Location_Short} (${station.Location_Name})
${statusInfo}

` ) .openPopup(); }); @@ -736,6 +702,40 @@ const MapComponent = ({ locations, onLocationUpdate }) => { }, [map, GisStationsStaticDistrict, GisStationsStatusDistrict]); // Include GisStationsStatusDistrict in dependencies //------------------------------------------ + // Funktion, die den Pfad zum entsprechenden Icon basierend auf dem Status generiert + /* function getIconPath(status, iconId) { + let prefix = ""; + switch (status) { + case "critical": + prefix = "critical-marker-icon"; + break; + case "major": + prefix = "major-marker-icon"; + break; + case "minor": + prefix = "minor-marker-icon"; + break; + case "system": + prefix = "system-marker-icon"; + break; + case "ok": + default: + prefix = "marker-icon"; // Annahme: "ok" ist der Standardstatus und grün + break; + } + return `path/to/icons/${prefix}-${iconId}.png`; + } */ + //------------------------------------------ + function getIconPath(status, iconNumber) { + if (status) { + // Wenn status vorhanden ist, füge ihn in den Pfad ein mit Bindestrich + + return `TileMap/img/icons/${status}-marker-icon-${iconNumber}.png`; + } else { + // Wenn kein status vorhanden ist, lasse den Status-Teil ganz weg + return `TileMap/img/icons/marker-icon-${iconNumber}.png`; + } + } return (