From bd6ae825407a65b54126b53d3b27ad7baff44b07 Mon Sep 17 00:00:00 2001
From: ISA <Ismail.ali@littwin-systemtechnik.de>
Date: Tue, 30 Apr 2024 15:32:24 +0200
Subject: [PATCH] =?UTF-8?q?poiTypState.js=20Recoil-Atom=20erstellt=20f?=
 =?UTF-8?q?=C3=BCr=20jetzt=20und=20besonders=20f=C3=BCr=20Zuk=C3=BCnftige?=
 =?UTF-8?q?=20Skalierbarkeit?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/MapComponent.js | 61 +++++++++++++++++++++-----------------
 store/poiTypState.js       |  7 +++++
 2 files changed, 40 insertions(+), 28 deletions(-)
 create mode 100644 store/poiTypState.js

diff --git a/components/MapComponent.js b/components/MapComponent.js
index 979bfffbc..64cafce7d 100644
--- a/components/MapComponent.js
+++ b/components/MapComponent.js
@@ -15,6 +15,7 @@ import { gisSystemStaticState } from "../store/gisSystemState";
 import { mapLayersState } from "../store/mapLayersState";
 import { selectedAreaState } from "../store/selectedAreaState";
 import { zoomTriggerState } from "../store/zoomTriggerState";
+import { poiTypState } from '../store/poiTypState';
 
 const MapComponent = ({ locations, onLocationUpdate }) => {
   const poiLayerRef = useRef(null); // Referenz auf die Layer-Gruppe für Datenbank-Marker
@@ -197,10 +198,9 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
   }, []); // Dependency-Array ist leer, um den Effekt nur beim Mount auszuführen
   //------------------------------------------
 
-  const offlineTileLayer = "../TileMap/mapTiles/{z}/{x}/{y}.png"; // ich habe kein mapTiles lokal
-  const onlineTileLayer = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
-  //const onlineTileLayer = "mapTiles/{z}/{x}/{y}.png"; // auf dem Server local
-  //const onlineTileLayer = "TileMap/mapTiles/{z}/{x}/{y}.png";
+  const offlineTileLayer = "../TileMap/mapTiles/{z}/{x}/{y}.png";
+  //const onlineTileLayer = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
+  const onlineTileLayer = "mapTiles/{z}/{x}/{y}.png";
   // Create map layers
   const TALAS = new L.layerGroup();
   const ECI = new L.layerGroup();
@@ -288,14 +288,15 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
       setMap(initMap);
       setOms(oms);
 
-      initMap.on("zoomend", function () {
-        // Überprüfen, ob der aktuelle Zoom außerhalb der Grenzen liegt
-        if (initMap.getZoom() > 15) {
-          initMap.setZoom(15);
-        } else if (initMap.getZoom() < 5) {
-          initMap.setZoom(5);
-        }
-      });
+      initMap.on('zoomend', function() {
+      // Überprüfen, ob der aktuelle Zoom außerhalb der Grenzen liegt
+      if (initMap.getZoom() > 15) {
+        initMap.setZoom(15);
+      } else if (initMap.getZoom() < 5) {
+        initMap.setZoom(5);
+      }
+    });
+    
 
       // Nach der Initialisierung der Map und Setzen im State kannst du Funktionen aufrufen, die `map` benötigen.
       initMap.whenReady(() => {
@@ -390,7 +391,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
     const popupContent = L.DomUtil.create("div");
     popupContent.innerHTML = `
   <form id="addStationForm" class="m-0 p-2 w-full">
-      
+      <!-- Kommantar von hier
         <div class="flex items-center mb-4">
 
         <label for="idPoi" class="block mr-2 flex-none">ID Poi:</label>
@@ -412,7 +413,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
         class="block p-2 flex-grow border-2 border-gray-200 rounded-md text-sm"
       />
       </div>
-     
+      Kommantar bis hier-->
   <div class="flex items-center mb-4">      
     <label for="name" class="block mr-2 flex-none">Name:</label>
     <input
@@ -518,7 +519,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
   function fly(stationValue) {
     var x = 51.41321407879154;
     var y = 7.739617925303934;
-    var zoom = 7;
+    var zoom = 7
 
     initMap.flyTo([x, y], zoom);
   }
@@ -1508,20 +1509,24 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
     }
   }, [map, zoomTrigger]);
   //------------------------------------------
-  // Funktion zum Abrufen der poiTyp Daten
-  const fetchPoiTyp = async () => {
-    try {
-      const response = await fetch("/api/poiTyp");
-      const data = await response.json();
-      console.log("Fetched poiTyp:", data);
-    } catch (error) {
-      console.error("Error fetching poiTyp data:", error);
-    }
-  };
+    // Funktion zum Abrufen der poiTyp Daten
+    const [poiTypData, setPoiTypData] = useRecoilState(poiTypState); // Recoil State verwenden
 
-  useEffect(() => {
-    fetchPoiTyp(); // Rufen Sie diese Funktion beim Laden der Komponente auf
-  }, []);
+    useEffect(() => {
+      const fetchPoiTypData = async () => {
+        try {
+          const response = await fetch('/api/poiTyp');
+          const data = await response.json();
+          setPoiTypData(data); // Daten im Recoil State speichern
+          console.log('Fetched poiTyp Data:', data); // Daten in der Konsole anzeigen
+        } catch (error) {
+          console.error('Fehler beim Abrufen der poiTyp Daten:', error);
+        }
+      };
+    
+      fetchPoiTypData();
+    }, []);
+    
 
   //----------------------------------------------------
 
diff --git a/store/poiTypState.js b/store/poiTypState.js
new file mode 100644
index 000000000..e27e82517
--- /dev/null
+++ b/store/poiTypState.js
@@ -0,0 +1,7 @@
+// store/poiTypState.js
+import { atom } from 'recoil';
+
+export const poiTypState = atom({
+  key: 'poiTypState', // eindeutiger Schlüssel
+  default: [], // Initialer Standardwert, leeres Array
+});