feat: Konstanten in separate Dateien aufteilen " /config/urls.js"

components/MapComponent.js

@@ -15,6 +15,7 @@ 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 dynamic from "next/dynamic";
 import "leaflet.smooth_marker_bouncing";
 import OverlappingMarkerSpiderfier from "overlapping-marker-spiderfier-leaflet";
@@ -137,31 +138,28 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
 
   const [showVersionInfoModal, setShowVersionInfoModal] = useState(false);
   const zoomTrigger = useRecoilValue(zoomTriggerState);
-  const offlineTileLayer = "/mapTiles/{z}/{x}/{y}.png";
+  const offlineTileLayer = urls.OFFLINE_TILE_LAYER;
-  //const onlineTileLayer = "/mapTiles/{z}/{x}/{y}.png";
+  const onlineTileLayer = urls.ONLINE_TILE_LAYER; //Talas_v5 Server
-  //const onlineTileLayer = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
+
-  const onlineTileLayer = "http://10.10.0.13:3000/mapTiles/{z}/{x}/{y}.png"; //Talas_v5 Server
-  //const onlineTileLayer = "http://192.168.10.14:3000/mapTiles/{z}/{x}/{y}.png"; //Talas_v5 Server
   // Create map layers
-  const TALAS = new L.layerGroup();
+  const TALAS = config.MAP_LAYERS.TALAS;
-  const ECI = new L.layerGroup();
+  const ECI = config.MAP_LAYERS.ECI;
-  const ULAF = new L.layerGroup();
+  const ULAF = config.MAP_LAYERS.ULAF;
-  const GSMModem = new L.layerGroup();
+  const GSMModem = config.MAP_LAYERS.GSMModem;
-  const CiscoRouter = new L.layerGroup();
+  const CiscoRouter = config.MAP_LAYERS.CiscoRouter;
-  const WAGO = new L.layerGroup();
+  const WAGO = config.MAP_LAYERS.WAGO;
-  const Siemens = new L.layerGroup();
+  const Siemens = config.MAP_LAYERS.Siemens;
-  const OTDR = new L.layerGroup();
+  const OTDR = config.MAP_LAYERS.OTDR;
-  const WDM = new L.layerGroup();
+  const WDM = config.MAP_LAYERS.WDM;
-  const GMA = new L.layerGroup();
+  const GMA = config.MAP_LAYERS.GMA;
-  const Sonstige = new L.layerGroup();
+  const Sonstige = config.MAP_LAYERS.Sonstige;
-  const TALASICL = new L.layerGroup();
+  const TALASICL = config.MAP_LAYERS.TALASICL;
-  const lineLayer = new L.LayerGroup();
+  const lineLayer = config.MAP_LAYERS.lineLayer;
 
   const [gisSystemStaticLoaded, setGisSystemStaticLoaded] = useState(false);
 
-  const baseUrl = "http://10.10.0.13/talas5/devices/"; // für Station öffnen in neuer tab und gleicher tab, im localhost gab es keine Probleme mit der Frame
+  const baseUrl = urls.BASE_URL; // für Station öffnen in neuer tab und gleicher tab, im localhost gab es keine Probleme mit der Frame
-  //const baseUrl = "http://localhost:3000/talas5/devices/";
+
-  //const baseUrl = "http://192.168.10.14/talas5/devices/";
   const [isPoiTypLoaded, setIsPoiTypLoaded] = useState(false);
   const [poiTypMap, setPoiTypMap] = useState(new Map());
   const [showPopup, setShowPopup] = useState(false);
@@ -550,18 +548,15 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   //-----------------------------------------------------------
   // Funktion um die Benutzerrechte zu überprüfen
   // serverIP 10.10.0.13 idMap=10 idUser=485
-  //const serverURL = "http://10.10.0.13";
 
   const url = new URL(window.location.href);
   const hostname = url.hostname; // Gibt den Hostnamen (IP oder Domain) zurück
   const port = url.port; // Gibt den Port zurück, leer wenn Standardport verwendet wird
   const protocol = url.protocol; // "http:" oder "https:"
-  //const serverURL = `${protocol}//${hostname}`;
+
-  const serverURL = "http://10.10.0.13"; // weil ich keine API habe, ansonsten serverURL ist localhost(IP-Adresse) für GisSystemStatic für die Benutzerrechte
+  const serverURL = urls.SERVER_URL; // weil ich keine API habe, ansonsten serverURL ist localhost(IP-Adresse) für GisSystemStatic für die Benutzerrechte
-  //const serverURL = "http://localhost:3000"; // weil ich keine API habe, ansonsten serverURL ist localhost(IP-Adresse) für GisSystemStatic für die Benutzerrechte
 
   const params = new URL(window.location.href).searchParams;
-  //const serverURL = `${protocol}//${hostname}${port ? `:${port}` : ""}`;
 
   const c = params.get("m"); // Beispielwert für idMap
   const user = params.get("u"); // Beispielwert für idUser

config/config.js

@@ -1,4 +1,34 @@
-// Definieren der grundlegenden Umgebungseinstellungen und Konfigurationen der Karte
+// /config/config.js
+// BASE_URL für Station öffnen in neuer tab und gleicher tab, im localhost gab es keine Probleme mit der Frame
+export const BASE_URL = "http://10.10.0.13/talas5/devices/";
+//const baseUrl = "http://localhost:3000/talas5/devices/";
+//const baseUrl = "http://192.168.10.14/talas5/devices/";
+//----
+//Talas_v5 Server
+//export const OFFLINE_TILE_LAYER = "/mapTiles/{z}/{x}/{y}.png"; // wenn im von localhost also selben Server die Karte angezeigt wird
+export const OFFLINE_TILE_LAYER = "/mapTiles/{z}/{x}/{y}.png";
+
+//const onlineTileLayer = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
+export const ONLINE_TILE_LAYER =
+  "http://10.10.0.13:3000/mapTiles/{z}/{x}/{y}.png"; //Talas_v5 Server
+
+// Create map layers
+export const MAP_LAYERS = {
+  TALAS: new L.layerGroup(),
+  ECI: new L.layerGroup(),
+  ULAF: new L.layerGroup(),
+  GSMModem: new L.layerGroup(),
+  CiscoRouter: new L.layerGroup(),
+  WAGO: new L.layerGroup(),
+  Siemens: new L.layerGroup(),
+  OTDR: new L.layerGroup(),
+  WDM: new L.layerGroup(),
+  GMA: new L.layerGroup(),
+  Sonstige: new L.layerGroup(),
+  TALASICL: new L.layerGroup(),
+  lineLayer: new L.LayerGroup(),
+};
+// Definieren der grundlegenden Umgebungseinstellungen und Konfigurationen der Karte
 const mapVersion = "0.5.3"; // Die Version der verwendeten Karte
 const standardSideMenu = true; // Einstellung, ob ein standardmäßiges Seitenmenü verwendet wird
 const fullSideMenu = false; // Einstellung, ob ein vollständiges Seitenmenü verwendet wird

config/urls.js

@@ -0,0 +1,22 @@
+// /sonstige/urls.js
+
+export const BASE_URL = "http://10.10.0.13/talas5/devices/";
+export const OFFLINE_TILE_LAYER = "/mapTiles/{z}/{x}/{y}.png";
+export const ONLINE_TILE_LAYER =
+  "http://10.10.0.13:3000/mapTiles/{z}/{x}/{y}.png";
+//-----------------------------------
+// weil ich keine API habe, ansonsten serverURL ist localhost(IP-Adresse) für GisSystemStatic für die Benutzerrechte
+//const serverURL = `${protocol}//${hostname}`;
+//const serverURL = `${protocol}//${hostname}${port ? `:${port}` : ""}`;
+//const serverURL = "http://localhost:3000";
+export const SERVER_URL = "http://10.10.0.13";
+
+// Online Daten URLs
+/* export const MAP_GIS_STATIONS_STATIC_DISTRICT_URL = `${SERVER_URL}/talas5/ClientData/WebserviceMap.asmx/GisStationsStaticDistrict?idMap=${c}&idUser=${user}`; //idMap: 10, idUser: 484
+export const MAP_GIS_STATIONS_STATUS_DISTRICT_URL = `${SERVER_URL}/talas5/ClientData/WebserviceMap.asmx/GisStationsStatusDistrict?idMap=${c}&idUser=${user}`;
+export const MAP_GIS_STATIONS_MEASUREMENTS_URL = `${SERVER_URL}/talas5/ClientData/WebserviceMap.asmx/GisStationsMeasurements?idMap=${c}`;
+export const MAP_GIS_SYSTEM_STATIC_URL = `${SERVER_URL}/talas5/ClientData/WebserviceMap.asmx/GisSystemStatic?idMap=${c}&idUser=${user}`;
+export const MAP_DATA_ICON_URL = `${SERVER_URL}/talas5/ClientData/WebserviceMap.asmx/GetIconsStatic`;
+export const WEBSERVICE_GIS_LINES_STATUS_URL =
+  "http://localhost:3000/api/linesColorApi";
+ */