git commit -m "Remove redundant ShowAddStationPopup.js as its functionality is duplicated by AddPoiModalWindow.js"
This commit is contained in:
ISA
@@ -1,201 +0,0 @@
|
|||||||
// components/ShowAddStationPopup.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";
|
|
||||||
|
|
||||||
const ShowAddStationPopup = ({ onClose, map, latlng }) => {
|
|
||||||
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 [locationDeviceData, setLocationDeviceData] = useState([]);
|
|
||||||
const [deviceName, setDeviceName] = useState("");
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const fetchpoiTypData = async () => {
|
|
||||||
try {
|
|
||||||
const response = await fetch("/api/talas_v5_DB/poiTyp/readPoiTyp");
|
|
||||||
const data = await response.json();
|
|
||||||
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
|
|
||||||
);
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error("Fehler beim Abrufen der poiTyp Daten:", error);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
fetchpoiTypData();
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
//---------------------------------------------------------------------------------------
|
|
||||||
/* 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"); // Pfad zu Ihrem API-Endpunkt
|
|
||||||
const data = await response.json();
|
|
||||||
setLocationDeviceData(data); // Setzt den Zustand mit den abgerufenen Daten
|
|
||||||
console.log("Abgerufene Standort- und Gerätedaten:", data);
|
|
||||||
} catch (error) {
|
|
||||||
console.error(
|
|
||||||
"Fehler beim Abrufen der Standort- und Gerätedaten:",
|
|
||||||
error
|
|
||||||
);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
fetchData();
|
|
||||||
}, []); // Leerarray als Dependency, um den Effekt nur beim Laden der Komponente auszuführen */
|
|
||||||
|
|
||||||
//------------------------------------------------------------------------------------------
|
|
||||||
useEffect(() => {
|
|
||||||
// Funktion zum Abrufen der Daten von der API -> DB talas_v5.location_device
|
|
||||||
const fetchData = async () => {
|
|
||||||
try {
|
|
||||||
const response = await fetch("/api/talas5/location_device");
|
|
||||||
const data = await response.json();
|
|
||||||
setLocationDeviceData(data);
|
|
||||||
if (data.length > 0) {
|
|
||||||
setDeviceName(data[0].name); // Setzen des anfänglichen Gerätenamens
|
|
||||||
}
|
|
||||||
console.log("Abgerufene Standort- und Gerätedaten:", data);
|
|
||||||
} catch (error) {
|
|
||||||
console.error(
|
|
||||||
"Fehler beim Abrufen der Standort- und Gerätedaten:",
|
|
||||||
error
|
|
||||||
);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
fetchData();
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
//------------------------------------------------------------------------------------------
|
|
||||||
//-----------------handleSubmit-------------------
|
|
||||||
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/talas_v5_DB/pois/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();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
//-----------------handleSubmit-------------------
|
|
||||||
|
|
||||||
return (
|
|
||||||
<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 :
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="name"
|
|
||||||
name="name"
|
|
||||||
value={name}
|
|
||||||
onChange={(e) => setName(e.target.value)}
|
|
||||||
placeholder="Name der Station"
|
|
||||||
className="block p-2 w-full border-2 border-gray-200 rounded-md text-sm"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* {locationDeviceData.----------------------------------------------*/}
|
|
||||||
<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) => (
|
|
||||||
<option key={index} value={device.name}>
|
|
||||||
{device.name}
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
{/* {locationDeviceData.----------------------------------------------*/}
|
|
||||||
<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 &&
|
|
||||||
poiTypData.map((poiTyp, index) => (
|
|
||||||
<option key={poiTyp.idPoiTyp || 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"
|
|
||||||
className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded w-full"
|
|
||||||
>
|
|
||||||
POI hinzufügen
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ShowAddStationPopup;
|
|
||||||
Reference in New Issue
Block a user