From 941ab2276b1ad549c360ada68417b10f2b967640 Mon Sep 17 00:00:00 2001
From: ISA <Ismail.ali@littwin-systemtechnik.de>
Date: Tue, 17 Sep 2024 07:30:47 +0200
Subject: [PATCH] =?UTF-8?q?feat(poi):=20Implementiere=20und=20style=20reac?=
 =?UTF-8?q?t-select=20f=C3=BCr=20Ger=C3=A4te-=20und=20POI-Typ-Felder=20in?=
 =?UTF-8?q?=20Add-=20und=20Update-POI-Modalen?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Integriere react-select für eine benutzerfreundlichere Auswahl der Geräte und POI-Typen.
- Anwende benutzerdefinierte Styles, um eine einheitliche und übersichtliche Darstellung der Dropdowns zu gewährleisten.
- Sicherstellung, dass Platzhalter ("Gerät auswählen..." und "Typ auswählen...") immer angezeigt werden.
- Bereinige das Layout für eine konsistente Benutzererfahrung in beiden Modalen.
---
 components/pois/AddPoiModalWindow.js | 39 +++++++++++++++-------------
 components/pois/PoiUpdateModal.js    | 16 +++++++-----
 2 files changed, 30 insertions(+), 25 deletions(-)

diff --git a/components/pois/AddPoiModalWindow.js b/components/pois/AddPoiModalWindow.js
index 1120efd6e..ddb2dbf38 100644
--- a/components/pois/AddPoiModalWindow.js
+++ b/components/pois/AddPoiModalWindow.js
@@ -25,10 +25,6 @@ const AddPoiModalWindow = ({ onClose, map, latlng }) => {
 
         const locationDeviceData = await locationDeviceResponse.json();
         setLocationDeviceData(locationDeviceData);
-
-        if (locationDeviceData.length > 0) {
-          setDeviceName({ value: locationDeviceData[0].name, label: locationDeviceData[0].name }); // Set initial device name
-        }
       } catch (error) {
         console.error("Fehler beim Abrufen der Daten:", error);
       }
@@ -102,16 +98,20 @@ const AddPoiModalWindow = ({ onClose, map, latlng }) => {
 
   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 :
+      <div className="flex flex-col mb-4">
+        {" "}
+        {/* Changed to flex-col for vertical alignment */}
+        <label htmlFor="name" className="block mb-2 font-bold text-sm text-gray-700">
+          Beschreibung :
         </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" />
+        <input type="text" id="name" name="name" value={name} onChange={(e) => setName(e.target.value)} placeholder="Beschreibung der POI" className="block p-2 w-full border-2 border-gray-200 rounded-md text-sm" />
       </div>
 
       {/* React Select for Devices */}
-      <div className="flex items-center mb-4">
-        <label htmlFor="deviceName" className="block mr-2 flex-none">
+      <div className="flex flex-col mb-4">
+        {" "}
+        {/* Ensures consistent spacing */}
+        <label htmlFor="deviceName" className="block mb-2 font-bold text-sm text-gray-700">
           Gerät :
         </label>
         <Select
@@ -119,14 +119,15 @@ const AddPoiModalWindow = ({ onClose, map, latlng }) => {
           value={deviceName}
           onChange={setDeviceName}
           options={deviceOptions} // Options for filtering
-          placeholder="Gerät auswählen..."
+          placeholder="Gerät auswählen..." // Ensure the placeholder is always shown
+          isClearable={true} // Allow clearing the selection
           styles={customStyles} // Apply custom styles
         />
       </div>
 
       {/* React Select for POI Types */}
-      <div className="flex items-center mb-4">
-        <label htmlFor="idPoiTyp" className="block mr-2 flex-none">
+      <div className="flex flex-col mb-4">
+        <label htmlFor="idPoiTyp" className="block mb-2 font-bold text-sm text-gray-700">
           Typ:
         </label>
         <Select
@@ -139,14 +140,16 @@ const AddPoiModalWindow = ({ onClose, map, latlng }) => {
         />
       </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">
+      <div className="flex flex-row items-center justify-between mb-4">
+        {" "}
+        {/* Ensure proper alignment */}
+        <div className="flex flex-col items-center">
+          <label htmlFor="lat" className="block mb-2 text-xs text-gray-700">
             Lat : {latitude}
           </label>
         </div>
-        <div className="flex items-center mb-4">
-          <label htmlFor="lng" className="block mr-2 flex-none text-xs">
+        <div className="flex flex-col items-center">
+          <label htmlFor="lng" className="block mb-2 text-xs text-gray-700">
             Lng : {longitude}
           </label>
         </div>
diff --git a/components/pois/PoiUpdateModal.js b/components/pois/PoiUpdateModal.js
index 738282669..b862c6fc3 100644
--- a/components/pois/PoiUpdateModal.js
+++ b/components/pois/PoiUpdateModal.js
@@ -1,3 +1,4 @@
+// /components/pois/PoiUpdateModal.js
 import React, { useState, useEffect } from "react";
 import Select from "react-select"; // Importiere react-select
 import { useRecoilValue } from "recoil";
@@ -17,7 +18,6 @@ const PoiUpdateModal = ({ onClose, poiData, onSubmit }) => {
   const [idLD, setIdLD] = useState(poiData ? poiData.idLD : "");
   const [description, setDescription] = useState(poiData ? poiData.description : "");
 
-  // Setzt die initialen POI-Daten beim Öffnen des Modals
   useEffect(() => {
     if (poiData) {
       setPoiId(poiData.idPoi);
@@ -166,16 +166,16 @@ const PoiUpdateModal = ({ onClose, poiData, onSubmit }) => {
           </svg>
         </button>
         <form onSubmit={handleSubmit} className="m-0 p-2 w-full">
-          <div className="flex items-center mb-4">
-            <label htmlFor="description" className="block mr-2 flex-none">
+          <div className="flex flex-col mb-4">
+            <label htmlFor="description" className="block mb-2 font-bold text-sm text-gray-700">
               Beschreibung:
             </label>
             <input type="text" id="description" name="description" value={description} onChange={(e) => setDescription(e.target.value)} placeholder="Beschreibung der Station" className="block p-2 w-full border-2 border-gray-200 rounded-md text-sm" />
           </div>
 
           {/* React Select for Devices */}
-          <div className="flex items-center mb-4">
-            <label htmlFor="deviceName" className="block mr-2 flex-none">
+          <div className="flex flex-col mb-4">
+            <label htmlFor="deviceName" className="block mb-2 font-bold text-sm text-gray-700">
               Gerät:
             </label>
             <Select
@@ -184,13 +184,14 @@ const PoiUpdateModal = ({ onClose, poiData, onSubmit }) => {
               onChange={setDeviceName}
               options={deviceOptions} // Options for filtering
               placeholder="Gerät auswählen..."
+              isClearable={true} // Allow clearing the selection
               styles={customStyles} // Apply custom styles
             />
           </div>
 
           {/* React Select for POI Types */}
-          <div className="flex items-center mb-4">
-            <label htmlFor="idPoiTyp" className="block mr-2 flex-none">
+          <div className="flex flex-col mb-4">
+            <label htmlFor="idPoiTyp" className="block mb-2 font-bold text-sm text-gray-700">
               Typ:
             </label>
             <Select
@@ -199,6 +200,7 @@ const PoiUpdateModal = ({ onClose, poiData, onSubmit }) => {
               onChange={setPoiTypeId}
               options={poiTypeOptions} // Options for filtering
               placeholder="Typ auswählen..."
+              isClearable={true}
               styles={customStyles} // Apply custom styles
             />
           </div>