Station hinzufügen in Popup implementieren

.next/server/pages-manifest.json

@@ -1,6 +1,6 @@
 {
-  "/_app": "pages/_app.js",
   "/_error": "pages/_error.js",
+  "/_app": "pages/_app.js",
   "/_document": "pages/_document.js",
   "/": "pages/index.js",
   "/api/locations": "pages/api/locations.js"

.next/static/chunks/_error.js

@@ -1,28 +0,0 @@
-/*
- * ATTENTION: An "eval-source-map" devtool has been used.
- * This devtool is neither made for production nor for readable output files.
- * It uses "eval()" calls to create a separate source file with attached SourceMaps in the browser devtools.
- * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
- * or disable the default devtool with "devtool: false".
- * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
- */
-(self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([["/_error"],{
-
-/***/ "./node_modules/next/dist/build/webpack/loaders/next-client-pages-loader.js?absolutePagePath=C%3A%5CUsers%5Cisa.LTW%5CDesktop%5C15.04.2024%5CwwwrootTalas5NodeMap%5Cnode_modules%5Cnext%5Cdist%5Cpages%5C_error.js&page=%2F_error!":
-/*!*****************************************************************************************************************************************************************************************************************************************!*\
-  !*** ./node_modules/next/dist/build/webpack/loaders/next-client-pages-loader.js?absolutePagePath=C%3A%5CUsers%5Cisa.LTW%5CDesktop%5C15.04.2024%5CwwwrootTalas5NodeMap%5Cnode_modules%5Cnext%5Cdist%5Cpages%5C_error.js&page=%2F_error! ***!
-  \*****************************************************************************************************************************************************************************************************************************************/
-/***/ (function(module, __unused_webpack_exports, __webpack_require__) {
-
-eval(__webpack_require__.ts("\n    (window.__NEXT_P = window.__NEXT_P || []).push([\n      \"/_error\",\n      function () {\n        return __webpack_require__(/*! ./node_modules/next/dist/pages/_error.js */ \"./node_modules/next/dist/pages/_error.js\");\n      }\n    ]);\n    if(true) {\n      module.hot.dispose(function () {\n        window.__NEXT_P.push([\"/_error\"])\n      });\n    }\n  //# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiLi9ub2RlX21vZHVsZXMvbmV4dC9kaXN0L2J1aWxkL3dlYnBhY2svbG9hZGVycy9uZXh0LWNsaWVudC1wYWdlcy1sb2FkZXIuanM/YWJzb2x1dGVQYWdlUGF0aD1DJTNBJTVDVXNlcnMlNUNpc2EuTFRXJTVDRGVza3RvcCU1QzE1LjA0LjIwMjQlNUN3d3dyb290VGFsYXM1Tm9kZU1hcCU1Q25vZGVfbW9kdWxlcyU1Q25leHQlNUNkaXN0JTVDcGFnZXMlNUNfZXJyb3IuanMmcGFnZT0lMkZfZXJyb3IhIiwibWFwcGluZ3MiOiI7QUFDQTtBQUNBO0FBQ0E7QUFDQSxlQUFlLG1CQUFPLENBQUMsMEZBQTBDO0FBQ2pFO0FBQ0E7QUFDQSxPQUFPLElBQVU7QUFDakIsTUFBTSxVQUFVO0FBQ2hCO0FBQ0EsT0FBTztBQUNQO0FBQ0EiLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly9fTl9FLz9kMTk5Il0sInNvdXJjZXNDb250ZW50IjpbIlxuICAgICh3aW5kb3cuX19ORVhUX1AgPSB3aW5kb3cuX19ORVhUX1AgfHwgW10pLnB1c2goW1xuICAgICAgXCIvX2Vycm9yXCIsXG4gICAgICBmdW5jdGlvbiAoKSB7XG4gICAgICAgIHJldHVybiByZXF1aXJlKFwiLi9ub2RlX21vZHVsZXMvbmV4dC9kaXN0L3BhZ2VzL19lcnJvci5qc1wiKTtcbiAgICAgIH1cbiAgICBdKTtcbiAgICBpZihtb2R1bGUuaG90KSB7XG4gICAgICBtb2R1bGUuaG90LmRpc3Bvc2UoZnVuY3Rpb24gKCkge1xuICAgICAgICB3aW5kb3cuX19ORVhUX1AucHVzaChbXCIvX2Vycm9yXCJdKVxuICAgICAgfSk7XG4gICAgfVxuICAiXSwibmFtZXMiOltdLCJzb3VyY2VSb290IjoiIn0=\n//# sourceURL=webpack-internal:///./node_modules/next/dist/build/webpack/loaders/next-client-pages-loader.js?absolutePagePath=C%3A%5CUsers%5Cisa.LTW%5CDesktop%5C15.04.2024%5CwwwrootTalas5NodeMap%5Cnode_modules%5Cnext%5Cdist%5Cpages%5C_error.js&page=%2F_error!\n"));
-
-/***/ })
-
-},
-/******/ function(__webpack_require__) { // webpackRuntimeModules
-/******/ var __webpack_exec__ = function(moduleId) { return __webpack_require__(__webpack_require__.s = moduleId); }
-/******/ __webpack_require__.O(0, ["main"], function() { return __webpack_exec__("./node_modules/next/dist/build/webpack/loaders/next-client-pages-loader.js?absolutePagePath=C%3A%5CUsers%5Cisa.LTW%5CDesktop%5C15.04.2024%5CwwwrootTalas5NodeMap%5Cnode_modules%5Cnext%5Cdist%5Cpages%5C_error.js&page=%2F_error!"); });
-/******/ var __webpack_exports__ = __webpack_require__.O();
-/******/ _N_E = __webpack_exports__;
-/******/ }
-]);

.next/static/chunks/webpack.js

@@ -153,7 +153,7 @@
 /******/ 	
 /******/ 	/* webpack/runtime/getFullHash */
 /******/ 	!function() {
-/******/ 		__webpack_require__.h = function() { return "140b462da8270237"; }
+/******/ 		__webpack_require__.h = function() { return "fad48fc8314b2436"; }
 /******/ 	}();
 /******/ 	
 /******/ 	/* webpack/runtime/global */

.next/static/webpack/0e74aa54b34d9d23.webpack.hot-update.json

@@ -1 +0,0 @@
-{"c":["webpack"],"r":[],"m":[]}

.next/static/webpack/50d24096472da196.webpack.hot-update.json

@@ -1 +0,0 @@
-{"c":["webpack","components_MapComponent_js"],"r":[],"m":[]}

.next/static/webpack/d0630572fbbc1a10.webpack.hot-update.json

@@ -1 +0,0 @@
-{"c":["webpack","components_MapComponent_js"],"r":["/_error"],"m":["./node_modules/next/dist/build/webpack/loaders/next-client-pages-loader.js?absolutePagePath=C%3A%5CUsers%5Cisa.LTW%5CDesktop%5C15.04.2024%5CwwwrootTalas5NodeMap%5Cnode_modules%5Cnext%5Cdist%5Cpages%5C_error.js&page=%2F_error!"]}

.next/static/webpack/d498b704493928ba.webpack.hot-update.json

@@ -1 +0,0 @@
-{"c":["webpack"],"r":[],"m":[]}

.next/static/webpack/webpack.0e74aa54b34d9d23.hot-update.js

@@ -1,18 +0,0 @@
-"use strict";
-/*
- * ATTENTION: An "eval-source-map" devtool has been used.
- * This devtool is neither made for production nor for readable output files.
- * It uses "eval()" calls to create a separate source file with attached SourceMaps in the browser devtools.
- * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
- * or disable the default devtool with "devtool: false".
- * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
- */
-self["webpackHotUpdate_N_E"]("webpack",{},
-/******/ function(__webpack_require__) { // webpackRuntimeModules
-/******/ /* webpack/runtime/getFullHash */
-/******/ !function() {
-/******/ 	__webpack_require__.h = function() { return "0f7a0a107ffd3df9"; }
-/******/ }();
-/******/ 
-/******/ }
-);

.next/static/webpack/webpack.50d24096472da196.hot-update.js

@@ -1,18 +0,0 @@
-"use strict";
-/*
- * ATTENTION: An "eval-source-map" devtool has been used.
- * This devtool is neither made for production nor for readable output files.
- * It uses "eval()" calls to create a separate source file with attached SourceMaps in the browser devtools.
- * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
- * or disable the default devtool with "devtool: false".
- * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
- */
-self["webpackHotUpdate_N_E"]("webpack",{},
-/******/ function(__webpack_require__) { // webpackRuntimeModules
-/******/ /* webpack/runtime/getFullHash */
-/******/ !function() {
-/******/ 	__webpack_require__.h = function() { return "d498b704493928ba"; }
-/******/ }();
-/******/ 
-/******/ }
-);

.next/static/webpack/webpack.d0630572fbbc1a10.hot-update.js

@@ -1,18 +0,0 @@
-"use strict";
-/*
- * ATTENTION: An "eval-source-map" devtool has been used.
- * This devtool is neither made for production nor for readable output files.
- * It uses "eval()" calls to create a separate source file with attached SourceMaps in the browser devtools.
- * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
- * or disable the default devtool with "devtool: false".
- * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
- */
-self["webpackHotUpdate_N_E"]("webpack",{},
-/******/ function(__webpack_require__) { // webpackRuntimeModules
-/******/ /* webpack/runtime/getFullHash */
-/******/ !function() {
-/******/ 	__webpack_require__.h = function() { return "0e74aa54b34d9d23"; }
-/******/ }();
-/******/ 
-/******/ }
-);

.next/static/webpack/webpack.d498b704493928ba.hot-update.js

@@ -1,18 +0,0 @@
-"use strict";
-/*
- * ATTENTION: An "eval-source-map" devtool has been used.
- * This devtool is neither made for production nor for readable output files.
- * It uses "eval()" calls to create a separate source file with attached SourceMaps in the browser devtools.
- * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
- * or disable the default devtool with "devtool: false".
- * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
- */
-self["webpackHotUpdate_N_E"]("webpack",{},
-/******/ function(__webpack_require__) { // webpackRuntimeModules
-/******/ /* webpack/runtime/getFullHash */
-/******/ !function() {
-/******/ 	__webpack_require__.h = function() { return "d0630572fbbc1a10"; }
-/******/ }();
-/******/ 
-/******/ }
-);

components/MapComponent.js

@@ -6,12 +6,22 @@ import "leaflet-contextmenu";
 const MapComponent = () => {
   const mapRef = useRef(null);
   const [map, setMap] = useState(null);
+  const [online, setOnline] = useState(navigator.onLine);
+  const offlineTileLayer = "../TileMap/mapTiles/{z}/{x}/{y}.png";
+  const onlineTileLayer = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
 
   let initialMap = [];
 
+  // Funktionen zur Überwachung der Internetverbindung
+  const checkInternet = () => {
+    console.log("Checking internet connectivity...");
+    fetch("https://tile.openstreetmap.org/1/1/1.png", { method: "HEAD" })
+      .then((response) => setOnline(response.ok))
+      .catch(() => setOnline(false));
+  };
+  // Initialisiere die Karte
   useEffect(() => {
     if (mapRef.current && !map) {
-      // Initialisiere die Karte ohne die Standard-Zoomsteuerung
       initialMap = L.map(mapRef.current, {
         center: [53.111111, 8.4625],
         zoom: 10,
@@ -40,8 +50,7 @@ const MapComponent = () => {
           { text: "Hier zentrieren", callback: centerHere },
         ],
       });
-      console.log(initialMap);
+      L.tileLayer(online ? onlineTileLayer : offlineTileLayer, {
-      L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
         attribution:
           '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
       }).addTo(initialMap);
@@ -111,26 +120,65 @@ const MapComponent = () => {
     loadData();
   };
   //-----Kontextmenu----ende------------
-
+  const showAddStationPopup = (e, map) => {
-  const showAddStationPopup = (e) => {
+    const popupContent = `
-    const popupContent = L.DomUtil.create("form");
+      <form id="addStationForm" class="m-0 p-2 w-full">
-    popupContent.innerHTML = `
+      <div class="flex items-center mb-4">      
-      <div style="margin: 0; padding: 0; width: 200px;">
+        <label for="name" class="block mr-2 flex-none">Name:</label>
-        <label>Name:</label><input type="text" id="name" name="name" placeholder="Name der Station"><br>
+        <input
-        <label>Typ:</label><input type="text" id="type" name="type" placeholder="Typ der Station"><br>
+          type="text"
-        <label>Breitengrad:</label><input type="text" id="lat" name="lat" value="${e.latlng.lat.toFixed(
+          id="name"
-          5
+          name="name"
-        )}" readonly><br>
+          placeholder="Name der Station"
-        <label>Längengrad:</label><input type="text" id="lng" name="lng" value="${e.latlng.lng.toFixed(
+          class="block p-2 flex-grow border-2 border-gray-200 rounded-md text-sm"
-          5
+        />
-        )}" readonly><br>
-        <button type="submit">Station hinzufügen</button>
       </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()
+    console.log("intialMap in  hinzufügen: ", initialMap);
-      .setLatLng(e.latlng)
+    L.popup().setLatLng(e.latlng).setContent(popupContent).openOn(initialMap);
-      .setContent(popupContent)
-      .openOn(e.relatedTarget);
   };
 
   function fly(stationValue) {

package-lock.json

@@ -16,6 +16,7 @@
       "devDependencies": {
         "autoprefixer": "^10.4.19",
         "postcss": "^8.4.38",
+        "prettier": "^3.2.5",
         "tailwindcss": "^3.4.3"
       }
     },
@@ -1376,6 +1377,21 @@
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
       "dev": true
     },
+    "node_modules/prettier": {
+      "version": "3.2.5",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.2.5.tgz",
+      "integrity": "sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==",
+      "dev": true,
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
     "node_modules/process-nextick-args": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",

package.json

@@ -17,6 +17,7 @@
   "devDependencies": {
     "autoprefixer": "^10.4.19",
     "postcss": "^8.4.38",
+    "prettier": "^3.2.5",
     "tailwindcss": "^3.4.3"
   }
 }