WIP: noch Design für POI hinzufügen
This commit is contained in:
ISA
@@ -1,8 +1,8 @@
|
||||
// components/pois/AddPoiModalWindow.js
|
||||
import React, { useState, useEffect } from "react";
|
||||
import Select from "react-select"; // Importiere react-select
|
||||
import { useSetRecoilState } from "recoil";
|
||||
import { readPoiMarkersStore } from "../../store/selectors/readPoiMarkersStore";
|
||||
import { useRecoilState } from "recoil";
|
||||
import { mapLayersState } from "../../store/atoms/mapLayersState";
|
||||
import { poiReadFromDbTriggerAtom } from "../../store/atoms/poiReadFromDbTriggerAtom";
|
||||
|
||||
const AddPoiModalWindow = ({ onClose, map, latlng }) => {
|
||||
@@ -11,10 +11,33 @@ const AddPoiModalWindow = ({ onClose, map, latlng }) => {
|
||||
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 setTrigger = useRecoilState(poiReadFromDbTriggerAtom);
|
||||
const [locationDeviceData, setLocationDeviceData] = 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 {
|
||||
@@ -24,7 +47,11 @@ const AddPoiModalWindow = ({ onClose, map, latlng }) => {
|
||||
setpoiTypData(poiTypData);
|
||||
|
||||
const locationDeviceData = await locationDeviceResponse.json();
|
||||
console.log("Geräte von der API:", locationDeviceData); // Geräte-Daten aus der API anzeigen
|
||||
setLocationDeviceData(locationDeviceData);
|
||||
|
||||
// Filtere die Geräte basierend auf den sichtbaren Systemen
|
||||
filterDevices(locationDeviceData);
|
||||
} catch (error) {
|
||||
console.error("Fehler beim Abrufen der Daten:", error);
|
||||
}
|
||||
@@ -33,10 +60,32 @@ const AddPoiModalWindow = ({ onClose, map, latlng }) => {
|
||||
fetchInitialData();
|
||||
}, []);
|
||||
|
||||
// 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();
|
||||
|
||||
// Check for valid poiTypeId
|
||||
if (!poiTypeId) {
|
||||
alert("Bitte wählen Sie einen Typ aus.");
|
||||
return;
|
||||
@@ -44,10 +93,10 @@ const AddPoiModalWindow = ({ onClose, map, latlng }) => {
|
||||
|
||||
const formData = {
|
||||
name,
|
||||
poiTypeId: poiTypeId.value, // Verwende den Wert von react-select
|
||||
poiTypeId: poiTypeId.value,
|
||||
latitude,
|
||||
longitude,
|
||||
idLD: locationDeviceData.find((device) => device.name === deviceName?.value).idLD,
|
||||
idLD: filteredDevices.find((device) => device.name === deviceName?.value).idLD,
|
||||
};
|
||||
|
||||
const response = await fetch("/api/talas_v5_DB/pois/addLocation", {
|
||||
@@ -59,7 +108,6 @@ const AddPoiModalWindow = ({ onClose, map, latlng }) => {
|
||||
if (response.ok) {
|
||||
setTrigger((trigger) => trigger + 1);
|
||||
onClose();
|
||||
// Browser aktualisieren
|
||||
window.location.reload();
|
||||
} else {
|
||||
console.error("Fehler beim Hinzufügen des POI");
|
||||
@@ -76,53 +124,26 @@ const AddPoiModalWindow = ({ onClose, map, latlng }) => {
|
||||
label: poiTyp.name,
|
||||
}));
|
||||
|
||||
const deviceOptions = locationDeviceData.map((device) => ({
|
||||
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 (
|
||||
<form onSubmit={handleSubmit} className="m-0 p-2 w-full">
|
||||
<div className="flex flex-col mb-4">
|
||||
{" "}
|
||||
{/* Changed to flex-col for vertical alignment */}
|
||||
<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="Beschreibung der POI" 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>
|
||||
|
||||
{/* React Select for Devices */}
|
||||
<div className="flex flex-col mb-4">
|
||||
{" "}
|
||||
{/* Ensures consistent spacing */}
|
||||
<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..." // Ensure the placeholder is always shown
|
||||
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 />
|
||||
</div>
|
||||
|
||||
{/* React Select for POI Types */}
|
||||
@@ -130,19 +151,10 @@ const AddPoiModalWindow = ({ onClose, map, latlng }) => {
|
||||
<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..."
|
||||
styles={customStyles} // Apply custom styles
|
||||
/>
|
||||
<Select id="idPoiTyp" value={poiTypeId} onChange={setPoiTypeId} options={poiTypeOptions} placeholder="Typ auswählen..." />
|
||||
</div>
|
||||
|
||||
<div className="flex flex-row items-center justify-between mb-4">
|
||||
{" "}
|
||||
{/* Ensure proper alignment */}
|
||||
<div className="flex flex-col items-center">
|
||||
<label htmlFor="lat" className="block mb-2 text-xs text-gray-700">
|
||||
Lat : {latitude}
|
||||
|
||||
Reference in New Issue
Block a user