diff --git a/.env.local b/.env.local index ee43d9cb9..6ea9a3240 100644 --- a/.env.local +++ b/.env.local @@ -15,31 +15,31 @@ ######################### -DB_HOST=10.10.0.70 -DB_USER=root -DB_PASSWORD="root#$" -DB_NAME=talas_v5 -DB_PORT=3306 - -######################### - -NEXT_PUBLIC_BASE_URL="http://10.10.0.30/talas5/devices/" -NEXT_PUBLIC_SERVER_URL="http://10.10.0.70" -NEXT_PUBLIC_PROXY_TARGET="http://10.10.0.70" -NEXT_PUBLIC_ONLINE_TILE_LAYER="http://10.10.0.13:3000/mapTiles/{z}/{x}/{y}.png" -######################### - -#DB_HOST=192.168.10.168 +#DB_HOST=10.10.0.70 #DB_USER=root #DB_PASSWORD="root#$" #DB_NAME=talas_v5 #DB_PORT=3306 + +######################### + +#NEXT_PUBLIC_BASE_URL="http://10.10.0.30/talas5/devices/" +#NEXT_PUBLIC_SERVER_URL="http://10.10.0.70" +#NEXT_PUBLIC_PROXY_TARGET="http://10.10.0.70" +#NEXT_PUBLIC_ONLINE_TILE_LAYER="http://10.10.0.13:3000/mapTiles/{z}/{x}/{y}.png" +######################### + +DB_HOST=192.168.10.168 +DB_USER=root +DB_PASSWORD="root#$" +DB_NAME=talas_v5 +DB_PORT=3306 ######################### #URLs für den Client (clientseitig) -#NEXT_PUBLIC_BASE_URL="http://192.168.10.168/talas5/devices/" -#NEXT_PUBLIC_SERVER_URL="http://192.168.10.168" -#NEXT_PUBLIC_PROXY_TARGET="http://192.168.10.168" -#NEXT_PUBLIC_ONLINE_TILE_LAYER="http://192.168.10.14:3000/mapTiles/{z}/{x}/{y}.png" +NEXT_PUBLIC_BASE_URL="http://192.168.10.168/talas5/devices/" +NEXT_PUBLIC_SERVER_URL="http://192.168.10.168" +NEXT_PUBLIC_PROXY_TARGET="http://192.168.10.168" +NEXT_PUBLIC_ONLINE_TILE_LAYER="http://192.168.10.14:3000/mapTiles/{z}/{x}/{y}.png" ######################### online #NEXT_PUBLIC_ONLINE_TILE_LAYER="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" \ No newline at end of file diff --git a/components/MapComponent.js b/components/MapComponent.js index cf6e06960..53d4b47f8 100644 --- a/components/MapComponent.js +++ b/components/MapComponent.js @@ -257,25 +257,25 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { await fetchGisStationsStaticDistrict(mapGisStationsStaticDistrictUrl, setGisStationsStaticDistrict, fetchOptions); requestCount++; // Zähler erhöhen localStorage.setItem("fetchWebServiceMap", requestCount); - console.log(`fetchWebServiceMap in MapComponent wurde ${requestCount} Mal aufgerufen.`); + //console.log(`fetchWebServiceMap in MapComponent wurde ${requestCount} Mal aufgerufen.`); // Fetch GIS Stations Status District await fetchGisStationsStatusDistrict(mapGisStationsStatusDistrictUrl, setGisStationsStatusDistrict, fetchOptions); requestCount++; // Zähler erhöhen localStorage.setItem("fetchWebServiceMap", requestCount); - console.log(`fetchWebServiceMap in MapComponent wurde ${requestCount} Mal aufgerufen.`); + //console.log(`fetchWebServiceMap in MapComponent wurde ${requestCount} Mal aufgerufen.`); // Fetch GIS Stations Measurements await fetchGisStationsMeasurements(mapGisStationsMeasurementsUrl, setGisStationsMeasurements, fetchOptions); requestCount++; // Zähler erhöhen localStorage.setItem("fetchWebServiceMap", requestCount); - console.log(`fetchWebServiceMap in MapComponent wurde ${requestCount} Mal aufgerufen.`); + //console.log(`fetchWebServiceMap in MapComponent wurde ${requestCount} Mal aufgerufen.`); // Fetch GIS System Static await fetchGisSystemStatic(mapGisSystemStaticUrl, setGisSystemStatic, setGisSystemStaticLoaded, fetchOptions); requestCount++; // Zähler erhöhen localStorage.setItem("fetchWebServiceMap", requestCount); - console.log(`fetchWebServiceMap in MapComponent wurde ${requestCount} Mal aufgerufen.`); + //console.log(`fetchWebServiceMap in MapComponent wurde ${requestCount} Mal aufgerufen.`); } catch (error) { console.error("Error fetching data:", error); } @@ -376,7 +376,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { useEffect(() => { if (poiData.length === 0) return; - setupPOIs(map, locations, poiData, poiTypMap, userRights, poiLayerRef, setSelectedPoi, setLocationDeviceData, setDeviceName, setCurrentPoi, poiLayerVisible, fetchPoiData, toast, setShowPoiUpdateModal, setCurrentPoiData); + setupPOIs(map, locations, poiData, poiTypMap, userRights, poiLayerRef, setSelectedPoi, setLocationDeviceData, setDeviceName, setCurrentPoi, poiLayerVisible, fetchPoiData, toast, setShowPoiUpdateModal, setCurrentPoiData, deviceName); }, [map, locations, onLocationUpdate, poiReadTrigger, isPoiTypLoaded, userRights, poiLayerVisible, poiData, poiTypMap]); //--------------------------------------------- @@ -666,7 +666,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { map.whenReady(() => { setTimeout(() => { if (map.contextmenu) { - console.log("Contextmenu ist vorhanden"); + //console.log("Contextmenu ist vorhanden"); } else { console.warn("Contextmenu ist nicht verfügbar."); } diff --git a/components/PoiUpdateModal.js b/components/PoiUpdateModal copy.js similarity index 100% rename from components/PoiUpdateModal.js rename to components/PoiUpdateModal copy.js diff --git a/components/gisPolylines/PolylineContextMenu.js b/components/gisPolylines/PolylineContextMenu.js new file mode 100644 index 000000000..a07de670b --- /dev/null +++ b/components/gisPolylines/PolylineContextMenu.js @@ -0,0 +1,26 @@ +// /components/gisPolylines/PolylineContextMenu.js +import React from "react"; + +const PolylineContextMenu = ({ position, onAddPoint, onRemovePoint, onClose }) => { + return ( +
+ +
+ ); +}; + +export default PolylineContextMenu; diff --git a/components/pois/PoiUpdateModal.js b/components/pois/PoiUpdateModal.js index c2795c80e..8d1b61ee7 100644 --- a/components/pois/PoiUpdateModal.js +++ b/components/pois/PoiUpdateModal.js @@ -1,5 +1,3 @@ -// components/pois/poiUpdateModal.js - import React, { useState, useEffect } from "react"; import { useRecoilValue } from "recoil"; import { selectedPoiState } from "../../store/atoms/poiState"; @@ -8,6 +6,7 @@ import { currentPoiState } from "../../store/atoms/currentPoiState"; const PoiUpdateModal = ({ onClose, poiData, onSubmit }) => { const currentPoi = useRecoilValue(currentPoiState); const selectedPoi = useRecoilValue(selectedPoiState); + const [poiId, setPoiId] = useState(poiData ? poiData.idPoi : ""); const [name, setName] = useState(poiData ? poiData.name : ""); const [poiTypData, setPoiTypData] = useState([]); @@ -15,36 +14,73 @@ const PoiUpdateModal = ({ onClose, poiData, onSubmit }) => { const [locationDeviceData, setLocationDeviceData] = useState([]); const [deviceName, setDeviceName] = useState(""); const [idLD, setIdLD] = useState(poiData ? poiData.idLD : ""); - const [description, setDescription] = useState(poiData ? poiData.description : ""); + // Fetch and set POI data useEffect(() => { if (poiData) { - //console.log("Initial poiData:", poiData); setPoiId(poiData.idPoi); setName(poiData.name); setPoiTypeId(poiData.idPoiTyp); setIdLD(poiData.idLD); setDescription(poiData.description); - setDeviceName(poiData.idLD); - //console.log("Loaded POI Data for editing:", poiData); } }, [poiData]); + // Fetch POI types and pre-select the current POI type useEffect(() => { - const fetchDeviceId = async () => { - if (poiData && poiData.idLD) { + const fetchPoiTypData = async () => { + const cachedPoiTypData = localStorage.getItem("poiTypData"); + if (cachedPoiTypData) { + const data = JSON.parse(cachedPoiTypData); + setPoiTypData(data); + if (poiData) { + setPoiTypeId(poiData.idPoiTyp); // Set the selected POI type ID + } + } else { try { - const response = await fetch(`/api/talas_v5_DB/locationDevice/getDeviceIdById?idLD=${poiData.idLD}`); + const response = await fetch("/api/talas_v5_DB/poiTyp/readPoiTyp"); const data = await response.json(); - if (data) setDeviceName(data.name); + setPoiTypData(data); + localStorage.setItem("poiTypData", JSON.stringify(data)); + if (poiData) { + setPoiTypeId(poiData.idPoiTyp); // Set the selected POI type ID + } } catch (error) { - console.error("Fehler beim Abrufen der Geräteinformation in PoiUpdateModel.js: ", error); + console.error("Fehler beim Abrufen der poiTyp Daten:", error); } } }; + fetchPoiTypData(); + }, [poiData]); - fetchDeviceId(); + // Fetch location devices and pre-select the current device + useEffect(() => { + const fetchLocationDevices = async () => { + const cachedDeviceData = localStorage.getItem("locationDeviceData"); + if (cachedDeviceData) { + const data = JSON.parse(cachedDeviceData); + setLocationDeviceData(data); + if (poiData) { + const selectedDevice = data.find((device) => device.idLD === poiData.idLD); + setDeviceName(selectedDevice ? selectedDevice.name : ""); // Pre-select the current device + } + } else { + try { + const response = await fetch("/api/talas_v5_DB/locationDevice/locationDevices"); + const data = await response.json(); + setLocationDeviceData(data); + localStorage.setItem("locationDeviceData", JSON.stringify(data)); + if (poiData) { + const selectedDevice = data.find((device) => device.idLD === poiData.idLD); + setDeviceName(selectedDevice ? selectedDevice.name : ""); // Pre-select the current device + } + } catch (error) { + console.error("Fehler beim Abrufen der Standort- und Gerätedaten:", error); + } + } + }; + fetchLocationDevices(); }, [poiData]); const handleDeletePoi = async () => { @@ -54,79 +90,24 @@ const PoiUpdateModal = ({ onClose, poiData, onSubmit }) => { method: "DELETE", }); if (response.ok) { - //alert("POI wurde erfolgreich gelöscht."); onClose(); window.location.reload(); } else { throw new Error("Fehler beim Löschen des POI."); } } catch (error) { - console.error("Fehler beim Löschen des POI 2:", error); + console.error("Fehler beim Löschen des POI:", error); alert("Fehler beim Löschen des POI."); } } }; - useEffect(() => { - const fetchPoiTypData = async () => { - try { - const response = await fetch("/api/talas_v5_DB/poiTyp/readPoiTyp"); - const data = await response.json(); - setPoiTypData(data); - if (selectedPoi && data) { - const matchingType = data.find((pt) => pt.name === selectedPoi.typ); - if (matchingType) { - setPoiTypeId(matchingType.idPoiTyp); - } - } - } catch (error) { - console.error("Fehler beim Abrufen der poiTyp Daten:", error); - } - }; - fetchPoiTypData(); - }, [selectedPoi]); - - useEffect(() => { - const fetchData = async () => { - try { - // const response = await fetch("/api/talas_v5/location_device"); //"/api/talas_v5_DB/locationDevice/location_device" - const response = await fetch("/api/talas_v5_DB/locationDevice/locationDevices"); - const data = await response.json(); - setLocationDeviceData(data); - if (poiData && poiData.idLD) { - const selectedDevice = data.find((device) => device.id === poiData.idLD); - setDeviceName(selectedDevice ? selectedDevice.id : data[0].id); - //console.log("Selected Device in poiUpdate:", selectedDevice); - } - } catch (error) { - console.error("Fehler beim Abrufen der Standort- und Gerätedaten:", error); - } - }; - fetchData(); - }, []); - - useEffect(() => { - fetch("/api/talas_v5_DB/locationDevice/locationDevices") - .then((response) => response.json()) - .then((data) => { - setLocationDeviceData(data); - const currentDevice = data.find((device) => device.idLD === currentPoi.idLD); - if (currentDevice) { - setDeviceName(currentDevice.name); - //console.log("Current Device name in poiUpdate:", currentDevice.name); - } - }) - .catch((error) => { - console.error("Fehler beim Abrufen der Gerätedaten:", error); - setLocationDeviceData([]); - }); - }, [poiData?.idLD, currentPoi]); - const handleSubmit = async (event) => { event.preventDefault(); const idLDResponse = await fetch(`/api/talas_v5_DB/locationDevice/getDeviceId?deviceName=${encodeURIComponent(deviceName)}`); const idLDData = await idLDResponse.json(); const idLD = idLDData.idLD; + try { const response = await fetch("/api/talas_v5_DB/pois/updatePoi", { method: "POST", @@ -176,8 +157,8 @@ const PoiUpdateModal = ({ onClose, poiData, onSubmit }) => { Gerät: setPoiTypeId(e.target.value)} className="block p-2 w-full border-2 border-gray-200 rounded-md text-sm"> - {poiTypData.map((poiTyp, index) => ( - ))} diff --git a/hooks/useMapComponentState.js b/hooks/useMapComponentState.js index 2ebc06a04..7d248a4b7 100644 --- a/hooks/useMapComponentState.js +++ b/hooks/useMapComponentState.js @@ -1,5 +1,5 @@ // hooks/useMapComponentState.js -import { useState, useRef } from "react"; +import { useState, useEffect } from "react"; import usePoiTypData from "./usePoiTypData"; import { useRecoilValue } from "recoil"; import { poiLayerVisibleState } from "../store/atoms/poiLayerVisibleState"; @@ -12,6 +12,26 @@ export const useMapComponentState = () => { const [menuItemAdded, setMenuItemAdded] = useState(false); const poiLayerVisible = useRecoilValue(poiLayerVisibleState); + // Fetch devices when the component is mounted + useEffect(() => { + const fetchDeviceData = async () => { + try { + const response = await fetch("/api/talas5/location_device"); // API call to get devices + const data = await response.json(); + setLocationDeviceData(data); // Set the device data + + // Optional: set a default deviceName if needed + if (data.length > 0) { + setDeviceName(data[0].name); // Set the first device's name + } + } catch (error) { + console.error("Error fetching device data:", error); + } + }; + + fetchDeviceData(); + }, []); // Runs only once when the component is mounted + return { poiTypData, isPoiTypLoaded, diff --git a/pages/api/talas5/location_device.js b/pages/api/talas5/location_device.js index 498db9424..38d50c465 100644 --- a/pages/api/talas5/location_device.js +++ b/pages/api/talas5/location_device.js @@ -8,14 +8,15 @@ export default async function handler(req, res) { let connection; try { // SQL-Query and parameters - const sql = "SELECT idLD, iddevice, name FROM location_device WHERE iddevice = ?"; - const params = [160]; // Example parameter + const sql = "SELECT idLD, iddevice, name FROM location_device ORDER BY name"; + //const params = [160]; // Example parameter // Get a connection from the pool connection = await pool.getConnection(); // Execute the query - const [results] = await connection.query(sql, params); + //const [results] = await connection.query(sql, params); + const [results] = await connection.query(sql); // Check if results are empty if (!results.length) { diff --git a/pages/api/talas_v5_DB/locationDevice/locationDevices.js b/pages/api/talas_v5_DB/locationDevice/locationDevices.js index 4b1e7bc2b..df6d4abea 100644 --- a/pages/api/talas_v5_DB/locationDevice/locationDevices.js +++ b/pages/api/talas_v5_DB/locationDevice/locationDevices.js @@ -8,7 +8,8 @@ export default async function handler(req, res) { return res.status(405).json({ error: "Nur GET Methode erlaubt" }); } - const query = "SELECT * FROM location_device WHERE iddevice = 160"; + //const query = "SELECT * FROM location_device WHERE iddevice = 160"; + const query = "SELECT * FROM location_device ORDER BY name"; let connection; diff --git a/utils/setupPOIs.js b/utils/setupPOIs.js index 8d153cd3b..435742bf0 100644 --- a/utils/setupPOIs.js +++ b/utils/setupPOIs.js @@ -76,12 +76,13 @@ export const setupPOIs = async ( marker.bindPopup(`
${location.description || "Unbekannt"}
- ${deviceName}
+ ${deviceName || "unbekannt"}
${poiTypName}
`); marker.on("mouseover", function () { + console.log("Device Name:", deviceName); // Debugging handlePoiSelect( { id: location.idPoi, @@ -92,12 +93,10 @@ export const setupPOIs = async ( }, setSelectedPoi, setLocationDeviceData, - setDeviceName, + setDeviceName, // Stelle sicher, dass dies korrekt funktioniert poiLayerRef, poiTypMap ); - setCurrentPoi(location); - this.openPopup(); localStorage.setItem("lastElementType", "marker"); localStorage.setItem("markerLink", this.options.link);