WIP: Add basic structure for edit mode to DataSheet.js

Der Bearbeitungsmodus ist noch nicht vollständig, und es fehlen
einige Funktionalitäten. Reduzierung der Datenbankanfragen noch in Arbeit.

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() {
     <div id="mainDataSheet" className="absolute top-3 right-3 w-1/6 min-w-[300px] z-10 bg-white p-2 rounded-lg shadow-lg">
       <div className="flex flex-col gap-4 p-4">
         <div className="flex items-center justify-between">
-          <select
+          <select onChange={handleAreaChange} id="stationListing" className="border-solid-1 p-2 rounded ml-1 font-semibold">
-            onChange={handleAreaChange}
-            id="stationListing"
-            className="border-solid-1 p-2 rounded ml-1 font-semibold"
-            role="combobox" // Ensure the correct role is set
-          >
             <option value="Station wählen">Station wählen</option>
             {stationListing.map((station) => (
               <option key={station.id} value={station.id}>
@@ -105,6 +92,7 @@ function DataSheet() {
           </select>
           <img src="/img/expand-icon.svg" alt="Expand" className="h-6 w-6 ml-2 cursor-pointer" onClick={handleIconClick} />
         </div>
+
         <div>
           {systemListing.map((system) => (
             <React.Fragment key={system.id}>
@@ -128,6 +116,8 @@ function DataSheet() {
             POIs
           </label>
         </div>
+
+        <EditModeToggle />
       </div>
     </div>
   );

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 (
+    <button onClick={toggleEditMode} className="bg-gray-200 p-2 rounded">
+      {editMode ? "Bearbeitungsmodus deaktivieren" : "Bearbeitungsmodus aktivieren"}
+    </button>
+  );
+}
+
+export default EditModeToggle;

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(() => {

components/imports.js

@@ -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,
-};

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",

pages/api/rights.js

@@ -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: [] });
-    }
-}

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);

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);