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

POI hinzufügen Formular Elemente anordnen

Browse Source
This commit is contained in:
ISA
2024-05-17 10:38:55 +02:00
parent f2ecbc522b
commit 91197bf86c
12 changed files with 141 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
components/DataSheet.js
View File

@@ -1,29 +1,35 @@
//components/DataSheet.js
import React, { useEffect, useState } from "react";
import React, { useEffect, useState, useCallback } from "react";
import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil";
import { gisStationsStaticDistrictState } from "../store/atoms/gisStationState";
import { gisSystemStaticState } from "../store/atoms/gisSystemState";
import { mapLayersState } from "../store/atoms/mapLayersState";
import { selectedAreaState } from "../store/atoms/selectedAreaState";
import { zoomTriggerState } from "../store/atoms/zoomTriggerState";
import { debounce } from "lodash"; // Lodash-Bibliothek für die Debounce-Funktion
function DataSheet() {
const [disableZoom, setDisableZoom] = useState(false);
const setSelectedArea = useSetRecoilState(selectedAreaState);
const [mapLayersVisibility, setMapLayersVisibility] =
useRecoilState(mapLayersState);
const [stationListing, setStationListing] = useState([]);
const [systemListing, setSystemListing] = useState([]);
const [selectedStation, setSelectedStation] = useState(""); // Neuer State für den ausgewählten Station-Wert
const GisStationsStaticDistrict = useRecoilValue(
gisStationsStaticDistrictState
);
const GisSystemStatic = useRecoilValue(gisSystemStaticState);
// In deiner Dropdown onChange Funktion
const handleAreaChange = (event) => {
setSelectedStation(event.target.value);
const selectedIndex = event.target.options.selectedIndex;
const areaName = event.target.options[selectedIndex].text;
setDisableZoom(true);
setSelectedArea(areaName);
//console.log("Area selected oder areaName in DataSheet.js:", areaName); // Nur zur Bestätigung in der Konsole
//console.log("event.target:", event.target);
console.log("Selected area normal:", areaName);
setTimeout(() => setDisableZoom(false), 1000);
};
useEffect(() => {
@@ -78,24 +84,54 @@ function DataSheet() {
}, [GisStationsStaticDistrict, GisSystemStatic]);
//---------------------------------------------------------
const handleCheckboxChange = (name, event) => {
event.stopPropagation();
const { checked } = event.target;
//console.log(`Checkbox ${name} checked state:`, checked); // Log the checked state of the checkbox
setMapLayersVisibility((prev) => {
const newState = {
...prev,
[name]: checked,
};
//console.log(`New mapLayersVisibility state:`, newState); // Log the new state after update
return newState;
});
setDisableZoom(true);
setMapLayersVisibility((prev) => ({
...prev,
[name]: checked,
}));
setTimeout(() => setDisableZoom(false), 1000); // Erhöhen Sie die Verzögerung
};
//---------------------------------------------------------
const setZoomTrigger = useSetRecoilState(zoomTriggerState);
// Debounce-Funktion zum Verhindern von zu schnellen Zoom-Auslösungen
const debouncedSetZoomTrigger = useCallback(
debounce(() => {
setZoomTrigger((current) => current + 1);
}, 300),
[setZoomTrigger]
); // 300 Millisekunden Verzögerung
const handleIconClick = () => {
setZoomTrigger((current) => current + 1); // Trigger durch Inkrementierung
if (selectedStation !== "Station wählen" && !disableZoom) {
console.log("Icon clicked, valid station selected, triggering zoom.");
debouncedSetZoomTrigger();
} else {
console.log(
"No zoom triggered due to either 'Station wählen' or disableZoom state."
);
}
setSelectedStation("Station wählen"); // Dies setzt das Dropdown-Menü zurück auf den Standardwert
};
useEffect(() => {
console.log("Selected station has changed to:", selectedStation);
// Führen Sie hier weitere Aktionen basierend auf dem neuen Wert von selectedStation aus
}, [selectedStation]); // Abhängigkeit zu selectedStation hinzufügen
//---------------------------------------------------------
/* useEffect(() => {
if (!disableZoom) {
console.log("Zoom enabled, ready to trigger zoom.");
// Stellen Sie hier Ihre Logik bereit, um den Zoom zu triggern, wenn dies zulässig ist
debouncedSetZoomTrigger();
} else {
console.log("Zoom disabled, no action will be taken.");
}
}, [disableZoom]); // Reagiert nur auf Änderungen von disableZoom */
//---------------------------------------------------------
return (
@@ -106,6 +142,7 @@ function DataSheet() {
<div className="flex flex-col gap-4 p-4">
<div className="flex items-center justify-between">
<select
value={selectedStation} // Binden des Wertes an den State
onChange={handleAreaChange} // Verwenden der neuen handleAreaChange Funktion
id="stationListing"
className="border-solid-1 p-2 rounded ml-1 font-semibold"

10
components/MapComponent.js
View File

@@ -36,8 +36,8 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
const zoomTrigger = useRecoilValue(zoomTriggerState);
const offlineTileLayer = "/mapTiles/{z}/{x}/{y}.png";
//const onlineTileLayer = "/mapTiles/{z}/{x}/{y}.png";
const onlineTileLayer = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
//const onlineTileLayer = "mapTiles/{z}/{x}/{y}.png";
//const onlineTileLayer = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
const onlineTileLayer = "http://10.10.0.13:3000/mapTiles/{z}/{x}/{y}.png"; //Talas_v5 Server
// Create map layers
const TALAS = new L.layerGroup();
const ECI = new L.layerGroup();
@@ -845,7 +845,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
const poiTypName = poiTypMap.get(location.idPoiTyp) || "Unbekannt ";
const marker = L.marker([latitude, longitude], {
icon: L.icon({
iconUrl: "/img/icons/green-marker-icon.png",
iconUrl: "/img/icons/pois/poi-marker-icon-20.png",
iconSize: [25, 41],
iconAnchor: [12, 41],
popupAnchor: [1, -34],
@@ -933,8 +933,8 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
addContextMenuToMarker(marker);
});
map.addLayer(TALAS);
console.log("map", map);
console.log("oms", oms);
//console.log("map", map);
//console.log("oms", oms);
//disable map contextmenu
map.options.contextmenu = false;
map.options.contextmenuItems = [];

80
components/ShowAddStationPopup.js
View File

@@ -123,7 +123,7 @@ const ShowAddStationPopup = ({ onClose, map, latlng }) => {
<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:
Name :
</label>
<input
type="text"
@@ -135,6 +135,27 @@ const ShowAddStationPopup = ({ onClose, map, latlng }) => {
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">
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>
</div>
{/* {locationDeviceData.----------------------------------------------*/}
<div className="flex items-center mb-4">
<label htmlFor="idPoiTyp2" className="block mr-2 flex-none">
Typ:
@@ -154,52 +175,19 @@ const ShowAddStationPopup = ({ onClose, map, latlng }) => {
))}
</select>
</div>
{/* {locationDeviceData.----------------------------------------------*/}
<div className="flex items-center mb-4">
<label htmlFor="deviceName" className="block mr-2 flex-none">
deviceName:
</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>
</div>
{/* {locationDeviceData.----------------------------------------------*/}
<div className="flex items-center mb-4">
<label htmlFor="lat" className="block mr-2 flex-none">
Breitengrad:
</label>
<input
type="text"
id="lat"
name="lat"
value={latitude}
readOnly
className="block p-2 w-full border-2 border-gray-200 rounded-md text-sm"
/>
</div>
<div className="flex items-center mb-4">
<label htmlFor="lng" className="block mr-2 flex-none">
Längengrad:
</label>
<input
type="text"
id="lng"
name="lng"
value={longitude}
readOnly
className="block p-2 w-full border-2 border-gray-200 rounded-md text-sm"
/>
<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">
Lat : {latitude}
</label>
</div>
<div className="flex items-center mb-4">
<label htmlFor="lng" className="block mr-2 flex-none text-xs">
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"