diff --git a/components/DataSheet.js b/components/DataSheet.js index baa9cf9cf..a7ce0cf92 100644 --- a/components/DataSheet.js +++ b/components/DataSheet.js @@ -1,4 +1,3 @@ -// components/DataSheet.js import React, { useEffect, useState } from "react"; import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil"; import { gisStationsStaticDistrictState } from "../store/atoms/gisStationState"; @@ -7,6 +6,7 @@ import { mapLayersState } from "../store/atoms/mapLayersState"; import { selectedAreaState } from "../store/atoms/selectedAreaState"; import { zoomTriggerState } from "../store/atoms/zoomTriggerState"; import { poiLayerVisibleState } from "../store/atoms/poiLayerVisibleState"; +import EditModeToggle from "./EditModeToggle"; function DataSheet() { const [poiVisible, setPoiVisible] = useRecoilState(poiLayerVisibleState); @@ -25,10 +25,7 @@ function DataSheet() { }; useEffect(() => { - console.log("GisStationsStaticDistrict:", GisStationsStaticDistrict); - console.log("GisSystemStatic:", GisSystemStatic); const allowedSystems = new Set(GisSystemStatic.filter((system) => system.Allow === 1).map((system) => system.IdSystem)); - console.log("allowedSystems:", allowedSystems); const seenNames = new Set(); const filteredAreas = GisStationsStaticDistrict.filter((item) => { @@ -45,7 +42,6 @@ function DataSheet() { name: area.Area_Name, })) ); - //console.log("filteredAreas:", filteredAreas); const seenSystemNames = new Set(); const filteredSystems = GisSystemStatic.filter((item) => { @@ -64,9 +60,6 @@ function DataSheet() { })) ); }, [GisStationsStaticDistrict, GisSystemStatic]); - //}, []); - //----------------------------------------- - //----------------------------------------- const handleCheckboxChange = (name, event) => { const { checked } = event.target; @@ -78,7 +71,6 @@ function DataSheet() { }; return newState; }); - console.log("mapLayersVisibility:", mapLayersVisibility); }; const handleIconClick = () => { @@ -90,12 +82,7 @@ function DataSheet() {
- {stationListing.map((station) => (
+
{systemListing.map((system) => ( @@ -128,6 +116,8 @@ function DataSheet() { POIs
+ +
); diff --git a/components/EditModeToggle.js b/components/EditModeToggle.js new file mode 100644 index 000000000..13c6860fd --- /dev/null +++ b/components/EditModeToggle.js @@ -0,0 +1,26 @@ +import React, { useState, useEffect } from "react"; + +function EditModeToggle() { + const [editMode, setEditMode] = useState(() => localStorage.getItem("editMode") === "true"); + + const toggleEditMode = () => { + const newEditMode = !editMode; + setEditMode(newEditMode); + localStorage.setItem("editMode", newEditMode); + //Browser neu laden, um die Änderungen anzuwenden + window.location.reload(); + }; + + useEffect(() => { + const storedMode = localStorage.getItem("editMode") === "true"; + setEditMode(storedMode); + }, []); + + return ( + + ); +} + +export default EditModeToggle; diff --git a/components/MapComponent.js b/components/MapComponent.js index 2f71d5c81..1989fc706 100644 --- a/components/MapComponent.js +++ b/components/MapComponent.js @@ -226,7 +226,8 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { const rights = await fetchUserRights(); setUserRights(rights); setIsRightsLoaded(true); - setHasRights(rights && rights.includes(56)); // Prüfen, ob Benutzer die Rechte hat + + setHasRights(localStorage.getItem("editMode") && rights.includes(56)); // Prüfen, ob Benutzer die Rechte hat }; fetchAndSetUserRights(); @@ -235,8 +236,14 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { useGmaMarkersLayer(map, gmaMarkers, GisStationsMeasurements, layers.MAP_LAYERS.GMA, oms); // Verwende den ausgelagerten Hook useEffect(() => { - const fetchAllData = async () => { + const fetchWebServiceMap = async () => { try { + // Zähler für externe API-Aufrufe in localStorage speichern + let requestCount = localStorage.getItem("fetchWebServiceMap") || 0; + requestCount++; + localStorage.setItem("fetchWebServiceMap", requestCount); + console.log(`fetchWebServiceMap in MapComponent wurde ${requestCount} Mal aufgerufen.`); + // Fetch GIS Stations Static District await fetchGisStationsStaticDistrict(mapGisStationsStaticDistrictUrl, setGisStationsStaticDistrict); @@ -253,7 +260,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { } }; - fetchAllData(); + fetchWebServiceMap(); }, []); //-------------------------------------------------------- useEffect(() => { diff --git a/components/imports.js b/components/imports.js deleted file mode 100644 index a81e36edb..000000000 --- a/components/imports.js +++ /dev/null @@ -1,162 +0,0 @@ -// imports.js -import React, { useEffect, useRef, useState, useCallback } from "react"; -import L, { marker } from "leaflet"; -import "leaflet/dist/leaflet.css"; -import "leaflet-contextmenu/dist/leaflet.contextmenu.css"; -import "leaflet-contextmenu"; -import * as config from "../config/config.js"; -import * as urls from "../config/urls.js"; -import "leaflet.smooth_marker_bouncing"; -import OverlappingMarkerSpiderfier from "overlapping-marker-spiderfier-leaflet"; -import DataSheet from "./DataSheet.js"; -import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil"; -import { gisStationsStaticDistrictState } from "../store/atoms/gisStationState.js"; -import { gisSystemStaticState } from "../store/atoms/gisSystemState.js"; -import { mapLayersState } from "../store/atoms/mapLayersState.js"; -import { selectedAreaState } from "../store/atoms/selectedAreaState.js"; -import { zoomTriggerState } from "../store/atoms/zoomTriggerState.js"; -import { poiTypState } from "../store/atoms/poiTypState.js"; -import AddPoiModalWindow from "./pois/AddPoiModalWindow.js"; -import { poiReadFromDbTriggerAtom } from "../store/atoms/poiReadFromDbTriggerAtom.js"; -import { InformationCircleIcon } from "@heroicons/react/20/solid"; // oder 'outline' -import PoiUpdateModal from "./pois/PoiUpdateModal.js"; -import { selectedPoiState } from "../store/atoms/poiState.js"; -import { currentPoiState } from "../store/atoms/currentPoiState.js"; -import { ToastContainer, toast } from "react-toastify"; -import "react-toastify/dist/ReactToastify.css"; -import { mapIdState, userIdState } from "../store/atoms/urlParameterState.js"; -import { poiLayerVisibleState } from "../store/atoms/poiLayerVisibleState.js"; -import plusRoundIcon from "./PlusRoundIcon.js"; -import { parsePoint, findClosestPoints } from "../utils/geometryUtils.js"; -import { insertNewPOI, removePOI, handleEditPoi } from "../utils/poiUtils.js"; -import { createAndSetDevices } from "../utils/createAndSetDevices.js"; -import { redrawPolyline, restoreMapSettings, checkOverlappingMarkers } from "../utils/mapUtils.js"; -import circleIcon from "./gisPolylines/icons/CircleIcon.js"; -import startIcon from "./gisPolylines/icons/StartIcon.js"; -import endIcon from "./gisPolylines/icons/EndIcon.js"; -import { fetchGisStatusStations, fetchPriorityConfig, fetchPoiData, updateLocationInDatabase, fetchUserRights, fetchDeviceNameById } from "../services/apiService.js"; -import { addContextMenuToMarker } from "../utils/addContextMenuToMarker.js"; -import { MAP_VERSION } from "../config/settings.js"; -import * as layers from "../config/layers.js"; -import { zoomIn, zoomOut, centerHere } from "../utils/zoomAndCenterUtils.js"; -import { initializeMap } from "../utils/initializeMap.js"; -import { addItemsToMapContextMenu } from "./useMapContextMenu.js"; -import useGmaMarkersLayer from "../hooks/layers/useGmaMarkersLayer.js"; // Import the custom hook -import useTalasMarkersLayer from "../hooks/layers/useTalasMarkersLayer.js"; // Import the custom hook -import useEciMarkersLayer from "../hooks/layers/useEciMarkersLayer.js"; -import useGsmModemMarkersLayer from "../hooks/layers/useGsmModemMarkersLayer.js"; -import useCiscoRouterMarkersLayer from "../hooks/layers/useCiscoRouterMarkersLayer.js"; -import useWagoMarkersLayer from "../hooks/layers/useWagoMarkersLayer.js"; -import useSiemensMarkersLayer from "../hooks/layers/useSiemensMarkersLayer.js"; -import useOtdrMarkersLayer from "../hooks/layers/useOtdrMarkersLayer.js"; -import useWdmMarkersLayer from "../hooks/layers/useWdmMarkersLayer.js"; -import useMessstellenMarkersLayer from "../hooks/layers/useMessstellenMarkersLayer.js"; -import useTalasiclMarkersLayer from "../hooks/layers/useTalasiclMarkersLayer.js"; -import useDauzMarkersLayer from "../hooks/layers/useDauzMarkersLayer.js"; -import useSmsfunkmodemMarkersLayer from "../hooks/layers/useSmsfunkmodemMarkersLayer.js"; -import useUlafMarkersLayer from "../hooks/layers/useUlafMarkersLayer.js"; -import useSonstigeMarkersLayer from "../hooks/layers/useSonstigeMarkersLayer.js"; -import handlePoiSelect from "../utils/handlePoiSelect.js"; -import { fetchGisStationsStaticDistrict, fetchGisStationsStatusDistrict, fetchGisStationsMeasurements, fetchGisSystemStatic } from "../services/fetchData.js"; -import { setupPolylines } from "../utils/setupPolylines.js"; -import { setupPOIs } from "../utils/setupPOIs.js"; -import VersionInfoModal from "./VersionInfoModal.js"; -//-------------------------------------------- -import PoiUpdateModalWrapper from "./pois/PoiUpdateModalWrapper"; -import AddPoiModalWindowWrapper from "./pois/AddPoiModalWindowWrapper"; -import useFetchPoiData from "../hooks/useFetchPoiData"; -import usePoiTypData from "../hooks/usePoiTypData"; -import useMarkerLayers from "../hooks/useMarkerLayers"; -import useLayerVisibility from "../hooks/useLayerVisibility"; -import useLineData from "../hooks/useLineData.js"; - -export { - React, - useEffect, - useRef, - useState, - useCallback, - L, - marker, - config, - urls, - OverlappingMarkerSpiderfier, - DataSheet, - useRecoilState, - useRecoilValue, - useSetRecoilState, - gisStationsStaticDistrictState, - gisSystemStaticState, - mapLayersState, - selectedAreaState, - zoomTriggerState, - poiTypState, - AddPoiModalWindow, - poiReadFromDbTriggerAtom, - InformationCircleIcon, - PoiUpdateModal, - selectedPoiState, - currentPoiState, - ToastContainer, - toast, - mapIdState, - userIdState, - poiLayerVisibleState, - plusRoundIcon, - parsePoint, - findClosestPoints, - insertNewPOI, - removePOI, - createAndSetDevices, - handleEditPoi, - redrawPolyline, - restoreMapSettings, - checkOverlappingMarkers, - circleIcon, - startIcon, - endIcon, - fetchGisStatusStations, - fetchPriorityConfig, - fetchPoiData, - updateLocationInDatabase, - fetchUserRights, - fetchDeviceNameById, - addContextMenuToMarker, - MAP_VERSION, - layers, - zoomIn, - zoomOut, - centerHere, - initializeMap, - addItemsToMapContextMenu, - useGmaMarkersLayer, - useTalasMarkersLayer, - useEciMarkersLayer, - useGsmModemMarkersLayer, - useCiscoRouterMarkersLayer, - useWagoMarkersLayer, - useSiemensMarkersLayer, - useOtdrMarkersLayer, - useWdmMarkersLayer, - useMessstellenMarkersLayer, - useTalasiclMarkersLayer, - useDauzMarkersLayer, - useSmsfunkmodemMarkersLayer, - useUlafMarkersLayer, - useSonstigeMarkersLayer, - handlePoiSelect, - fetchGisStationsStaticDistrict, - fetchGisStationsStatusDistrict, - fetchGisStationsMeasurements, - fetchGisSystemStatic, - setupPolylines, - setupPOIs, - VersionInfoModal, - PoiUpdateModalWrapper, - AddPoiModalWindowWrapper, - useFetchPoiData, - usePoiTypData, - useMarkerLayers, - useLayerVisibility, - useLineData, -}; diff --git a/components/useMapContextMenu.js b/components/useMapContextMenu.js index 13fe8a6a9..5af55fdb1 100644 --- a/components/useMapContextMenu.js +++ b/components/useMapContextMenu.js @@ -19,6 +19,8 @@ const showCoordinates = (e) => { }; // Kontextmenü Callback für "POI hinzufügen" const addStationCallback = (event, hasRights, setShowPopup, setPopupCoordinates) => { + const editMode = localStorage.getItem("editMode") === "true"; + hasRights = editMode ? hasRights : undefined; if (hasRights) { setPopupCoordinates(event.latlng); setShowPopup(true); @@ -36,6 +38,10 @@ const addStationCallback = (event, hasRights, setShowPopup, setPopupCoordinates) }; export const addItemsToMapContextMenu = (map, menuItemAdded, setMenuItemAdded, hasRights, setShowPopup, setPopupCoordinates) => { + // Überprüfe den Bearbeitungsmodus in localStorage + const editMode = localStorage.getItem("editMode") === "true"; + hasRights = editMode ? hasRights : undefined; + if (!menuItemAdded && map && map.contextmenu) { map.contextmenu.addItem({ text: "Koordinaten anzeigen", diff --git a/pages/api/rights.js b/pages/api/rights.js deleted file mode 100644 index 507228147..000000000 --- a/pages/api/rights.js +++ /dev/null @@ -1,29 +0,0 @@ -// pages/api/rights.js - -export default function handler(req, res) { - const { idMap, idUser } = req.query; - - // Beispielhafte Rechte, die je nach idMap und idUser variieren können - const rights = { - '10': [ - { IdRight: 1, Name: "Zugriff auf Dashboard" }, - { IdRight: 56, Name: "Erweiterte Berechtigungen" } - ], - '2': [ - { IdRight: 2, Name: "Zugriff auf Einstellungen" } - ], - '1': [ - { IdRight: 10, Name: "Admin-Zugriff" }, - { IdRight: 11, Name: "Zugriff auf alle Daten" } - ] - }; - - // Prüfung, ob eine gültige idMap und idUser vorhanden sind - if (rights[idMap] && idUser === '484') { - // Rückgabe der spezifischen Rechte basierend auf der idMap und idUser - res.status(200).json({ Rights: rights[idMap] }); - } else { - // Rückgabe leerer Rechte für ungültige idMap oder andere Benutzer - res.status(200).json({ Rights: [] }); - } -} diff --git a/services/apiService.js b/services/apiService.js index a7370613c..67c771f28 100644 --- a/services/apiService.js +++ b/services/apiService.js @@ -4,6 +4,13 @@ import * as urls from "../config/urls"; export const fetchGisStatusStations = async (idMap, idUser) => { const SERVER_URL = process.env.NEXT_PUBLIC_SERVER_URL; + + // Zähler für API-Aufrufe in localStorage speichern + let requestCount = localStorage.getItem("gisStatusStationsCount") || 0; + requestCount++; + localStorage.setItem("gisStatusStationsCount", requestCount); + console.log(`fetchGisStatusStations wurde ${requestCount} Mal aufgerufen.`); + try { const response = await fetch(`${SERVER_URL}/talas5/ClientData/WebServiceMap.asmx/GisStationsStatusDistrict?idMap=${idMap}&idUser=${idUser}`); if (!response.ok) { @@ -13,7 +20,6 @@ export const fetchGisStatusStations = async (idMap, idUser) => { prüfen oder nodeMap Dienst neu starten`); } const data = await response.json(); - //console.log("GisStatusStations:", data); return data; } catch (error) { console.error("Fehler beim Abrufen der Daten:", error); @@ -100,15 +106,19 @@ export const fetchDeviceNameById = async (idLD) => { // ---------------------------------------------- // services/apiService.js export const fetchUserRights = async () => { + // Zähler für API-Aufrufe in localStorage speichern + let userRightsRequestCount = localStorage.getItem("userRightsRequestCount") || 0; + userRightsRequestCount++; + localStorage.setItem("userRightsRequestCount", userRightsRequestCount); + console.log(`fetchUserRights wurde ${userRightsRequestCount} Mal aufgerufen.`); + try { - // const response = await fetch(`${urls.SERVER_URL}/talas5/ClientData/WebserviceMap.asmx/GisSystemStatic?idMap=${config.idMap}&idUser=${config.idUser}`); const response = await fetch(`${process.env.NEXT_PUBLIC_SERVER_URL}/talas5/ClientData/WebserviceMap.asmx/GisSystemStatic?idMap=${config.idMap}&idUser=${config.idUser}`); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const data = await response.json(); - // console.log("Benutzerrechte in fetchRights:", data); // Überprüfen der Struktur der Antwort if (!data || !data.Rights || !Array.isArray(data.Rights)) { @@ -116,13 +126,8 @@ export const fetchUserRights = async () => { } const rightsArray = data.Rights; // Nehmen an, dass 'Rights' das Array von Rechten ist - //console.log("rightsArray in apiService:", rightsArray); - - // Speichert die IDs der Rechte in einem Array const userRightsIds = rightsArray.map((right) => right.IdRight); - // Wenn alles gut geht, logge die erfolgreichen Abschluss - // console.log("Benutzerrechte erfolgreich abgerufen:", userRightsIds); return userRightsIds; } catch (error) { console.error("Fehler beim Abrufen der Benutzerrechte", error); diff --git a/utils/createAndSetDevices.js b/utils/createAndSetDevices.js index e7e4236f3..268072ab9 100644 --- a/utils/createAndSetDevices.js +++ b/utils/createAndSetDevices.js @@ -21,6 +21,12 @@ const determinePriority = (iconPath, priorityConfig) => { // Funktion zum Erstellen und Setzen von Markern export const createAndSetDevices = async (systemId, setMarkersFunction, GisSystemStatic, priorityConfig) => { try { + // Zähler für externe API-Aufrufe in localStorage speichern + let requestCount = localStorage.getItem("gisStationsStaticRequestCount") || 0; + requestCount++; + localStorage.setItem("gisStationsStaticRequestCount", requestCount); + console.log(`config.mapGisStationsStaticDistrictUrl in createAndSetDevice wurde ${requestCount} Mal aufgerufen.`); + const response1 = await fetch(config.mapGisStationsStaticDistrictUrl); const jsonResponse = await response1.json(); const response2 = await fetch(config.mapGisStationsStatusDistrictUrl);