refactor and cleanup

components/AddPOIOnPolyline.js

@@ -1,3 +1,4 @@
+// /components/AddPOIOnPolyline.js
 import React, { useState, useEffect } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { closeAddPoiOnPolylineModal } from "../redux/slices/addPoiOnPolylineSlice";
@@ -20,6 +21,7 @@ const AddPOIOnPolyline = () => {
   if (!isOpen) return null;
 
   const handleSubmit = async (event) => {
+    alert("POI auf Polyline hinzufügen");
     event.preventDefault();
 
     const formData = { name, latitude, longitude };

components/CircleIcon.js

@@ -1,13 +0,0 @@
-// /components/CircleIcon.js
-// Custom circle icon for draggable markers
-import L from "leaflet";
-import "leaflet/dist/leaflet.css";
-
-const circleIcon = L.divIcon({
-  className: "custom-div-icon",
-  html: "<div style='background-color:gray;border-radius:50%;width:10px;height:10px;border: solid black 1px;'></div>",
-  iconSize: [25, 25],
-  iconAnchor: [5, 5],
-});
-
-export default circleIcon;

components/CoordinateModal.js

@@ -1,29 +0,0 @@
-// components/CoordinateModal.js
-import React from "react";
-
-const CoordinateModal = ({ isOpen, onClose, coordinates }) => {
-  if (!isOpen) return null;
-
-  return (
-    <div className="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center z-50">
-      <div className="bg-white p-6 rounded-lg shadow-lg w-80">
-        <h2 className="text-lg font-bold mb-2">Koordinaten</h2>
-        <p className="mb-4">Koordinaten: {coordinates}</p>
-        <button
-          onClick={() => {
-            navigator.clipboard.writeText(coordinates);
-            alert("Koordinaten kopiert!");
-          }}
-          className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600"
-        >
-          Kopieren
-        </button>
-        <button onClick={onClose} className="mt-2 bg-gray-300 text-black px-4 py-2 rounded hover:bg-gray-400">
-          Schließen
-        </button>
-      </div>
-    </div>
-  );
-};
-
-export default CoordinateModal;

components/EndIcon.js

@@ -1,10 +0,0 @@
-// Viereck als End-Icon für die Route
-import L from "leaflet";
-const endIcon = L.divIcon({
-  className: "custom-end-icon",
-  html: "<div style='background-color: gray; width: 14px; height: 14px; border: solid black 2px;'></div>", // Graues Viereck
-  iconSize: [14, 14],
-  iconAnchor: [7, 7], // Mittelpunkt des Vierecks als Anker
-});
-
-export default endIcon;

components/StartIcon.js

@@ -1,16 +0,0 @@
-// Custom triangle icon for draggable markers
-import L from "leaflet";
-
-const startIcon = L.divIcon({
-  className: "custom-start-icon",
-  html: `
-    <svg width="18" height="18" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-      <polygon points="10,2 18,18 2,18" fill="black" />
-      <polygon points="10,5 16,16 4,16" fill="gray" />
-    </svg>
-  `, // Schwarzes Dreieck innerhalb eines grauen Dreiecks
-  iconSize: [18, 18],
-  iconAnchor: [9, 10],
-});
-
-export default startIcon;

components/mainComponent/MapComponent.js

@@ -7,7 +7,7 @@ import "leaflet-contextmenu";
 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 MapLayersControlPanel from "../MapLayersControlPanel.js";
+import MapLayersControlPanel from "../uiWidgets/MapLayersControlPanel.js";
 
 import { InformationCircleIcon } from "@heroicons/react/20/solid";
 import PoiUpdateModal from "../pois/PoiUpdateModal.js";
@@ -23,7 +23,7 @@ import useSmsfunkmodemMarkersLayer from "../../hooks/layers/useSmsfunkmodemMarke
 import useBereicheMarkersLayer from "../../hooks/layers/useBereicheMarkersLayer.js";
 import { setupPolylines } from "../../utils/polylines/setupPolylines.js";
 import { setupPOIs } from "../../utils/setupPOIs.js";
-import VersionInfoModal from "../VersionInfoModal.js";
+import VersionInfoModal from "../uiWidgets/VersionInfoModal.js";
 import useLayerVisibility from "../../hooks/useLayerVisibility.js";
 import useLineData from "../../hooks/useLineData.js";
 import { useMapComponentState } from "../../hooks/useMapComponentState.js";
@@ -31,15 +31,14 @@ import { updateLocation } from "../../utils/updateBereichUtil.js";
 import { selectMapLayersState } from "../../redux/slices/mapLayersSlice";
 import { useSelector, useDispatch } from "react-redux";
 import { setCurrentPoi } from "../../redux/slices/currentPoiSlice.js";
-import CoordinateInput from "../CoordinateInput.js";
-import CoordinateModal from "../CoordinateModal.js";
+import CoordinateInput from "../uiWidgets/CoordinateInput.js";
 import CoordinatePopup from "../CoordinatePopup.js";
 //------------------------Daten aus API--------------------
 import { fetchPoiDataService } from "../../services/database/fetchPoiDataService.js";
 import { selectPolylineVisible, setPolylineVisible } from "../../redux/slices/polylineLayerVisibleSlice.js";
 import { selectGisStationsStaticDistrict } from "../../redux/slices/webservice/gisStationsStaticDistrictSlice.js";
 import { selectGisSystemStatic, setGisSystemStatic } from "../../redux/slices/webservice/gisSystemStaticSlice.js";
-import ShowAddStationPopup from "../AddPOIModal.js";
+import ShowAddStationPopup from "../pois/AddPOIModal.js";
 import AddPOIOnPolyline from "../AddPOIOnPolyline";
 import { enablePolylineEvents, disablePolylineEvents } from "../../utils/polylines/eventHandlers";
 import { updateCountdown, closePolylineContextMenu } from "../../redux/slices/polylineContextMenuSlice";
@@ -865,8 +864,6 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   return (
     <>
       {useSelector((state) => state.addPoiOnPolyline.isOpen) && <AddPOIOnPolyline />}
-      {/* Zeigt das Koordinaten-Modal, wenn `showCoordinatesModal` true ist */}
-      {showCoordinatesModal && <CoordinateModal latlng={popupCoordinates} onClose={() => setShowCoordinatesModal(false)} />}
 
       {/* Zeigt das POI-Modal, wenn `showPoiModal` true ist */}
       {showPoiModal && <ShowAddStationPopup latlng={popupCoordinates} onClose={() => setShowPoiModal(false)} />}

components/pois/AddPOIModal.js

@@ -1,13 +1,13 @@
-// components/AddStationPopup.js
+// components/AddPOIModal.js
 import React, { useState, useEffect, use } from "react";
 import ReactDOM from "react-dom";
-import { setPoiMarkers } from "../redux/slices/readPoiMarkersStoreSlice";
-import { selectGisStationsStaticDistrict } from "../redux/slices/webservice/gisStationsStaticDistrictSlice";
+import { setPoiMarkers } from "../../redux/slices/readPoiMarkersStoreSlice";
+import { selectGisStationsStaticDistrict } from "../../redux/slices/webservice/gisStationsStaticDistrictSlice";
 import { useDispatch, useSelector } from "react-redux";
-import { fetchPoiTypes } from "../redux/slices/database/poiTypesSlice";
-import { incrementTrigger } from "../redux/slices/poiReadFromDbTriggerSlice";
+import { fetchPoiTypes } from "../../redux/slices/database/poiTypesSlice";
+import { incrementTrigger } from "../../redux/slices/poiReadFromDbTriggerSlice";
 
-const ShowAddStationPopup = ({ onClose, map, latlng }) => {
+const AddPOIModal = ({ onClose, map, latlng }) => {
   const dispatch = useDispatch();
 
   const poiTypData = useSelector((state) => state.poiTypes.data);
@@ -176,4 +176,4 @@ const ShowAddStationPopup = ({ onClose, map, latlng }) => {
   );
 };
 
-export default ShowAddStationPopup;
+export default AddPOIModal;

components/uiWidgets/MapLayersControlPanel.js

@@ -1,14 +1,14 @@
 // /componentss/MapLayersControlPanel.js
 import React, { useEffect, useState } from "react";
-import { setSelectedArea } from "../redux/slices/selectedAreaSlice";
-import EditModeToggle from "./EditModeToggle";
+import { setSelectedArea } from "../../redux/slices/selectedAreaSlice";
+import EditModeToggle from "../EditModeToggle";
 import { useSelector, useDispatch } from "react-redux";
-import { selectPolylineVisible, setPolylineVisible } from "../redux/slices/polylineLayerVisibleSlice";
-import { selectGisSystemStatic } from "../redux/slices/webservice/gisSystemStaticSlice";
-import { selectGisStationsStaticDistrict } from "../redux/slices/webservice/gisStationsStaticDistrictSlice";
-import { selectMapLayersState, setLayerVisibility } from "../redux/slices/mapLayersSlice";
-import { setVisible } from "../redux/slices/poiLayerVisibleSlice";
-import { incrementZoomTrigger } from "../redux/slices/zoomTriggerSlice";
+import { selectPolylineVisible, setPolylineVisible } from "../../redux/slices/polylineLayerVisibleSlice";
+import { selectGisSystemStatic } from "../../redux/slices/webservice/gisSystemStaticSlice";
+import { selectGisStationsStaticDistrict } from "../../redux/slices/webservice/gisStationsStaticDistrictSlice";
+import { selectMapLayersState, setLayerVisibility } from "../../redux/slices/mapLayersSlice";
+import { setVisible } from "../../redux/slices/poiLayerVisibleSlice";
+import { incrementZoomTrigger } from "../../redux/slices/zoomTriggerSlice";
 
 function MapLayersControlPanel() {
   const [editMode, setEditMode] = useState(false); // Zustand für editMode

config/appVersion.js

@@ -1,2 +1,2 @@
 // /config/appVersion
-export const APP_VERSION = "1.1.151";
+export const APP_VERSION = "1.1.152";

package-lock.json

@@ -1,5 +1,5 @@
 {
-  "name": "22.05.2025 NodeMap",
+  "name": "23.05.2025 NodeMap",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {

redux/slices/database/addPoiSlice.js

@@ -0,0 +1,38 @@
+import { createSlice } from "@reduxjs/toolkit";
+import { addPoiThunk } from "../../thunks/database/addPoiThunk";
+
+const initialState = {
+  status: "idle", // idle | loading | succeeded | failed
+  error: null,
+};
+
+const addPoiSlice = createSlice({
+  name: "addPoi",
+  initialState,
+  reducers: {
+    resetAddPoiStatus: (state) => {
+      state.status = "idle";
+      state.error = null;
+    },
+  },
+  extraReducers: (builder) => {
+    builder
+      .addCase(addPoiThunk.pending, (state) => {
+        state.status = "loading";
+      })
+      .addCase(addPoiThunk.fulfilled, (state) => {
+        state.status = "succeeded";
+        state.error = null;
+      })
+      .addCase(addPoiThunk.rejected, (state, action) => {
+        state.status = "failed";
+        state.error = action.payload;
+      });
+  },
+});
+
+export const { resetAddPoiStatus } = addPoiSlice.actions;
+export default addPoiSlice.reducer;
+
+export const selectAddPoiStatus = (state) => state.addPoi.status;
+export const selectAddPoiError = (state) => state.addPoi.error;

redux/store.js

@@ -27,6 +27,7 @@ import gisStationsMeasurementsReducer from "./slices/webservice/gisStationsMeasu
 import gisSystemStaticReducer from "./slices/webservice/gisSystemStaticSlice";
 import userRightsReducer from "./slices/webservice/userRightsSlice";
 import gisLinesStatusFromWebserviceReducer from "./slices/webservice/gisLinesStatusSlice";
+import addPoiReducer from "./slices/database/addPoiSlice";
 
 export const store = configureStore({
   reducer: {
@@ -55,5 +56,6 @@ export const store = configureStore({
     zoomTrigger: zoomTriggerReducer,
     urlParameter: urlParameterReducer,
     priorityConfig: priorityConfigReducer,
+    addPoi: addPoiReducer,
   },
 });

redux/thunks/database/addPoiThunk.js

@@ -0,0 +1,11 @@
+// /redux/thunks/database/addPoiThunk.js
+import { createAsyncThunk } from "@reduxjs/toolkit";
+import { addPoiService } from "../../../services/database/addPoiService";
+
+export const addPoiThunk = createAsyncThunk("poi/add", async (formData, thunkAPI) => {
+  try {
+    return await addPoiService(formData);
+  } catch (error) {
+    return thunkAPI.rejectWithValue(error.message);
+  }
+});

services/database/addPoiService.js

@@ -0,0 +1,14 @@
+// /services/database/addPoiService.js
+export const addPoiService = async (formData) => {
+  const response = await fetch("/api/talas_v5_DB/pois/addLocation", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(formData),
+  });
+
+  if (!response.ok) {
+    throw new Error("Fehler beim Hinzufügen des POI");
+  }
+
+  return await response.json();
+};