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

29
pages/api/rights.js
View File

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

21
services/apiService.js
View File

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

6
utils/createAndSetDevices.js
View File

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