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

WIP: POI Update Modal, Beschreibung und Gerät funktioniert wie erweitet, Typ soll auch den gewählte POI Typ zuerst in dropdown angezeigt wird

Browse Source
This commit is contained in:
ISA
2024-09-13 08:50:10 +02:00
parent 5295dfec62
commit 56f4a585ae
7 changed files with 40 additions and 298 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"

264
components/PoiUpdateModal copy.js
View File

@@ -1,264 +0,0 @@
// pages/api/poiUpdateModal.js
//
import React, { useState, useEffect } from "react";
import { useRecoilValue } from "recoil";
import { selectedPoiState } from "../store/atoms/poiState";
import { currentPoiState } from "../store/atoms/currentPoiState";
const PoiUpdateModal = ({ onClose, poiData }) => {
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([]);
const [poiTypeId, setPoiTypeId] = useState("");
const [locationDeviceData, setLocationDeviceData] = useState([]);
const [deviceName, setDeviceName] = useState("");
const [idLD, setIdLD] = useState(poiData ? poiData.idLD : "");
const [idLocationDevice, setIdLocationDevice] = useState("");
const [description, setDescription] = useState(poiData ? poiData.description : "");
// Log the initial POI data
useEffect(() => {
if (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);
console.log("POI ID:", poiData.idPoi);
console.log("POI Name:", poiData.name);
console.log("POI Typ ID:", poiData.idPoiTyp);
console.log("POI Beschreibung:", poiData.description);
console.log("POI Geräte-ID:", poiData.idLD);
}
}, [poiData]);
/* const fetchDeviceNameById = async (idLD) => {
try {
const response = await fetch(`/api/getDeviceNameById?idLD=${idLD}`);
const data = await response.json();
setDeviceName(data.deviceName);
} catch (error) {
console.error("Error fetching device name:", error);
}
}; */
/* const fetchDeviceNameById = async (idLD) => {
try {
const response = await fetch(`/api/talas_v5_DB/locationDevice/locationDeviceNameById?idLD=${idLD}`);
const data = await response.json();
setDeviceName(data.deviceName);
} catch (error) {
console.error("Error fetching device name:", error);
}
}; */
// Beim Öffnen des Modals die Geräte-ID basierend auf dem Gerätenamen abrufen, wenn vorhanden
useEffect(() => {
const fetchDeviceId = async () => {
if (poiData && poiData.idLD) {
try {
const response = await fetch(`/api/talas_v5_DB/locationDevice/getDeviceIdById?idLD=${poiData.idLD}`);
const data = await response.json();
if (data) setDeviceName(data.name);
} catch (error) {
console.error("Fehler beim Abrufen der Geräteinformation in PoiUpdateModel.js: ", error);
}
}
};
fetchDeviceId();
}, [poiData]);
// Function to handle deleting a POI
const handleDeletePoi = async () => {
if (confirm("Sind Sie sicher, dass Sie diesen POI löschen möchten?")) {
try {
const response = await fetch(`/api/talas_v5_DB/pois/deletePoi?id=${poiId}`, {
method: "DELETE",
});
if (response.ok) {
// alert("POI wurde erfolgreich gelöscht.");
onClose(); // Close the modal
//Browser neu laden, um die aktualisierte Liste anzuzeigen
window.location.reload();
} else {
throw new Error("Fehler beim Löschen des POI.");
}
} catch (error) {
console.error("Fehler beim Löschen des POI 1:", error);
alert("Fehler beim Löschen des POI.");
}
}
};
// Fetch POI types
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]);
// Fetch device data um den Gerät Namen in den dropdown menu anzuzeigen also erstmal die Liste der Geräte abrufen
useEffect(() => {
const fetchData = async () => {
try {
const response = await fetch("/api/talas_v5/location_device");
const data = await response.json();
//console.log("Standort- und Gerätedaten:", data);
setLocationDeviceData(data);
console.log("Standort- und Gerätedaten poiData:", poiData);
if (poiData && poiData.idLD) {
const selectedDevice = data.find((device) => device.id === poiData.idLD);
setDeviceName(selectedDevice ? selectedDevice.id : data[0].id); // Hier wird die ID als initialer Zustand gesetzt
console.log("Selected Device:", selectedDevice);
console.log("Selected devciceName:", deviceName);
}
} catch (error) {
console.error("Fehler beim Abrufen der Standort- und Gerätedaten:", error);
}
};
fetchData();
}, []);
//--------------------------------------------------------------------------------------------
// Fetch device name basierend auf der Geräte-ID
useEffect(() => {
console.log("currentPoi von PoiUpdateModal.js : ", currentPoi.idLD);
fetch("/api/talas_v5_DB/locationDevice/locationDevices")
.then((response) => response.json())
.then((data) => {
setLocationDeviceData(data);
console.log("Standort- und Gerätedaten 3:", data);
console.log("Standort- und Gerätedaten 3 poiData:", poiData);
// Findet das Gerät, das der aktuellen IDLD entspricht
const currentDevice = data.find((device) => device.idLD === currentPoi.idLD);
if (currentDevice) {
setDeviceName(currentDevice.name);
}
})
.catch((error) => {
console.error("Fehler beim Abrufen der Gerätedaten:", error);
setLocationDeviceData([]);
});
}, [poiData?.idLD, currentPoi]);
//--------------------------------------------------------------------------------------------
// Angenommen, deviceName enthält die Geräte-ID
//const idLD = deviceName; // Stellen Sie sicher, dass dies eine ID ist und kein Name
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",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
idPoi: poiId,
name: name,
description: description,
idPoiTyp: poiTypeId,
idLD: idLD,
//idLD: parseInt(deviceName, 10), // Konvertieren in eine Ganzzahl
}),
});
if (response.ok) {
onClose();
window.location.reload();
} else {
const errorResponse = await response.json();
throw new Error(errorResponse.error || "Fehler beim Aktualisieren des POI.");
}
} catch (error) {
console.error("Fehler beim Aktualisieren des POI:", error);
alert("Fehler beim Aktualisieren des POI.");
}
};
//ausgewählte poi Informationen in Console anzeigen
console.log("Selected POI:", selectedPoi);
console.log("Selected POI Gerät id in poiUpdateModal.js:", selectedPoi.id);
console.log("Selected POI Typ name in poiUpdateModal.js:", selectedPoi.typ); //als Typ in dropdown menu
console.log("Selected POI Beschreibung in poiUpdateModal.js:", selectedPoi.description);
console.log("Selected POI Gerät deviceId in poiUpdateModal.js:", selectedPoi.deviceId);
return (
<form onSubmit={handleSubmit} className="m-0 p-2 w-full">
<div className="flex items-center mb-4">
<label htmlFor="description" className="block mr-2 flex-none">
Beschreibung:
</label>
<input type="text" id="description" name="description" value={description} onChange={(e) => setDescription(e.target.value)} placeholder="Beschreibung der Station" 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="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) => (
console.log("device.id und name:", device),
(
<option key={index} value={device.id}>
{device.name}
</option>
)
)
)}
</select>
</div>
<div className="flex items-center mb-4">
<label htmlFor="idPoiTyp2" className="block mr-2 flex-none">
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}>
{poiTyp.name}
</option>
))}
</select>
</div>
<button
type="button" // Use button type to prevent form submission
onClick={handleDeletePoi}
className="bg-red-400 hover:bg-red-600 text-white font-bold py-2 px-4 rounded w-full mb-4"
>
POI löschen
</button>
<button type="submit" className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded w-full">
POI aktualisieren
</button>
</form>
);
};
export default PoiUpdateModal;

29
components/pois/PoiUpdateModal.js
View File

@@ -16,6 +16,15 @@ const PoiUpdateModal = ({ onClose, poiData, onSubmit }) => {
const [idLD, setIdLD] = useState(poiData ? poiData.idLD : "");
const [description, setDescription] = useState(poiData ? poiData.description : "");
// Debugging
useEffect(() => {
console.log("poiData:", poiData);
if (!poiData.idLD) {
console.error("Fehlender idLD in poiData");
console.log("poiData:", poiData);
}
}, [poiData]);
// Fetch and set POI data
useEffect(() => {
if (poiData) {
@@ -24,6 +33,7 @@ const PoiUpdateModal = ({ onClose, poiData, onSubmit }) => {
setPoiTypeId(poiData.idPoiTyp);
setIdLD(poiData.idLD);
setDescription(poiData.description);
console.log("Initial Device ID (idLD):", poiData.idLD);
}
}, [poiData]);
@@ -61,22 +71,13 @@ const PoiUpdateModal = ({ onClose, poiData, onSubmit }) => {
if (cachedDeviceData) {
const data = JSON.parse(cachedDeviceData);
setLocationDeviceData(data);
if (poiData) {
if (poiData && poiData.idLD) {
const selectedDevice = data.find((device) => device.idLD === poiData.idLD);
setDeviceName(selectedDevice ? selectedDevice.name : ""); // Pre-select the current device
console.log("Selected Device:", selectedDevice); // Debugging
setDeviceName(selectedDevice ? selectedDevice.name : "");
if (!selectedDevice) {
console.error(`Kein Gerät mit idLD: ${poiData.idLD} gefunden.`);
}
} 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);
}
}
};

1
services/apiService copy.js
View File

@@ -75,6 +75,7 @@ export const fetchPoiData = async (idPoi) => {
idPoi,
name: data.name,
description: data.description,
idLD: data.idLD,
};
} catch (error) {
console.error("Fehler beim Abrufen der POI-Daten", error);

1
services/apiService.js
View File

@@ -80,6 +80,7 @@ export const fetchPoiData = async (idPoi) => {
idPoi,
name: data.name,
description: data.description,
idLD: data.idLD,
};
} catch (error) {
console.error("Fehler beim Abrufen der POI-Daten", error);

1
utils/poiUtils.js
View File

@@ -109,6 +109,7 @@ export const handleEditPoi = (
idPoi: marker.options.id,
name: marker.options.name,
description: marker.options.description,
idLD: marker.options.idLD,
});
fetchPoiData(marker.options.id);

4
utils/setupPOIs.js
View File

@@ -55,6 +55,7 @@ export const setupPOIs = async (
id: location.idPoi,
name: location.name,
description: location.description,
idLD: location.idLD,
link: location.link,
});
@@ -82,7 +83,7 @@ export const setupPOIs = async (
`);
marker.on("mouseover", function () {
console.log("Device Name:", deviceName); // Debugging
console.log("Device Name:", marker); // Debugging
handlePoiSelect(
{
id: location.idPoi,
@@ -90,6 +91,7 @@ export const setupPOIs = async (
idPoiTyp: location.idPoiTyp,
typ: poiTypName,
description: location.description,
idLD: location.idLD,
},
setSelectedPoi,
setLocationDeviceData,