WIP: POI hinzufügen Modal

components/ShowAddStationPopup.js

@@ -113,58 +113,60 @@ const ShowAddStationPopup = ({ onClose, map, latlng }) => {
   //-----------------handleSubmit-------------------
 
   return (
-    <form onSubmit={handleSubmit} className="m-0 p-2 w-full ">
-      <div className="flex items-center mb-4">
-        <label htmlFor="name" className="block mr-2 flex-none">
-          Name :
-        </label>
-        <input type="text" id="name" name="name" value={name} onChange={(e) => setName(e.target.value)} placeholder="Name der Station" className="block p-2 w-full border-2 border-gray-200 rounded-md text-sm" />
-      </div>
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center z-[1000]" onClick={onClose}>
+      <div className="relative bg-white p-6 rounded-lg shadow-lg w-96 max-w-full" onClick={(e) => e.stopPropagation()}>
+        {/* Schließen-Button */}
+        <button onClick={onClose} className="absolute top-2 right-2 text-gray-600 hover:text-gray-900">
+          ✖
+        </button>
 
-      {/* {locationDeviceData.----------------------------------------------*/}
-      <div className="flex items-center mb-4">
-        <label htmlFor="deviceName" className="block mr-2 flex-none">
-          Gerät :
-        </label>
-        <select id="deviceName" name="deviceName" value={deviceName} onChange={(e) => setDeviceName(e.target.value)} className="block p-2 w-full border-2 border-gray-200 rounded-md text-sm">
-          {locationDeviceData.map((device, index) => (
-            <option key={index} value={device.name}>
-              {device.name}
-            </option>
-          ))}
-        </select>
-      </div>
-      {/* {locationDeviceData.----------------------------------------------*/}
-      <div className="flex items-center mb-4">
-        <label htmlFor="idPoiTyp2" className="block mr-2 flex-none">
-          Typ:
-        </label>
-        <select id="idPoiTyp2" name="idPoiTyp2" value={poiTypeId} onChange={(e) => setPoiTypeId(e.target.value)} className="block p-2 w-full border-2 border-gray-200 rounded-md text-sm">
-          {poiTypData &&
-            poiTypData.map((poiTyp, index) => (
-              <option key={poiTyp.idPoiTyp || index} value={poiTyp.idPoiTyp}>
-                {poiTyp.name}
-              </option>
-            ))}
-        </select>
-      </div>
-      <div className="flex flex-row items-center justify-center">
-        <div className="flex items-center mb-4">
-          <label htmlFor="lat" className="block mr-2 flex-none text-xs">
-            Lat : {latitude}
-          </label>
-        </div>
-        <div className="flex items-center mb-4">
-          <label htmlFor="lng" className="block mr-2 flex-none text-xs">
-            Lng : {longitude}
-          </label>
-        </div>
-      </div>
+        {/* Modal-Inhalt */}
+        <form onSubmit={handleSubmit} className="m-0 p-2 w-full">
+          <div className="flex items-center mb-4">
+            <label htmlFor="name" className="block mr-2 flex-none">
+              Name:
+            </label>
+            <input type="text" id="name" name="name" value={name} onChange={(e) => setName(e.target.value)} placeholder="Name der Station" className="block p-2 w-full border-2 border-gray-200 rounded-md text-sm" />
+          </div>
 
-      <button type="submit" className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded w-full">
-        POI hinzufügen
-      </button>
-    </form>
+          <div className="flex items-center mb-4">
+            <label htmlFor="deviceName" className="block mr-2 flex-none">
+              Gerät:
+            </label>
+            <select id="deviceName" name="deviceName" value={deviceName} onChange={(e) => setDeviceName(e.target.value)} className="block p-2 w-full border-2 border-gray-200 rounded-md text-sm">
+              {locationDeviceData.map((device, index) => (
+                <option key={index} value={device.name}>
+                  {device.name}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          <div className="flex items-center mb-4">
+            <label htmlFor="idPoiTyp2" className="block mr-2 flex-none">
+              Typ:
+            </label>
+            <select id="idPoiTyp2" name="idPoiTyp2" value={poiTypeId} onChange={(e) => setPoiTypeId(e.target.value)} className="block p-2 w-full border-2 border-gray-200 rounded-md text-sm">
+              {poiTypData &&
+                poiTypData.map((poiTyp, index) => (
+                  <option key={poiTyp.idPoiTyp || index} value={poiTyp.idPoiTyp}>
+                    {poiTyp.name}
+                  </option>
+                ))}
+            </select>
+          </div>
+
+          <div className="flex justify-between text-sm text-gray-700 mb-4">
+            <span>Lat: {latitude}</span>
+            <span>Lng: {longitude}</span>
+          </div>
+
+          <button type="submit" className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded w-full">
+            POI hinzufügen
+          </button>
+        </form>
+      </div>
+    </div>
   );
 };