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

refactor: POI-Daten vollständig in Redux integriert

Browse Source 
- useFetchPoiData.js entfernt
- Neue Redux-Slices für POI-Typen und POI-Icons erstellt
- Neue Services und Thunks hinzugefügt
- fetch-Aufrufe durch zentralisierte Redux-Logik ersetzt
- store.js aktualisiert und neue States registriert
This commit is contained in:
ISA
2025-05-23 11:14:13 +02:00
parent 08679761fb
commit 0a1c0e5fbe
20 changed files with 304 additions and 337 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
CHANGELOG.md
View File

@@ -4,6 +4,28 @@ Alle bedeutenden Änderungen an diesem Projekt werden in dieser Datei dokumentie
--- ---
## [1.1.153] - 2025-05-22
### ✨ Features
- Neue Redux-Slices erstellt: `poiIconsDataSlice` und `poiTypSlice`
- Neue Services erstellt: `fetchPoiIconsDataService.js`, `fetchPoiTypService.js`
- Neue Thunks: `fetchPoiIconsDataThunk.js`, `fetchPoiTypThunk.js`
- State-Management für POI-Typen und POI-Icons vollständig in Redux überführt
- Komponente `useFetchPoiData.js` entfernt und durch Redux ersetzt
### ♻️ Refactoring
- Alle direkten `fetch`-Aufrufe durch Redux-Thunk ersetzt
- Architektur auf eine zentralisierte, testbare Datenflussstruktur verbessert
- Zustand der POI-Daten über Redux `store.js` global verwaltet
### ✅ Cleanup
- `useFetchPoiData.js` gelöscht, da Funktionalität durch Thunks ersetzt wurde
---
## [1.1.150] - 2025-05-22 ## [1.1.150] - 2025-05-22
### Removed ### Removed

109
README.md
View File

@@ -66,15 +66,120 @@ npm run dev
```bash ```bash
components/ → UI-Komponenten inkl. Karte und Layer-Control-Panel (`MapLayersControlPanel`) components/ → UI-Komponenten inkl. Karte und Layer-Control-Panel (`MapLayersControlPanel`)
📦components
┣ 📂contextmenu
┃ ┣ 📜CoordinatePopup.js
┃ ┗ 📜useMapContextMenu.js
┣ 📂gisPolylines
┃ ┣ 📂icons
┃ ┃ ┣ 📜CircleIcon.js
┃ ┃ ┣ 📜EndIcon.js
┃ ┃ ┣ 📜StartIcon.js
┃ ┃ ┗ 📜SupportPointIcons.js
┃ ┗ 📜PolylineContextMenu.js
┣ 📂icons
┃ ┗ 📂devices
┃ ┃ ┗ 📂overlapping
┃ ┃ ┃ ┗ 📜PlusRoundIcon.js
┣ 📂mainComponent
┃ ┣ 📂hooks
┃ ┃ ┣ 📜useFetchPoiData.js
┃ ┃ ┣ 📜useInitializeMap.js
┃ ┃ ┗ 📜useRestoreMapSettings.js
┃ ┗ 📜MapComponent.js
┣ 📂pois
┃ ┣ 📜AddPOIModal.js
┃ ┗ 📜PoiUpdateModal.js
┣ 📂uiWidgets
┃ ┣ 📂mapLayersControlPanel
┃ ┃ ┣ 📜EditModeToggle.js
┃ ┃ ┗ 📜MapLayersControlPanel.js
┃ ┣ 📜CoordinateInput.js
┃ ┗ 📜VersionInfoModal.js
┗ 📜TestScript.js
config/ → zentrale Variablen (.env.local) config/ → zentrale Variablen (.env.local)
hooks/ → eigene React-Hooks hooks/ → eigene React-Hooks
redux/ → globale Zustände (Slices)
services/ → API-Kommunikation, Mock-Logik
utils/ → POI- und Linienverarbeitung utils/ → POI- und Linienverarbeitung
lib/ → Formatierungen, Umrechnungen lib/ → Formatierungen, Umrechnungen
public/ → mapTiles, Bilder, Icons public/ → mapTiles, Bilder, Icons
pages/ → Next.js Seiten & Routen pages/ → Next.js Seiten & Routen
scripts/ → lokale Tools (nur Dev) scripts/ → lokale Tools (nur Dev)
redux/ → globale Zustände (Slices)
📦redux
┣ 📂slices
┃ ┣ 📂database
┃ ┃ ┣ 📜addPoiSlice.js
┃ ┃ ┣ 📜gisLinesSlice.js
┃ ┃ ┣ 📜locationDevicesFromDBSlice.js
┃ ┃ ┣ 📜locationDevicesSlice.js
┃ ┃ ┣ 📜poiTypesSlice.js
┃ ┃ ┗ 📜priorityConfigSlice.js
┃ ┣ 📂webservice
┃ ┃ ┣ 📜gisLinesStatusSlice.js
┃ ┃ ┣ 📜gisStationsMeasurementsSlice.js
┃ ┃ ┣ 📜gisStationsStaticDistrictSlice.js
┃ ┃ ┣ 📜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
┃ ┃ ┣ 📜fetchGisLinesThunk.js
┃ ┃ ┣ 📜fetchLocationDevicesThunk.js
┃ ┃ ┗ 📜fetchPriorityConfigThunk.js
┃ ┗ 📂webservice
┃ ┃ ┣ 📜fetchGisLinesStatusThunk.js
┃ ┃ ┣ 📜fetchGisStationsMeasurementsThunk.js
┃ ┃ ┣ 📜fetchGisStationsStaticDistrictThunk.js
┃ ┃ ┣ 📜fetchGisStationsStatusDistrictThunk.js
┃ ┃ ┣ 📜fetchGisSystemStaticThunk.js
┃ ┃ ┗ 📜fetchUserRightsThunk.js
┗ 📜store.js
services/ → API-Kommunikation, Mock-Logik
📦services
┣ 📂database
┃ ┣ 📜addPoiService.js
┃ ┣ 📜fetchDeviceNameByIdService.js
┃ ┣ 📜fetchGisLinesService.js
┃ ┣ 📜fetchLocationDevicesService.js
┃ ┣ 📜fetchPoiDataService.js
┃ ┣ 📜fetchPriorityConfigService.js
┃ ┗ 📜updateLocationInDatabaseService.js
┣ 📂utils
┃ ┗ 📜fetchWithTimeout.js
┗ 📂webservice
┃ ┣ 📜fetchGisLinesStatusService.js
┃ ┣ 📜fetchGisStationsMeasurementsService.js
┃ ┣ 📜fetchGisStationsStaticDistrictService.js
┃ ┣ 📜fetchGisStationsStatusDistrictService.js
┃ ┣ 📜fetchGisSystemStaticService.js
┃ ┗ 📜fetchUserRightsService.js
``` ```
--- ---

249
components/PoiUpdateModal.js
View File

@@ -1,249 +0,0 @@
// /components/PoiUpdateModal.js
import React, { useState, useEffect } from "react";
import { fetchLocationDevicesFromDB } from "../redux/slices/db/locationDevicesFromDBSlice";
import { useDispatch, useSelector } from "react-redux";
import { selectCurrentPoi } from "../redux/slices/currentPoiSlice";
const PoiUpdateModal = ({ onClose, poiData }) => {
const dispatch = useDispatch();
const devices = useSelector((state) => state.locationDevicesFromDB.devices);
const currentPoi = useSelector(selectCurrentPoi);
const selectedPoi = useSelector((state) => state.selectedPoi);
const [poiId, setPoiId] = useState(poiData ? poiData.idPoi : "");
const [name, setName] = useState(poiData ? poiData.name : "");
const [poiTypData, setPoiTypData] = useState([]);
const [poiTypeId, setPoiTypeId] = useState("");
const [locationDeviceData, setLocationDeviceData] = useState([]);
const [deviceName, setDeviceName] = useState("");
const [idLD, setIdLD] = useState(poiData ? poiData.idLD : "");
const [idLocationDevice, setIdLocationDevice] = useState("");
const [description, setDescription] = useState(poiData ? poiData.description : "");
useEffect(() => {
dispatch(fetchLocationDevicesFromDB());
}, [dispatch]);
// Log the initial POI data
useEffect(() => {
if (poiData) {
setPoiId(poiData.idPoi);
setName(poiData.name);
setPoiTypeId(poiData.idPoiTyp);
setIdLD(poiData.idLD);
setDescription(poiData.description);
setDeviceName(poiData.idLD);
console.log("Loaded POI Data for editing:", poiData);
console.log("POI ID:", poiData.idPoi);
console.log("POI Name:", poiData.name);
console.log("POI Typ ID:", poiData.idPoiTyp);
console.log("POI Beschreibung:", poiData.description);
console.log("POI Geräte-ID:", poiData.idLD);
}
}, [poiData]);
/* const fetchDeviceNameById = async (idLD) => {
try {
const response = await fetch(`/api/getDeviceNameById?idLD=${idLD}`);
const data = await response.json();
setDeviceName(data.deviceName);
} catch (error) {
console.error("Error fetching device name:", error);
}
}; */
/* const fetchDeviceNameById = async (idLD) => {
try {
const response = await fetch(`/api/talas_v5_DB/locationDevice/locationDeviceNameById?idLD=${idLD}`);
const data = await response.json();
setDeviceName(data.deviceName);
} catch (error) {
console.error("Error fetching device name:", error);
}
}; */
// Beim Öffnen des Modals die Geräte-ID basierend auf dem Gerätenamen abrufen, wenn vorhanden
useEffect(() => {
const fetchDeviceId = async () => {
if (poiData && poiData.idLD) {
try {
const response = await fetch(`/api/talas_v5_DB/locationDevice/getDeviceIdById?idLD=${poiData.idLD}`);
const data = await response.json();
if (data) setDeviceName(data.name);
} catch (error) {
console.error("Fehler beim Abrufen der Geräteinformation in PoiUpdateModel.js: ", error);
}
}
};
fetchDeviceId();
}, [poiData]);
// Function to handle deleting a POI
const handleDeletePoi = async () => {
if (confirm("Sind Sie sicher, dass Sie diesen POI löschen möchten?")) {
try {
const response = await fetch(`/api/talas_v5_DB/pois/deletePoi?id=${poiId}`, {
method: "DELETE",
});
if (response.ok) {
alert("POI wurde erfolgreich gelöscht.");
onClose(); // Close the modal
//Browser neu laden, um die aktualisierte Liste anzuzeigen
window.location.reload();
} else {
throw new Error("Fehler beim Löschen des POI.");
}
} catch (error) {
console.error("Fehler beim Löschen des POI 1:", error);
alert("Fehler beim Löschen des POI.");
}
}
};
// Fetch POI types
useEffect(() => {
const fetchPoiTypData = async () => {
try {
const response = await fetch("/api/talas_v5_DB/poiTyp/readPoiTyp");
const data = await response.json();
setPoiTypData(data);
if (selectedPoi && data) {
const matchingType = data.find((pt) => pt.name === selectedPoi.typ);
if (matchingType) {
setPoiTypeId(matchingType.idPoiTyp);
}
}
} catch (error) {
console.error("Fehler beim Abrufen der poiTyp Daten:", error);
}
};
fetchPoiTypData();
}, [selectedPoi]);
//--------------------------------------------------------------------------------------------
// Fetch device name basierend auf der Geräte-ID
useEffect(() => {
console.log("currentPoi von PoiUpdateModal.js : ", currentPoi.idLD);
const API_BASE_URL = `${window.location.origin}:3000`;
const response = await fetch(`${API_BASE_URL}/api/talas_v5_DB/locationDevice/locationDevices`);
.then((response) => response.json())
.then((data) => {
setLocationDeviceData(data);
console.log("Standort- und Gerätedaten 3:", data);
console.log("Standort- und Gerätedaten 3 poiData:", poiData);
// Findet das Gerät, das der aktuellen IDLD entspricht
const currentDevice = data.find((device) => device.idLD === currentPoi.idLD);
if (currentDevice) {
setDeviceName(currentDevice.name);
}
})
.catch((error) => {
console.error("Fehler beim Abrufen der Gerätedaten:", error);
setLocationDeviceData([]);
});
}, [poiData?.idLD, currentPoi]);
//--------------------------------------------------------------------------------------------
// Angenommen, deviceName enthält die Geräte-ID
//const idLD = deviceName; // Stellen Sie sicher, dass dies eine ID ist und kein Name
const handleSubmit = async (event) => {
event.preventDefault();
const idLDResponse = await fetch(`/api/talas_v5_DB/locationDevice/getDeviceId?deviceName=${encodeURIComponent(deviceName)}`);
const idLDData = await idLDResponse.json();
const idLD = idLDData.idLD;
try {
const response = await fetch("/api/talas_v5_DB/pois/updatePoi", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
idPoi: poiId,
name: name,
description: description,
idPoiTyp: poiTypeId,
idLD: idLD,
//idLD: parseInt(deviceName, 10), // Konvertieren in eine Ganzzahl
}),
});
if (response.ok) {
onClose();
window.location.reload();
} else {
const errorResponse = await response.json();
throw new Error(errorResponse.error || "Fehler beim Aktualisieren des POI.");
}
} catch (error) {
console.error("Fehler beim Aktualisieren des POI:", error);
alert("Fehler beim Aktualisieren des POI.");
}
};
//ausgewählte poi Informationen in Console anzeigen
console.log("Selected POI:", selectedPoi);
console.log("Selected POI Gerät id in poiUpdateModal.js:", selectedPoi.id);
console.log("Selected POI Typ name in poiUpdateModal.js:", selectedPoi.typ); //als Typ in dropdown menu
console.log("Selected POI Beschreibung in poiUpdateModal.js:", selectedPoi.description);
console.log("Selected POI Gerät deviceId in poiUpdateModal.js:", selectedPoi.deviceId);
return (
<form onSubmit={handleSubmit} className="m-0 p-2 w-full">
<div className="flex items-center mb-4">
<label htmlFor="description" className="block mr-2 flex-none">
Beschreibung:
</label>
<input type="text" id="description" name="description" value={description} onChange={(e) => setDescription(e.target.value)} placeholder="Beschreibung der Station" 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="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) => (
console.log("device.id und name:", device),
(
<option key={index} value={device.id}>
{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.map((poiTyp, index) => (
<option key={index} value={poiTyp.idPoiTyp}>
{poiTyp.name}
</option>
))}
</select>
</div>
<button type="button" onClick={handleDeletePoi} className="bg-red-400 hover:bg-red-600 text-white font-bold py-2 px-4 rounded w-full mb-4">
POI löschen
</button>
<button type="submit" className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded w-full">
POI aktualisieren
</button>
</form>
);
};
export default PoiUpdateModal;

0
components/CoordinatePopup.js → components/contextmenu/CoordinatePopup.js
View File

2
components/useMapContextMenu.js → components/contextmenu/useMapContextMenu.js
View File

@@ -1,6 +1,6 @@
// components/useMapContextMenu.js // components/useMapContextMenu.js
import { toast } from "react-toastify"; import { toast } from "react-toastify";
import { zoomIn, zoomOut, centerHere } from "../utils/zoomAndCenterUtils"; import { zoomIn, zoomOut, centerHere } from "../../utils/zoomAndCenterUtils";
// components/useMapContextMenu.js // components/useMapContextMenu.js
const addItemsToMapContextMenu = ( const addItemsToMapContextMenu = (

1
components/PlusRoundIcon.js → components/icons/devices/overlapping/PlusRoundIcon.js
View File

@@ -1,3 +1,4 @@
// /components/PlusRoundIcon.js
const plusRoundIcon = L.icon({ const plusRoundIcon = L.icon({
//iconUrl: "/img/plus_round.png", // Update with your actual path //iconUrl: "/img/plus_round.png", // Update with your actual path
iconUrl: "/img/plus_round.png", // Update with your actual path iconUrl: "/img/plus_round.png", // Update with your actual path

45
components/mainComponent/MapComponent.js
View File

@@ -7,17 +7,17 @@ import "leaflet-contextmenu";
import "leaflet.smooth_marker_bouncing"; import "leaflet.smooth_marker_bouncing";
import OverlappingMarkerSpiderfier from "overlapping-marker-spiderfier-leaflet"; //sieht deaktiviert aber ist das nicht so und wird benötigt 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 "react-toastify/dist/ReactToastify.css";
import MapLayersControlPanel from "../uiWidgets/MapLayersControlPanel.js"; import MapLayersControlPanel from "../uiWidgets/mapLayersControlPanel/MapLayersControlPanel.js";
import { InformationCircleIcon } from "@heroicons/react/20/solid"; import { InformationCircleIcon } from "@heroicons/react/20/solid";
import PoiUpdateModal from "../pois/PoiUpdateModal.js"; import PoiUpdateModal from "../pois/PoiUpdateModal.js";
import { ToastContainer, toast } from "react-toastify"; import { ToastContainer, toast } from "react-toastify";
import plusRoundIcon from "../PlusRoundIcon.js"; import plusRoundIcon from "../icons/devices/overlapping/PlusRoundIcon.js";
import { createAndSetDevices } from "../../utils/devices/createAndSetDevices.js"; import { createAndSetDevices } from "../../utils/devices/createAndSetDevices.js";
import { restoreMapSettings, checkOverlappingMarkers } from "../../utils/mapUtils.js"; import { restoreMapSettings, checkOverlappingMarkers } from "../../utils/mapUtils.js";
import { APP_VERSION } from "../../config/appVersion.js"; import { APP_VERSION } from "../../config/appVersion.js";
import * as layers from "../../config/layers.js"; import * as layers from "../../config/layers.js";
import addItemsToMapContextMenu from "../useMapContextMenu.js"; import addItemsToMapContextMenu from "../contextmenu/useMapContextMenu.js";
import useGmaMarkersLayer from "../../hooks/layers/useGmaMarkersLayer.js"; import useGmaMarkersLayer from "../../hooks/layers/useGmaMarkersLayer.js";
import useSmsfunkmodemMarkersLayer from "../../hooks/layers/useSmsfunkmodemMarkersLayer.js"; import useSmsfunkmodemMarkersLayer from "../../hooks/layers/useSmsfunkmodemMarkersLayer.js";
import useBereicheMarkersLayer from "../../hooks/layers/useBereicheMarkersLayer.js"; import useBereicheMarkersLayer from "../../hooks/layers/useBereicheMarkersLayer.js";
@@ -32,9 +32,9 @@ import { selectMapLayersState } from "../../redux/slices/mapLayersSlice";
import { useSelector, useDispatch } from "react-redux"; import { useSelector, useDispatch } from "react-redux";
import { setCurrentPoi } from "../../redux/slices/currentPoiSlice.js"; import { setCurrentPoi } from "../../redux/slices/currentPoiSlice.js";
import CoordinateInput from "../uiWidgets/CoordinateInput.js"; import CoordinateInput from "../uiWidgets/CoordinateInput.js";
import CoordinatePopup from "../CoordinatePopup.js"; import CoordinatePopup from "../contextmenu/CoordinatePopup.js";
//------------------------Daten aus API-------------------- //------------------------Daten aus API--------------------
import { fetchPoiDataService } from "../../services/database/fetchPoiDataService.js"; import { fetchPoiDataService } from "../../services/database/fetchPoiDataByIdService.js";
import { selectPolylineVisible, setPolylineVisible } from "../../redux/slices/polylineLayerVisibleSlice.js"; import { selectPolylineVisible, setPolylineVisible } from "../../redux/slices/polylineLayerVisibleSlice.js";
import { selectGisStationsStaticDistrict } from "../../redux/slices/webservice/gisStationsStaticDistrictSlice.js"; import { selectGisStationsStaticDistrict } from "../../redux/slices/webservice/gisStationsStaticDistrictSlice.js";
import { selectGisSystemStatic, setGisSystemStatic } from "../../redux/slices/webservice/gisSystemStaticSlice.js"; import { selectGisSystemStatic, setGisSystemStatic } from "../../redux/slices/webservice/gisSystemStaticSlice.js";
@@ -44,7 +44,6 @@ import { updateCountdown, closePolylineContextMenu } from "../../redux/slices/po
//-------------------MapComponent.js hooks-------------------- //-------------------MapComponent.js hooks--------------------
import useInitializeMap from "./hooks/useInitializeMap"; import useInitializeMap from "./hooks/useInitializeMap";
import useFetchPoiData from "./hooks/useFetchPoiData.js";
import useRestoreMapSettings from "./hooks/useRestoreMapSettings"; import useRestoreMapSettings from "./hooks/useRestoreMapSettings";
import { setSelectedPoi } from "../../redux/slices/selectedPoiSlice"; import { setSelectedPoi } from "../../redux/slices/selectedPoiSlice";
import { setDisabled } from "../../redux/slices/polylineEventsDisabledSlice"; import { setDisabled } from "../../redux/slices/polylineEventsDisabledSlice";
@@ -66,6 +65,11 @@ import { selectGisLinesStatus } from "../../redux/slices/webservice/gisLinesStat
import { selectGisLinesStatusFromWebservice } from "../../redux/slices/webservice/gisLinesStatusSlice"; import { selectGisLinesStatusFromWebservice } from "../../redux/slices/webservice/gisLinesStatusSlice";
import { selectGisUserRightsFromWebservice } from "../../redux/slices/webservice/userRightsSlice"; import { selectGisUserRightsFromWebservice } from "../../redux/slices/webservice/userRightsSlice";
import { fetchPoiIconsDataThunk } from "../../redux/thunks/database/fetchPoiIconsDataThunk";
import { fetchPoiTypThunk } from "../../redux/thunks/database/fetchPoiTypThunk";
import { selectPoiIconsData, selectPoiIconsStatus } from "../../redux/slices/database/poiIconsDataSlice";
import { selectPoiTypData, selectPoiTypStatus } from "../../redux/slices/database/poiTypSlice";
const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
//------------------------------- //-------------------------------
const dispatch = useDispatch(); const dispatch = useDispatch();
@@ -73,7 +77,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
const countdownActive = useSelector((state) => state.polylineContextMenu.countdownActive); const countdownActive = useSelector((state) => state.polylineContextMenu.countdownActive);
const isPolylineContextMenuOpen = useSelector((state) => state.polylineContextMenu.isOpen); const isPolylineContextMenuOpen = useSelector((state) => state.polylineContextMenu.isOpen);
const polylineVisible = useSelector(selectPolylineVisible); const polylineVisible = useSelector(selectPolylineVisible);
const poiTypStatus = useSelector((state) => state.poiTypes.status);
const isPoiTypLoaded = useSelector((state) => state.poiTypes.status === "succeeded"); const isPoiTypLoaded = useSelector((state) => state.poiTypes.status === "succeeded");
const statusMeasurements = useSelector((state) => state.gisStationsMeasurements.status); const statusMeasurements = useSelector((state) => state.gisStationsMeasurements.status);
const statusSystem = useSelector((state) => state.gisSystemStatic.status); const statusSystem = useSelector((state) => state.gisSystemStatic.status);
@@ -94,6 +98,13 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
const { data: gisLinesStatusData, status: statusGisLinesStatus } = useSelector(selectGisLinesStatusFromWebservice); const { data: gisLinesStatusData, status: statusGisLinesStatus } = useSelector(selectGisLinesStatusFromWebservice);
const poiIconsData = useSelector(selectPoiIconsData);
const poiIconsStatus = useSelector(selectPoiIconsStatus);
const poiTypData = useSelector(selectPoiTypData);
const poiTypStatus = useSelector((state) => state.poiTypes.status);
//const poiTypStatus = useSelector(selectPoiTypStatus);
/* useEffect(() => { /* useEffect(() => {
console.log("✅ Redux: gisLinesStatusData:", gisLinesStatusData); console.log("✅ Redux: gisLinesStatusData:", gisLinesStatusData);
}, [gisLinesStatusData]); }, [gisLinesStatusData]);
@@ -233,7 +244,11 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
//-------------------------------------------- //--------------------------------------------
const [poiData, setPoiData] = useState([]); const [poiData, setPoiData] = useState([]);
// POIs Popup Informationen anzeigen // POIs Popup Informationen anzeigen
useFetchPoiData(setPoiTypMap, setPoiData);
useEffect(() => {
dispatch(fetchPoiIconsDataThunk());
dispatch(fetchPoiTypThunk());
}, [dispatch]);
//-------------------------------------------- //--------------------------------------------
// POIs auf die Karte zeichnen // POIs auf die Karte zeichnen
@@ -857,6 +872,20 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
window.onerror = null; // **Fehlerbehandlung entfernen, wenn Komponente unmounted wird** window.onerror = null; // **Fehlerbehandlung entfernen, wenn Komponente unmounted wird**
}; };
}, []); }, []);
//------------------------------------------------
useEffect(() => {
if (poiTypStatus === "succeeded" && Array.isArray(poiTypData)) {
const map = new Map();
poiTypData.forEach((item) => map.set(item.idPoiTyp, item.name));
setPoiTypMap(map);
}
}, [poiTypData, poiTypStatus]);
//------------------------------------------------
useEffect(() => {
if (poiIconsStatus === "succeeded") {
setPoiData(poiIconsData);
}
}, [poiIconsData, poiIconsStatus]);
//--------------------------------------------- //---------------------------------------------
//-------------------------------------------- //--------------------------------------------

51
components/mainComponent/hooks/useFetchPoiData.js
View File

@@ -1,51 +0,0 @@
// /components/mainComponent/hooks/useFetchPoiData.js
import { useEffect, useState } from "react";
const API_BASE_URL = typeof window !== "undefined" ? `${window.location.protocol}//${window.location.hostname}:3000` : "";
const useFetchPoiData = (setPoiTypMap, setPoiData) => {
useEffect(() => {
//console.log(`🌍 API_BASE_URL aus .env.local: ${API_BASE_URL}`);
//console.log("✅ useFetchPoiData wurde gestartet...");
// console.log(`🌍 API_BASE_URL: ${API_BASE_URL}`); // Debugging: Prüfen, ob die Umgebungsvariable korrekt geladen wird
const fetchPoiTypData = async () => {
try {
console.log("📡 Lade POI-Typ-Daten...");
const response = await fetch(`${API_BASE_URL}/api/talas_v5_DB/poiTyp/readPoiTyp`);
const data = await response.json();
if (!Array.isArray(data)) {
console.warn(`⚠️ Unerwartetes Format: ${JSON.stringify(data)}`);
throw new Error("Daten sind kein Array");
}
const map = new Map();
data.forEach((item) => map.set(item.idPoiTyp, item.name));
setPoiTypMap(map);
//console.log("✅ POI-Typ-Daten erfolgreich geladen!");
} catch (error) {
console.error("❌ Fehler beim Abrufen der POI-Typ-Daten:", error);
}
};
const fetchPoiData = async () => {
try {
//console.log("📡 Lade POI-Icons...");
const response = await fetch(`${API_BASE_URL}/api/talas_v5_DB/pois/poi-icons`);
if (!response.ok) {
throw new Error(`Netzwerkantwort war nicht ok, Status: ${response.status}`);
}
const data = await response.json();
setPoiData(data);
//console.log("✅ POI-Icons erfolgreich geladen!", data);
} catch (error) {
console.error("❌ Fehler beim Abrufen der POI-Daten:", error);
}
};
fetchPoiTypData();
fetchPoiData();
}, [setPoiTypMap, setPoiData]);
};
export default useFetchPoiData;

0
components/EditModeToggle.js → components/uiWidgets/mapLayersControlPanel/EditModeToggle.js
View File

16
components/uiWidgets/MapLayersControlPanel.js → components/uiWidgets/mapLayersControlPanel/MapLayersControlPanel.js
View File

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

2
config/appVersion.js
View File

@@ -1,2 +1,2 @@
// /config/appVersion // /config/appVersion
export const APP_VERSION = "1.1.153"; export const APP_VERSION = "1.1.154";

33
redux/slices/database/poiIconsDataSlice.js Normal file
View File

@@ -0,0 +1,33 @@
// /redux/slices/database/poiIconsDataSlice.js
import { createSlice } from "@reduxjs/toolkit";
import { fetchPoiIconsDataThunk } from "../../thunks/database/fetchPoiIconsDataThunk";
const initialState = {
data: [],
status: "idle",
error: null,
};
const poiIconsDataSlice = createSlice({
name: "poiIconsData",
initialState,
reducers: {},
extraReducers: (builder) => {
builder
.addCase(fetchPoiIconsDataThunk.pending, (state) => {
state.status = "loading";
})
.addCase(fetchPoiIconsDataThunk.fulfilled, (state, action) => {
state.status = "succeeded";
state.data = action.payload;
})
.addCase(fetchPoiIconsDataThunk.rejected, (state, action) => {
state.status = "failed";
state.error = action.payload;
});
},
});
export default poiIconsDataSlice.reducer;
export const selectPoiIconsData = (state) => state.poiIconsData.data;
export const selectPoiIconsStatus = (state) => state.poiIconsData.status;

33
redux/slices/database/poiTypSlice.js Normal file
View File

@@ -0,0 +1,33 @@
// /redux/slices/database/poiTypSlice.js
import { createSlice } from "@reduxjs/toolkit";
import { fetchPoiTypThunk } from "../../thunks/database/fetchPoiTypThunk";
const initialState = {
data: [],
status: "idle",
error: null,
};
const poiTypSlice = createSlice({
name: "poiTyp",
initialState,
reducers: {},
extraReducers: (builder) => {
builder
.addCase(fetchPoiTypThunk.pending, (state) => {
state.status = "loading";
})
.addCase(fetchPoiTypThunk.fulfilled, (state, action) => {
state.status = "succeeded";
state.data = action.payload;
})
.addCase(fetchPoiTypThunk.rejected, (state, action) => {
state.status = "failed";
state.error = action.payload;
});
},
});
export default poiTypSlice.reducer;
export const selectPoiTypData = (state) => state.poiTyp.data;
export const selectPoiTypStatus = (state) => state.poiTyp.status;

4
redux/store.js
View File

@@ -20,6 +20,8 @@ import priorityConfigReducer from "./slices/database/priorityConfigSlice";
import poiTypesReducer from "./slices/database/poiTypesSlice"; import poiTypesReducer from "./slices/database/poiTypesSlice";
import locationDevicesFromDBReducer from "./slices/database/locationDevicesFromDBSlice"; import locationDevicesFromDBReducer from "./slices/database/locationDevicesFromDBSlice";
import gisLinesFromDatabaseReducer from "./slices/database/gisLinesSlice"; import gisLinesFromDatabaseReducer from "./slices/database/gisLinesSlice";
import poiTypReducer from "./slices/database/poiTypSlice";
import poiIconsDataReducer from "./slices/database/poiIconsDataSlice";
//----webservice------------ //----webservice------------
import gisStationsStaticDistrictReducer from "./slices/webservice/gisStationsStaticDistrictSlice"; import gisStationsStaticDistrictReducer from "./slices/webservice/gisStationsStaticDistrictSlice";
import gisStationsStatusDistrictReducer from "./slices/webservice/gisStationsStatusDistrictSlice"; import gisStationsStatusDistrictReducer from "./slices/webservice/gisStationsStatusDistrictSlice";
@@ -57,5 +59,7 @@ export const store = configureStore({
urlParameter: urlParameterReducer, urlParameter: urlParameterReducer,
priorityConfig: priorityConfigReducer, priorityConfig: priorityConfigReducer,
addPoi: addPoiReducer, addPoi: addPoiReducer,
poiTyp: poiTypReducer,
poiIconsData: poiIconsDataReducer,
}, },
}); });

11
redux/thunks/database/fetchPoiIconsDataThunk.js Normal file
View File

@@ -0,0 +1,11 @@
// /redux/thunks/database/fetchPoiIconsDataThunk.js
import { createAsyncThunk } from "@reduxjs/toolkit";
import { fetchPoiIconsDataService } from "../../../services/database/fetchPoiIconsDataService";
export const fetchPoiIconsDataThunk = createAsyncThunk("poiIconsData/fetch", async (_, thunkAPI) => {
try {
return await fetchPoiIconsDataService();
} catch (err) {
return thunkAPI.rejectWithValue(err.message);
}
});

11
redux/thunks/database/fetchPoiTypThunk.js Normal file
View File

@@ -0,0 +1,11 @@
// /redux/thunks/database/fetchPoiTypThunk.js
import { createAsyncThunk } from "@reduxjs/toolkit";
import { fetchPoiTypService } from "../../../services/database/fetchPoiTypService";
export const fetchPoiTypThunk = createAsyncThunk("poiTyp/fetch", async (_, thunkAPI) => {
try {
return await fetchPoiTypService();
} catch (err) {
return thunkAPI.rejectWithValue(err.message);
}
});

18
services/database/fetchPoiDataByIdService.js Normal file
View File

@@ -0,0 +1,18 @@
// /services/database/fetchPoiDataService.js
export const fetchPoiDataService = async (idPoi) => {
try {
const response = await fetch(`/api/talas_v5_DB/pois/getPoiById?idPoi=${idPoi}`);
if (!response.ok) throw new Error("Fehler beim Abrufen der POI-Daten");
const data = await response.json();
return {
idPoi,
name: data.name,
description: data.description,
idLD: data.idLD,
};
} catch (error) {
console.error("Fehler beim Abrufen der POI-Daten", error);
return null;
}
};

22
services/database/fetchPoiDataService.js
View File

@@ -1,18 +1,6 @@
// /services/database/fetchPoiDataService.js // fetchPoiDataService.js
export const fetchPoiDataService = async () => {
export const fetchPoiDataService = async (idPoi) => { const res = await fetch(`${window.location.origin}/api/talas_v5_DB/pois/poi-icons`);
try { if (!res.ok) throw new Error("Fehler beim Abrufen der POI-Daten");
const response = await fetch(`/api/talas_v5_DB/pois/getPoiById?idPoi=${idPoi}`); return await res.json();
if (!response.ok) throw new Error("Fehler beim Abrufen der POI-Daten");
const data = await response.json();
return {
idPoi,
name: data.name,
description: data.description,
idLD: data.idLD,
};
} catch (error) {
console.error("Fehler beim Abrufen der POI-Daten", error);
return null;
}
}; };

6
services/database/fetchPoiIconsDataService.js Normal file
View File

@@ -0,0 +1,6 @@
// /services/database/fetchPoiIconsDataService.js
export const fetchPoiIconsDataService = async () => {
const res = await fetch(`${window.location.origin}/api/talas_v5_DB/pois/poi-icons`);
if (!res.ok) throw new Error("Fehler beim Abrufen der POI-Icon-Daten");
return await res.json();
};

6
services/database/fetchPoiTypService.js Normal file
View File

@@ -0,0 +1,6 @@
// /services/database/fetchPoiTypService.js
export const fetchPoiTypService = async () => {
const res = await fetch(`${window.location.origin}/api/talas_v5_DB/poiTyp/readPoiTyp`);
if (!res.ok) throw new Error("Fehler beim Abrufen der POI-Typen");
return await res.json();
};