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

POIs hinzufügen, löschen und bearbeiten funktioniert! in mapFeatures.js als marker, irgendwann in poi umbenennen

Browse Source
This commit is contained in:
ISA
2024-08-15 15:53:27 +02:00
parent 18ad7cad7e
commit 8699c1c4a0
10 changed files with 121 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
components/PoiUpdateModal.js
View File

@@ -17,9 +17,7 @@ const PoiUpdateModal = ({ onClose, poiData }) => {
const [idLD, setIdLD] = useState(poiData ? poiData.idLD : "");
const [idLocationDevice, setIdLocationDevice] = useState("");
const [description, setDescription] = useState(
poiData ? poiData.description : ""
);
const [description, setDescription] = useState(poiData ? poiData.description : "");
// Log the initial POI data
useEffect(() => {
@@ -65,16 +63,11 @@ const PoiUpdateModal = ({ onClose, poiData }) => {
const fetchDeviceId = async () => {
if (poiData && poiData.idLD) {
try {
const response = await fetch(
`/api/talas_v5_DB/locationDevice/getDeviceIdById?idLD=${poiData.idLD}`
);
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
);
console.error("Fehler beim Abrufen der Geräteinformation in PoiUpdateModel.js: ", error);
}
}
};
@@ -86,12 +79,9 @@ const PoiUpdateModal = ({ onClose, poiData }) => {
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",
}
);
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
@@ -101,7 +91,7 @@ const PoiUpdateModal = ({ onClose, poiData }) => {
throw new Error("Fehler beim Löschen des POI.");
}
} catch (error) {
console.error("Fehler beim Löschen des POI:", error);
console.error("Fehler beim Löschen des POI 1:", error);
alert("Fehler beim Löschen des POI.");
}
}
@@ -137,18 +127,13 @@ const PoiUpdateModal = ({ onClose, poiData }) => {
setLocationDeviceData(data);
console.log("Standort- und Gerätedaten poiData:", poiData);
if (poiData && poiData.idLD) {
const selectedDevice = data.find(
(device) => device.id === 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
);
console.error("Fehler beim Abrufen der Standort- und Gerätedaten:", error);
}
};
fetchData();
@@ -165,9 +150,7 @@ const PoiUpdateModal = ({ onClose, poiData }) => {
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
);
const currentDevice = data.find((device) => device.idLD === currentPoi.idLD);
if (currentDevice) {
setDeviceName(currentDevice.name);
}
@@ -184,9 +167,7 @@ const PoiUpdateModal = ({ onClose, poiData }) => {
const handleSubmit = async (event) => {
event.preventDefault();
const idLDResponse = await fetch(
`/api/talas_v5_DB/locationDevice/getDeviceId?deviceName=${encodeURIComponent(deviceName)}`
);
const idLDResponse = await fetch(`/api/talas_v5_DB/locationDevice/getDeviceId?deviceName=${encodeURIComponent(deviceName)}`);
const idLDData = await idLDResponse.json();
const idLD = idLDData.idLD;
try {
@@ -210,9 +191,7 @@ const PoiUpdateModal = ({ onClose, poiData }) => {
window.location.reload();
} else {
const errorResponse = await response.json();
throw new Error(
errorResponse.error || "Fehler beim Aktualisieren des POI."
);
throw new Error(errorResponse.error || "Fehler beim Aktualisieren des POI.");
}
} catch (error) {
console.error("Fehler beim Aktualisieren des POI:", error);
@@ -224,14 +203,8 @@ const PoiUpdateModal = ({ onClose, poiData }) => {
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
);
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">
@@ -239,28 +212,14 @@ const PoiUpdateModal = ({ onClose, poiData }) => {
<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"
/>
<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"
>
<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),
@@ -278,13 +237,7 @@ const PoiUpdateModal = ({ onClose, poiData }) => {
<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"
>
<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}
@@ -301,10 +254,7 @@ const PoiUpdateModal = ({ onClose, poiData }) => {
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"
>
<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>

2
components/pois/PoiUpdateModal.js
View File

@@ -61,7 +61,7 @@ const PoiUpdateModal = ({ onClose, poiData, onSubmit }) => {
throw new Error("Fehler beim Löschen des POI.");
}
} catch (error) {
console.error("Fehler beim Löschen des POI:", error);
console.error("Fehler beim Löschen des POI 2:", error);
alert("Fehler beim Löschen des POI.");
}
}