From f6a0a40a1478cb4a79d9b8a0ecd79c9191f2c46f Mon Sep 17 00:00:00 2001
From: ISA <Ismail.ali@littwin-systemtechnik.de>
Date: Tue, 30 Apr 2024 14:20:27 +0200
Subject: [PATCH] =?UTF-8?q?Daten=20abrufen=20von=20MySQL-DB-Tabelle=20poit?=
 =?UTF-8?q?yp,=20um=20sp=C3=A4ter=20in=20Dropdownmen=C3=BC=20einzuf=C3=BCg?=
 =?UTF-8?q?en=20f=C3=BCr=20dieStation=20hinzuf=C3=BCgen?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/MapComponent.js | 27 ++++++++++++++++++++++-----
 pages/api/poiTyp.js        | 37 +++++++++++++++++++++++++++++++++++++
 2 files changed, 59 insertions(+), 5 deletions(-)
 create mode 100644 pages/api/poiTyp.js

diff --git a/components/MapComponent.js b/components/MapComponent.js
index f391e3382..979bfffbc 100644
--- a/components/MapComponent.js
+++ b/components/MapComponent.js
@@ -197,9 +197,10 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
   }, []); // Dependency-Array ist leer, um den Effekt nur beim Mount auszuführen
   //------------------------------------------
 
-  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";
+  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";
   // Create map layers
   const TALAS = new L.layerGroup();
   const ECI = new L.layerGroup();
@@ -389,7 +390,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>
@@ -411,7 +412,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
@@ -1507,6 +1508,22 @@ 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);
+    }
+  };
+
+  useEffect(() => {
+    fetchPoiTyp(); // Rufen Sie diese Funktion beim Laden der Komponente auf
+  }, []);
+
+  //----------------------------------------------------
 
   return (
     <>
diff --git a/pages/api/poiTyp.js b/pages/api/poiTyp.js
new file mode 100644
index 000000000..90a461b45
--- /dev/null
+++ b/pages/api/poiTyp.js
@@ -0,0 +1,37 @@
+// pages/api/poiTyp.js
+import mysql from "mysql";
+
+const dbConfig = {
+  host: process.env.DB_HOST,
+  user: process.env.DB_USER,
+  password: process.env.DB_PASSWORD,
+  database: process.env.DB_NAME,
+  port: process.env.DB_PORT,
+};
+
+export default function handler(req, res) {
+  if (req.method === "GET") {
+    console.log("Empfangene Query-Parameter:", req.query); // Gibt alle empfangenen Query-Parameter aus
+
+    const connection = mysql.createConnection(dbConfig);
+    const query = "SELECT * FROM poiTyp"; // Vereinfachte Abfrage zum Testen
+
+    connection.query(query, (error, results) => {
+      connection.end();
+
+      if (error) {
+        console.error("Fehler beim Abfragen der Datenbank:", error);
+        return res.status(500).json({ error: "Ein Fehler ist aufgetreten" });
+      }
+
+      if (results.length === 0) {
+        return res.status(404).json({ message: "Keine Einträge gefunden" });
+      }
+
+      res.status(200).json(results);
+    });
+  } else {
+    res.setHeader("Allow", ["GET"]);
+    res.status(405).end(`Method ${req.method} Not Allowed`);
+  }
+}