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

Merge branch 'feature/dropdown-filter' into develop

Browse Source
This commit is contained in:
ISA
2024-10-02 06:59:24 +02:00
parent a9e46f81d1 30b01606ac
commit f353a06b1b
9 changed files with 310 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

181
components/pois/AddPoiModalWindow.js
View File

@@ -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>

92
components/pois/PoiUpdateModal.js
View File

@@ -1,23 +1,48 @@
// components/pois/poiUpdateModal.js
import React, { useState, useEffect } from "react";
import { useRecoilValue } from "recoil";
import Select from "react-select"; // Importiere react-select
import { useRecoilState } from "recoil";
import { selectedPoiState } from "../../store/atoms/poiState";
import { currentPoiState } from "../../store/atoms/currentPoiState";
import { mapLayersState } from "../../store/atoms/mapLayersState";
const PoiUpdateModal = ({ onClose, poiData, onSubmit }) => {
const currentPoi = useRecoilValue(currentPoiState);
const selectedPoi = useRecoilValue(selectedPoiState);
const currentPoi = useRecoilState(currentPoiState);
const selectedPoi = useRecoilState(selectedPoiState);
const [mapLayersVisibility] = useRecoilState(mapLayersState);
const [poiId, setPoiId] = useState(poiData ? poiData.idPoi : "");
const [name, setName] = useState(poiData ? poiData.name : "");
const [poiTypData, setPoiTypData] = useState([]);
const [poiTypeId, setPoiTypeId] = useState("");
const [locationDeviceData, setLocationDeviceData] = useState([]);
const [deviceName, setDeviceName] = useState("");
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 : "");
// 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,
};
useEffect(() => {
if (poiData) {
//console.log("Initial poiData:", poiData);
@@ -93,6 +118,8 @@ const PoiUpdateModal = ({ onClose, poiData, onSubmit }) => {
const response = await fetch("/api/talas_v5_DB/locationDevice/locationDevices");
const data = await response.json();
setLocationDeviceData(data);
filterDevices(data);
if (poiData && poiData.idLD) {
const selectedDevice = data.find((device) => device.id === poiData.idLD);
setDeviceName(selectedDevice ? selectedDevice.id : data[0].id);
@@ -122,6 +149,18 @@ const PoiUpdateModal = ({ onClose, poiData, onSubmit }) => {
});
}, [poiData?.idLD, currentPoi]);
// Funktion zum Filtern der Geräte basierend auf den aktiven Systemen (Layern)
const filterDevices = (devices) => {
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);
};
const handleSubmit = async (event) => {
event.preventDefault();
const idLDResponse = await fetch(`/api/talas_v5_DB/locationDevice/getDeviceId?deviceName=${encodeURIComponent(deviceName)}`);
@@ -155,6 +194,51 @@ const PoiUpdateModal = ({ onClose, poiData, onSubmit }) => {
}
};
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 = 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
}),
};
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()}>