|
|
|
|
@@ -1,29 +1,27 @@
|
|
|
|
|
// /components/pois/PoiUpdateModal.js
|
|
|
|
|
import React, { useState, useEffect } from "react";
|
|
|
|
|
import Select from "react-select"; // Importiere react-select
|
|
|
|
|
import { fetchLocationDevicesThunk } from "../../redux/thunks/database/fetchLocationDevicesThunk";
|
|
|
|
|
import Select from "react-select";
|
|
|
|
|
import { useSelector, useDispatch } from "react-redux";
|
|
|
|
|
import { selectMapLayersState } from "../../redux/slices/mapLayersSlice";
|
|
|
|
|
import { fetchLocationDevicesThunk } from "../../redux/thunks/database/fetchLocationDevicesThunk";
|
|
|
|
|
import { fetchPoiTypThunk } from "../../redux/thunks/database/fetchPoiTypThunk";
|
|
|
|
|
import { selectMapLayersState } from "../../redux/slices/mapLayersSlice";
|
|
|
|
|
import { selectPoiTypData, selectPoiTypStatus } from "../../redux/slices/database/poiTypSlice";
|
|
|
|
|
import { deletePoiThunk } from "../../redux/thunks/database/deletePoiThunk";
|
|
|
|
|
import { getDeviceIdByNameThunk } from "../../redux/thunks/database/getDeviceIdByNameThunk";
|
|
|
|
|
import { updatePoiThunk } from "../../redux/thunks/database/updatePoiThunk";
|
|
|
|
|
|
|
|
|
|
const PoiUpdateModal = ({ onClose, poiData, onSubmit }) => {
|
|
|
|
|
const PoiUpdateModal = ({ onClose, poiData }) => {
|
|
|
|
|
const dispatch = useDispatch();
|
|
|
|
|
const mapLayersVisibility = useSelector(selectMapLayersState);
|
|
|
|
|
const [poiId, setPoiId] = useState(poiData ? poiData.idPoi : "");
|
|
|
|
|
const [name, setName] = useState(poiData ? poiData.name : "");
|
|
|
|
|
const [poiTypeId, setPoiTypeId] = useState(null); // Verwende null für react-select
|
|
|
|
|
const [filteredDevices, setFilteredDevices] = 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 : "");
|
|
|
|
|
const poiTypData = useSelector(selectPoiTypData);
|
|
|
|
|
const poiTypStatus = useSelector(selectPoiTypStatus);
|
|
|
|
|
const devices = useSelector((state) => state.locationDevicesFromDB.devices);
|
|
|
|
|
|
|
|
|
|
const [poiId, setPoiId] = useState(poiData?.idPoi || "");
|
|
|
|
|
const [name, setName] = useState(poiData?.name || "");
|
|
|
|
|
const [description, setDescription] = useState(poiData?.description || "");
|
|
|
|
|
const [deviceName, setDeviceName] = useState(null);
|
|
|
|
|
const [poiTypeId, setPoiTypeId] = useState(null);
|
|
|
|
|
|
|
|
|
|
// Map von Systemnamen zu IDs (wie zuvor)
|
|
|
|
|
const systemNameToIdMap = {
|
|
|
|
|
TALAS: 1,
|
|
|
|
|
ECI: 2,
|
|
|
|
|
@@ -43,66 +41,51 @@ const PoiUpdateModal = ({ onClose, poiData, onSubmit }) => {
|
|
|
|
|
Basisgerät: 200,
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const devices = useSelector((state) => state.locationDevicesFromDB.devices);
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
dispatch(fetchLocationDevicesThunk());
|
|
|
|
|
}, [dispatch]);
|
|
|
|
|
|
|
|
|
|
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(() => {
|
|
|
|
|
if (poiTypStatus === "idle") {
|
|
|
|
|
dispatch(fetchPoiTypThunk());
|
|
|
|
|
}
|
|
|
|
|
}, [dispatch, poiTypStatus]);
|
|
|
|
|
|
|
|
|
|
// Fetch location devices and pre-select the current device
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
if (devices.length > 0) {
|
|
|
|
|
filterDevices(devices); // <-- Filter direkt die Redux-Devices
|
|
|
|
|
if (poiData && devices.length > 0) {
|
|
|
|
|
const selectedDevice = devices.find((device) => device.idLD === poiData.idLD);
|
|
|
|
|
if (selectedDevice) {
|
|
|
|
|
setDeviceName({ value: selectedDevice.idLD, label: selectedDevice.name });
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}, [devices]);
|
|
|
|
|
}, [poiData, devices]);
|
|
|
|
|
|
|
|
|
|
// Funktion zum Filtern der Geräte basierend auf den aktiven Systemen (Layern)
|
|
|
|
|
const filterDevices = (devices) => {
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
if (poiData && poiTypData.length > 0) {
|
|
|
|
|
const selectedTyp = poiTypData.find((typ) => typ.idPoiTyp === poiData.idPoiTyp);
|
|
|
|
|
if (selectedTyp) {
|
|
|
|
|
setPoiTypeId({ value: selectedTyp.idPoiTyp, label: selectedTyp.name });
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}, [poiData, poiTypData]);
|
|
|
|
|
|
|
|
|
|
const filterDevices = () => {
|
|
|
|
|
const activeSystems = Object.keys(mapLayersVisibility).filter((system) => mapLayersVisibility[system]);
|
|
|
|
|
|
|
|
|
|
// Mappe aktive Systeme auf ihre ids
|
|
|
|
|
const activeSystemIds = activeSystems.map((system) => systemNameToIdMap[system]).filter((id) => id !== undefined);
|
|
|
|
|
|
|
|
|
|
// Filtere die Geräte nach aktiven Systemen basierend auf idsystem_typ
|
|
|
|
|
const filtered = devices.filter((device) => activeSystemIds.includes(device.idsystem_typ));
|
|
|
|
|
setFilteredDevices(filtered);
|
|
|
|
|
return devices.filter((device) => activeSystemIds.includes(device.idsystem_typ));
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const handleSubmit = async (event) => {
|
|
|
|
|
event.preventDefault();
|
|
|
|
|
|
|
|
|
|
try {
|
|
|
|
|
const idLD = deviceName?.value;
|
|
|
|
|
|
|
|
|
|
await dispatch(
|
|
|
|
|
updatePoiThunk({
|
|
|
|
|
idPoi: poiId,
|
|
|
|
|
name,
|
|
|
|
|
description,
|
|
|
|
|
idPoiTyp: poiTypeId?.value ?? poiData?.idPoiTyp,
|
|
|
|
|
idLD: deviceName?.value, // ← direkt die ID aus react-select
|
|
|
|
|
idLD: deviceName?.value,
|
|
|
|
|
})
|
|
|
|
|
).unwrap();
|
|
|
|
|
|
|
|
|
|
onClose();
|
|
|
|
|
window.location.reload(); // oder: dispatch(incrementTrigger());
|
|
|
|
|
window.location.reload();
|
|
|
|
|
} catch (error) {
|
|
|
|
|
console.error("Fehler beim Aktualisieren des POI:", error);
|
|
|
|
|
alert("Fehler beim Aktualisieren des POI.");
|
|
|
|
|
@@ -122,48 +105,31 @@ const PoiUpdateModal = ({ onClose, poiData, onSubmit }) => {
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// Erstelle Optionen für react-select
|
|
|
|
|
const poiTypeOptions = Array.isArray(poiTypData)
|
|
|
|
|
? poiTypData.map((poiTyp) => ({
|
|
|
|
|
value: poiTyp.idPoiTyp,
|
|
|
|
|
label: poiTyp.name,
|
|
|
|
|
}))
|
|
|
|
|
: []; // Falls kein Array, dann leeres Array zurückgeben
|
|
|
|
|
: [];
|
|
|
|
|
|
|
|
|
|
const deviceOptions = devices.map((device) => ({
|
|
|
|
|
value: device.idLD, // idLD ist die eindeutige ID des Geräts
|
|
|
|
|
label: device.name, // name ist der Anzeigename im Dropdown
|
|
|
|
|
const deviceOptions = filterDevices().map((device) => ({
|
|
|
|
|
value: device.idLD,
|
|
|
|
|
label: device.name,
|
|
|
|
|
}));
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
if (poiData && devices.length > 0) {
|
|
|
|
|
const selectedDevice = devices.find((device) => device.idLD === poiData.idLD);
|
|
|
|
|
if (selectedDevice) {
|
|
|
|
|
setDeviceName({ value: selectedDevice.idLD, label: selectedDevice.name });
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}, [poiData, devices]);
|
|
|
|
|
|
|
|
|
|
// 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)
|
|
|
|
|
minWidth: "300px",
|
|
|
|
|
maxWidth: "100%",
|
|
|
|
|
}),
|
|
|
|
|
menu: (provided) => ({
|
|
|
|
|
...provided,
|
|
|
|
|
width: "100%",
|
|
|
|
|
minWidth: "300px", // Ensure the dropdown menu stays at the minimum width
|
|
|
|
|
minWidth: "300px",
|
|
|
|
|
}),
|
|
|
|
|
};
|
|
|
|
|
console.log("→ Sende POI-Daten:", {
|
|
|
|
|
idPoi: poiId,
|
|
|
|
|
name,
|
|
|
|
|
description,
|
|
|
|
|
idPoiTyp: poiTypeId?.value,
|
|
|
|
|
idLD,
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<div className="fixed inset-0 bg-black bg-opacity-10 flex justify-center items-center z-[1000]" onClick={onClose}>
|
|
|
|
|
@@ -181,36 +147,18 @@ const PoiUpdateModal = ({ onClose, poiData, onSubmit }) => {
|
|
|
|
|
<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 flex-col mb-4">
|
|
|
|
|
<label htmlFor="deviceName" className="block mb-2 font-bold text-sm text-gray-700">
|
|
|
|
|
Gerät:
|
|
|
|
|
</label>
|
|
|
|
|
<Select
|
|
|
|
|
id="deviceName"
|
|
|
|
|
value={deviceName}
|
|
|
|
|
onChange={setDeviceName}
|
|
|
|
|
options={deviceOptions} // Options for filtering
|
|
|
|
|
placeholder="Gerät auswählen..."
|
|
|
|
|
isClearable={true} // Allow clearing the selection
|
|
|
|
|
styles={customStyles} // Apply custom styles
|
|
|
|
|
/>
|
|
|
|
|
<Select id="deviceName" value={deviceName} onChange={setDeviceName} options={deviceOptions} placeholder="Gerät auswählen..." isClearable={true} styles={customStyles} />
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
{/* React Select for POI Types */}
|
|
|
|
|
<div className="flex flex-col mb-4">
|
|
|
|
|
<label htmlFor="idPoiTyp" className="block mb-2 font-bold text-sm text-gray-700">
|
|
|
|
|
Typ:
|
|
|
|
|
</label>
|
|
|
|
|
<Select
|
|
|
|
|
id="idPoiTyp"
|
|
|
|
|
value={poiTypeId}
|
|
|
|
|
onChange={setPoiTypeId}
|
|
|
|
|
options={poiTypeOptions} // Options for filtering
|
|
|
|
|
placeholder="Typ auswählen..."
|
|
|
|
|
isClearable={true}
|
|
|
|
|
styles={customStyles} // Apply custom styles
|
|
|
|
|
/>
|
|
|
|
|
<Select id="idPoiTyp" value={poiTypeId} onChange={setPoiTypeId} options={poiTypeOptions} placeholder="Typ auswählen..." isClearable={true} styles={customStyles} />
|
|
|
|
|
</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">
|
|
|
|
|
|