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

Poi löschen funktioniert

Browse Source
This commit is contained in:
ISA
2024-05-22 06:53:21 +02:00
parent 3cf42e8919
commit 185d9348ea
4 changed files with 805 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

169
components/PoiUpdateModal.js
View File

@@ -1,84 +1,61 @@
// components/PoiUpdate.js
import React, { useState, useEffect, use } from "react";
import ReactDOM from "react-dom";
import { useRecoilValue, useRecoilState, useSetRecoilState } from "recoil";
import { readPoiMarkersStore } from "../store/selectors/readPoiMarkersStore";
import { poiReadFromDbTriggerAtom } from "../store/atoms/poiReadFromDbTriggerAtom";
// pages/api/poiUpdateModal.js
import React, { useState, useEffect } from "react";
const PoiUpdateModal = ({ onClose, map, poiData }) => {
const [poiId, setPoiId] = useState(poiData ? poiData.id : "");
const [poiTypData, setpoiTypData] = useState(); // Recoil State verwenden
const [name, setName] = useState("");
const [poiTypeId, setPoiTypeId] = useState(""); // Initialize as string
const [poiTypeName, setPoiTypeName] = useState(""); // Initialize as string
//const [latitude] = useState(latlng.lat.toFixed(5));
//const [longitude] = useState(latlng.lng.toFixed(5));
const setLoadData = useSetRecoilState(readPoiMarkersStore);
const setTrigger = useSetRecoilState(poiReadFromDbTriggerAtom);
const PoiUpdateModal = ({ onClose, poiData }) => {
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("");
//---------------------------------------------------------------------------------------
useEffect(() => {
const fetchpoiData = async () => {
// 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/readLocation");
const data = await response.json();
console.log("data in PoiUpdateModal: ", data[0].idPoiTyp);
setpoiTypData(data);
if (data && data.length > 0) {
setPoiTypeId(data[0].idPoiTyp); // Set initial poiTypeId to the id of the first poiType
setPoiTypeName(data[1].name); // Set initial poiTypeName to the name of the first poiType
/* console.log(
"Initial poiTypeId set in ShowAddStationPopup.js :",
data[0].idPoiTyp
); */
const response = await fetch(`/api/deletePoi?id=${poiId}`, {
method: "DELETE",
});
if (response.ok) {
alert("POI wurde erfolgreich gelöscht.");
onClose(); // Close the modal
} else {
throw new Error("Fehler beim Löschen des POI.");
}
} catch (error) {
console.error("Fehler beim Abrufen der poi Tabelle Daten:", error);
console.error("Fehler beim Löschen des POI:", error);
alert("Fehler beim Löschen des POI.");
}
};
fetchpoiData();
}, []);
//------------------------------------------------------------------------------------
}
};
// Fetch POI types
useEffect(() => {
const fetchpoiTypData = async () => {
const fetchPoiTypData = async () => {
try {
const response = await fetch("/api/readPoiTyp");
const data = await response.json();
setpoiTypData(data);
setPoiTypData(data);
if (data && data.length > 0) {
setPoiTypeId(data[0].idPoiTyp); // Set initial poiTypeId to the id of the first poiType
setPoiTypeName(data[1].name); // Set initial poiTypeName to the name of the first poiType
/* console.log(
"Initial poiTypeId set in ShowAddStationPopup.js :",
data[0].idPoiTyp
); */
setPoiTypeId(data[0].idPoiTyp); // Set the first type as default
}
} catch (error) {
console.error("Fehler beim Abrufen der poiTyp Daten:", error);
}
};
fetchpoiTypData();
fetchPoiTypData();
}, []);
//------------------------------------------------------------------------------------------
// Fetch device data
useEffect(() => {
// Funktion zum Abrufen der Daten von der API -> DB talas_v5.location_device
const fetchData = async () => {
try {
const response = await fetch("/api/talas_v5/location_device");
const data = await response.json();
setLocationDeviceData(data);
if (data.length > 0) {
setDeviceName(data[0].name); // Setzen des anfänglichen Gerätenamens
setDeviceName(data[0].name); // Set initial device name
}
//console.log("Abgerufene Standort- und Gerätedaten:", data);
} catch (error) {
console.error(
"Fehler beim Abrufen der Standort- und Gerätedaten:",
@@ -86,62 +63,20 @@ const PoiUpdateModal = ({ onClose, map, poiData }) => {
);
}
};
fetchData();
}, []);
//------------------------------------------------------------------------------------------
//-----------------handleSubmit-------------------
// Form submission handler
const handleSubmit = async (event) => {
event.preventDefault();
const formData = {
name,
poiTypeId,
latitude,
longitude,
idLD: locationDeviceData.find((device) => device.name === deviceName)
.idLD,
};
const response = await fetch("/api/addLocation", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(formData),
});
if (response.ok) {
setTrigger((trigger) => {
console.log("Aktueller Trigger-Wert:", trigger); // Vorheriger Wert
const newTrigger = trigger + 1;
console.log("Neuer Trigger-Wert:", newTrigger); // Aktualisierter Wert
onClose();
return newTrigger;
});
} else {
console.error("Fehler beim Hinzufügen des POI");
}
if (map && typeof map.closePopup === "function") {
map.closePopup();
}
event.preventDefault(); // Prevent the form from submitting
// Perform update operation here
};
//-----------------handleSubmit-------------------
useEffect(() => {
if (poiData) {
console.log("poiData in PoiUpdateModal: ", poiData);
console.log("poiData.name in PoiUpdateModal: ", poiData.name);
setName(poiData.name);
console.log("poiData.idPoi in PoiUpdateModal: ", poiData.idPoi);
setPoiId(poiData.idPoi);
}
}, [poiData]);
//------------------------------------------------------------------------------------------
return (
<form onSubmit={handleSubmit} className="m-0 p-2 w-full ">
<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"
@@ -154,10 +89,9 @@ const PoiUpdateModal = ({ onClose, map, poiData }) => {
/>
</div>
{/* {locationDeviceData.----------------------------------------------*/}
<div className="flex items-center mb-4">
<label htmlFor="deviceName" className="block mr-2 flex-none">
Gerät :
Gerät:
</label>
<select
id="deviceName"
@@ -173,7 +107,7 @@ const PoiUpdateModal = ({ onClose, map, poiData }) => {
))}
</select>
</div>
{/* {locationDeviceData.----------------------------------------------*/}
<div className="flex items-center mb-4">
<label htmlFor="idPoiTyp2" className="block mr-2 flex-none">
Typ:
@@ -185,28 +119,17 @@ const PoiUpdateModal = ({ onClose, map, poiData }) => {
onChange={(e) => setPoiTypeId(e.target.value)}
className="block p-2 w-full border-2 border-gray-200 rounded-md text-sm"
>
{poiTypData &&
poiTypData.map((poiTyp, index) => (
<option key={poiTyp.idPoiTyp || index} value={poiTyp.idPoiTyp}>
{poiTyp.name}
</option>
))}
{poiTypData.map((poiTyp, index) => (
<option key={index} value={poiTyp.idPoiTyp}>
{poiTyp.name}
</option>
))}
</select>
</div>
<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"
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