feat: Geräteauswahl und Anzeige beim POI-Handling auf WebService umgestellt
- setupPOIs.js angepasst: Gerätedaten (LD_Name) aus GisStationsStaticDistrict verwendet - MapComponent.js übergibt WebService-Geräte (`Points`) als gisDevices an setupPOIs - PoiUpdateModal.js nutzt LD_Name für react-select Dropdown statt name aus DB - Dropdown-Anzeige und Tooltip-Daten für POIs nun konsistent mit WebService-Geräteliste
This commit is contained in:
Ismail Ali
221
components/pois/poiUpdateModal/PoiUpdateModal.js
Normal file
221
components/pois/poiUpdateModal/PoiUpdateModal.js
Normal file
@@ -0,0 +1,221 @@
|
||||
// @/components/pois/PoiUpdateModal.js
|
||||
import React, { useState, useEffect } from "react";
|
||||
import Select from "react-select";
|
||||
import { useSelector, useDispatch } from "react-redux";
|
||||
import { fetchLocationDevicesThunk } from "@/redux/thunks/database/fetchLocationDevicesThunk";
|
||||
import { fetchPoiTypThunk } from "@/redux/thunks/database/pois/fetchPoiTypThunk";
|
||||
import { selectMapLayersState } from "@/redux/slices/mapLayersSlice";
|
||||
import { selectPoiTypData, selectPoiTypStatus } from "@/redux/slices/database/pois/poiTypSlice";
|
||||
import { deletePoiThunk } from "@/redux/thunks/database/pois/deletePoiThunk";
|
||||
import { updatePoiThunk } from "@/redux/thunks/database/pois/updatePoiThunk";
|
||||
import { selectSelectedPoi } from "@/redux/slices/database/pois/selectedPoiSlice";
|
||||
import { handleSubmit } from "@/components/pois/poiUpdateModal/utils/handlers";
|
||||
import { selectCurrentPoi } from "@/redux/slices/database/pois/currentPoiSlice";
|
||||
import { selectGisStationsStaticDistrict } from "@/redux/slices/webservice/gisStationsStaticDistrictSlice";
|
||||
|
||||
const PoiUpdateModal = ({ onClose, poiData }) => {
|
||||
const dispatch = useDispatch();
|
||||
|
||||
const mapLayersVisibility = useSelector(selectMapLayersState);
|
||||
const poiTypData = useSelector(selectPoiTypData);
|
||||
const poiTypStatus = useSelector(selectPoiTypStatus);
|
||||
//const devices = useSelector(state => state.locationDevicesFromDB.devices);
|
||||
const { Points: availableDevices = [] } = useSelector(selectGisStationsStaticDistrict);
|
||||
|
||||
const poi = useSelector(selectCurrentPoi);
|
||||
const selectedPoi = poi;
|
||||
console.log("Selected POI in PoiUpdateModal:", selectedPoi);
|
||||
|
||||
//const poi = poiData || selectedPoi || {};
|
||||
|
||||
const [poiId, setPoiId] = useState(poi?.idPoi || "");
|
||||
const [name, setName] = useState(poi?.name || "");
|
||||
const [description, setDescription] = useState(poi?.description || "");
|
||||
const [deviceName, setDeviceName] = useState(null);
|
||||
const [poiTypeId, setPoiTypeId] = useState(null);
|
||||
|
||||
const systemNameToIdMap = {};
|
||||
|
||||
const handleDeletePoi = async () => {
|
||||
if (confirm("Sind Sie sicher, dass Sie diesen POI löschen möchten?")) {
|
||||
try {
|
||||
await dispatch(deletePoiThunk(poiId)).unwrap();
|
||||
onClose();
|
||||
window.location.reload();
|
||||
} catch (error) {
|
||||
console.error("Fehler beim Löschen des POI:", error);
|
||||
alert("Fehler beim Löschen des POI.");
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
dispatch(fetchLocationDevicesThunk());
|
||||
if (poiTypStatus === "idle") {
|
||||
dispatch(fetchPoiTypThunk());
|
||||
}
|
||||
}, [dispatch, poiTypStatus]);
|
||||
|
||||
/* useEffect(() => {
|
||||
console.log("devices in PoiUpdateModal:", devices);
|
||||
if (poi && devices.length > 0) {
|
||||
const selectedDevice = devices.find(device => Number(device.idLD) === Number(poi.idLD));
|
||||
console.log("Selected Device:", selectedDevice);
|
||||
if (selectedDevice) {
|
||||
setDeviceName({ value: selectedDevice.idLD, label: selectedDevice.name });
|
||||
}
|
||||
}
|
||||
}, [poi, devices]); */
|
||||
|
||||
useEffect(() => {
|
||||
console.log("poiTypData in PoiUpdateModal:", poiTypData);
|
||||
if (poi && poiTypData.length > 0) {
|
||||
const selectedTyp = poiTypData.find(typ => Number(typ.idPoiTyp) === Number(poi.idPoiTyp));
|
||||
console.log("Selected Poi Type:", selectedTyp);
|
||||
if (selectedTyp) {
|
||||
setPoiTypeId({ value: selectedTyp.idPoiTyp, label: selectedTyp.name });
|
||||
}
|
||||
}
|
||||
}, [poi, poiTypData]);
|
||||
|
||||
useEffect(() => {
|
||||
console.log("availableDevices in PoiUpdateModal:", availableDevices);
|
||||
if (poiData && availableDevices.length > 0) {
|
||||
const selectedDevice = availableDevices.find(device => device.idLD === poiData.idLD);
|
||||
if (selectedDevice) {
|
||||
setDeviceName({ value: selectedDevice.idLD, label: selectedDevice.LD_Name }); // ✅ auch hier korrigieren
|
||||
}
|
||||
}
|
||||
}, [poiData, availableDevices]);
|
||||
|
||||
const filterDevices = () => {
|
||||
const activeSystems = Object.keys(mapLayersVisibility).filter(
|
||||
system => mapLayersVisibility[system]
|
||||
);
|
||||
const activeSystemIds = activeSystems
|
||||
.map(system => systemNameToIdMap[system])
|
||||
.filter(id => id !== undefined);
|
||||
return devices.filter(device => activeSystemIds.includes(device.idsystem_typ));
|
||||
};
|
||||
|
||||
const poiTypeOptions = Array.isArray(poiTypData)
|
||||
? poiTypData.map(poiTyp => ({
|
||||
value: poiTyp.idPoiTyp,
|
||||
label: poiTyp.name,
|
||||
}))
|
||||
: [];
|
||||
|
||||
const deviceOptions = availableDevices.map(device => ({
|
||||
value: device.idLD,
|
||||
label: device.LD_Name,
|
||||
}));
|
||||
|
||||
const customStyles = {
|
||||
control: provided => ({
|
||||
...provided,
|
||||
width: "100%",
|
||||
minWidth: "300px",
|
||||
maxWidth: "100%",
|
||||
}),
|
||||
menu: provided => ({
|
||||
...provided,
|
||||
width: "100%",
|
||||
minWidth: "300px",
|
||||
}),
|
||||
};
|
||||
|
||||
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 flex-col mb-4">
|
||||
<label htmlFor="description" className="block mb-2 font-bold text-sm text-gray-700">
|
||||
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>
|
||||
|
||||
<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}
|
||||
placeholder="Gerät auswählen..."
|
||||
isClearable={true}
|
||||
styles={customStyles}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<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}
|
||||
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"
|
||||
>
|
||||
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;
|
||||
42
components/pois/poiUpdateModal/utils/handlers.js
Normal file
42
components/pois/poiUpdateModal/utils/handlers.js
Normal file
@@ -0,0 +1,42 @@
|
||||
export const handleSubmit = async ({
|
||||
event,
|
||||
dispatch,
|
||||
poiId,
|
||||
name,
|
||||
description,
|
||||
poiTypeId,
|
||||
deviceName,
|
||||
poi,
|
||||
onClose,
|
||||
}) => {
|
||||
event.preventDefault();
|
||||
try {
|
||||
await dispatch(
|
||||
updatePoiThunk({
|
||||
idPoi: poiId,
|
||||
name,
|
||||
description,
|
||||
idPoiTyp: poiTypeId?.value ?? poi?.idPoiTyp,
|
||||
idLD: deviceName?.value,
|
||||
})
|
||||
).unwrap();
|
||||
onClose();
|
||||
window.location.reload();
|
||||
} catch (error) {
|
||||
console.error("Fehler beim Aktualisieren des POI:", error);
|
||||
alert("Fehler beim Aktualisieren des POI.");
|
||||
}
|
||||
};
|
||||
|
||||
export const handleDeletePoi = async ({ dispatch, poiId, onClose }) => {
|
||||
if (confirm("Sind Sie sicher, dass Sie diesen POI löschen möchten?")) {
|
||||
try {
|
||||
await dispatch(deletePoiThunk(poiId)).unwrap();
|
||||
onClose();
|
||||
window.location.reload();
|
||||
} catch (error) {
|
||||
console.error("Fehler beim Löschen des POI:", error);
|
||||
alert("Fehler beim Löschen des POI.");
|
||||
}
|
||||
}
|
||||
};
|
||||
Reference in New Issue
Block a user