_document.js for Next.js JavaScript-Datei einbinden Vorbereitung

.next/server/vendor-chunks/next.js

@@ -384,6 +384,16 @@ eval("\nObject.defineProperty(exports, \"__esModule\", ({\n    value: true\n}));
 
 /***/ }),
 
+/***/ "./node_modules/next/document.js":
+/*!***************************************!*\
+  !*** ./node_modules/next/document.js ***!
+  \***************************************/
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+eval("module.exports = __webpack_require__(/*! ./dist/pages/_document */ \"./node_modules/next/dist/pages/_document.js\")\n//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiLi9ub2RlX21vZHVsZXMvbmV4dC9kb2N1bWVudC5qcyIsIm1hcHBpbmdzIjoiQUFBQSxpSEFBa0QiLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vLi9ub2RlX21vZHVsZXMvbmV4dC9kb2N1bWVudC5qcz85YTE0Il0sInNvdXJjZXNDb250ZW50IjpbIm1vZHVsZS5leHBvcnRzID0gcmVxdWlyZSgnLi9kaXN0L3BhZ2VzL19kb2N1bWVudCcpXG4iXSwibmFtZXMiOltdLCJzb3VyY2VSb290IjoiIn0=\n//# sourceURL=webpack-internal:///./node_modules/next/document.js\n");
+
+/***/ }),
+
 /***/ "./node_modules/next/dynamic.js":
 /*!**************************************!*\
   !*** ./node_modules/next/dynamic.js ***!

.next/static/chunks/webpack.js

@@ -153,7 +153,7 @@
 /******/ 	
 /******/ 	/* webpack/runtime/getFullHash */
 /******/ 	!function() {
-/******/ 		__webpack_require__.h = function() { return "79d56825454c319a"; }
+/******/ 		__webpack_require__.h = function() { return "3771899ba32da642"; }
 /******/ 	}();
 /******/ 	
 /******/ 	/* webpack/runtime/global */

components/MapComponent.js

@@ -211,82 +211,130 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
     loadData();
   };
   //-----Kontextmenu----ende------------
-  const showAddStationPopup = (e, map) => {
+  // Ensure this function is only called when map is initialized and available
-    const popupContent = `
+  const showAddStationPopup = (e) => {
-      <form id="addStationForm" class="m-0 p-2 w-full">
+    if (!initialMap) {
-      <div class="flex items-center mb-4">      
+      console.log("Map is not initialized.");
-        <label for="name" class="block mr-2 flex-none">Name:</label>
+      return;
-        <input
-          type="text"
-          id="name"
-          name="name"
-          placeholder="Name der Station"
-          class="block p-2 flex-grow border-2 border-gray-200 rounded-md text-sm"
-        />
-      </div>
-      
-      <div class="flex items-center mb-4">   
-        <label for="type" class="block mr-3 flex-none">Type:</label>
-        <input
-          type="text"
-          id="type"
-          name="type"
-          placeholder="Typ der Station"
-          class="block p-2 flex-grow border-2 border-gray-200 rounded-md text-sm"
-        />
-      </div>
-      
-      <div class="flex items-center mb-4">
-        <label for="lat" class="block mr-2 flex-none">Breitengrad:</label>
-        <input
-          type="text"
-          id="lat"
-          name="lat"
-          value="${e.latlng.lat.toFixed(5)}"
-          readonly
-          class="block p-2 flex-grow border-2 border-gray-200 rounded-md text-sm"
-        />
-      </div>
-       
-      <div class="flex items-center mb-4">   
-        <label for="lng" class="block mr-2 flex-none">Längengrad:</label>
-        <input
-          type="text"
-          id="lng"
-          name="lng"
-          value="${e.latlng.lng.toFixed(5)}"
-          readonly
-          class="block p-2 flex-grow border-2 border-gray-200 rounded-md text-sm"
-        />
-      </div>
-      
-      <button
-        type="submit"
-        class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded w-full"
-      >
-        Station hinzufügen
-      </button>
-    </form>
-    `;
-    console.log("intialMap in  hinzufügen: ", initialMap);
-    L.popup().setLatLng(e.latlng).setContent(popupContent).openOn(initialMap);
-  };
-  setTimeout(() => {
-    const form = document.getElementById("addStationForm");
-    if (form) {
-      form.addEventListener("submit", async (event) => {
-        event.preventDefault();
-        const name = event.target.description.value;
-        const type = event.target.position.value;
-        const lat = event.target.lat.value;
-        const lng = event.target.lng.value;
-
-        // Hier wird `onAddLocation` mit den Werten aufgerufen, die aus dem Formular gesammelt wurden
-        await onAddLocation(name, type, lat, lng);
-        map.closePopup();
-      });
     }
-  }, 10);
+
+    const popupContent = L.DomUtil.create("div");
+    popupContent.innerHTML = `
+  <form id="addStationForm" class="m-0 p-2 w-full">
+  <div class="flex items-center mb-4">      
+    <label for="name" class="block mr-2 flex-none">Name:</label>
+    <input
+      type="text"
+      id="name"
+      name="name"
+      placeholder="Name der Station"
+      class="block p-2 flex-grow border-2 border-gray-200 rounded-md text-sm"
+    />
+  </div>
+  
+  <div class="flex items-center mb-4">   
+    <label for="type" class="block mr-3 flex-none">Type:</label>
+    <input
+      type="text"
+      id="type"
+      name="type"
+      placeholder="Typ der Station"
+      class="block p-2 flex-grow border-2 border-gray-200 rounded-md text-sm"
+    />
+  </div>
+  
+  <div class="flex items-center mb-4">
+    <label for="lat" class="block mr-2 flex-none">Breitengrad:</label>
+    <input
+      type="text"
+      id="lat"
+      name="lat"
+      value="${e.latlng.lat.toFixed(5)}"
+      readonly
+      class="block p-2 flex-grow border-2 border-gray-200 rounded-md text-sm"
+    />
+  </div>
+   
+  <div class="flex items-center mb-4">   
+    <label for="lng" class="block mr-2 flex-none">Längengrad:</label>
+    <input
+      type="text"
+      id="lng"
+      name="lng"
+      value="${e.latlng.lng.toFixed(5)}"
+      readonly
+      class="block p-2 flex-grow border-2 border-gray-200 rounded-md text-sm"
+    />
+  </div>
+  
+  <button
+    type="submit"
+    class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded w-full"
+  >
+    Station hinzufügen
+  </button>
+</form>
+  `;
+
+    L.popup().setLatLng(e.latlng).setContent(popupContent).openOn(initialMap);
+
+    // Attach event listener here
+    L.DomEvent.on(popupContent, "submit", handleSubmit);
+  };
+
+  /*
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    const form = event.target;
+    const data = {
+      name: form.name.value,
+      type: form.type.value,
+      latitude: form.lat.value,
+      longitude: form.lng.value,
+    };
+
+    onAddLocation(name, type, lat, lng);
+    console.log("Name: ", name, "Type: ", type, "Lat: ", lat, "Lng: ", lng);
+    map.closePopup();
+  };
+*/
+  // Funktion zum Hinzufügen eines neuen Standorts
+  async function handleSubmit(event) {
+    event.preventDefault();
+    const form = event.target;
+    const data = {
+      name: form.name.value,
+      type: form.type.value,
+      latitude: form.lat.value,
+      longitude: form.lng.value,
+    };
+
+    try {
+      const response = await fetch("/api/addLocation", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(data),
+      });
+
+      const result = await response.json();
+
+      if (response.ok) {
+        console.log("Standort hinzugefügt:", result);
+        alert("Standort erfolgreich hinzugefügt!");
+        form.reset(); // Formular zurücksetzen
+        // Hier könntest du weitere Aktionen durchführen, wie das Schließen des Popups oder das Aktualisieren der Marker auf der Karte
+      } else {
+        throw new Error(
+          result.error || "Ein unbekannter Fehler ist aufgetreten."
+        );
+      }
+    } catch (error) {
+      console.error("Fehler beim Hinzufügen des Standorts:", error);
+      alert(error.message);
+    }
+  }
 
   function fly(stationValue) {
     var x = 51.41321407879154;

pages/_document.js

@@ -0,0 +1,22 @@
+// pages/_document.js
+import Document, { Html, Head, Main, NextScript } from "next/document";
+
+class MyDocument extends Document {
+  render() {
+    return (
+      <Html lang="de">
+        <Head>
+          {/* Hier Meta-Tags oder Schriftarten einbinden */}
+          {/* Das Script wird hier eingebunden, um es auf allen Seiten verfügbar zu machen */}
+          <script src="/config.js" defer></script>
+        </Head>
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    );
+  }
+}
+
+export default MyDocument;

public/js/config.js

@@ -1,10 +1,10 @@
-/**
+/**
  * @file config.js
  * @author Andreas Tholen
  * Contact: info@littwin-systechnik.de
  * @version 0.5.3
  * @description Config-File for the TALAS.Map
-**/
+ **/
 
 //Versionsnummer
 var mapVersion = "0.5.3";
@@ -22,33 +22,57 @@ var mapZoomMin = 4;
 var mapZoomMax = 17;
 
 //Datenquelle
-var offlineData = false; 
+var offlineData = false;
 var serverURL = "http://10.10.0.13";
 
-    var url_string = window.location;
+var url_string = window.location;
-    var url = new URL(url_string);
+var url = new URL(url_string);
-    var c = url.searchParams.get("m");
+var c = url.searchParams.get("m");
-    //c =  10;
+//c =  10;
-    console.log("idMap: "+c);
+console.log("idMap: " + c);
-    
+
-    var user = url.searchParams.get("u");
+var user = url.searchParams.get("u");
-    if (user === null) {
+if (user === null) {
-        user = 487;
+  user = 487;
-    }
+}
-    console.log("idUser: "+user);
+console.log("idUser: " + user);
 
 // Kartedaten einlesen
-var mapDataStaticUrl = serverURL+"/talas5/ClientData/WebserviceMap.asmx/GisStationsStaticDistrict?idMap="+c+"&idUser="+user;
+var mapDataStaticUrl =
-var mapDataStatusUrl = serverURL+"/talas5/ClientData/WebserviceMap.asmx/GisStationsStatusDistrict?idMap="+c+"&idUser="+user;
+  serverURL +
-var mapDataMeasures = serverURL+"/talas5/ClientData/WebserviceMap.asmx/GisStationsMeasurements?idMap="+c;
+  "/talas5/ClientData/WebserviceMap.asmx/GisStationsStaticDistrict?idMap=" +
-var mapDataIconUrl = serverURL+"/talas5/ClientData/WebserviceMap.asmx/GetIconsStatic";
+  c +
-var mapDataSystemUrl = serverURL+"/talas5/ClientData/WebserviceMap.asmx/GisSystemStatic?idMap="+c+"&idUser="+user;
+  "&idUser=" +
-const mapStaticOfflineURL = "offlineTestData/idMap"+c+"GisStationenStatic.json";
+  user;
-const mapStatusOfflineURL = "offlineTestData/idMap"+c+"GisStationenStatus.json";
+var mapDataStatusUrl =
-const mapSystemOfflineURL = "offlineTestData/idMap"+c+"GisSystemStatic.json";
+  serverURL +
+  "/talas5/ClientData/WebserviceMap.asmx/GisStationsStatusDistrict?idMap=" +
+  c +
+  "&idUser=" +
+  user;
+var mapDataMeasures =
+  serverURL +
+  "/talas5/ClientData/WebserviceMap.asmx/GisStationsMeasurements?idMap=" +
+  c;
+var mapDataIconUrl =
+  serverURL + "/talas5/ClientData/WebserviceMap.asmx/GetIconsStatic";
+var mapDataSystemUrl =
+  serverURL +
+  "/talas5/ClientData/WebserviceMap.asmx/GisSystemStatic?idMap=" +
+  c +
+  "&idUser=" +
+  user;
+const mapStaticOfflineURL =
+  "offlineTestData/idMap" + c + "GisStationenStatic.json";
+const mapStatusOfflineURL =
+  "offlineTestData/idMap" + c + "GisStationenStatus.json";
+const mapSystemOfflineURL =
+  "offlineTestData/idMap" + c + "GisSystemStatic.json";
 const mapIconsOfflineURL = "offlineTestData/icons.json";
-const mapMeasuresOfflineURL = "offlineTestData/idMap"+c+"GisSystemMeasures.json";
+const mapMeasuresOfflineURL =
-
+  "offlineTestData/idMap" + c + "GisSystemMeasures.json";
+//das kann auskommentiert werden
+/*
 if (offlineData) {
     console.log("%cSYSTEM| Offline Daten aktiviert!", 'color: blue');
     mapDataStaticUrl = mapStaticOfflineURL;
@@ -59,12 +83,22 @@ if (offlineData) {
     console.log("%cSYSTEM| Static URL: %c"+mapDataStaticUrl, 'color: blue', 'color: green');
     console.log("%cSYSTEM| Status URL: %c"+mapDataStatusUrl, 'color: blue', 'color: green');
 }
-
+*/
 // Update Zeit
 var updateIntervall = 5000; // in Millisekunden
 
 // example -> L.marker([51.5, -0.09], {icon: greenIcon}).addTo(map);
-console.log("%cSYSTEM| Kartenfunktionen geladen", 'color: blue');
+console.log("%cSYSTEM| Kartenfunktionen geladen", "color: blue");
-console.log("%cSYSTEM| Die aktuelle Fenstergröße Breite: " + window.innerWidth+"px  Höhe: "+window.innerHeight + "px", 'color: blue');
+console.log(
-console.log("%cMAP| Marker-Icons preload abgeschlossen", 'color: green');
+  "%cSYSTEM| Die aktuelle Fenstergröße Breite: " +
-console.log("%cMAP| Updateintervall: "+updateIntervall+" ms", 'color: green');
+    window.innerWidth +
+    "px  Höhe: " +
+    window.innerHeight +
+    "px",
+  "color: blue"
+);
+console.log("%cMAP| Marker-Icons preload abgeschlossen", "color: green");
+console.log(
+  "%cMAP| Updateintervall: " + updateIntervall + " ms",
+  "color: green"
+);

public/js/config2.js

@@ -0,0 +1,70 @@
+/**
+ * @file config.js
+ * @author Andreas Tholen
+ * Contact: info@littwin-systechnik.de
+ * @version 0.5.3
+ * @description Config-File for the TALAS.Map
+**/
+
+//Versionsnummer
+var mapVersion = "0.5.3";
+
+//Visual Config
+var standardSideMenu = true;
+var fullSideMenu = false;
+
+// Window Height erkennen
+var windowHeight = window.innerHeight;
+//console.log("windowheighet:"+windowHeight);
+
+//Zoom
+var mapZoomMin = 4;
+var mapZoomMax = 17;
+
+//Datenquelle
+var offlineData = false; 
+var serverURL = "http://10.10.0.13";
+
+    var url_string = window.location;
+    var url = new URL(url_string);
+    var c = url.searchParams.get("m");
+    //c =  10;
+    console.log("idMap: "+c);
+    
+    var user = url.searchParams.get("u");
+    if (user === null) {
+        user = 487;
+    }
+    console.log("idUser: "+user);
+
+// Kartedaten einlesen
+var mapDataStaticUrl = serverURL+"/talas5/ClientData/WebserviceMap.asmx/GisStationsStaticDistrict?idMap="+c+"&idUser="+user;
+var mapDataStatusUrl = serverURL+"/talas5/ClientData/WebserviceMap.asmx/GisStationsStatusDistrict?idMap="+c+"&idUser="+user;
+var mapDataMeasures = serverURL+"/talas5/ClientData/WebserviceMap.asmx/GisStationsMeasurements?idMap="+c;
+var mapDataIconUrl = serverURL+"/talas5/ClientData/WebserviceMap.asmx/GetIconsStatic";
+var mapDataSystemUrl = serverURL+"/talas5/ClientData/WebserviceMap.asmx/GisSystemStatic?idMap="+c+"&idUser="+user;
+const mapStaticOfflineURL = "offlineTestData/idMap"+c+"GisStationenStatic.json";
+const mapStatusOfflineURL = "offlineTestData/idMap"+c+"GisStationenStatus.json";
+const mapSystemOfflineURL = "offlineTestData/idMap"+c+"GisSystemStatic.json";
+const mapIconsOfflineURL = "offlineTestData/icons.json";
+const mapMeasuresOfflineURL = "offlineTestData/idMap"+c+"GisSystemMeasures.json";
+
+if (offlineData) {
+    console.log("%cSYSTEM| Offline Daten aktiviert!", 'color: blue');
+    mapDataStaticUrl = mapStaticOfflineURL;
+    mapDataSystemUrl = mapSystemOfflineURL;
+    mapDataStatusUrl = mapStatusOfflineURL;
+    mapDataIconUrl = mapIconsOfflineURL;
+    mapDataMeasures = mapMeasuresOfflineURL;
+    console.log("%cSYSTEM| Static URL: %c"+mapDataStaticUrl, 'color: blue', 'color: green');
+    console.log("%cSYSTEM| Status URL: %c"+mapDataStatusUrl, 'color: blue', 'color: green');
+}
+
+// Update Zeit
+var updateIntervall = 5000; // in Millisekunden
+
+// example -> L.marker([51.5, -0.09], {icon: greenIcon}).addTo(map);
+console.log("%cSYSTEM| Kartenfunktionen geladen", 'color: blue');
+console.log("%cSYSTEM| Die aktuelle Fenstergröße Breite: " + window.innerWidth+"px  Höhe: "+window.innerHeight + "px", 'color: blue');
+console.log("%cMAP| Marker-Icons preload abgeschlossen", 'color: green');
+console.log("%cMAP| Updateintervall: "+updateIntervall+" ms", 'color: green');