WIP: POI Update
This commit is contained in:
ISA
@@ -1,5 +1,3 @@
|
||||
// components/pois/poiUpdateModal.js
|
||||
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { useRecoilValue } from "recoil";
|
||||
import { selectedPoiState } from "../../store/atoms/poiState";
|
||||
@@ -8,6 +6,7 @@ import { currentPoiState } from "../../store/atoms/currentPoiState";
|
||||
const PoiUpdateModal = ({ onClose, poiData, onSubmit }) => {
|
||||
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([]);
|
||||
@@ -15,36 +14,73 @@ const PoiUpdateModal = ({ onClose, poiData, onSubmit }) => {
|
||||
const [locationDeviceData, setLocationDeviceData] = useState([]);
|
||||
const [deviceName, setDeviceName] = useState("");
|
||||
const [idLD, setIdLD] = useState(poiData ? poiData.idLD : "");
|
||||
|
||||
const [description, setDescription] = useState(poiData ? poiData.description : "");
|
||||
|
||||
// Fetch and set POI data
|
||||
useEffect(() => {
|
||||
if (poiData) {
|
||||
//console.log("Initial poiData:", 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);
|
||||
}
|
||||
}, [poiData]);
|
||||
|
||||
// Fetch POI types and pre-select the current POI type
|
||||
useEffect(() => {
|
||||
const fetchDeviceId = async () => {
|
||||
if (poiData && poiData.idLD) {
|
||||
const fetchPoiTypData = async () => {
|
||||
const cachedPoiTypData = localStorage.getItem("poiTypData");
|
||||
if (cachedPoiTypData) {
|
||||
const data = JSON.parse(cachedPoiTypData);
|
||||
setPoiTypData(data);
|
||||
if (poiData) {
|
||||
setPoiTypeId(poiData.idPoiTyp); // Set the selected POI type ID
|
||||
}
|
||||
} else {
|
||||
try {
|
||||
const response = await fetch(`/api/talas_v5_DB/locationDevice/getDeviceIdById?idLD=${poiData.idLD}`);
|
||||
const response = await fetch("/api/talas_v5_DB/poiTyp/readPoiTyp");
|
||||
const data = await response.json();
|
||||
if (data) setDeviceName(data.name);
|
||||
setPoiTypData(data);
|
||||
localStorage.setItem("poiTypData", JSON.stringify(data));
|
||||
if (poiData) {
|
||||
setPoiTypeId(poiData.idPoiTyp); // Set the selected POI type ID
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Fehler beim Abrufen der Geräteinformation in PoiUpdateModel.js: ", error);
|
||||
console.error("Fehler beim Abrufen der poiTyp Daten:", error);
|
||||
}
|
||||
}
|
||||
};
|
||||
fetchPoiTypData();
|
||||
}, [poiData]);
|
||||
|
||||
fetchDeviceId();
|
||||
// Fetch location devices and pre-select the current device
|
||||
useEffect(() => {
|
||||
const fetchLocationDevices = async () => {
|
||||
const cachedDeviceData = localStorage.getItem("locationDeviceData");
|
||||
if (cachedDeviceData) {
|
||||
const data = JSON.parse(cachedDeviceData);
|
||||
setLocationDeviceData(data);
|
||||
if (poiData) {
|
||||
const selectedDevice = data.find((device) => device.idLD === poiData.idLD);
|
||||
setDeviceName(selectedDevice ? selectedDevice.name : ""); // Pre-select the current device
|
||||
}
|
||||
} 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);
|
||||
}
|
||||
}
|
||||
};
|
||||
fetchLocationDevices();
|
||||
}, [poiData]);
|
||||
|
||||
const handleDeletePoi = async () => {
|
||||
@@ -54,79 +90,24 @@ const PoiUpdateModal = ({ onClose, poiData, onSubmit }) => {
|
||||
method: "DELETE",
|
||||
});
|
||||
if (response.ok) {
|
||||
//alert("POI wurde erfolgreich gelöscht.");
|
||||
onClose();
|
||||
window.location.reload();
|
||||
} else {
|
||||
throw new Error("Fehler beim Löschen des POI.");
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Fehler beim Löschen des POI 2:", error);
|
||||
console.error("Fehler beim Löschen des POI:", error);
|
||||
alert("Fehler beim Löschen des POI.");
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
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]);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
// const response = await fetch("/api/talas_v5/location_device"); //"/api/talas_v5_DB/locationDevice/location_device"
|
||||
const response = await fetch("/api/talas_v5_DB/locationDevice/locationDevices");
|
||||
const data = await response.json();
|
||||
setLocationDeviceData(data);
|
||||
if (poiData && poiData.idLD) {
|
||||
const selectedDevice = data.find((device) => device.id === poiData.idLD);
|
||||
setDeviceName(selectedDevice ? selectedDevice.id : data[0].id);
|
||||
//console.log("Selected Device in poiUpdate:", selectedDevice);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Fehler beim Abrufen der Standort- und Gerätedaten:", error);
|
||||
}
|
||||
};
|
||||
fetchData();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
fetch("/api/talas_v5_DB/locationDevice/locationDevices")
|
||||
.then((response) => response.json())
|
||||
.then((data) => {
|
||||
setLocationDeviceData(data);
|
||||
const currentDevice = data.find((device) => device.idLD === currentPoi.idLD);
|
||||
if (currentDevice) {
|
||||
setDeviceName(currentDevice.name);
|
||||
//console.log("Current Device name in poiUpdate:", currentDevice.name);
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Fehler beim Abrufen der Gerätedaten:", error);
|
||||
setLocationDeviceData([]);
|
||||
});
|
||||
}, [poiData?.idLD, currentPoi]);
|
||||
|
||||
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",
|
||||
@@ -176,8 +157,8 @@ const PoiUpdateModal = ({ onClose, poiData, onSubmit }) => {
|
||||
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.id}>
|
||||
{locationDeviceData.map((device) => (
|
||||
<option key={device.idLD} value={device.name}>
|
||||
{device.name}
|
||||
</option>
|
||||
))}
|
||||
@@ -189,8 +170,8 @@ const PoiUpdateModal = ({ onClose, poiData, onSubmit }) => {
|
||||
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}>
|
||||
{poiTypData.map((poiTyp) => (
|
||||
<option key={poiTyp.idPoiTyp} value={poiTyp.idPoiTyp}>
|
||||
{poiTyp.name}
|
||||
</option>
|
||||
))}
|
||||
|
||||
Reference in New Issue
Block a user