diff --git a/CHANGELOG.md b/CHANGELOG.md index 6ff9a01ab..9b01dbf23 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,37 @@ Alle bedeutenden Änderungen an diesem Projekt werden in dieser Datei dokumentie --- +## [1.1.158] – 2025-05-23 + +### ✨ Feature + +- Neue POI-Hinzufügen-Logik mit Redux `addPoiThunk` umgesetzt +- `AddPOIModal.js` vollständig umgebaut: + - kein direktes `fetch(...)` mehr + - stattdessen: Redux Thunk + Service + - Statusanzeige über `status` / `error` aus `addPoiSlice` +- Automatisches Nachladen der POI-Icons über `fetchPoiIconsDataThunk` + +### 🐞 Fixed + +- Bug behoben: neu hinzugefügter POI zeigte Standard-Icon → Icon-Liste wird nach dem Hinzufügen erneut geladen + +### ✅ Clean + +- `window.location.reload()` aus `AddPOIModal.js` entfernt +- API-Aufrufe vollständig in `services/database/addPoiService.js` gekapselt + +### 🧠 Architektur + +- Redux-Standardstruktur eingehalten: `Service` → `Thunk` → `Slice` +- Redux-Status wird in Modal direkt über `useSelector` abgebildet + +### 🔧 Version + +- 📦 Version erhöht auf **1.1.158** + +--- + ## [1.1.153] - 2025-05-22 ### ✨ Features diff --git a/components/pois/AddPOIModal.js b/components/pois/AddPOIModal.js index a4b571d55..f0f3456a0 100644 --- a/components/pois/AddPOIModal.js +++ b/components/pois/AddPOIModal.js @@ -1,98 +1,81 @@ -// 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"; +// /components/AddPOIModal.js +import React, { useState, useEffect } from "react"; import { useDispatch, useSelector } from "react-redux"; +import { selectGisStationsStaticDistrict } from "../../redux/slices/webservice/gisStationsStaticDistrictSlice"; import { fetchPoiTypes } from "../../redux/slices/database/poiTypesSlice"; import { incrementTrigger } from "../../redux/slices/poiReadFromDbTriggerSlice"; +import { addPoiThunk } from "../../redux/thunks/database/addPoiThunk"; +import { fetchPoiIconsDataThunk } from "../../redux/thunks/database/fetchPoiIconsDataThunk"; const AddPOIModal = ({ onClose, map, latlng }) => { const dispatch = useDispatch(); const poiTypData = useSelector((state) => state.poiTypes.data); + const status = useSelector((state) => state.addPoi.status); + const error = useSelector((state) => state.addPoi.error); const [name, setName] = useState(""); - const [poiTypeId, setPoiTypeId] = useState(""); // Initialize as string - const [poiTypeName, setPoiTypeName] = useState(""); // Initialize as string + const [poiTypeId, setPoiTypeId] = useState(""); + const [deviceName, setDeviceName] = useState(""); const [latitude] = useState(latlng.lat.toFixed(5)); const [longitude] = useState(latlng.lng.toFixed(5)); - const [deviceName, setDeviceName] = useState(""); - //----------------------------------------------------- + const gisStationsStatic = useSelector(selectGisStationsStaticDistrict); + const locationDeviceData = gisStationsStatic?.Points ?? []; useEffect(() => { if (poiTypData.length > 0 && !poiTypeId) { setPoiTypeId(poiTypData[0].idPoiTyp); } }, [poiTypData]); - useEffect(() => { - console.log("Aktueller POI Type:", poiTypeId); - }, [poiTypeId]); - - //------------------------------------------------------------------------------------------ - const gisStationsStatic = useSelector(selectGisStationsStaticDistrict); - const locationDeviceData = gisStationsStatic?.Points ?? []; - - console.log("gisStationsStatic aus AddPOIModal:", gisStationsStatic); useEffect(() => { if (locationDeviceData?.length > 0) { - console.log("🎯 Gerätedaten erfolgreich geladen:", locationDeviceData); setDeviceName((prev) => prev || locationDeviceData[0]?.LD_Name || ""); } }, [locationDeviceData]); - //------------------------------------------------------------------------------------------ - //-----------------handleSubmit------------------- + useEffect(() => { + dispatch(fetchPoiTypes()); + }, [dispatch]); + const handleSubmit = async (event) => { event.preventDefault(); + const formData = { name, - poiTypeId: Number(poiTypeId), // Umwandlung in eine Zahl + poiTypeId: Number(poiTypeId), latitude, longitude, idLD: locationDeviceData.find((device) => device.LD_Name === deviceName)?.IdLD, }; - const response = await fetch("/api/talas_v5_DB/pois/addLocation", { - method: "POST", - headers: { "Content-Type": "application/json" }, - body: JSON.stringify(formData), - }); - - if (response.ok) { + try { + await dispatch(addPoiThunk(formData)).unwrap(); dispatch(incrementTrigger()); onClose(); - window.location.reload(); - } else { - console.error("Fehler beim Hinzufügen des POI"); + + // Icons im Hintergrund nachladen (nicht blockierend) + setTimeout(() => { + dispatch(fetchPoiIconsDataThunk()); + }, 100); + } catch (error) { + console.error("Fehler beim Hinzufügen des POI:", error); } - if (map && typeof map.closePopup === "function") { + if (map?.closePopup) { map.closePopup(); } - //Seite neu laden - window.location.reload(); }; - //----------------- - // POI-Typen aus Redux laden, wenn die Komponente gemountet wird - useEffect(() => { - dispatch(fetchPoiTypes()); - }, [dispatch]); - - //--------------------- return (
e.stopPropagation()}> - {/* Schließen-Button */} - {/* Modal-Inhalt */}
+
- setPoiTypeId(Number(e.target.value))} className="block p-2 w-full border-2 border-gray-200 rounded-md text-sm"> {poiTypData.length === 0 ? (
+ {status === "loading" &&
Wird hinzugefügt...
} + {status === "failed" && error &&
Fehler: {error}
} + diff --git a/config/appVersion.js b/config/appVersion.js index 3b5336407..706400ebc 100644 --- a/config/appVersion.js +++ b/config/appVersion.js @@ -1,2 +1,2 @@ // /config/appVersion -export const APP_VERSION = "1.1.157"; +export const APP_VERSION = "1.1.158";