feat(PoiUpdateModal): Display correct POI type in dropdown on modal open
- Added logic to store the selected POI type in localStorage during POI selection. - Updated PoiUpdateModal to pre-select the correct POI type from localStorage when opening the modal. - Implemented fallback to fetch POI types if not found in localStorage. - Ensured the selected device is also pre-filled in the dropdown.
This commit is contained in:
ISA
@@ -10,34 +10,34 @@ const PoiUpdateModal = ({ onClose, poiData, onSubmit }) => {
|
||||
const [poiId, setPoiId] = useState(poiData ? poiData.idPoi : "");
|
||||
const [name, setName] = useState(poiData ? poiData.name : "");
|
||||
const [poiTypData, setPoiTypData] = useState([]);
|
||||
const [poiTypeId, setPoiTypeId] = useState("");
|
||||
const [poiTypeId, setPoiTypeId] = useState(""); // Sicherstellen, dass der Typ korrekt vorgewählt ist
|
||||
const [locationDeviceData, setLocationDeviceData] = useState([]);
|
||||
const [deviceName, setDeviceName] = useState("");
|
||||
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
|
||||
// Beim Öffnen des Modals den POI-Typ aus dem localStorage laden
|
||||
useEffect(() => {
|
||||
if (poiData) {
|
||||
setPoiId(poiData.idPoi);
|
||||
setName(poiData.name);
|
||||
setPoiTypeId(poiData.idPoiTyp);
|
||||
setPoiTypeId(poiData.idPoiTyp); // Setze den Typ-ID
|
||||
|
||||
// Prüfe, ob der Typ im localStorage gespeichert ist
|
||||
const selectedPoiType = localStorage.getItem("selectedPoiType");
|
||||
if (selectedPoiType) {
|
||||
const matchingType = poiTypData.find((type) => type.name === selectedPoiType);
|
||||
if (matchingType) {
|
||||
setPoiTypeId(matchingType.idPoiTyp); // Setze die Typ-ID auf den gespeicherten Wert
|
||||
}
|
||||
}
|
||||
|
||||
setIdLD(poiData.idLD);
|
||||
setDescription(poiData.description);
|
||||
console.log("Initial Device ID (idLD):", poiData.idLD);
|
||||
}
|
||||
}, [poiData]);
|
||||
}, [poiData, poiTypData]);
|
||||
|
||||
// Fetch POI types and pre-select the current POI type
|
||||
// Fetch POI types and set the current POI type in the dropdown
|
||||
useEffect(() => {
|
||||
const fetchPoiTypData = async () => {
|
||||
const cachedPoiTypData = localStorage.getItem("poiTypData");
|
||||
@@ -45,7 +45,7 @@ const PoiUpdateModal = ({ onClose, poiData, onSubmit }) => {
|
||||
const data = JSON.parse(cachedPoiTypData);
|
||||
setPoiTypData(data);
|
||||
if (poiData) {
|
||||
setPoiTypeId(poiData.idPoiTyp); // Set the selected POI type ID
|
||||
setPoiTypeId(poiData.idPoiTyp);
|
||||
}
|
||||
} else {
|
||||
try {
|
||||
@@ -54,7 +54,7 @@ const PoiUpdateModal = ({ onClose, poiData, onSubmit }) => {
|
||||
setPoiTypData(data);
|
||||
localStorage.setItem("poiTypData", JSON.stringify(data));
|
||||
if (poiData) {
|
||||
setPoiTypeId(poiData.idPoiTyp); // Set the selected POI type ID
|
||||
setPoiTypeId(poiData.idPoiTyp);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Fehler beim Abrufen der poiTyp Daten:", error);
|
||||
@@ -73,36 +73,13 @@ const PoiUpdateModal = ({ onClose, poiData, onSubmit }) => {
|
||||
setLocationDeviceData(data);
|
||||
if (poiData && poiData.idLD) {
|
||||
const selectedDevice = data.find((device) => device.idLD === poiData.idLD);
|
||||
console.log("Selected Device:", selectedDevice); // Debugging
|
||||
setDeviceName(selectedDevice ? selectedDevice.name : "");
|
||||
if (!selectedDevice) {
|
||||
console.error(`Kein Gerät mit idLD: ${poiData.idLD} gefunden.`);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
fetchLocationDevices();
|
||||
}, [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",
|
||||
});
|
||||
if (response.ok) {
|
||||
onClose();
|
||||
window.location.reload();
|
||||
} else {
|
||||
throw new Error("Fehler beim Löschen des POI.");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Fehler beim Löschen des POI:", error);
|
||||
alert("Fehler beim Löschen des POI.");
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = async (event) => {
|
||||
event.preventDefault();
|
||||
const idLDResponse = await fetch(`/api/talas_v5_DB/locationDevice/getDeviceId?deviceName=${encodeURIComponent(deviceName)}`);
|
||||
@@ -119,7 +96,7 @@ const PoiUpdateModal = ({ onClose, poiData, onSubmit }) => {
|
||||
idPoi: poiId,
|
||||
name: name,
|
||||
description: description,
|
||||
idPoiTyp: poiTypeId,
|
||||
idPoiTyp: poiTypeId, // Den ausgewählten Typ mitsenden
|
||||
idLD: idLD,
|
||||
}),
|
||||
});
|
||||
@@ -167,10 +144,10 @@ const PoiUpdateModal = ({ onClose, poiData, onSubmit }) => {
|
||||
</div>
|
||||
|
||||
<div className="flex items-center mb-4">
|
||||
<label htmlFor="idPoiTyp2" className="block mr-2 flex-none">
|
||||
<label htmlFor="idPoiTyp" 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="idPoiTyp" name="idPoiTyp" 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) => (
|
||||
<option key={poiTyp.idPoiTyp} value={poiTyp.idPoiTyp}>
|
||||
{poiTyp.name}
|
||||
@@ -179,10 +156,6 @@ const PoiUpdateModal = ({ onClose, poiData, onSubmit }) => {
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<button type="button" 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>
|
||||
|
||||
Reference in New Issue
Block a user