first commit

2024-04-15 10:37:53 +02:00
commit afee410333
736 changed files with 110561 additions and 0 deletions
--- a/components/KartenKomponente.js
+++ b/components/KartenKomponente.js
@@ -0,0 +1,95 @@
+//components/Kartenkomponente.js
+import React, { useState, useEffect } from 'react';
+import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
+import L from 'leaflet';
+import 'leaflet/dist/leaflet.css';
+import dynamic from 'next/dynamic';
+
+// Dynamischer Import mit SSR deaktiviert
+const KartenKomponenteOhneSSR = dynamic(
+  () => import('../components/KartenKomponente'),
+  { ssr: false }
+);
+
+
+const KartenKomponente = ({ locations, onAddLocation, onLocationUpdate }) => {
+  const [isOnline, setIsOnline] = useState(true); // Standardwert als fallback
+  const [aktuelleSchicht, setAktuelleSchicht] = useState({
+    url: "https://tile.openstreetmap.org/{z}/{x}/{y}.png", // Standardwert
+    options: {
+      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+      minZoom: 7,
+      maxZoom: 19,
+      crossOrigin: true,
+    },
+  });
+
+  useEffect(() => {
+    // Setzt den Zustand, basierend darauf, ob das Fensterobjekt existiert (Client-Seite)
+    if (typeof window !== "undefined") {
+      setIsOnline(navigator.onLine);
+      setAktuelleSchicht({
+        url: navigator.onLine ? "https://tile.openstreetmap.org/{z}/{x}/{y}.png" : "/mapTiles/{z}/{x}/{y}.png",
+        options: {
+          minZoom: 7,
+          maxZoom: navigator.onLine ? 19 : 14,
+          crossOrigin: true,
+          attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+        },
+      });
+
+      const handleOnlineStatus = () => setIsOnline(navigator.onLine);
+      window.addEventListener("online", handleOnlineStatus);
+      window.addEventListener("offline", handleOnlineStatus);
+
+      return () => {
+        window.removeEventListener("online", handleOnlineStatus);
+        window.removeEventListener("offline", handleOnlineStatus);
+      };
+    }
+  }, []);
+
+  useEffect(() => {
+    setAktuelleSchicht({
+      url: isOnline ? "https://tile.openstreetmap.org/{z}/{x}/{y}.png" : "/mapTiles/{z}/{x}/{y}.png",
+      options: {
+        minZoom: 7,
+        maxZoom: isOnline ? 19 : 14,
+        crossOrigin: true,
+        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+      },
+    });
+  }, [isOnline]);
+
+  // Funktion, um auf Klick ein Popup für das Hinzufügen neuer Standorte zu zeigen
+  const addMarker = (e) => {
+    // Hier könnte eine Logik stehen, um ein Formular-Modal oder Popup zu öffnen, um die Daten für den neuen Standort zu sammeln
+    const newLocation = { lat: e.latlng.lat, lng: e.latlng.lng }; // Beispiel für neue Standortdaten
+    onAddLocation(newLocation); // Rufe die übergebene onAddLocation-Funktion mit den neuen Standortdaten auf
+  };
+
+  return (
+    <MapContainer center={[51.505, -0.09]} zoom={13} style={{ height: "100vh", width: "100%" }} whenCreated={map => map.on('click', addMarker)}>
+      <TileLayer url={aktuelleSchicht.url} {...aktuelleSchicht.options} />
+      {locations.map((location, index) => (
+        <Marker
+          key={index}
+          position={[location.lat, location.lng]}
+          draggable={true}
+          eventHandlers={{
+            dragend: (e) => {
+              const newLat = e.target.getLatLng().lat;
+              const newLng = e.target.getLatLng().lng;
+              onLocationUpdate(location.id, newLat, newLng); // Aktualisiere die Position des Standorts, nachdem der Marker verschoben wurde
+            },
+          }}
+        >
+          <Popup>{location.name}</Popup>
+        </Marker>
+      ))}
+    </MapContainer>
+  );
+};
+
+export default KartenKomponente;
+