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

WIP: POI hinzufügen Modal

Browse Source
This commit is contained in:
Ismail Ali
2025-03-09 00:52:34 +01:00
parent c227b57f9b
commit e4bb12fe18
6 changed files with 72 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
components/DataSheet.js
View File

@@ -166,7 +166,7 @@ function DataSheet() {
useInitGisStationsStatic();
//---------------------------
useEffect(() => {
console.log("🔍 GisStationsStatic Inhalt:", GisStationsStatic);
//console.log("🔍 GisStationsStatic Inhalt:", GisStationsStatic);
if (!GisStationsStatic) {
console.warn("⚠️ GisStationsStatic ist `null` oder nicht geladen.");
@@ -179,7 +179,7 @@ function DataSheet() {
}
if (!GisStationsStatic.Points || !Array.isArray(GisStationsStatic.Points)) {
console.warn("⚠️ GisStationsStatic.Points ist nicht vorhanden oder kein Array.", GisStationsStatic);
//console.warn("⚠️ GisStationsStatic.Points ist nicht vorhanden oder kein Array.", GisStationsStatic);
return;
}
@@ -200,7 +200,7 @@ function DataSheet() {
}))
);
console.log("📌 stationListing aktualisiert:", filteredAreas);
// console.log("📌 stationListing aktualisiert:", filteredAreas);
}, [GisStationsStatic]);
//---------------------------

102
components/ShowAddStationPopup.js
View File

@@ -113,58 +113,60 @@ const ShowAddStationPopup = ({ onClose, map, latlng }) => {
//-----------------handleSubmit-------------------
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 :
</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" />
</div>
<div className="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center z-[1000]" onClick={onClose}>
<div className="relative bg-white p-6 rounded-lg shadow-lg w-96 max-w-full" onClick={(e) => e.stopPropagation()}>
{/* Schließen-Button */}
<button onClick={onClose} className="absolute top-2 right-2 text-gray-600 hover:text-gray-900">
✖
</button>
{/* {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:
</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>
</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">
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>
{/* Modal-Inhalt */}
<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:
</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" />
</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>
<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>
<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>
</div>
<div className="flex justify-between text-sm text-gray-700 mb-4">
<span>Lat: {latitude}</span>
<span>Lng: {longitude}</span>
</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>
</div>
</div>
);
};

14
components/mainComponent/MapComponent.js
View File

@@ -75,6 +75,7 @@ import { useInitGisStationsStatusDistrict } from "./hooks/useInitGisStationsStat
import { useInitGisStationsMeasurements } from "./hooks/useInitGisStationsMeasurements";
import { useInitGisSystemStatic } from "./hooks/useInitGisSystemStatic";
import { selectGisSystemStatic, setGisSystemStatic } from "../../redux/slices/webService/gisSystemStaticSlice";
import ShowAddStationPopup from "../../components/ShowAddStationPopup";
const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
const dispatch = useDispatch();
@@ -102,6 +103,8 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
const coordinates = `${e.latlng.lat.toFixed(5)}, ${e.latlng.lng.toFixed(5)}`;
setCurrentCoordinates(coordinates);
setIsPopupOpen(true);
setPopupCoordinates(e.latlng);
setPopupVisible(true);
};
const closePopup = () => setIsPopupOpen(false);
@@ -175,6 +178,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
lat: 52.52,
lng: 13.405,
});
const [popupVisible, setPopupVisible] = useState(false);
const handleAddStation = (stationData) => {
setAddPoiModalWindowState(false);
@@ -626,6 +630,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
useEffect(() => {
if (map) {
console.log("map in MapComponent: ", map);
const handleMapMoveEnd = (event) => {
const newCenter = map.getCenter();
const newZoom = map.getZoom();
@@ -649,15 +654,15 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
//--------------------------------------------
// Bereich in DataSheet ->dropdownmenu
useEffect(() => {
console.log("🔍 GisStationsStaticDistrict Inhalt:", GisStationsStaticDistrict);
//console.log("🔍 GisStationsStaticDistrict Inhalt:", GisStationsStaticDistrict);
// Sicherstellen, dass `Points` existiert und ein Array ist
const points = GisStationsStaticDistrict?.Points;
if (!Array.isArray(points)) {
console.warn("⚠️ GisStationsStaticDistrict.Points ist nicht vorhanden oder kein Array.", points);
/* if (!Array.isArray(points)) {
//console.warn("⚠️ GisStationsStaticDistrict.Points ist nicht vorhanden oder kein Array.", points);
return;
}
*/
if (selectedArea && map) {
const station = points.find((s) => s.Area_Name === selectedArea);
@@ -1029,6 +1034,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
return (
<>
{popupVisible && <ShowAddStationPopup latlng={popupCoordinates} onClose={() => setPopupVisible(false)} map={map} />}
<ToastContainer />
<div>{showPoiUpdateModal && <PoiUpdateModal onClose={() => setShowPoiUpdateModal(false)} poiData={currentPoiData} onSubmit={() => {}} latlng={popupCoordinates} />}</div>

4
components/mainComponent/hooks/useInitGisStationsStatic.js
View File

@@ -9,10 +9,10 @@ export const useInitGisStationsStatic = () => {
const gisStationsStatic = useSelector(selectGisStationsStatic);
useEffect(() => {
console.log("🔍 useInitGisStationsStatic - Aktueller Wert:", gisStationsStatic);
// console.log("🔍 useInitGisStationsStatic - Aktueller Wert:", gisStationsStatic);
if (!gisStationsStatic || gisStationsStatic === null) {
console.log("🚀 Starte fetchGisStationsStatic...");
//console.log("🚀 Starte fetchGisStationsStatic...");
dispatch(fetchGisStationsStatic());
}
}, [gisStationsStatic, dispatch]);

6
components/useMapContextMenu.js
View File

@@ -64,11 +64,13 @@ const addItemsToMapContextMenu = (map, menuItemAdded, setMenuItemAdded, openPopu
map.contextmenu.addItem({
text: "POI hinzufügen",
icon: "/img/add_station.png",
callback: (e) => {
callback: openPopupWithCoordinates, // Statt alert wird die Funktion zum Öffnen des Popups genutzt
/* callback: (e) => {
alert("POI hinzufügen an: " + e.latlng.lat + ", " + e.latlng.lng);
// Falls du ein Modal-Fenster zum Hinzufügen verwenden möchtest:
// ShowAddStationPopup({ latlng: e.latlng, onClose: () => {} });
},
}, */
});
}
}

2
config/appVersion.js
View File

@@ -1,2 +1,2 @@
// /config/appVersion
export const APP_VERSION = "1.1.31";
export const APP_VERSION = "1.1.32";