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

cleanup: alte POI-Wrapper-Komponenten entfernt, Redux-basierte Variante vollständig übernommen (v1.1.108)

Browse Source
This commit is contained in:
ISA
2025-05-20 08:47:52 +02:00
parent 4f67128616
commit e0c0861342
14 changed files with 47 additions and 600 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
components/AddPOIModal.js
View File

@@ -18,7 +18,6 @@ const ShowAddStationPopup = ({ onClose, map, latlng }) => {
const [latitude] = useState(latlng.lat.toFixed(5));
const [longitude] = useState(latlng.lng.toFixed(5));
dispatch(setPoiMarkers(data));
const [deviceName, setDeviceName] = useState("");
//-----------------------------------------------------

3
components/mainComponent/MapComponent.js
View File

@@ -9,7 +9,7 @@ import "leaflet.smooth_marker_bouncing";
import OverlappingMarkerSpiderfier from "overlapping-marker-spiderfier-leaflet"; //sieht deaktiviert aber ist das nicht so und wird benötigt
import "react-toastify/dist/ReactToastify.css";
import DataSheet from "../DataSheet.js";
import AddPoiModalWindow from "../pois/AddPoiModalWindow.js";
import { InformationCircleIcon } from "@heroicons/react/20/solid";
import PoiUpdateModal from "../pois/PoiUpdateModal.js";
import { ToastContainer, toast } from "react-toastify";
@@ -954,7 +954,6 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
<AddPoiModalWindow onClose={closePopup} onSubmit={handleAddStation} latlng={popupCoordinates} />
</div>
</div>
)}

218
components/pois/AddPoiModalWindow.js
View File

@@ -1,218 +0,0 @@
// components/pois/AddPoiModalWindow.js
import React, { useState, useEffect } from "react";
import Select from "react-select"; // Importiere react-select
import { useSelector, useDispatch } from "react-redux";
import { incrementTrigger } from "../../redux/slices/poiReadFromDbTriggerSlice";
const AddPoiModalWindow = ({ onClose, map, latlng }) => {
const [poiTypData, setpoiTypData] = useState([]);
const [name, setName] = useState("");
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 [locationDeviceData, setLocationDeviceData] = useState([]);
const [filteredDevices, setFilteredDevices] = useState([]); // Gefilterte Geräte
const [deviceName, setDeviceName] = useState(null); // Verwende null für react-select
const mapLayersVisibility = useSelector((state) => state.mapLayers.visibility);
const dispatch = useDispatch();
// 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 {
const [poiTypResponse, locationDeviceResponse] = await Promise.all([fetch("/api/talas_v5_DB/poiTyp/readPoiTyp"), fetch("/api/talas5/location_device")]);
const poiTypData = await poiTypResponse.json();
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 in AddPoiModalWindow.js :", error);
}
};
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();
dispatch(incrementTrigger());
if (!poiTypeId) {
alert("Bitte wählen Sie einen Typ aus.");
return;
}
const formData = {
name,
poiTypeId: poiTypeId.value,
latitude,
longitude,
idLD: filteredDevices.find((device) => device.name === deviceName?.value).idLD,
};
const response = await fetch("/api/talas_v5_DB/pois/addLocation", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(formData),
});
if (response.ok) {
dispatch(incrementTrigger()); // Redux Trigger erhöhen
onClose();
window.location.reload();
} else {
console.error("Fehler beim Hinzufügen des POI");
}
if (map && typeof map.closePopup === "function") {
map.closePopup();
}
};
// 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} 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" 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">
<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
styles={customStyles} // Apply custom styles here
/>
</div>
{/* React Select for POI Types */}
<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..."
styles={customStyles} // Apply custom styles here
/>
</div>
<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>
<div className="flex flex-col items-center">
<label htmlFor="lng" className="block mb-2 text-xs text-gray-700">
Lng : {longitude}
</label>
</div>
</div>
<button type="submit" className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded w-full">
POI hinzufügen
</button>
</form>
);
};
export default AddPoiModalWindow;

24
components/pois/AddPoiModalWindowPopup.js
View File

@@ -1,24 +0,0 @@
// components/pois/AddPoiModalWindowPopup.js
import React from "react";
import AddPoiModalWindow from "./AddPoiModalWindow.js";
const AddPoiModalWindowPopup = ({ showPopup, closePopup, handleAddStation, popupCoordinates }) => {
return (
<>
{showPopup && (
<div className="fixed inset-0 bg-black bg-opacity-10 flex justify-center items-center z-[1000]" onClick={closePopup}>
<div className="relative bg-white p-6 rounded-lg shadow-lg" onClick={(e) => e.stopPropagation()}>
<button onClick={closePopup} 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>
<AddPoiModalWindow onClose={closePopup} onSubmit={handleAddStation} latlng={popupCoordinates} />
</div>
</div>
)}
</>
);
};
export default AddPoiModalWindowPopup;

30
components/pois/AddPoiModalWindowWrapper.js
View File

@@ -1,30 +0,0 @@
// components/pois/AddPoiModalWindowWrapper.js
import React from "react";
import AddPoiModalWindow from "./AddPoiModalWindow";
const AddPoiModalWindowWrapper = ({ show, onClose, latlng, handleAddStation }) => {
return (
show && (
<div
className="fixed inset-0 bg-black bg-opacity-10 flex justify-center items-center z-[1000]"
onClick={onClose}
data-testid="modal-overlay" // Hinzugefügt, um den Hintergrund zu identifizieren
>
<div
className="relative bg-white p-6 rounded-lg shadow-lg"
onClick={(e) => e.stopPropagation()}
role="dialog" // Hinzugefügt, um das Dialog-Element zu identifizieren
>
<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>
<AddPoiModalWindow onClose={onClose} onSubmit={handleAddStation} latlng={latlng} />
</div>
</div>
)
);
};
export default AddPoiModalWindowWrapper;

9
components/pois/PoiUpdateModalWindow.js
View File

@@ -1,9 +0,0 @@
// components/pois/PoiUpdateModalWindow.js
import React from "react";
import PoiUpdateModal from "./PoiUpdateModal.js";
const PoiUpdateModalWindow = ({ showPoiUpdateModal, closePoiUpdateModal, currentPoiData, popupCoordinates }) => {
return <>{showPoiUpdateModal && <PoiUpdateModal onClose={closePoiUpdateModal} poiData={currentPoiData} onSubmit={() => {}} latlng={popupCoordinates} />}</>;
};
export default PoiUpdateModalWindow;

17
components/pois/PoiUpdateModalWrapper.js
View File

@@ -1,17 +0,0 @@
// components/pois/PoiUpdateModalWrapper.js
import { useDispatch } from "react-redux";
import { setCurrentPoi } from "../../redux/slices/currentPoiSlice";
const PoiUpdateModalWrapper = ({ show, onClose, latlng, poiData }) => {
const dispatch = useDispatch();
useEffect(() => {
if (show && poiData) {
dispatch(setCurrentPoi(poiData));
}
}, [show, poiData, dispatch]);
const currentPoi = useSelector(selectCurrentPoi); // Direkt aus Redux holen
return show && <PoiUpdateModal onClose={onClose} poiData={currentPoi} onSubmit={() => {}} latlng={latlng} />;
};