fix(poi): Fehler beim Hinzufügen von POIs behoben (Modal blieb offen)

- Falsche URL im addPoiService korrigiert (/addLocation → /addPoi)
- Redux-Status wird nach erfolgreichem Hinzufügen zurückgesetzt (resetAddPoiStatus)
- Modal schließt jetzt zuverlässig nach dem Dispatch
- Ladeanzeige "Wird hinzugefügt..." verschwindet korrekt
- Version auf 1.1.176 erhöht

CHANGELOG.md

@@ -4,6 +4,31 @@ Alle bedeutenden Änderungen an diesem Projekt werden in dieser Datei dokumentie
 
 ---
 
+[1.1.176] – 2025-05-26
+🐞 Fixed
+Problem behoben, dass das Modal „POI hinzufügen“ nach erfolgreichem Submit nicht geschlossen wurde und die Meldung „Wird hinzugefügt…“ dauerhaft sichtbar blieb.
+
+Ursache: Die Service-Datei addPoiService.js verwendete die falsche URL /addLocation statt /addPoi.
+
+Die unwrap()-Verwendung im AddPOIModal.js wurde beibehalten und korrekt abgeschlossen.
+
+✅ Clean
+resetAddPoiStatus() wird jetzt direkt nach onClose() dispatcht, um Status in Redux auf idle zurückzusetzen.
+
+Ladeindikator „Wird hinzugefügt...“ wird zuverlässig entfernt.
+
+Fehleranzeige funktioniert weiterhin über Redux (status === "failed" und error).
+
+🧠 Architektur
+Vollständige Redux-Anbindung des Modals über addPoiSlice, addPoiThunk, addPoiService und addPoi.js.
+
+Thunk-Erfolg löst incrementTrigger() aus und synchronisiert die Marker auf der Karte durch erneutes Laden via fetchPoiMarkersThunk().
+
+🔧 Version
+📦 Version erhöht auf 1.1.176
+
+---
+
 [1.1.174] – 2025-05-26
 ♻️ Refactor
 useDrawLines.js vollständig auf Redux umgestellt:

README.md

@@ -116,13 +116,24 @@ redux/          → globale Zustände (Slices)
 📦redux
  ┣ 📂slices
  ┃ ┣ 📂database
- ┃ ┃ ┣ 📜addPoiSlice.js
+ ┃ ┃ ┣ 📂pois
- ┃ ┃ ┣ 📜gisLinesSlice.js
+ ┃ ┃ ┃ ┣ 📜addPoiOnPolylineSlice.js
+ ┃ ┃ ┃ ┣ 📜addPoiSlice.js
+ ┃ ┃ ┃ ┣ 📜currentPoiSlice.js
+ ┃ ┃ ┃ ┣ 📜poiIconsDataSlice.js
+ ┃ ┃ ┃ ┣ 📜poiLayerVisibleSlice.js
+ ┃ ┃ ┃ ┣ 📜poiReadFromDbTriggerSlice.js
+ ┃ ┃ ┃ ┣ 📜poiTypesSlice.js
+ ┃ ┃ ┃ ┣ 📜poiTypSlice.js
+ ┃ ┃ ┃ ┣ 📜readPoiMarkersStoreSlice.js
+ ┃ ┃ ┃ ┗ 📜selectedPoiSlice.js
+ ┃ ┃ ┣ 📂polylines
+ ┃ ┃ ┃ ┣ 📜gisLinesSlice.js
+ ┃ ┃ ┃ ┣ 📜polylineContextMenuSlice.js
+ ┃ ┃ ┃ ┣ 📜polylineEventsDisabledSlice.js
+ ┃ ┃ ┃ ┗ 📜polylineLayerVisibleSlice.js
  ┃ ┃ ┣ 📜locationDevicesFromDBSlice.js
  ┃ ┃ ┣ 📜locationDevicesSlice.js
- ┃ ┃ ┣ 📜poiIconsDataSlice.js
- ┃ ┃ ┣ 📜poiTypesSlice.js
- ┃ ┃ ┣ 📜poiTypSlice.js
  ┃ ┃ ┗ 📜priorityConfigSlice.js
  ┃ ┣ 📂webservice
  ┃ ┃ ┣ 📜gisLinesStatusSlice.js
@@ -131,29 +142,25 @@ redux/          → globale Zustände (Slices)
  ┃ ┃ ┣ 📜gisStationsStatusDistrictSlice.js
  ┃ ┃ ┣ 📜gisSystemStaticSlice.js
  ┃ ┃ ┗ 📜userRightsSlice.js
- ┃ ┣ 📜addPoiOnPolylineSlice.js
- ┃ ┣ 📜currentPoiSlice.js
  ┃ ┣ 📜lineVisibilitySlice.js
  ┃ ┣ 📜mapLayersSlice.js
- ┃ ┣ 📜poiLayerVisibleSlice.js
- ┃ ┣ 📜poiReadFromDbTriggerSlice.js
- ┃ ┣ 📜polylineContextMenuSlice.js
- ┃ ┣ 📜polylineEventsDisabledSlice.js
- ┃ ┣ 📜polylineLayerVisibleSlice.js
- ┃ ┣ 📜readPoiMarkersStoreSlice.js
  ┃ ┣ 📜selectedAreaSlice.js
  ┃ ┣ 📜selectedDeviceSlice.js
- ┃ ┣ 📜selectedPoiSlice.js
  ┃ ┣ 📜urlParameterSlice.js
  ┃ ┗ 📜zoomTriggerSlice.js
  ┣ 📂thunks
  ┃ ┣ 📂database
- ┃ ┃ ┣ 📜addPoiThunk.js
+ ┃ ┃ ┣ 📂pois
- ┃ ┃ ┣ 📜fetchGisLinesThunk.js
+ ┃ ┃ ┃ ┣ 📜addPoiThunk.js
+ ┃ ┃ ┃ ┣ 📜deletePoiThunk.js
+ ┃ ┃ ┃ ┣ 📜fetchPoiIconsDataThunk.js
+ ┃ ┃ ┃ ┣ 📜fetchPoiTypThunk.js
+ ┃ ┃ ┃ ┗ 📜updatePoiThunk.js
+ ┃ ┃ ┣ 📂polylines
+ ┃ ┃ ┃ ┗ 📜fetchGisLinesThunk.js
  ┃ ┃ ┣ 📜fetchLocationDevicesThunk.js
- ┃ ┃ ┣ 📜fetchPoiIconsDataThunk.js
+ ┃ ┃ ┣ 📜fetchPriorityConfigThunk.js
- ┃ ┃ ┣ 📜fetchPoiTypThunk.js
+ ┃ ┃ ┗ 📜getDeviceIdByNameThunk.js
- ┃ ┃ ┗ 📜fetchPriorityConfigThunk.js
  ┃ ┗ 📂webservice
  ┃ ┃ ┣ 📜fetchGisLinesStatusThunk.js
  ┃ ┃ ┣ 📜fetchGisStationsMeasurementsThunk.js
@@ -166,15 +173,20 @@ redux/          → globale Zustände (Slices)
 services/       → API-Kommunikation, Mock-Logik
 📦services
  ┣ 📂database
- ┃ ┣ 📜addPoiService.js
+ ┃ ┣ 📂pois
+ ┃ ┃ ┣ 📜addPoiService.js
+ ┃ ┃ ┣ 📜deletePoiService.js
+ ┃ ┃ ┣ 📜fetchPoiDataByIdService.js
+ ┃ ┃ ┣ 📜fetchPoiDataService.js
+ ┃ ┃ ┣ 📜fetchPoiIconsDataService.js
+ ┃ ┃ ┣ 📜fetchPoiTypService.js
+ ┃ ┃ ┗ 📜updatePoiService.js
+ ┃ ┣ 📂polylines
+ ┃ ┃ ┗ 📜fetchGisLinesService.js
  ┃ ┣ 📜fetchDeviceNameByIdService.js
- ┃ ┣ 📜fetchGisLinesService.js
  ┃ ┣ 📜fetchLocationDevicesService.js
- ┃ ┣ 📜fetchPoiDataByIdService.js
- ┃ ┣ 📜fetchPoiDataService.js
- ┃ ┣ 📜fetchPoiIconsDataService.js
- ┃ ┣ 📜fetchPoiTypService.js
  ┃ ┣ 📜fetchPriorityConfigService.js
+ ┃ ┣ 📜getDeviceIdByNameService.js
  ┃ ┗ 📜updateLocationInDatabaseService.js
  ┣ 📂utils
  ┃ ┗ 📜fetchWithTimeout.js

components/pois/AddPOIModal.js

@@ -5,6 +5,7 @@ import { selectGisStationsStaticDistrict } from "../../redux/slices/webservice/g
 import { fetchPoiTypes } from "../../redux/slices/database/pois/poiTypesSlice";
 import { incrementTrigger } from "../../redux/slices/database/pois/poiReadFromDbTriggerSlice";
 import { addPoiThunk } from "../../redux/thunks/database/pois/addPoiThunk";
+import { resetAddPoiStatus } from "../../redux/slices/database/pois/addPoiSlice";
 import { fetchPoiIconsDataThunk } from "../../redux/thunks/database/pois/fetchPoiIconsDataThunk";
 
 const AddPOIModal = ({ onClose, map, latlng }) => {
@@ -54,9 +55,10 @@ const AddPOIModal = ({ onClose, map, latlng }) => {
     try {
       await dispatch(addPoiThunk(formData)).unwrap();
       dispatch(incrementTrigger());
+      dispatch(resetAddPoiStatus()); // ✅ Status zurücksetzen
       onClose();
 
-      // Icons im Hintergrund nachladen (nicht blockierend)
+      // Icons im Hintergrund nachladen
       setTimeout(() => {
         dispatch(fetchPoiIconsDataThunk());
       }, 100);
@@ -123,7 +125,7 @@ const AddPOIModal = ({ onClose, map, latlng }) => {
           </div>
 
           {status === "loading" && <div className="text-blue-500 mb-2 text-sm">Wird hinzugefügt...</div>}
-          {status === "failed" && error && <div className="text-red-500 mb-2 text-sm">Fehler: {error}</div>}
+          {status === "failed" && error && <div className="text-red-500 mb-2 text-sm">❌ Fehler: {error}</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

config/appVersion.js

@@ -1,2 +1,2 @@
 // /config/appVersion
-export const APP_VERSION = "1.1.175";
+export const APP_VERSION = "1.1.177";

pages/api/talas_v5_DB/pois/addPoi.js

@@ -1,4 +1,4 @@
-// pages/api/talas_v5_DB/pois/addLocation.js
+// pages/api/talas_v5_DB/pois/addPoi.js
 import getPool from "../../../../utils/mysqlPool"; // Singleton-Pool importieren
 
 export default async function handler(req, res) {

pages/api/talas_v5_DB/pois/readAllPOIs.js

@@ -1,4 +1,4 @@
-// pages/api/talas_v5_DB/pois/readLocations.js
+// pages/api/talas_v5_DB/pois/readAllPOIs.js
 import getPool from "../../../../utils/mysqlPool"; // Singleton-Pool importieren
 
 export default async function handler(req, res) {

pages/index.js

@@ -1,84 +1,66 @@
 "use client";
 import React, { useEffect, useState } from "react";
 import dynamic from "next/dynamic";
-import { setPoiMarkers } from "../redux/slices/database/pois/readPoiMarkersStoreSlice.js";
 import { useSelector, useDispatch } from "react-redux";
 
+import { fetchPoiMarkersThunk } from "../redux/thunks/database/pois/fetchPoiMarkersThunk";
+import { addPoiThunk } from "../redux/thunks/database/pois/addPoiThunk";
+
+import { selectPoiMarkers } from "../redux/slices/database/pois/poiMarkersSlice";
+import { selectAddPoiStatus, selectAddPoiError } from "../redux/slices/database/pois/addPoiSlice";
+
 const MapComponentWithNoSSR = dynamic(() => import("../components/mainComponent/MapComponent"), { ssr: false });
 const TestScriptWithNoSSR = dynamic(() => import("../components/TestScript"), { ssr: false });
 
 export default function Home() {
-  const poiReadTrigger = useSelector((state) => state.poiReadFromDbTrigger.trigger);
   const dispatch = useDispatch();
-  const locations = useSelector((state) => state.readPoiMarkersStore.poiMarkers);
+
+  // Redux State
+  const locations = useSelector(selectPoiMarkers);
+  const poiReadTrigger = useSelector((state) => state.poiReadFromDbTrigger.trigger);
+  const addPoiStatus = useSelector(selectAddPoiStatus);
+  const addPoiError = useSelector(selectAddPoiError);
+
+  // Lokale State (für URL-Parameter)
   const [mParam, setMParam] = useState("");
   const [uParam, setUParam] = useState("");
 
-  // Daten abrufen
+  // URL-Parameter auslesen und POIs laden
-  const loadData = async () => {
-    try {
-      const response = await fetch("/api/talas_v5_DB/pois/readLocations");
-      if (!response.ok) {
-        throw new Error("Fehler beim Laden der Standortdaten");
-      }
-      const data = await response.json();
-      dispatch(setPoiMarkers(data));
-    } catch (error) {
-      console.error(error.message);
-    }
-  };
-
-  // Verhindert mehrfaches Laden durch doppelte Registrierung
   useEffect(() => {
-    let isMounted = true;
+    const getURLParameter = (name) => {
-
-    function getURLParameter(name) {
       const params = new URLSearchParams(window.location.search);
       return params.get(name);
-    }
+    };
 
     setMParam(getURLParameter("m"));
     setUParam(getURLParameter("u"));
 
-    const fetchData = async () => {
+    dispatch(fetchPoiMarkersThunk());
-      await loadData();
+  }, [dispatch, poiReadTrigger]);
-    };
 
-    if (isMounted) {
+  // POI hinzufügen über Redux-Thunk
-      fetchData();
+  const handleAddLocation = async (name, poiTypeId, lat, lng) => {
-    }
+    const idLD = 0; // ⬅️ Falls IDLD dynamisch bestimmt werden soll, anpassen
+    const formData = { name, poiTypeId, latitude: lat, longitude: lng, idLD };
 
-    return () => {
-      isMounted = false;
-    };
-  }, [poiReadTrigger]); // Nur einmal bei Änderung von poiReadTrigger ausführen
-
-  // POI hinzufügen
-  const handleAddLocation = async (name, type, lat, lng) => {
     try {
-      const response = await fetch("/api/talas_v5_DB/pois/addLocation", {
+      const resultAction = await dispatch(addPoiThunk(formData));
-        method: "POST",
+      if (addPoiThunk.fulfilled.match(resultAction)) {
-        headers: { "Content-Type": "application/json" },
+        dispatch(fetchPoiMarkersThunk()); // neu laden
-        body: JSON.stringify({ name, type, latitude: lat, longitude: lng }),
+      } else {
-      });
+        console.error("❌ Fehler beim Hinzufügen:", resultAction.payload);
-      if (!response.ok) {
-        throw new Error("Fehler beim Hinzufügen des Standorts");
       }
-      loadData();
     } catch (error) {
-      console.error(error.message);
+      console.error("❌ Fehler im addPoiThunk:", error.message);
     }
   };
 
-  // Standort aktualisieren
-  const handleLocationUpdate = (id, newLatitude, newLongitude) => {
-    setLocations((prevLocations) => prevLocations.map((location) => (location.idPoi === id ? { ...location, position: `POINT(${newLongitude} ${newLatitude})` } : location)));
-  };
-
   return (
     <div>
-      <MapComponentWithNoSSR locations={locations} onAddLocation={handleAddLocation} onLocationUpdate={handleLocationUpdate} />
+      <MapComponentWithNoSSR locations={locations} onAddLocation={handleAddLocation} />
       <TestScriptWithNoSSR />
+
+      {addPoiStatus === "failed" && <p className="text-red-600">❌ Fehler: {addPoiError}</p>}
     </div>
   );
 }

redux/slices/database/pois/poiMarkersSlice.js

@@ -0,0 +1,44 @@
+// /redux/slices/database/pois/poiMarkersSlice.js
+import { createSlice } from "@reduxjs/toolkit";
+import { fetchPoiMarkersThunk } from "../../../thunks/database/pois/fetchPoiMarkersThunk";
+
+const initialState = {
+  data: [],
+  status: "idle",
+  error: null,
+};
+
+const poiMarkersSlice = createSlice({
+  name: "poiMarkers",
+  initialState,
+  reducers: {
+    setPoiMarkers: (state, action) => {
+      state.data = action.payload;
+    },
+    clearPoiMarkers: (state) => {
+      state.data = [];
+    },
+  },
+  extraReducers: (builder) => {
+    builder
+      .addCase(fetchPoiMarkersThunk.pending, (state) => {
+        state.status = "loading";
+      })
+      .addCase(fetchPoiMarkersThunk.fulfilled, (state, action) => {
+        state.status = "succeeded";
+        state.data = action.payload;
+      })
+      .addCase(fetchPoiMarkersThunk.rejected, (state, action) => {
+        state.status = "failed";
+        state.error = action.error.message;
+      });
+  },
+});
+
+export const { setPoiMarkers, clearPoiMarkers } = poiMarkersSlice.actions;
+
+export const selectPoiMarkers = (state) => state.poiMarkers.data;
+export const selectPoiMarkersStatus = (state) => state.poiMarkers.status;
+export const selectPoiMarkersError = (state) => state.poiMarkers.error;
+
+export default poiMarkersSlice.reducer;

redux/store.js

@@ -11,6 +11,7 @@ import selectedPoiReducer from "./slices/database/pois/selectedPoiSlice";
 import currentPoiReducer from "./slices/database/pois/currentPoiSlice";
 import poiReadFromDbTriggerReducer from "./slices/database/pois/poiReadFromDbTriggerSlice";
 import readPoiMarkersStoreReducer from "./slices/database/pois/readPoiMarkersStoreSlice";
+import poiMarkersReducer from "./slices/database/pois/poiMarkersSlice";
 //--polylines------------
 import gisLinesFromDatabaseReducer from "./slices/database/polylines/gisLinesSlice";
 import polylineLayerVisibleReducer from "./slices/database/polylines/polylineLayerVisibleSlice";
@@ -66,5 +67,6 @@ export const store = configureStore({
     addPoi: addPoiReducer,
     poiTyp: poiTypReducer,
     poiIconsData: poiIconsDataReducer,
+    poiMarkers: poiMarkersReducer,
   },
 });

redux/thunks/database/pois/fetchPoiMarkersThunk.js

@@ -0,0 +1,8 @@
+// /redux/thunks/database/pois/fetchPoiMarkersThunk.js
+import { createAsyncThunk } from "@reduxjs/toolkit";
+import { fetchPoiMarkersService } from "../../../../services/database/pois/fetchPoiMarkersService";
+
+// Einheitlicher Name passend zur Slice-Datei
+export const fetchPoiMarkersThunk = createAsyncThunk("poiMarkers/fetchAll", async () => {
+  return await fetchPoiMarkersService();
+});

services/database/pois/addPoiService.js

@@ -1,6 +1,6 @@
 // /services/database/addPoiService.js
 export const addPoiService = async (formData) => {
-  const response = await fetch("/api/talas_v5_DB/pois/addLocation", {
+  const response = await fetch("/api/talas_v5_DB/pois/addPoi", {
     method: "POST",
     headers: { "Content-Type": "application/json" },
     body: JSON.stringify(formData),

services/database/pois/fetchPoiMarkersService.js

@@ -0,0 +1,6 @@
+// /services/database/pois/fetchPoiMarkersService.js
+export const fetchPoiMarkersService = async () => {
+  const response = await fetch("/api/talas_v5_DB/pois/readAllPOIs");
+  if (!response.ok) throw new Error("Fehler beim Laden der POIs");
+  return await response.json();
+};