Merge branch 'neuer-branch' into Dev

MapTypC.aspx/MapTypC.aspx

@@ -0,0 +1,46 @@
+<%@ Page Title="" Language="C#" MasterPageFile="~/Standard.Master" AutoEventWireup="true" CodeBehind="MapTypC.aspx.cs" Inherits="TALAS_V5.MessagesMap.MapTypC" %>
+<%@ Register assembly="DevExpress.Web.v19.2, Version=19.2.6.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.Web" tagprefix="dx" %>
+
+<asp:Content ID="NaviContent" ContentPlaceHolderID="NaviContent" runat="server">
+</asp:Content>
+
+<asp:Content ID="Content" ContentPlaceHolderID="MainContent" runat="server">
+
+<style>
+    .responsive-iframe-wrapper {
+        position: relative  !important;
+        width: 100%  !important;
+        height: 97.2vh  !important; /* Setzt die Höhe des Wrappers auf die Höhe des Viewports */
+        overflow: hidden  !important; /* Verhindert Scrollbalken innerhalb des Wrappers */
+		padding: 0 0 0 0  !important;
+		margin: 0 0 0 0  !important;
+    }
+    .responsive-iframe-wrapper iframe {
+        position: absolute !important;
+        top: 0 !important;
+        left: 0  !important;
+        width: 100%  !important;
+        height: 100%  !important;
+        border: none  !important; /* Removes the border */
+    }
+</style>
+
+
+<div class="responsive-iframe-wrapper">
+    <iframe frameborder="0"></iframe>
+</div>
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    var url = new URL(window.location.href);
+    var mValue = url.searchParams.get("m");
+    var uValue = url.searchParams.get("u");
+
+    // Setzen der src-Eigenschaft des iframe mit den abgerufenen Parametern
+    document.querySelector('.responsive-iframe-wrapper iframe').src = 
+       // "http://10.10.0.70:3000?m=" + encodeURIComponent(mValue) + "&u=" + encodeURIComponent(uValue);
+       "http://10.10.0.13:3000?m=" + encodeURIComponent(mValue) + "&u=" + encodeURIComponent(uValue);
+});
+</script>
+
+</asp:Content>

MapTypC.aspx/MapTypC.aspx.ismail

@@ -0,0 +1,46 @@
+<%@ Page Title="" Language="C#" MasterPageFile="~/Standard.Master" AutoEventWireup="true" CodeBehind="MapTypC.aspx.cs" Inherits="TALAS_V5.MessagesMap.MapTypC" %>
+<%@ Register assembly="DevExpress.Web.v19.2, Version=19.2.6.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" namespace="DevExpress.Web" tagprefix="dx" %>
+
+<asp:Content ID="NaviContent" ContentPlaceHolderID="NaviContent" runat="server">
+</asp:Content>
+
+<asp:Content ID="Content" ContentPlaceHolderID="MainContent" runat="server">
+
+<style>
+    .responsive-iframe-wrapper {
+        position: relative  !important;
+        width: 100%  !important;
+        height: 95vh  !important; /* Setzt die Höhe des Wrappers auf die Höhe des Viewports */
+        overflow: hidden  !important; /* Verhindert Scrollbalken innerhalb des Wrappers */
+		padding: 0 0 0 0  !important;
+		margin: 0 0 0 0  !important;
+    }
+    .responsive-iframe-wrapper iframe {
+        position: absolute !important;
+        top: 0 !important;
+        left: 0  !important;
+        width: 100%  !important;
+        height: 100%  !important;
+        border: none  !important; /* Removes the border */
+    }
+</style>
+
+
+<div class="responsive-iframe-wrapper">
+    <iframe frameborder="0"></iframe>
+</div>
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    var url = new URL(window.location.href);
+    var mValue = url.searchParams.get("m");
+    var uValue = url.searchParams.get("u");
+
+    // Setzen der src-Eigenschaft des iframe mit den abgerufenen Parametern
+    document.querySelector('.responsive-iframe-wrapper iframe').src = 
+       // "http://10.10.0.70:3000?m=" + encodeURIComponent(mValue) + "&u=" + encodeURIComponent(uValue);
+       "http://10.10.0.13:3000?m=" + encodeURIComponent(mValue) + "&u=" + encodeURIComponent(uValue);
+});
+</script>
+
+</asp:Content>

Wiki.md

@@ -0,0 +1,175 @@
+# TALAS V5 nodeMap
+
+<br><br>
+
+## Einführung
+
+Dieses Dokument bietet einen umfassenden Überblick über die TALAS V5-GIS-Webanwendung nodeMap. Diese Anwendung ermöglicht es, verschiedene Daten und Informationen visuell und interaktiv zu speichern, zu verwalten und anzuzeigen. Sie basiert auf Geographic Information Systems (GIS) und verwendet MySQL als Datenbank.
+
+<br><br>
+
+## Installation
+
+### Voraussetzungen
+
+- **Node.js und npm:** Stellen Sie sicher, dass Node.js und npm auf Ihrem System installiert sind. Besuchen Sie [Node.js](https://nodejs.org) für Installationsanleitungen.
+
+### Projekt herunterladen und vorbereiten
+
+Laden Sie nodeMap.zip aus dem Team-URL herunter und entpacken Sie die Datei mit Werkzeugen wie 7-Zip.
+Kopieren Sie den entpackten Ordner nodeMap in das Verzeichnis C:\inetpub\wwwroot\talas5.
+
+### mapTiles einfügen
+
+Fügen Sie das mapTiles-Verzeichnis in `C:\inetpub\wwwroot\talas5\nodeMap\public` ein. Die mapTiles sollten lokal sein.
+
+## Serverkonfiguration
+
+1. **Projekt Kopieren**: Kopieren Sie das Projekt direkt, anstatt es von Gitea zu klonen, um Probleme mit `npm install` und Abhängigkeiten zu vermeiden.
+
+2. **Port Freigabe**: Der Port `3000` muss auf dem Server freigegeben werden, damit die Anwendung auch außerhalb des Servers erreichbar ist.
+
+3. **API IP Konfiguration**: Konfigurieren Sie die Server-IP und den Port in den entsprechenden Dateien, um den Zugriff auf die Anwendung zu ermöglichen. Beispielkonfigurationen:
+
+   - In `C:\inetpub\wwwroot\talas5\MessagesMap\MapTypC.aspx`: `"http://10.10.0.30:3000?m=" + encodeURIComponent(mValue) + "&u=" + encodeURIComponent(uValue);`
+   - Bei localhost kommt dieser Meldung: _localhost hat die Verbindung abgelehnt_. Also, nur über IP ist intern und extern erreichbar: `"http://localhost:3000?m=" + encodeURIComponent(mValue) + "&u=" + encodeURIComponent(uValue);`
+
+4. **Konfiguration in `[...path].js`**:
+
+   - In `/pages/api/[...path].js` muss die IP des Servers eingetragen werden: `target: "http://localhost",`
+   - In `/config/config.js` API-Endpoint prüfen.
+
+5. **Datenbank-Host-IP**: In `.env.local`: `DB_HOST=localhost,`
+
+6. **Map URL**: In `/components/MapComponent.js`: `const onlineTileLayer = "/mapTiles/{z}/{x}/{y}.png";`
+
+7. **ServerURL in MapComponent**: Stellen Sie sicher, dass `serverURL` die richtige IP-Adresse und API-Endpoint hat und für Benutzer-Berechtigung: `const serverURL = "http://10.10.0.13";`
+
+8. **baseURL in MapComponent**: Stellen Sie sicher, dass `baseURL` die localhost und API-Endpoint hat und für Benutzer-Berechtigung und Stationen öffnen: `const baseUrl = "http://localhost/talas5/devices/";`
+
+9. **App als Service starten**: Starten Sie die App als Service, damit sie mit dem Server-System startet: `nssm.exe install ->Batch-Datei ->Projekt-Ordner -> 3. kann leer sein`
+
+10. **Chrome Version**: Der Web-Browser Chrome muss ab Version `125.0.6420.142` sein.
+
+<br><br>
+
+## Benutzeranleitung
+
+### Karte ansehen
+
+Die Hauptseite zeigt eine interaktive Karte, auf der verschiedene geografische Punkte dargestellt werden.
+
+- Beim Überfahren eines Elements (Station oder Poi) mit der Maus erscheint ein Popup mit Informationen über dieses Element.
+
+- Überlappende Stationen werden durch ein Plus-Icon angezeigt. Bei einem Linksklick auf das Icon werden die Stationen visuell auseinandergezogen, und Informationen zu einer Station werden bei Mausüberfahrt angezeigt.
+- **Verschieben:** Halten Sie die linke Maustaste gedrückt und bewegen Sie die Maus, um die Karte zu verschieben um verschiedene Bereiche zu erkunden.
+
+#### Station wählen
+
+Oben rechts auf der Karte befindet sich ein Dropdown-Menü, mit dem Sie direkt zu einer ausgewählten Station zoomen können.
+
+#### Layer auswählen
+
+In derselben Oberfläche können Sie über Checkboxen verschiedene System-Layer ein- oder ausblenden, um spezifische Informationen auf der Karte anzuzeigen oder zu verbergen.
+
+#### Rauszoomen-Icon
+
+Ein Icon zum Rauszoomen ermöglicht es Ihnen, schnell zu einem definierten Bereich zurückzukehren.
+
+### Kontextmenü
+
+#### Station öffnen
+
+Stationen können im selben Browser-Fenster oder in einem neuen Tab geöffnet werden.
+
+- Maus über eine Station -> Rechte Maustaste -> Kontextmenü öffnen und "Station öffnen (Tab)" wählen, um die Station in einem neuen Browser-Tab zu öffnen, oder "Station öffnen", um sie im selben Fenster zu öffnen.
+
+#### Hinzufügen neuer Poi
+
+Nutzer können über ein Formular neue Marker (Poi) zur Datenbank hinzufügen.
+
+- Rechte Maustaste -> Poi hinzufügen -> Formular ausfüllen -> "Poi hinzufügen" Button klicken. Der Poi erscheint dann auf der Karte.
+
+#### Koordinaten anzeigen
+
+Im Kontextmenü können Sie die aktuellen Koordinaten der Mausposition in einem Alert-Fenster anzeigen lassen.
+
+#### Zoom
+
+Sie können mit dem Mausrad ein- und auszoomen, um näher an Bereiche heranzukommen oder sich für eine Übersicht zu entfernen.
+Sie haben auch die Möglichkeit im Kontextmenü ein- und auszoomen.
+
+#### Hier zentrieren
+
+Die aktuellen Mauskoordinaten werden im Browser-Fenster zentriert.
+
+### Pois hinzufügen und bearbeiten
+
+1. **Poi hinzufügen:**
+
+   - Rechtsklicken Sie auf den gewünschten Ort auf der Karte, um das Kontextmenü zu öffnen.
+   - Wählen Sie die Option "Poi hinzufügen".
+   - Füllen Sie das Formular mit den notwendigen Informationen über den Poi aus und klicken Sie auf "POI hinzufügen", um den PoI zur Karte und zur Datenbank hinzuzufügen.
+
+2. **Poi verschieben:**
+   - Um einen bestehenden Poi zu verschieben, klicken und halten Sie den Marker des POI und ziehen Sie ihn an die neue Position.
+   - Lassen Sie den Marker los, um die neue Position zu bestätigen. Die Position wird automatisch in der MySQL-Datenbank aktualisiert.
+3. **Poi bearbeiten:**
+   - Im Kontextmenü "Poi bearbeiten klicken, dann öffnet Formular-Fenster, drin können die Werte geändert dann auf "POI aktualisieren" klicken.
+4. **Poi löschen**
+   - In das vorherige Fenster "Poi löschen" klicken um von der Karte und von der Datenbank entfernen.
+
+<br><br>
+
+## Fehlerbehebung
+
+### Problembehandlung bei der Installation
+
+Stellen Sie sicher, dass alle Umgebungsvariablen korrekt gesetzt sind.
+
+### Lösungen bei häufigen Fehlern
+
+Bei Problemen während der Weiterentwicklung könnte es hilfreich sein, die Seite neu zu laden (aktualisieren).
+
+<br><br>
+
+## Verzeichnisstruktur
+
+### /pages
+
+- **\_app.js**: Grundlegende Konfiguration und Layout für die gesamte Anwendung. Importiert globale Styles und Recoil-Root für das State Management.
+- **index.js**: Startseite der Anwendung, lädt die Hauptkomponenten und initiiert die Karte.
+- **[...path].js**: Dynamische Route, die verwendet wird, um verschiedene URLs zu verarbeiten, die spezifische Ansichten oder Funktionen in der Anwendung darstellen.
+
+### /components
+
+- **DataSheet.js**: Verantwortlich für die Anzeige und Interaktion mit den Layer- und Stationsauswahlen. Ermöglicht das Aktivieren/Deaktivieren von Layern und zeigt Informationen zu geografischen Punkten.
+- **MapComponent.js**: Kernkomponente für die Darstellung der Karte. Beinhaltet Logik für das Hinzufügen von Layern, Zoom-Funktionen und andere interaktive Elemente.
+- **PoiUpdateModal.js**:Komponente zum Aktualisieren(update) und löschen von Pois.
+- **ShowAddStationPopup.js**:Komponente zum hinzufügen von Pois.
+
+### /public
+
+- Speicherort für statische Dateien wie MapTiles (falls Internet nicht vorhanden), Bilder, Icons und andere Medien, die in der Benutzeroberfläche verwendet werden.
+
+### /styles
+
+- Enthält CSS-Dateien und andere Styling-Ressourcen für das Tailwind CSS-Framework.
+
+### /store
+
+- Zustandsmanagement-Dateien, die mit Recoil erstellt wurden. Diese Dateien definieren Atome und Selektoren für den globalen Zustand der Anwendung.
+
+### /api
+
+- **addLocation.js**: API-Route zur Handhabung des Hinzufügens neuer Standortdaten zur Datenbank.
+- **updateLocation.js**: API-Route zur Aktualisierung bestehender Standortdaten.
+- **locations.js**: API-Route, die für das Abrufen von Standortdaten zuständig ist.
+
+### /config
+
+- **config.js**: Konfigurationsdatei, die wichtige Konstanten und Einstellungen für die Anwendung enthält, wie z.B. API-Endpoints.
+
+<br><br>
+
+Diese Dokumentation und Benutzeranleitung kann weiter angepasst und erweitert werden.

components/MapComponent.js

@@ -1,4 +1,8 @@
 // components/MapComponent.js
+<<<<<<< HEAD
+=======
+
+>>>>>>> neuer-branch
 import React, {
   useEffect,
   useRef,
@@ -6,7 +10,10 @@ import React, {
   useMemo,
   useCallback,
 } from "react";
+<<<<<<< HEAD
 //import ReactDOM from "react-dom/client"; // Import from 'react-dom/client'
+=======
+>>>>>>> neuer-branch
 import { MapContainer, TileLayer, Polyline, LayerGroup } from "react-leaflet";
 
 import L, { marker } from "leaflet";
@@ -48,12 +55,16 @@ const plusRoundIcon = L.icon({
 });
 
 const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
+<<<<<<< HEAD
   /*   const linePositions = lineCoordinates || [
     [52.505, 8],
     [52, 8.5],
     [51.5, 8],
     [52.505, 8],
   ]; */
+=======
+  const [menuItemAdded, setMenuItemAdded] = useState(false);
+>>>>>>> neuer-branch
 
   const poiLayerVisible = useRecoilValue(poiLayerVisibleState);
 
@@ -104,15 +115,15 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
       return; // Beendet die Funktion frühzeitig, wenn keine Berechtigung vorliegt
     }
 
-    console.log("Selected Marker ID (idPoi):", marker.options.idPoi);
-    console.log("Selected Marker Description:", marker.options.description);
+    //console.log("Selected Marker ID (idPoi):", marker.options.idPoi);
+    //console.log("Selected Marker Description:", marker.options.description);
 
     setCurrentPoiData({
       idPoi: marker.options.id,
       name: marker.options.name,
       description: marker.options.description,
     });
-    console.log("POI-Daten1:", currentPoiData);
+    //console.log("POI-Daten1:", currentPoiData);
 
     fetchPoiData(marker.options.id);
 
@@ -131,7 +142,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
       name: data.name,
       description: data.description,
     });
-    console.log("POI-Daten2:", currentPoiData);
+    //console.log("POI-Daten2:", currentPoiData);
     setShowPoiUpdateModal(true);
   };
 
@@ -157,7 +168,12 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   const lineLayer = new L.LayerGroup();
 
   const [gisSystemStaticLoaded, setGisSystemStaticLoaded] = useState(false);
+<<<<<<< HEAD
   const baseUrl = "http://localhost/talas5/devices/";
+=======
+  const baseUrl = "http://10.10.0.13/talas5/devices/";
+  //const baseUrl = "http://localhost/talas5/devices/";
+>>>>>>> neuer-branch
   const [isPoiTypLoaded, setIsPoiTypLoaded] = useState(false);
   const [poiTypMap, setPoiTypMap] = useState(new Map());
   const [showPopup, setShowPopup] = useState(false);
@@ -170,9 +186,15 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
 
   const handleAddStation = (stationData) => {
     // Station-Daten speichern oder API-Aufruf durchführen
+<<<<<<< HEAD
     console.log("Neue Station:", userRights.includes(56));
 
     console.log("Neue Station:", stationData);
+=======
+    //console.log("Neue Station:", userRights.includes(56));
+
+    //console.log("Neue Station:", stationData);
+>>>>>>> neuer-branch
     setShowAddStationPopup(false);
     closePopup(); // Schließt das Popup nach dem Hinzufügen
   };
@@ -261,7 +283,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   // Funktion zum Öffnen in einem neuen Tab
   function openInNewTab(e, marker) {
     if (marker && marker.options && marker.options.link) {
-      console.log("Marker data:", baseUrl + marker.options.link);
+      //console.log("Marker data:", baseUrl + marker.options.link);
       window.open(baseUrl + marker.options.link, "_blank");
     } else {
       console.error("Fehler: Marker hat keine gültige 'link' Eigenschaft");
@@ -271,7 +293,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   // Funktion zum Öffnen im gleichen Fenster
   function openInSameWindow(e, marker) {
     if (marker && marker.options && marker.options.link) {
-      console.log("Marker data:", baseUrl + marker.options.link);
+      //console.log("Marker data:", baseUrl + marker.options.link);
       window.location.href = baseUrl + marker.options.link;
     } else {
       console.error("Fehler: Marker hat keine gültige 'link' Eigenschaft");
@@ -344,7 +366,11 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   ); // Keine Abhängigkeiten, da `hasRights` als Parameter übergeben wird */
   const addStationCallback = useCallback(
     (event) => {
+<<<<<<< HEAD
       console.log("Benutzerrechte zum Zeitpunkt des Aufrufs:", hasRights);
+=======
+      //console.log("Benutzerrechte zum Zeitpunkt des Aufrufs:", hasRights);
+>>>>>>> neuer-branch
       if (hasRights) {
         setPopupCoordinates(event.latlng);
         setShowPopup(true);
@@ -358,7 +384,11 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
           draggable: true,
           progress: undefined,
         });
+<<<<<<< HEAD
         console.log("Benutzer hat keine Berechtigung zum Hinzufügen.");
+=======
+        console.error("Benutzer hat keine Berechtigung zum Hinzufügen.");
+>>>>>>> neuer-branch
       }
     },
     [hasRights]
@@ -725,7 +755,11 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   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}`;
+<<<<<<< HEAD
   const serverURL = "http://localhost"; // weil ich keine API habe, ansonsten serverURL ist localhost(IP-Adresse)
+=======
+  const serverURL = "http://10.10.0.13"; // weil ich keine API habe, ansonsten serverURL ist localhost(IP-Adresse)
+>>>>>>> neuer-branch
   //const serverURL = "http://localhost:3000";
 
   const params = new URL(window.location.href).searchParams;
@@ -747,16 +781,26 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
       const userRightsIds = rightsArray.map((right) => right.IdRight);
       setUserRights(userRightsIds); // Speichert die Rechte in den Zustand
 
+<<<<<<< HEAD
       console.log("Benutzerrechte:", rightsArray);
       console.log("Benutzerrechte IDs:", userRightsIds);
       console.log("Benutzerrechte in if :", userRightsIds.includes(56));
+=======
+      //console.log("Benutzerrechte:", rightsArray);
+      //console.log("Benutzerrechte IDs:", userRightsIds);
+      //console.log("Benutzerrechte in if :", userRightsIds.includes(56));
+>>>>>>> neuer-branch
       setHasRights(userRightsIds.includes(56));
     } catch (error) {
       console.error("Fehler beim Abrufen der Benutzerrechte", error);
     }
   };
   useEffect(() => {
+<<<<<<< HEAD
     console.log("Aktualisierter Status von hasRights: ", hasRights);
+=======
+    //console.log("Aktualisierter Status von hasRights: ", hasRights);
+>>>>>>> neuer-branch
   }, [hasRights]); // Dieser Effekt läuft jedes Mal, wenn sich `hasRights` ändert.
 
   // Überprüfen der Benutzerrechte beim Initialisieren der Komponente
@@ -1093,13 +1137,13 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
         // Fügen Sie hier die Logik hinzu, um Marker zu erstellen und zu konfigurieren
       });
     };
-    console.log("trigger in MapComponent.js:", poiReadTrigger);
+    //console.log("trigger in MapComponent.js:", poiReadTrigger);
   }, [map, locations, poiReadTrigger]); // Dieser Effekt läuft nur, wenn sich `map` ändert
   //------------------------------------------
   function editPoi(marker) {
     // Zugriff auf die Markerdaten
     const markerId = marker.options.id;
-    console.log("Bearbeiten des POI mit ID:", markerId);
+    //console.log("Bearbeiten des POI mit ID:", markerId);
 
     // Hier könnte ein Modal mit Formular geöffnet werden
     // Beispiel: openEditModal(markerId);
@@ -1137,6 +1181,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
       }).addTo(map);
     }
   }, [map]); */
+<<<<<<< HEAD
   const addItemsToMapContextMenu = () => {
     console.log("contextMenuItems hasRights:", hasRights);
 
@@ -1150,15 +1195,41 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   //--------------------------------------------------
   useEffect(() => {
     if (map && poiLayerRef.current && isPoiTypLoaded) {
+=======
+
+  const addItemsToMapContextMenu = () => {
+    if (!menuItemAdded) {
+      //console.log("contextMenuItems hasRights:", hasRights);
+
+      map.contextmenu.addItem({
+        text: "POI hinzufügen",
+        icon: "img/add_station.png",
+        className: "background-red",
+        callback: (event) => addStationCallback(event, hasRights),
+      });
+
+      setMenuItemAdded(true); // Menüpunkt wurde hinzugefült, Zustand aktualisieren
+    }
+  };
+
+  useEffect(() => {
+    if (map && poiLayerRef.current && isPoiTypLoaded && !menuItemAdded) {
+>>>>>>> neuer-branch
       addItemsToMapContextMenu();
     }
   }, [
     map,
+<<<<<<< HEAD
     locations,
     onLocationUpdate,
     poiReadTrigger,
     isPoiTypLoaded,
     userRights,
+=======
+    poiLayerRef,
+    isPoiTypLoaded,
+    menuItemAdded, // Hinzufügen zu den Abhängigkeiten, um den Effekt korrekt zu steuern
+>>>>>>> neuer-branch
   ]);
   //------------------------------------------
 
@@ -1171,7 +1242,11 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
       const response = await fetch("/api/poi-icons");
       const data = await response.json();
       setPoiData(data);
+<<<<<<< HEAD
       console.log("poiData icons:", data);
+=======
+      //console.log("poiData icons:", data);
+>>>>>>> neuer-branch
     };
 
     fetchPoiData();
@@ -1186,7 +1261,11 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
         const { latitude, longitude } = parsePoint(location.position);
         const poiTypName = poiTypMap.get(location.idPoiTyp) || "Unbekannt";
         const deviceName = await fetchDeviceNameById(location.idLD);
+<<<<<<< HEAD
         console.log("location.icon:", location);
+=======
+        //console.log("location.icon:", location);
+>>>>>>> neuer-branch
 
         // Check if user has the right to drag the marker
         const canDrag = userRights ? userRights.includes(56) : false; // Check if userRights is not null before using includes
@@ -1252,7 +1331,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
               onLocationUpdate(markerId, newLat, newLng);
             });
           } else {
-            console.log("Drag operation not allowed");
+            console.error("Drag operation not allowed");
           }
         });
         //poiLayer ein - oder ausschalten
@@ -2037,6 +2116,42 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
     ulafMarkers,
   ]);
 
+  //LINESTRING (53.151257 8.190471,53.161601 8.129359,53.19802 8.092366,53.244065 8.014003,53.252539 7.954265)
+  const [linePositions, setLinePositions] = useState([]);
+
+  useEffect(() => {
+    const endpoint = "/api/readGisLines";
+
+    fetch(endpoint)
+      .then((response) => {
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        return response.json();
+      })
+      .then((data) => {
+        console.log("readGisLines API Response:", data);
+
+        if (!Array.isArray(data)) {
+          throw new Error("Data is not an array");
+        }
+
+        const newLinePositions = data.map((item) => {
+          if (item.points && Array.isArray(item.points)) {
+            return item.points.map((point) => [point.x, point.y]);
+          } else {
+            throw new Error("Points missing or not an array");
+          }
+        });
+
+        console.log("Transformed Line Positions:", newLinePositions);
+        setLinePositions(newLinePositions);
+      })
+      .catch((error) => {
+        console.error("Error fetching data:", error.message);
+      });
+  }, []);
+
   //---------------------------------------------------------
 
   return (

config/config.js

@@ -25,6 +25,9 @@ if (typeof window !== "undefined") {
   console.log(`Parameter 'idMap' : ${c}`);
   console.log(`Parameter 'idUser': ${user}`);
 
+  console.log(`Parameter 'idMap' : ${c}`);
+  console.log(`Parameter 'idUser': ${user}`);
+
   // Konstruktion von URLs, die auf spezifische Ressourcen auf dem Server zeigen
   //http://localhost:3000/?m=10&u=485
   mapGisStationsStaticDistrictUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsStaticDistrict?idMap=${c}&idUser=${user}`; //idMap: 10, idUser: 484

pages/api/[...path].js

@@ -3,7 +3,11 @@ import { createProxyMiddleware } from "http-proxy-middleware";
 
 export default createProxyMiddleware({
   //target: "http://192.168.10.58:3001",
+<<<<<<< HEAD
   target: "http://10.10.0.13", // Ziel-URL des Proxys,  GET //talas5/ClientData/WebserviceMap.asmx/GisStationsStatusDistrict?idMap=10&idUser=484 504 in 20ms
+=======
+  target: "http://10.10.0.13", // Ziel-URL des Proxys
+>>>>>>> neuer-branch
   //target: "http://localhost", // Ziel-URL des Proxys
   //target: "http://192.168.10.187:3000", // Ziel-URL des Proxys
   changeOrigin: true,

pages/api/readGisLines.js

@@ -0,0 +1,36 @@
+import mysql from 'mysql';
+
+const dbConfig = {
+  host: process.env.DB_HOST,
+  user: process.env.DB_USER,
+  password: process.env.DB_PASSWORD,
+  database: process.env.DB_NAME,
+  port: process.env.DB_PORT,
+};
+
+const connection = mysql.createConnection(dbConfig);
+connection.connect((err) => {
+  if (err) {
+    console.error('Fehler beim Verbinden:', err.stack);
+    return;
+  }
+  console.log('Database connected successfully.');
+});
+
+export default function handler(req, res) {
+  if (req.method !== 'GET') {
+    return res.status(405).json({ error: 'Nur GET Methode erlaubt' });
+  }
+  const query = 'SELECT * FROM talas_v5.gis_lines;';
+  connection.query(query, (error, results) => {
+    if (error) {
+      console.error('Fehler beim Abrufen der gis_lines:', error);
+      return res.status(500).json({ error: 'Fehler beim Abrufen der gis_lines' });
+    }
+    if (results.length > 0) {
+      res.json(results);
+    } else {
+      res.status(404).json({ error: 'Gerät nicht gefunden' });
+    }
+  });
+}