219 lines
8.3 KiB
JavaScript
219 lines
8.3 KiB
JavaScript
import React, { useState, useEffect } from "react";
|
|
import Select from "react-select"; // Importiere react-select
|
|
import { useRecoilValue } from "recoil";
|
|
import { selectedPoiState } from "../../store/atoms/poiState";
|
|
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([]);
|
|
const [poiTypeId, setPoiTypeId] = useState(null); // Verwende null für react-select
|
|
const [locationDeviceData, setLocationDeviceData] = useState([]);
|
|
const [deviceName, setDeviceName] = useState(poiData ? poiData.deviceName : null); // Verwende null für react-select
|
|
const [idLD, setIdLD] = useState(poiData ? poiData.idLD : "");
|
|
const [description, setDescription] = useState(poiData ? poiData.description : "");
|
|
|
|
// Setzt die initialen POI-Daten beim Öffnen des Modals
|
|
useEffect(() => {
|
|
if (poiData) {
|
|
setPoiId(poiData.idPoi);
|
|
setName(poiData.name);
|
|
setPoiTypeId(poiData.idPoiTyp); // Setze den Typ-ID
|
|
setIdLD(poiData.idLD);
|
|
setDescription(poiData.description);
|
|
}
|
|
}, [poiData]);
|
|
|
|
// Fetch POI types and set the current POI type in the react-select dropdown
|
|
useEffect(() => {
|
|
const fetchPoiTypData = async () => {
|
|
try {
|
|
const response = await fetch("/api/talas_v5_DB/poiTyp/readPoiTyp");
|
|
const data = await response.json();
|
|
setPoiTypData(data);
|
|
|
|
// Prüfe den gespeicherten Typ im localStorage
|
|
const storedPoiType = localStorage.getItem("selectedPoiType");
|
|
|
|
// Finde den passenden Typ in den abgerufenen Daten und setze ihn als ausgewählt
|
|
if (storedPoiType) {
|
|
const matchingType = data.find((type) => type.name === storedPoiType);
|
|
if (matchingType) {
|
|
setPoiTypeId({ value: matchingType.idPoiTyp, label: matchingType.name });
|
|
}
|
|
} else if (poiData && poiData.idPoiTyp) {
|
|
// Falls kein Typ im localStorage ist, setze den Typ von poiData
|
|
const matchingType = data.find((type) => type.idPoiTyp === poiData.idPoiTyp);
|
|
if (matchingType) {
|
|
setPoiTypeId({ value: matchingType.idPoiTyp, label: matchingType.name });
|
|
}
|
|
}
|
|
} catch (error) {
|
|
console.error("Fehler beim Abrufen der poiTyp Daten:", error);
|
|
}
|
|
};
|
|
fetchPoiTypData();
|
|
}, [poiData]);
|
|
|
|
// Fetch location devices and pre-select the current device
|
|
useEffect(() => {
|
|
const fetchLocationDevices = async () => {
|
|
try {
|
|
const response = await fetch("/api/talas5/location_device");
|
|
const data = await response.json();
|
|
setLocationDeviceData(data);
|
|
|
|
if (poiData && poiData.idLD) {
|
|
const selectedDevice = data.find((device) => device.idLD === poiData.idLD);
|
|
setDeviceName(selectedDevice ? { value: selectedDevice.name, label: selectedDevice.name } : null);
|
|
}
|
|
} catch (error) {
|
|
console.error("Fehler beim Abrufen der Standort- und Gerätedaten:", error);
|
|
}
|
|
};
|
|
fetchLocationDevices();
|
|
}, [poiData]);
|
|
|
|
const handleSubmit = async (event) => {
|
|
event.preventDefault();
|
|
const idLDResponse = await fetch(`/api/talas_v5_DB/locationDevice/getDeviceId?deviceName=${encodeURIComponent(deviceName?.value)}`);
|
|
const idLDData = await idLDResponse.json();
|
|
const idLD = idLDData.idLD;
|
|
|
|
try {
|
|
const response = await fetch("/api/talas_v5_DB/pois/updatePoi", {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify({
|
|
idPoi: poiId,
|
|
name: name,
|
|
description: description,
|
|
idPoiTyp: poiTypeId?.value, // Den ausgewählten Typ mitsenden
|
|
idLD: idLD,
|
|
}),
|
|
});
|
|
|
|
if (response.ok) {
|
|
onClose();
|
|
window.location.reload();
|
|
} else {
|
|
const errorResponse = await response.json();
|
|
throw new Error(errorResponse.error || "Fehler beim Aktualisieren des POI.");
|
|
}
|
|
} catch (error) {
|
|
console.error("Fehler beim Aktualisieren des POI:", error);
|
|
alert("Fehler beim Aktualisieren des POI.");
|
|
}
|
|
};
|
|
|
|
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(); // Aktualisiert die Seite nach dem Löschen
|
|
} 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.");
|
|
}
|
|
}
|
|
};
|
|
|
|
// Erstelle Optionen für react-select
|
|
const poiTypeOptions = poiTypData.map((poiTyp) => ({
|
|
value: poiTyp.idPoiTyp,
|
|
label: poiTyp.name,
|
|
}));
|
|
|
|
const deviceOptions = locationDeviceData.map((device) => ({
|
|
value: device.name,
|
|
label: device.name,
|
|
}));
|
|
|
|
// Custom styles for react-select
|
|
const customStyles = {
|
|
control: (provided) => ({
|
|
...provided,
|
|
width: "100%",
|
|
minWidth: "300px", // Minimum width for the dropdown
|
|
maxWidth: "100%", // Maximum width (you can adjust this if needed)
|
|
}),
|
|
menu: (provided) => ({
|
|
...provided,
|
|
width: "100%",
|
|
minWidth: "300px", // Ensure the dropdown menu stays at the minimum width
|
|
}),
|
|
};
|
|
|
|
return (
|
|
<div className="fixed inset-0 bg-black bg-opacity-10 flex justify-center items-center z-[1000]" onClick={onClose}>
|
|
<div className="relative bg-white p-6 rounded-lg shadow-lg" onClick={(e) => e.stopPropagation()}>
|
|
<button onClick={onClose} className="absolute top-0 right-0 mt-2 mr-2 p-1 text-gray-700 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-gray-600" aria-label="Close">
|
|
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
<form onSubmit={handleSubmit} className="m-0 p-2 w-full">
|
|
<div className="flex items-center mb-4">
|
|
<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" />
|
|
</div>
|
|
|
|
{/* React Select for Devices */}
|
|
<div className="flex items-center mb-4">
|
|
<label htmlFor="deviceName" className="block mr-2 flex-none">
|
|
Gerät:
|
|
</label>
|
|
<Select
|
|
id="deviceName"
|
|
value={deviceName}
|
|
onChange={setDeviceName}
|
|
options={deviceOptions} // Options for filtering
|
|
placeholder="Gerät auswählen..."
|
|
styles={customStyles} // Apply custom styles
|
|
/>
|
|
</div>
|
|
|
|
{/* React Select for POI Types */}
|
|
<div className="flex items-center mb-4">
|
|
<label htmlFor="idPoiTyp" className="block mr-2 flex-none">
|
|
Typ:
|
|
</label>
|
|
<Select
|
|
id="idPoiTyp"
|
|
value={poiTypeId}
|
|
onChange={setPoiTypeId}
|
|
options={poiTypeOptions} // Options for filtering
|
|
placeholder="Typ auswählen..."
|
|
styles={customStyles} // Apply custom styles
|
|
/>
|
|
</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>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default PoiUpdateModal;
|