Sonstige Popup per mouseove

2024-04-26 08:50:15 +02:00
parent 5b338ada12
commit ddd39bc1ef
4 changed files with 51 additions and 53 deletions
--- a/components/DataSheet.js
+++ b/components/DataSheet.js
@@ -18,11 +18,11 @@ function DataSheet() {
  const GisSystemStatic = useRecoilValue(gisSystemStaticState);

  useEffect(() => {
-    console.log(
+    /*    console.log(
      "GisStationsStaticDistrict in DataSheet:",
      GisStationsStaticDistrict
    );
-    console.log("GisSystemStatic in DataSheet:", GisSystemStatic);
+    console.log("GisSystemStatic in DataSheet:", GisSystemStatic); */

    // Filtern der eindeutigen Gebiete (Areas) und alphabetisches Sortieren
    const seenNames = new Set();
@@ -63,7 +63,7 @@ function DataSheet() {
      name: area.Name,
    }));
    setSystemListing(newSystemListing);
-    console.log("System Listing:", systemListing);
+    //console.log("System Listing:", systemListing);
  }, [GisStationsStaticDistrict]);

  const [checkedStations, setCheckedStations] = useState({});
@@ -194,23 +194,23 @@ function DataSheet() {
  };

  const handleStationChange = (event) => {
-    console.log("Station selected:", event.target.value);
+    //console.log("Station selected:", event.target.value);
  };

  const resetView = () => {
    console.log("View has been reset");
  };
  useEffect(() => {
-    console.log("Checked Stations:", checkedStations);
+    //console.log("Checked Stations:", checkedStations);
    // Wenn systemListing.name == "TALAS" ist, gib in der Konsole aus
    const talasStation = systemListing.find(
      (station) => station.name === "TALAS"
    );
    if (talasStation) {
-      console.log(
+      /*  console.log(
        "TALAS Station ist gecheckt:",
        checkedStations[talasStation.id]
-      );
+      ); */
    }
  }, [checkedStations, systemListing]);
  const eciStation = systemListing.find((station) => station.name === "ECI");
--- a/components/MapComponent.js
+++ b/components/MapComponent.js
@@ -176,7 +176,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
        // Prüfen, ob die Antwort das erwartete Format hat und Daten enthält
        if (jsonResponse && jsonResponse.Systems) {
          setGisSystemStatic(jsonResponse.Systems); // Direkter Zugriff auf 'Systems'
-          console.log("GisSystemStatic:", jsonResponse.Systems);
+          // console.log("GisSystemStatic:", jsonResponse.Systems);
        } else {
          console.error(
            'Erwartete Daten im "Systems"-Array nicht gefunden',
@@ -212,7 +212,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {

  useEffect(() => {
    if (typeof window !== "undefined") {
-      console.log("Window height from config:", config.windowHeight);
+      //console.log("Window height from config:", config.windowHeight);
    }
  }, []);

@@ -798,7 +798,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
    }
  }, [map, talasMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken

-  console.log("talasMarkers", talasMarkers);
+  //console.log("talasMarkers", talasMarkers);
  //-------------------------------------------
  //--------------------------------------------------------------------------------
  useEffect(() => {
@@ -819,7 +819,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
    }
  }, [map, eciMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken

-  console.log("eciMarkers", eciMarkers);
+  //console.log("eciMarkers", eciMarkers);
  //-------------------------------------------
  //--------------------------------------------------------------------------------
  useEffect(() => {
@@ -840,7 +840,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
    }
  }, [map, gsmModemMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken

-  console.log("gsmModemMarkers", gsmModemMarkers);
+  //console.log("gsmModemMarkers", gsmModemMarkers);
  //-------------------------------------------
  //--------------------------------------------------------------------------------
  useEffect(() => {
@@ -861,7 +861,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
    }
  }, [map, ciscoRouterMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken

-  console.log("ciscoRouterMarkers", ciscoRouterMarkers);
+  //console.log("ciscoRouterMarkers", ciscoRouterMarkers);
  //-------------------------------------------
  //--------------------------------------------------------------------------------
  useEffect(() => {
@@ -884,7 +884,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
    }
    // }, [map, wagoMarkers, mapLayersVisibility.WAGO]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken
  }, [map, wagoMarkers]);
-  console.log("wagoMarkers", wagoMarkers);
+  //console.log("wagoMarkers", wagoMarkers);
  //-------------------------------------------
  //--------------------------------------------------------------------------------
  useEffect(() => {
@@ -905,7 +905,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
    }
  }, [map, siemensMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken

-  console.log("siemensMarkers", siemensMarkers);
+  //console.log("siemensMarkers", siemensMarkers);
  //-------------------------------------------
  //--------------------------------------------------------------------------------
  useEffect(() => {
@@ -926,7 +926,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
    }
  }, [map, otdrMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken

-  console.log("otdrMarkers", otdrMarkers);
+  //console.log("otdrMarkers", otdrMarkers);
  //-------------------------------------------
  //--------------------------------------------------------------------------------
  useEffect(() => {
@@ -947,7 +947,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
    }
  }, [map, wdmMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken

-  console.log("wdmMarkers", wdmMarkers);
+  //console.log("wdmMarkers", wdmMarkers);
  //-------------------------------------------
  //--------------------------------------------------------------------------------
  useEffect(() => {
@@ -971,7 +971,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
      let measurementGT = measurements["GT"];
      let measurementRLF = measurements["RLF"];

-      console.log(
+      /*       console.log(
        "area_name",
        area_name,
        "------measurementLT",
@@ -983,7 +983,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
        "------measurementRLF",
        measurements.RLF
      );
-      console.log("measurements", measurements);
+      console.log("measurements", measurements); */
      gmaMarkers.forEach((marker) => {
        marker.addTo(map);
        oms.addMarker(marker);
@@ -1002,7 +1002,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
                <span>FBT : ${measurements.FBT} °C</span> 
              </div>
              <div class="font-bold text-sm text-gray-700 mt-1">
-                <span>GT : ${measurements.GT === 'nicht ermittelbar' ? measurements.GT : `${measurements.GT} °C`}</span> 
+                <span>GT : ${measurements.GT === "nicht ermittelbar" ? measurements.GT : `${measurements.GT} °C`}</span> 
              </div>
              <div class="font-bold text-sm text-gray-700 mt-1">
                <span>RLF : ${measurements.RLF} %</span> 
@@ -1014,7 +1014,6 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
            direction: "auto", // oder 'top', 'bottom', 'left', 'right'
          }
        );
-        

        // Popup beim Überfahren mit der Maus öffnen und schließen
        marker.on("mouseover", function () {
@@ -1028,7 +1027,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
    }
  }, [map, gmaMarkers]); // Abhängigkeiten auf `map` und `gmaMarkers` beschränken

-  console.log("gmaMarkers", gmaMarkers);
+  //console.log("gmaMarkers", gmaMarkers);

  //-------------------------------------------
  //--------------------------------------------------------------------------------
@@ -1050,7 +1049,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
    }
  }, [map, messstellenMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken

-  console.log("messstellenMarkers", messstellenMarkers);
+  //console.log("messstellenMarkers", messstellenMarkers);
  //-------------------------------------------
  //--------------------------------------------------------------------------------
  useEffect(() => {
@@ -1071,7 +1070,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
    }
  }, [map, talasiclMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken

-  console.log("talasiclMarkers", talasiclMarkers);
+  //console.log("talasiclMarkers", talasiclMarkers);
  //-------------------------------------------
  //--------------------------------------------------------------------------------
  useEffect(() => {
@@ -1090,7 +1089,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
    }
  }, [map, dauzMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken

-  console.log("dauzMarkers", dauzMarkers);
+  //console.log("dauzMarkers", dauzMarkers);
  //-------------------------------------------
  //--------------------------------------------------------------------------------
  useEffect(() => {
@@ -1109,27 +1108,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
    }
  }, [map, smsfunkmodemMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken

-  console.log("smsfunkmodemMarkers", smsfunkmodemMarkers);
-  //-------------------------------------------
-  //--------------------------------------------------------------------------------
-  /*   useEffect(() => {
-    // Drucker ist hier und noch eine Marker "SNMP"
-    if (map && sonstigeMarkers.length) {
-      sonstigeMarkers.forEach((marker) => {
-        marker.addTo(map);
-
-        // Popup beim Überfahren mit der Maus öffnen und schließen
-        marker.on("mouseover", function () {
-          this.openPopup();
-        });
-        marker.on("mouseout", function () {
-          this.closePopup();
-        });
-      });
-    }
-  }, [map, sonstigeMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken
-
-  console.log("sonstigeMarkers", sonstigeMarkers); */
+  //console.log("smsfunkmodemMarkers", smsfunkmodemMarkers);
  //-------------------------------------------
  //--------------------------------------------------------------------------------
  useEffect(() => {
@@ -1148,7 +1127,26 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
    }
  }, [map, ulafMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken

-  console.log("ulafMarkers", ulafMarkers);
+  //console.log("ulafMarkers", ulafMarkers);
+  //-------------------------------------------
+  //--------------------------------------------------------------------------------
+  useEffect(() => {
+    if (map && sonstigeMarkers.length) {
+      sonstigeMarkers.forEach((marker) => {
+        marker.addTo(map);
+
+        // Popup beim Überfahren mit der Maus öffnen und schließen
+        marker.on("mouseover", function () {
+          this.openPopup();
+        });
+        marker.on("mouseout", function () {
+          this.closePopup();
+        });
+      });
+    }
+  }, [map, sonstigeMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken
+
+  //console.log("sonstige", sonstigeMarkers);
  //-------------------------------------------
  //--------------------------------------------------------------------------------