POI hinzufügen Formular Elemente anordnen

components/DataSheet.js

@@ -1,29 +1,35 @@
 //components/DataSheet.js
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useCallback } from "react";
 import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil";
 import { gisStationsStaticDistrictState } from "../store/atoms/gisStationState";
 import { gisSystemStaticState } from "../store/atoms/gisSystemState";
 import { mapLayersState } from "../store/atoms/mapLayersState";
 import { selectedAreaState } from "../store/atoms/selectedAreaState";
 import { zoomTriggerState } from "../store/atoms/zoomTriggerState";
+import { debounce } from "lodash"; // Lodash-Bibliothek für die Debounce-Funktion
 
 function DataSheet() {
+  const [disableZoom, setDisableZoom] = useState(false);
   const setSelectedArea = useSetRecoilState(selectedAreaState);
   const [mapLayersVisibility, setMapLayersVisibility] =
     useRecoilState(mapLayersState);
   const [stationListing, setStationListing] = useState([]);
   const [systemListing, setSystemListing] = useState([]);
+  const [selectedStation, setSelectedStation] = useState(""); // Neuer State für den ausgewählten Station-Wert
+
   const GisStationsStaticDistrict = useRecoilValue(
     gisStationsStaticDistrictState
   );
   const GisSystemStatic = useRecoilValue(gisSystemStaticState);
   // In deiner Dropdown onChange Funktion
   const handleAreaChange = (event) => {
+    setSelectedStation(event.target.value);
     const selectedIndex = event.target.options.selectedIndex;
     const areaName = event.target.options[selectedIndex].text;
+    setDisableZoom(true);
     setSelectedArea(areaName);
-    //console.log("Area selected oder areaName in DataSheet.js:", areaName); // Nur zur Bestätigung in der Konsole
-    //console.log("event.target:", event.target);
+    console.log("Selected area normal:", areaName);
+    setTimeout(() => setDisableZoom(false), 1000);
   };
 
   useEffect(() => {
@@ -78,24 +84,54 @@ function DataSheet() {
   }, [GisStationsStaticDistrict, GisSystemStatic]);
   //---------------------------------------------------------
   const handleCheckboxChange = (name, event) => {
+    event.stopPropagation();
     const { checked } = event.target;
-    //console.log(`Checkbox ${name} checked state:`, checked); // Log the checked state of the checkbox
-
-    setMapLayersVisibility((prev) => {
-      const newState = {
-        ...prev,
-        [name]: checked,
-      };
-      //console.log(`New mapLayersVisibility state:`, newState); // Log the new state after update
-      return newState;
-    });
+    setDisableZoom(true);
+    setMapLayersVisibility((prev) => ({
+      ...prev,
+      [name]: checked,
+    }));
+    setTimeout(() => setDisableZoom(false), 1000); // Erhöhen Sie die Verzögerung
   };
+
   //---------------------------------------------------------
   const setZoomTrigger = useSetRecoilState(zoomTriggerState);
 
+  // Debounce-Funktion zum Verhindern von zu schnellen Zoom-Auslösungen
+  const debouncedSetZoomTrigger = useCallback(
+    debounce(() => {
+      setZoomTrigger((current) => current + 1);
+    }, 300),
+    [setZoomTrigger]
+  ); // 300 Millisekunden Verzögerung
+
   const handleIconClick = () => {
-    setZoomTrigger((current) => current + 1); // Trigger durch Inkrementierung
+    if (selectedStation !== "Station wählen" && !disableZoom) {
+      console.log("Icon clicked, valid station selected, triggering zoom.");
+      debouncedSetZoomTrigger();
+    } else {
+      console.log(
+        "No zoom triggered due to either 'Station wählen' or disableZoom state."
+      );
+    }
+    setSelectedStation("Station wählen"); // Dies setzt das Dropdown-Menü zurück auf den Standardwert
   };
+
+  useEffect(() => {
+    console.log("Selected station has changed to:", selectedStation);
+    // Führen Sie hier weitere Aktionen basierend auf dem neuen Wert von selectedStation aus
+  }, [selectedStation]); // Abhängigkeit zu selectedStation hinzufügen
+  //---------------------------------------------------------
+  /*   useEffect(() => {
+    if (!disableZoom) {
+      console.log("Zoom enabled, ready to trigger zoom.");
+      // Stellen Sie hier Ihre Logik bereit, um den Zoom zu triggern, wenn dies zulässig ist
+      debouncedSetZoomTrigger();
+    } else {
+      console.log("Zoom disabled, no action will be taken.");
+    }
+  }, [disableZoom]); // Reagiert nur auf Änderungen von disableZoom */
+
   //---------------------------------------------------------
 
   return (
@@ -106,6 +142,7 @@ function DataSheet() {
       <div className="flex flex-col gap-4 p-4">
         <div className="flex items-center justify-between">
           <select
+            value={selectedStation} // Binden des Wertes an den State
             onChange={handleAreaChange} // Verwenden der neuen handleAreaChange Funktion
             id="stationListing"
             className="border-solid-1 p-2 rounded ml-1  font-semibold"

components/MapComponent.js

@@ -36,8 +36,8 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
   const zoomTrigger = useRecoilValue(zoomTriggerState);
   const offlineTileLayer = "/mapTiles/{z}/{x}/{y}.png";
   //const onlineTileLayer = "/mapTiles/{z}/{x}/{y}.png";
-  const onlineTileLayer = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
-  //const onlineTileLayer = "mapTiles/{z}/{x}/{y}.png";
+  //const onlineTileLayer = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
+  const onlineTileLayer = "http://10.10.0.13:3000/mapTiles/{z}/{x}/{y}.png"; //Talas_v5 Server
   // Create map layers
   const TALAS = new L.layerGroup();
   const ECI = new L.layerGroup();
@@ -845,7 +845,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
         const poiTypName = poiTypMap.get(location.idPoiTyp) || "Unbekannt ";
         const marker = L.marker([latitude, longitude], {
           icon: L.icon({
-            iconUrl: "/img/icons/green-marker-icon.png",
+            iconUrl: "/img/icons/pois/poi-marker-icon-20.png",
             iconSize: [25, 41],
             iconAnchor: [12, 41],
             popupAnchor: [1, -34],
@@ -933,8 +933,8 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
         addContextMenuToMarker(marker);
       });
       map.addLayer(TALAS);
-      console.log("map", map);
-      console.log("oms", oms);
+      //console.log("map", map);
+      //console.log("oms", oms);
       //disable map contextmenu
       map.options.contextmenu = false;
       map.options.contextmenuItems = [];

components/ShowAddStationPopup.js

@@ -123,7 +123,7 @@ const ShowAddStationPopup = ({ onClose, map, latlng }) => {
     <form onSubmit={handleSubmit} className="m-0 p-2 w-full ">
       <div className="flex items-center mb-4">
         <label htmlFor="name" className="block mr-2 flex-none">
-          Name:
+          Name :
         </label>
         <input
           type="text"
@@ -135,6 +135,27 @@ const ShowAddStationPopup = ({ onClose, map, latlng }) => {
           className="block p-2 w-full border-2 border-gray-200 rounded-md text-sm"
         />
       </div>
+
+      {/* {locationDeviceData.----------------------------------------------*/}
+      <div className="flex items-center mb-4">
+        <label htmlFor="deviceName" className="block mr-2 flex-none">
+          Gerät :
+        </label>
+        <select
+          id="deviceName"
+          name="deviceName"
+          value={deviceName}
+          onChange={(e) => setDeviceName(e.target.value)}
+          className="block p-2 w-full border-2 border-gray-200 rounded-md text-sm"
+        >
+          {locationDeviceData.map((device, index) => (
+            <option key={index} value={device.name}>
+              {device.name}
+            </option>
+          ))}
+        </select>
+      </div>
+      {/* {locationDeviceData.----------------------------------------------*/}
       <div className="flex items-center mb-4">
         <label htmlFor="idPoiTyp2" className="block mr-2 flex-none">
           Typ:
@@ -154,52 +175,19 @@ const ShowAddStationPopup = ({ onClose, map, latlng }) => {
             ))}
         </select>
       </div>
-      {/* {locationDeviceData.----------------------------------------------*/}
-      <div className="flex items-center mb-4">
-        <label htmlFor="deviceName" className="block mr-2 flex-none">
-          deviceName:
-        </label>
-        <select
-          id="deviceName"
-          name="deviceName"
-          value={deviceName}
-          onChange={(e) => setDeviceName(e.target.value)}
-          className="block p-2 w-full border-2 border-gray-200 rounded-md text-sm"
-        >
-          {locationDeviceData.map((device, index) => (
-            <option key={index} value={device.name}>
-              {device.name}
-            </option>
-          ))}
-        </select>
-      </div>
-      {/* {locationDeviceData.----------------------------------------------*/}
-      <div className="flex items-center mb-4">
-        <label htmlFor="lat" className="block mr-2 flex-none">
-          Breitengrad:
-        </label>
-        <input
-          type="text"
-          id="lat"
-          name="lat"
-          value={latitude}
-          readOnly
-          className="block p-2 w-full border-2 border-gray-200 rounded-md text-sm"
-        />
-      </div>
-      <div className="flex items-center mb-4">
-        <label htmlFor="lng" className="block mr-2 flex-none">
-          Längengrad:
-        </label>
-        <input
-          type="text"
-          id="lng"
-          name="lng"
-          value={longitude}
-          readOnly
-          className="block p-2 w-full border-2 border-gray-200 rounded-md text-sm"
-        />
+      <div className="flex flex-row items-center justify-center">
+        <div className="flex items-center mb-4">
+          <label htmlFor="lat" className="block mr-2 flex-none text-xs">
+            Lat : {latitude}
+          </label>
+        </div>
+        <div className="flex items-center mb-4">
+          <label htmlFor="lng" className="block mr-2 flex-none text-xs">
+            Lng : {longitude}
+          </label>
+        </div>
       </div>
+
       <button
         type="submit"
         className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded w-full"

package-lock.json

@@ -1,5 +1,5 @@
 {
-  "name": "OpenStreetMapProject-08.05.2024",
+  "name": "nodeMap",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
@@ -10,6 +10,7 @@
         "leaflet": "^1.9.4",
         "leaflet-contextmenu": "^1.4.0",
         "leaflet.smooth_marker_bouncing": "^3.0.3",
+        "lodash": "^4.17.21",
         "mysql": "^2.18.1",
         "next": "^14.2.3",
         "overlapping-marker-spiderfier-leaflet": "^0.2.7",
@@ -1109,6 +1110,11 @@
       "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
       "dev": true
     },
+    "node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+    },
     "node_modules/loose-envify": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",

package.json

@@ -5,6 +5,7 @@
     "leaflet": "^1.9.4",
     "leaflet-contextmenu": "^1.4.0",
     "leaflet.smooth_marker_bouncing": "^3.0.3",
+    "lodash": "^4.17.21",
     "mysql": "^2.18.1",
     "next": "^14.2.3",
     "overlapping-marker-spiderfier-leaflet": "^0.2.7",

pages/api/talas_v5/area.js

@@ -0,0 +1,43 @@
+// pages/api/talas_v5/area.js
+// Lesen von talas_v5 MySQL-Datenbank -> area Tabelle enthält DAUZ Geräte
+// Wenn gebraucht wird, dann nutzen ansonsten löschen
+
+import mysql from "mysql";
+
+const dbConfig = {
+  host: process.env.DB_HOST,
+  user: process.env.DB_USER,
+  password: process.env.DB_PASSWORD,
+  database: process.env.DB_NAME,
+  port: process.env.DB_PORT,
+};
+console.log("my dbconfig: ", dbConfig);
+export default function handler(req, res) {
+  const connection = mysql.createConnection(dbConfig);
+
+  connection.connect((err) => {
+    if (err) {
+      console.error("Fehler beim Verbinden:", err.stack);
+      res.status(500).json({ error: "Verbindungsfehler zur Datenbank" });
+      return;
+    }
+
+    console.log("Verbunden als ID", connection.threadId);
+    //Fehler weil, existiertdie Tabelle auf localhost:3000 nicht
+    connection.query(
+      "SELECT ..., ..., ..., ... FROM ... WHERE ... = ...",
+      (error, results) => {
+        if (error) {
+          console.error("Fehler beim Abrufen der API", error);
+          res.status(500).json({ error: "Fehler bei der Abfrage" });
+          return;
+        }
+
+        // Wichtig: Senden Sie die Antwort zurück
+        res.status(200).json(results);
+
+        connection.end();
+      }
+    );
+  });
+}