feat: Dynamische Hostname- und Portunterstützung für API-Aufrufe implementiert

- Hostname dynamisch aus `window.location.hostname` extrahiert
- Port 3000 explizit in der URL ergänzt
- Fehler beim Parsen von JSON behoben (404-HTML-Antwort statt JSON)
- Verbesserte Fehlerprotokollierung und Debugging-Logs in `useBereicheMarkersLayer.js`
- Tooltip-Anzeige für Bereich und Standort optimiert

components/MapComponent.js

@@ -797,13 +797,12 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   //---------------------------------------
   // Initialisiere Leaflet-Karte
   // Rufe useBereicheMarkersLayer direkt auf
-  const [bereichUrl, setBereichUrl] = useState(null);
+  //const [bereichUrl, setBereichUrl] = useState(null);
-
+  const urlParams = new URLSearchParams(window.location.search); // URL-Parameter parsen
-  useEffect(() => {
+  const mValue = urlParams.get("m"); // Wert von "m" holen
-    const urlParams = new URLSearchParams(window.location.search); // URL-Parameter parsen
+  const hostname = window.location.hostname; // Dynamischer Hostname
-    const mValue = urlParams.get("m"); // Wert von "m" holen
+  const port = 3000; // Definiere den gewünschten Port
-    setBereichUrl(`/api/talas_v5_DB/bereich/readBereich?m=${mValue || 12}`); // Fallback auf 12, falls "m" nicht definiert ist
+  const bereichUrl = `http://${hostname}:${port}/api/talas_v5_DB/bereich/readBereich?m=${mValue}`; // Dynamischer Hostname und Port
-  }, []);
 
   // Bereichs-Marker basierend auf dynamischer URL laden
   const bereicheMarkers = useBereicheMarkersLayer(map, oms, bereichUrl);

hooks/layers/useBereicheMarkersLayer.js

@@ -48,7 +48,12 @@ const useBereicheMarkersLayer = (map, oms, apiUrl) => {
     const fetchBereiche = async () => {
       try {
         const response = await fetch(apiUrl);
-        const data = await response.json();
+        const text = await response.text(); // Hole die vollständige Antwort als Text
+        console.log("Antwort als Text:", text); // Überprüfe den tatsächlichen Inhalt der Antwort
+        const data = JSON.parse(text); // Versuche, die Antwort zu parsen, falls sie korrektes JSON ist
+
+        console.log("API-URL:", apiUrl);
+        console.log("Response-Status:", response.status);
 
         const markers = data.map((item) => {
           const marker = L.marker([item.x, item.y], { icon: customIcon });
@@ -103,7 +108,7 @@ const useBereicheMarkersLayer = (map, oms, apiUrl) => {
       clearInterval(intervalId);
     };
   }, [map, bereicheMarkers, oms]);
-
+  /* 
   useEffect(() => {
     const fetchBereiche = async () => {
       try {
@@ -119,8 +124,8 @@ const useBereicheMarkersLayer = (map, oms, apiUrl) => {
           // Tooltip
           marker.bindTooltip(
             `
-                   <strong>locatin_name:</strong> ${item.location_name} <br />
+                   <strong>Bereich:</strong> ${item.location_name} <br />
-              <strong> area_name:</strong> ${item.area_name} <br />
+              <strong>Standort:</strong> ${item.area_name} <br />
              `,
             {
               permanent: false,
@@ -150,7 +155,7 @@ const useBereicheMarkersLayer = (map, oms, apiUrl) => {
     };
 
     fetchBereiche();
-  }, [apiUrl]);
+  }, [apiUrl]); */
 
   useEffect(() => {
     if (map) {

pages/api/talas_v5_DB/bereich/readBereich.js

@@ -1,3 +1,4 @@
+// /pages/api/talas_v5_DB/bereich/readBereich.js
 import getPool from "../../../../utils/mysqlPool"; // Singleton-Pool importieren
 
 export default async function handler(req, res) {

pages/api/talas_v5_DB/bereich/updateBereich.js

@@ -1,3 +1,4 @@
+// /pages/api/talas_v5_DB/bereich/updateBereich.js
 import getPool from "../../../utils/mysqlPool"; // Singleton-Pool importieren
 
 export default async function handler(req, res) {