Ismail/nodeMap
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Filter Gerät und Typ in Add und Update POI

Browse Source
This commit is contained in:
ISA
2024-09-16 15:48:04 +02:00
parent 02f393f51a
commit 867e683eab
2 changed files with 77 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
components/pois/AddPoiModalWindow.js
View File

@@ -1,6 +1,6 @@
// components/pois/AddPoiModalWindow.js
import React, { useState, useEffect } from "react";
import Select from "react-select"; // Import react-select
import Select from "react-select"; // Importiere react-select
import { useSetRecoilState } from "recoil";
import { readPoiMarkersStore } from "../../store/selectors/readPoiMarkersStore";
import { poiReadFromDbTriggerAtom } from "../../store/atoms/poiReadFromDbTriggerAtom";
@@ -8,12 +8,12 @@ import { poiReadFromDbTriggerAtom } from "../../store/atoms/poiReadFromDbTrigger
const AddPoiModalWindow = ({ onClose, map, latlng }) => {
const [poiTypData, setpoiTypData] = useState([]);
const [name, setName] = useState("");
const [poiTypeId, setPoiTypeId] = useState(""); // Initialize as empty string
const [poiTypeId, setPoiTypeId] = useState(null); // Verwende null für react-select
const [latitude] = useState(latlng.lat.toFixed(5));
const [longitude] = useState(latlng.lng.toFixed(5));
const setTrigger = useSetRecoilState(poiReadFromDbTriggerAtom);
const [locationDeviceData, setLocationDeviceData] = useState([]);
const [deviceName, setDeviceName] = useState(null); // Initialize as null
const [deviceName, setDeviceName] = useState(null); // Verwende null für react-select
useEffect(() => {
const fetchInitialData = async () => {
@@ -27,7 +27,7 @@ const AddPoiModalWindow = ({ onClose, map, latlng }) => {
setLocationDeviceData(locationDeviceData);
if (locationDeviceData.length > 0) {
setDeviceName(locationDeviceData[0].name); // Set initial device name
setDeviceName({ value: locationDeviceData[0].name, label: locationDeviceData[0].name }); // Set initial device name
}
} catch (error) {
console.error("Fehler beim Abrufen der Daten:", error);
@@ -48,7 +48,7 @@ const AddPoiModalWindow = ({ onClose, map, latlng }) => {
const formData = {
name,
poiTypeId,
poiTypeId: poiTypeId.value, // Verwende den Wert von react-select
latitude,
longitude,
idLD: locationDeviceData.find((device) => device.name === deviceName?.value).idLD,
@@ -75,6 +75,11 @@ const AddPoiModalWindow = ({ onClose, map, latlng }) => {
};
// 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,
@@ -119,20 +124,19 @@ const AddPoiModalWindow = ({ onClose, map, latlng }) => {
/>
</div>
{/* React Select for POI Types */}
<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">
<option value="" disabled>
Typ auswählen...
</option>
{poiTypData.map((poiTyp, index) => (
<option key={poiTyp.idPoiTyp || index} value={poiTyp.idPoiTyp}>
{poiTyp.name}
</option>
))}
</select>
<Select
id="idPoiTyp"
value={poiTypeId}
onChange={setPoiTypeId}
options={poiTypeOptions} // Options for filtering
placeholder="Typ auswählen..."
styles={customStyles} // Apply custom styles
/>
</div>
<div className="flex flex-row items-center justify-center">

79
components/pois/PoiUpdateModal.js
View File

@@ -1,4 +1,5 @@
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";
@@ -10,9 +11,9 @@ 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(""); // Sicherstellen, dass der Typ korrekt vorgewählt ist
const [poiTypeId, setPoiTypeId] = useState(null); // Verwende null für react-select
const [locationDeviceData, setLocationDeviceData] = useState([]);
const [deviceName, setDeviceName] = useState(poiData ? poiData.deviceName : "");
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 : "");
@@ -27,7 +28,7 @@ const PoiUpdateModal = ({ onClose, poiData, onSubmit }) => {
}
}, [poiData]);
// Fetch POI types and set the current POI type in the dropdown
// Fetch POI types and set the current POI type in the react-select dropdown
useEffect(() => {
const fetchPoiTypData = async () => {
try {
@@ -42,11 +43,14 @@ const PoiUpdateModal = ({ onClose, poiData, onSubmit }) => {
if (storedPoiType) {
const matchingType = data.find((type) => type.name === storedPoiType);
if (matchingType) {
setPoiTypeId(matchingType.idPoiTyp);
setPoiTypeId({ value: matchingType.idPoiTyp, label: matchingType.name });
}
} else if (poiData && poiData.idPoiTyp) {
// Falls kein Typ im localStorage ist, setze den Typ von poiData
setPoiTypeId(poiData.idPoiTyp);
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);
@@ -65,7 +69,7 @@ const PoiUpdateModal = ({ onClose, poiData, onSubmit }) => {
if (poiData && poiData.idLD) {
const selectedDevice = data.find((device) => device.idLD === poiData.idLD);
setDeviceName(selectedDevice ? selectedDevice.name : "");
setDeviceName(selectedDevice ? { value: selectedDevice.name, label: selectedDevice.name } : null);
}
} catch (error) {
console.error("Fehler beim Abrufen der Standort- und Gerätedaten:", error);
@@ -76,7 +80,7 @@ const PoiUpdateModal = ({ onClose, poiData, onSubmit }) => {
const handleSubmit = async (event) => {
event.preventDefault();
const idLDResponse = await fetch(`/api/talas_v5_DB/locationDevice/getDeviceId?deviceName=${encodeURIComponent(deviceName)}`);
const idLDResponse = await fetch(`/api/talas_v5_DB/locationDevice/getDeviceId?deviceName=${encodeURIComponent(deviceName?.value)}`);
const idLDData = await idLDResponse.json();
const idLD = idLDData.idLD;
@@ -90,7 +94,7 @@ const PoiUpdateModal = ({ onClose, poiData, onSubmit }) => {
idPoi: poiId,
name: name,
description: description,
idPoiTyp: poiTypeId, // Den ausgewählten Typ mitsenden
idPoiTyp: poiTypeId?.value, // Den ausgewählten Typ mitsenden
idLD: idLD,
}),
});
@@ -127,6 +131,32 @@ const PoiUpdateModal = ({ onClose, poiData, onSubmit }) => {
}
};
// 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()}>
@@ -143,31 +173,36 @@ 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 items-center mb-4">
<label htmlFor="deviceName" className="block mr-2 flex-none">
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) => (
<option key={device.idLD} value={device.name}>
{device.name}
</option>
))}
</select>
<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" 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}
</option>
))}
</select>
<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>