Merge branch 'feature/dropdown-filter' into develop
This commit is contained in:
ISA
@@ -1,8 +1,8 @@
|
||||
// components/pois/AddPoiModalWindow.js
|
||||
import React, { useState, useEffect, use } from "react";
|
||||
import ReactDOM from "react-dom";
|
||||
import { useRecoilValue, useRecoilState, useSetRecoilState } from "recoil";
|
||||
import { readPoiMarkersStore } from "../../store/selectors/readPoiMarkersStore";
|
||||
import React, { useState, useEffect } from "react";
|
||||
import Select from "react-select"; // Importiere react-select
|
||||
import { useSetRecoilState, useRecoilState } from "recoil";
|
||||
import { mapLayersState } from "../../store/atoms/mapLayersState";
|
||||
import { poiReadFromDbTriggerAtom } from "../../store/atoms/poiReadFromDbTriggerAtom";
|
||||
|
||||
const AddPoiModalWindow = ({ onClose, map, latlng }) => {
|
||||
@@ -12,11 +12,33 @@ const AddPoiModalWindow = ({ onClose, map, latlng }) => {
|
||||
const [poiTypeName, setPoiTypeName] = useState(""); // Initialize as string
|
||||
const [latitude] = useState(latlng.lat.toFixed(5));
|
||||
const [longitude] = useState(latlng.lng.toFixed(5));
|
||||
const setLoadData = useSetRecoilState(readPoiMarkersStore);
|
||||
const setTrigger = useSetRecoilState(poiReadFromDbTriggerAtom);
|
||||
const setTrigger = useSetRecoilState(poiReadFromDbTriggerAtom); // Verwende useSetRecoilState
|
||||
const [locationDeviceData, setLocationDeviceData] = useState([]);
|
||||
const [deviceName, setDeviceName] = useState("");
|
||||
//------------------------------------------------------------------------------------------
|
||||
const [filteredDevices, setFilteredDevices] = useState([]); // Gefilterte Geräte
|
||||
const [deviceName, setDeviceName] = useState(null); // Verwende null für react-select
|
||||
const [mapLayersVisibility] = useRecoilState(mapLayersState); // Um die aktiven Layer zu erhalten
|
||||
|
||||
// Map von Systemnamen zu ids (wie zuvor)
|
||||
const systemNameToIdMap = {
|
||||
TALAS: 1,
|
||||
ECI: 2,
|
||||
ULAF: 3,
|
||||
GSMModem: 5,
|
||||
CiscoRouter: 6,
|
||||
WAGO: 7,
|
||||
Siemens: 8,
|
||||
OTDR: 9,
|
||||
WDM: 10,
|
||||
GMA: 11,
|
||||
Messdatensammler: 12,
|
||||
Messstellen: 13,
|
||||
TALASICL: 100,
|
||||
DAUZ: 110,
|
||||
SMSFunkmodem: 111,
|
||||
Basisgerät: 200,
|
||||
};
|
||||
|
||||
// API-Abfrage, um die Geräte zu laden
|
||||
useEffect(() => {
|
||||
const fetchInitialData = async () => {
|
||||
try {
|
||||
@@ -33,11 +55,11 @@ const AddPoiModalWindow = ({ onClose, map, latlng }) => {
|
||||
}
|
||||
|
||||
const locationDeviceData = await locationDeviceResponse.json();
|
||||
console.log("Geräte von der API:", locationDeviceData); // Geräte-Daten aus der API anzeigen
|
||||
setLocationDeviceData(locationDeviceData);
|
||||
|
||||
if (locationDeviceData.length > 0) {
|
||||
setDeviceName(locationDeviceData[0].name); // Set initial device name
|
||||
}
|
||||
// Filtere die Geräte basierend auf den sichtbaren Systemen
|
||||
filterDevices(locationDeviceData);
|
||||
} catch (error) {
|
||||
console.error("Fehler beim Abrufen der Daten:", error);
|
||||
}
|
||||
@@ -46,16 +68,43 @@ const AddPoiModalWindow = ({ onClose, map, latlng }) => {
|
||||
fetchInitialData();
|
||||
}, []);
|
||||
|
||||
//------------------------------------------------------------------------------------------
|
||||
//-----------------handleSubmit-------------------
|
||||
// Funktion zum Filtern der Geräte basierend auf den aktiven Systemen (Layern)
|
||||
const filterDevices = (devices) => {
|
||||
const activeSystems = Object.keys(mapLayersVisibility).filter((system) => mapLayersVisibility[system]);
|
||||
console.log("Aktive Systeme:", activeSystems); // Anzeigen der aktiven Systeme
|
||||
|
||||
// Mappe aktive Systeme auf ihre ids
|
||||
const activeSystemIds = activeSystems.map((system) => systemNameToIdMap[system]).filter((id) => id !== undefined);
|
||||
console.log("Aktive System-IDs:", activeSystemIds); // Anzeigen der aktiven System-IDs
|
||||
|
||||
// Filtere die Geräte nach aktiven Systemen basierend auf idsystem_typ
|
||||
const filtered = devices.filter((device) => activeSystemIds.includes(device.idsystem_typ));
|
||||
console.log("Gefilterte Geräte:", filtered); // Gefilterte Geräte anzeigen
|
||||
|
||||
setFilteredDevices(filtered); // Setze die gefilterten Geräte
|
||||
};
|
||||
|
||||
// Wenn mapLayersVisibility sich ändert, filtere die Geräte erneut
|
||||
useEffect(() => {
|
||||
if (locationDeviceData.length > 0) {
|
||||
filterDevices(locationDeviceData);
|
||||
}
|
||||
}, [mapLayersVisibility, locationDeviceData]);
|
||||
|
||||
const handleSubmit = async (event) => {
|
||||
event.preventDefault();
|
||||
|
||||
if (!poiTypeId) {
|
||||
alert("Bitte wählen Sie einen Typ aus.");
|
||||
return;
|
||||
}
|
||||
|
||||
const formData = {
|
||||
name,
|
||||
poiTypeId,
|
||||
poiTypeId: poiTypeId.value,
|
||||
latitude,
|
||||
longitude,
|
||||
idLD: locationDeviceData.find((device) => device.name === deviceName).idLD,
|
||||
idLD: filteredDevices.find((device) => device.name === deviceName?.value).idLD,
|
||||
};
|
||||
|
||||
const response = await fetch("/api/talas_v5_DB/pois/addLocation", {
|
||||
@@ -65,15 +114,8 @@ const AddPoiModalWindow = ({ onClose, map, latlng }) => {
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
setTrigger((trigger) => {
|
||||
//console.log("Aktueller Trigger-Wert:", trigger); // Vorheriger Wert
|
||||
const newTrigger = trigger + 1;
|
||||
//console.log("Neuer Trigger-Wert:", newTrigger); // Aktualisierter Wert
|
||||
onClose();
|
||||
return newTrigger;
|
||||
});
|
||||
|
||||
// Browser aktualisieren
|
||||
setTrigger((trigger) => trigger + 1); // Verwenden des Triggers zur Aktualisierung
|
||||
onClose();
|
||||
window.location.reload();
|
||||
} else {
|
||||
console.error("Fehler beim Hinzufügen des POI");
|
||||
@@ -84,47 +126,84 @@ const AddPoiModalWindow = ({ onClose, map, latlng }) => {
|
||||
}
|
||||
};
|
||||
|
||||
//-----------------handleSubmit-------------------
|
||||
// Erstelle Optionen für react-select
|
||||
const poiTypeOptions = poiTypData.map((poiTyp) => ({
|
||||
value: poiTyp.idPoiTyp,
|
||||
label: poiTyp.name,
|
||||
}));
|
||||
|
||||
const deviceOptions = filteredDevices.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
|
||||
}),
|
||||
};
|
||||
|
||||
// Style für größere Breite des Modals und für Inputs
|
||||
const modalStyles = {
|
||||
// width: "300px", // größere Breite für das Modal
|
||||
//maxWidth: "100%", // responsive, passt sich an
|
||||
//padding: "20px", // Polsterung für das Modal
|
||||
//backgroundColor: "white", // Hintergrundfarbe
|
||||
//borderRadius: "8px", // Abgerundete Ecken
|
||||
//boxShadow: "0px 4px 12px rgba(0, 0, 0, 0.1)", // Schatten für das Modal
|
||||
};
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className="m-0 p-2 w-full ">
|
||||
<div className="flex items-center mb-4">
|
||||
<label htmlFor="name" className="block mr-2 flex-none">
|
||||
Name :
|
||||
<form onSubmit={handleSubmit} style={modalStyles} className="m-0 p-2 w-full">
|
||||
<div className="flex flex-col mb-4">
|
||||
<label htmlFor="name" className="block mb-2 font-bold text-sm text-gray-700">
|
||||
Beschreibung :
|
||||
</label>
|
||||
<input type="text" id="name" name="name" value={name} onChange={(e) => setName(e.target.value)} placeholder="Name der Station" className="block p-2 w-full border-2 border-gray-200 rounded-md text-sm" />
|
||||
<input type="text" id="name" value={name} onChange={(e) => setName(e.target.value)} className="block p-2 w-full border-2 border-gray-200 rounded-md text-sm" />
|
||||
</div>
|
||||
|
||||
{/* {locationDeviceData.----------------------------------------------*/}
|
||||
<div className="flex items-center mb-4">
|
||||
<label htmlFor="deviceName" className="block mr-2 flex-none">
|
||||
{/* 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" 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.name}>
|
||||
{device.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<Select
|
||||
id="deviceName"
|
||||
value={deviceName}
|
||||
onChange={setDeviceName}
|
||||
options={deviceOptions}
|
||||
placeholder="Gerät auswählen..."
|
||||
isClearable
|
||||
styles={customStyles} // Apply custom styles here
|
||||
/>
|
||||
</div>
|
||||
{/* {locationDeviceData.----------------------------------------------*/}
|
||||
<div className="flex items-center mb-4">
|
||||
<label htmlFor="idPoiTyp2" 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">
|
||||
{poiTypData &&
|
||||
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}
|
||||
placeholder="Typ auswählen..."
|
||||
styles={customStyles} // Apply custom styles here
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-row items-center justify-center">
|
||||
<div className="flex items-center mb-4">
|
||||
<label htmlFor="lat" className="block mr-2 flex-none text-xs">
|
||||
|
||||
<div className="flex flex-row items-center justify-between mb-4">
|
||||
<div className="flex flex-col items-center">
|
||||
<label htmlFor="lat" className="block mb-2 text-xs text-gray-700">
|
||||
Lat : {latitude}
|
||||
</label>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user