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

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

Browse Source 
Der Bearbeitungsmodus ist noch nicht vollständig, und es fehlen
einige Funktionalitäten. Reduzierung der Datenbankanfragen noch in Arbeit.
This commit is contained in:
ISA
2024-09-06 10:41:47 +02:00
parent 98e8bdf96e
commit 6850fee16a
8 changed files with 66 additions and 217 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
components/DataSheet.js
View File

@@ -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
onChange={handleAreaChange}
id="stationListing"
className="border-solid-1 p-2 rounded ml-1 font-semibold"
role="combobox" // Ensure the correct role is set
>
<select onChange={handleAreaChange} id="stationListing" className="border-solid-1 p-2 rounded ml-1 font-semibold">
<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>
);

26
components/EditModeToggle.js Normal file
View File

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

13
components/MapComponent.js
View File

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

162
components/imports.js
View File

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

6
components/useMapContextMenu.js
View File

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