Ismail/nodeMap
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WIP: POI Update

Browse Source
This commit is contained in:
ISA
2024-09-12 22:56:59 +02:00
parent b364d056f1
commit 5295dfec62
9 changed files with 135 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
.env.local
View File

@@ -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"

12
components/MapComponent.js
View File

@@ -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.");
}

0
components/PoiUpdateModal.js → components/PoiUpdateModal copy.js
View File

26
components/gisPolylines/PolylineContextMenu.js Normal file
View File

@@ -0,0 +1,26 @@
// /components/gisPolylines/PolylineContextMenu.js
import React from "react";
const PolylineContextMenu = ({ position, onAddPoint, onRemovePoint, onClose }) => {
return (
<div
style={{
position: "absolute",
top: position.y,
left: position.x,
backgroundColor: "white",
border: "1px solid black",
padding: "10px",
zIndex: 1000,
}}
>
<ul>
<li onClick={onAddPoint}>Stützpunkt hinzufügen</li>
<li onClick={onRemovePoint}>Stützpunkt entfernen</li>
<li onClick={onClose}>Schließen</li>
</ul>
</div>
);
};
export default PolylineContextMenu;

127
components/pois/PoiUpdateModal.js
View File

@@ -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:
</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.id}>
{locationDeviceData.map((device) => (
<option key={device.idLD} value={device.name}>
{device.name}
</option>
))}
@@ -189,8 +170,8 @@ const PoiUpdateModal = ({ onClose, poiData, onSubmit }) => {
Typ:
</label>
<select id="idPoiTyp2" name="idPoiTyp2" value={poiTypeId} onChange={(e) => setPoiTypeId(e.target.value)} className="block p-2 w-full border-2 border-gray-200 rounded-md text-sm">
{poiTypData.map((poiTyp, index) => (
<option key={index} value={poiTyp.idPoiTyp}>
{poiTypData.map((poiTyp) => (
<option key={poiTyp.idPoiTyp} value={poiTyp.idPoiTyp}>
{poiTyp.name}
</option>
))}

22
hooks/useMapComponentState.js
View File

@@ -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,

7
pages/api/talas5/location_device.js
View File

@@ -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) {

3
pages/api/talas_v5_DB/locationDevice/locationDevices.js
View File

@@ -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;

7
utils/setupPOIs.js
View File

@@ -76,12 +76,13 @@ export const setupPOIs = async (
marker.bindPopup(`
<div>
<b class="text-xl text-black-700">${location.description || "Unbekannt"}</b><br>
${deviceName}<br>
${deviceName || "unbekannt"} <br>
${poiTypName}<br>
</div>
`);
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);