Station Icon Color ändern, je nach Status

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) => {
+  const showData = (e) => {};
-    console.log(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 += `
           <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}&nbsp;<span style="color: ${status.Co};">(${status.Na})</span>
           </div>`;
+
+          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(
-            `<b>${station.LD_Name}</b><br>${station.Device}<br>${station.Area_Short} (${station.Area_Name})<br>${station.Location_Short} (${station.Location_Name}) <br>${additionalInfo}<br><br>`
+            `<b>${station.LD_Name}</b><br>${station.Device}<br>${station.Area_Short} (${station.Area_Name})<br>${station.Location_Short} (${station.Location_Name}) <br>${statusInfo}<br><br>`
           )
           .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 (
     <div