From d8ab5bd0a5f8299077e7d82b8e122a214104314b Mon Sep 17 00:00:00 2001
From: ismailali1553 <ismailali1553@gmail.com>
Date: Fri, 17 Jan 2025 14:32:03 +0100
Subject: [PATCH] =?UTF-8?q?Eingabefeld=20f=C3=BCr=20Koordinaten?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/CoordinateInput.js    | 24 ++++++++++++++++++++++++
 components/MapComponent.js       | 11 ++++++++++-
 cypress/e2e/mapInteraction.cy.js |  3 ++-
 3 files changed, 36 insertions(+), 2 deletions(-)
 create mode 100644 components/CoordinateInput.js

diff --git a/components/CoordinateInput.js b/components/CoordinateInput.js
new file mode 100644
index 000000000..27003bfec
--- /dev/null
+++ b/components/CoordinateInput.js
@@ -0,0 +1,24 @@
+// components/CoordinateInput.js
+import React, { useState } from "react";
+
+const CoordinateInput = ({ onCoordinatesSubmit }) => {
+  const [coordinates, setCoordinates] = useState("");
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (onCoordinatesSubmit) {
+      onCoordinatesSubmit(coordinates);
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="fixed top-5 left-5 z-50 bg-white shadow-lg rounded-lg p-4 w-72">
+      <input type="text" placeholder="Koordinaten eingeben (lat,lng)" value={coordinates} onChange={(e) => setCoordinates(e.target.value)} className="border p-2 rounded w-full mb-2" />
+      <button type="submit" className="bg-blue-500 text-white p-2 rounded w-full hover:bg-blue-600">
+        Zu Marker zoomen
+      </button>
+    </form>
+  );
+};
+
+export default CoordinateInput;
diff --git a/components/MapComponent.js b/components/MapComponent.js
index 8b08238e3..0a944eb63 100644
--- a/components/MapComponent.js
+++ b/components/MapComponent.js
@@ -62,6 +62,7 @@ import { polylineLayerVisibleState } from "../redux/slices/polylineLayerVisibleS
 //--------------------------------------------
 import { useSelector, useDispatch } from "react-redux";
 import { selectCurrentPoi, setCurrentPoi, clearCurrentPoi } from "../redux/slices/currentPoiSlice";
+import CoordinateInput from "./CoordinateInput";
 
 const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   const dispatch = useDispatch();
@@ -856,7 +857,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
   //---------------------------------------
   useEffect(() => {
     if (map) {
-      initGeocoderFeature(map); // Geocoder-Feature initialisieren, kann von .env.local ausgeschaltet werden
+      // initGeocoderFeature(map); // Geocoder-Feature initialisieren, kann von .env.local ausgeschaltet werden
     }
   }, [map]);
   //--------------------------------------------
@@ -903,6 +904,13 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
     fetchData();
   }, [dispatch]);
 
+  //--------------------------------------------
+  const handleCoordinatesSubmit = (coords) => {
+    const [lat, lng] = coords.split(",").map(Number);
+    if (map && lat && lng) {
+      map.flyTo([lat, lng], 12); // Zentriere die Karte auf die Koordinaten
+    }
+  };
   //--------------------------------------------
 
   return (
@@ -927,6 +935,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
 
       {isDataLoaded && <DataSheet className="z-50" />}
 
+      <CoordinateInput onCoordinatesSubmit={handleCoordinatesSubmit} />
       <div id="map" ref={mapRef} className="z-0" style={{ height: "100vh", width: "100vw" }}></div>
 
       <div className="absolute bottom-3 left-3 w-72 p-4 bg-white rounded-lg shadow-md z-50">
diff --git a/cypress/e2e/mapInteraction.cy.js b/cypress/e2e/mapInteraction.cy.js
index bf3f4cd81..6978d8204 100644
--- a/cypress/e2e/mapInteraction.cy.js
+++ b/cypress/e2e/mapInteraction.cy.js
@@ -1,3 +1,4 @@
+//TDD Test Driven Development
 // Dieser Test überprüft die Karteninteraktion: Eingabe von Koordinaten und Zentrieren der Karte
 // Schritte:
 // 1. Öffnen der Karte auf einer bestimmten Seite.
@@ -9,7 +10,7 @@
 describe("Karteninteraktion", () => {
   it("zoomt zu den eingegebenen Koordinaten", () => {
     // Öffne die Seite mit der Karte
-    cy.visit("http://192.168.10.33:3000/?m=12&u=484"); // Passe den Pfad an deine Karte an
+    cy.visit("http://127.0.0.1:3000/?m=12&u=484"); // Passe den Pfad an deine Karte an
 
     // Gebe Koordinaten in das Eingabefeld ein
     cy.get('input[placeholder="Koordinaten eingeben (lat,lng)"]').type("52.52,13.405");