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

3
.env.local
View File

@@ -11,10 +11,9 @@
#########################
#NEXT_PUBLIC_BASE_URL="http://10.10.0.30/talas5/devices/"
#NEXT_PUBLIC_SERVER_URL="http://10.10.0.70"
#NEXT_PUBLIC_SERVER_URL="http://10.10.0.30"
#NEXT_PUBLIC_PROXY_TARGET="http://10.10.0.30"
#NEXT_PUBLIC_ONLINE_TILE_LAYER="http://10.10.0.30:3000/mapTiles/{z}/{x}/{y}.png"
#NEXT_PUBLIC_ONLINE_TILE_LAYER="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
#########################

BIN
NodeMap.pdf Normal file
View File

Binary file not shown.

3
components/DataSheet.js
View File

@@ -38,6 +38,9 @@ function DataSheet() {
}
return isUnique;
});
console.log("filterdArea GisStationsStaticDistrict:", filteredAreas);
console.log("GisSystemStatic:", GisSystemStatic);
console.log("allowedSystems:", allowedSystems);
setStationListing(
filteredAreas.map((area, index) => ({

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()}>

8
hooks/useLineData.js
View File

@@ -144,7 +144,15 @@ const useLineData = (webserviceGisLinesStatusUrl, setLineStatusData) => {
}
};
const scheduleNextFetch = () => {
if (!isCancelled) {
fetchData();
setTimeout(scheduleNextFetch, 30000);
}
};
fetchData();
scheduleNextFetch();
// Setze ein Intervall, um die Daten alle 20 Sekunden erneut abzurufen
//const intervalId = setInterval(fetchData, 20000);

20
pages/api/talas5/location_device.js
View File

@@ -7,25 +7,27 @@ export default async function handler(req, res) {
let connection;
try {
// SQL-Query and parameters
const sql = "SELECT idLD, iddevice, name FROM location_device WHERE iddevice = ?";
const params = [160]; // Example parameter
// SQL-Query, um die Geräteinformationen aus location_device und devices zu erhalten
const sql = `
SELECT ld.idLD, ld.iddevice, ld.name, d.idsystem_typ
FROM location_device ld
JOIN devices d ON ld.iddevice = d.iddevice
ORDER BY ld.name
`;
// Get a connection from the pool
connection = await pool.getConnection();
// Execute the query
const [results] = await connection.query(sql, params);
// Führe die Abfrage durch
const [results] = await connection.query(sql);
// Check if results are empty
if (!results.length) {
return res.status(404).json({ error: "Keine Geräte gefunden" });
}
// Respond with the results
// Geben Sie die Daten zurück
res.status(200).json(results);
} catch (error) {
// Log and return error
// Loggen Sie den Fehler und geben Sie ihn zurück
console.error("Fehler beim Abrufen der Geräteinformationen:", error);
res.status(500).json({ error: "Fehler beim Abrufen der Geräteinformationen" });
} finally {

32
pages/api/talas_v5_DB/station/getDevices.js Normal file
View File

@@ -0,0 +1,32 @@
// /pages/api/talas_v5_DB/device/getDevices.js
import getPool from "../../../../utils/mysqlPool"; // Import Singleton-Pool
// API-Handler
export default async function handler(req, res) {
const pool = getPool(); // Singleton-Pool verwenden
let connection;
try {
// Lade die Daten der aktiven Systeme aus localStorage, z.B. über einen Parameter oder Body
const { activeSystems } = req.body || []; // Array von aktiven system_typ IDs
// SQL-Query: Verknüpfe die Tabellen location_device, devices und system_typ
const sql = `SELECT * FROM devices`;
connection = await pool.getConnection();
// Führe die Abfrage mit den aktiven Systems durch
const [results] = await connection.query(sql);
if (!results.length) {
return res.status(404).json({ error: "Keine passenden Geräte gefunden" });
}
res.status(200).json(results);
} catch (error) {
console.error("Fehler beim Abrufen der gefilterten Geräteinformationen:", error);
res.status(500).json({ error: "Fehler beim Abrufen der Geräteinformationen" });
} finally {
if (connection) connection.release();
}
}

37
utils/setupPolylines.js
View File

@@ -20,6 +20,13 @@ export function disablePolylineEvents(polylines) {
// Funktion zum Aktivieren der Polyline-Ereignisse
export function enablePolylineEvents(polylines, lineColors) {
// Überprüfe, ob polylines definiert ist und ob es Elemente enthält
if (!polylines || polylines.length === 0) {
//console.warn("Keine Polylinien vorhanden oder polylines ist undefined.");
return;
}
// Falls Polylinien vorhanden sind, wende die Events an
polylines.forEach((polyline) => {
polyline.on("mouseover", (e) => {
//console.log("Mouseover on polyline", polyline.options);
@@ -191,6 +198,36 @@ export const setupPolylines = (map, linePositions, lineColors, tooltipContents,
localStorage.setItem("lastElementType", "polyline");
localStorage.setItem("polylineLink", link);
});
*/
// Starte den Timer zum Schließen des Kontextmenüs nach 15 Sekunden
polyline.on("contextmenu", function (e) {
const contextMenu = this._map.contextmenu; // Zugriff auf das Kontextmenü
const closeMenu = () => contextMenu.hide(); // Funktion zum Schließen des Menüs
const startTime = Date.now(); // Startzeit erfassen
localStorage.setItem("contextMenuStartTime", startTime); // Speichern in localStorage
// Starte einen Intervall-Timer, um die Differenz zu berechnen
const countdownInterval = setInterval(() => {
const currentTime = Date.now();
const elapsedTime = (currentTime - startTime) / 1000; // Differenz in Sekunden
// Speichern der abgelaufenen Zeit in localStorage
localStorage.setItem("contextMenuCountdown", elapsedTime);
// Wenn die Zeit 17 Sekunden erreicht, schließe das Menü
if (elapsedTime >= 17) {
clearInterval(countdownInterval);
const contextMenu = map.contextmenu; // Zugriff auf das Kontextmenü
contextMenu.hide(); // Kontextmenü schließen
}
}, 1000); // Jede Sekunde
const countdown = parseInt(localStorage.getItem("contextMenuCountdown"), 30);
if (countdown >= 28) {
closeMenu();
}
});
polylines.push(polyline);
markers.push(...lineMarkers);