Ismail/nodeMap
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(poi): Implementiere und style react-select für Geräte- und POI-Typ-Felder in Add- und Update-POI-Modalen

Browse Source 
- 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.
This commit is contained in:
ISA
2024-09-17 07:30:47 +02:00
parent 867e683eab
commit 941ab2276b
2 changed files with 30 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
components/pois/AddPoiModalWindow.js
View File

@@ -25,10 +25,6 @@ const AddPoiModalWindow = ({ onClose, map, latlng }) => {
const locationDeviceData = await locationDeviceResponse.json(); const locationDeviceData = await locationDeviceResponse.json();
setLocationDeviceData(locationDeviceData); setLocationDeviceData(locationDeviceData);
if (locationDeviceData.length > 0) {
setDeviceName({ value: locationDeviceData[0].name, label: locationDeviceData[0].name }); // Set initial device name
}
} catch (error) { } catch (error) {
console.error("Fehler beim Abrufen der Daten:", error); console.error("Fehler beim Abrufen der Daten:", error);
} }
@@ -102,16 +98,20 @@ const AddPoiModalWindow = ({ onClose, map, latlng }) => {
return ( return (
<form onSubmit={handleSubmit} className="m-0 p-2 w-full"> <form onSubmit={handleSubmit} className="m-0 p-2 w-full">
<div className="flex items-center mb-4"> <div className="flex flex-col mb-4">
<label htmlFor="name" className="block mr-2 flex-none"> {" "}
Name : {/* Changed to flex-col for vertical alignment */}
<label htmlFor="name" className="block mb-2 font-bold text-sm text-gray-700">
Beschreibung :
</label> </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> </div>
{/* React Select for Devices */} {/* React Select for Devices */}
<div className="flex items-center mb-4"> <div className="flex flex-col mb-4">
<label htmlFor="deviceName" className="block mr-2 flex-none"> {" "}
{/* Ensures consistent spacing */}
<label htmlFor="deviceName" className="block mb-2 font-bold text-sm text-gray-700">
Gerät : Gerät :
</label> </label>
<Select <Select
@@ -119,14 +119,15 @@ const AddPoiModalWindow = ({ onClose, map, latlng }) => {
value={deviceName} value={deviceName}
onChange={setDeviceName} onChange={setDeviceName}
options={deviceOptions} // Options for filtering 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 styles={customStyles} // Apply custom styles
/> />
</div> </div>
{/* React Select for POI Types */} {/* React Select for POI Types */}
<div className="flex items-center mb-4"> <div className="flex flex-col mb-4">
<label htmlFor="idPoiTyp" className="block mr-2 flex-none"> <label htmlFor="idPoiTyp" className="block mb-2 font-bold text-sm text-gray-700">
Typ: Typ:
</label> </label>
<Select <Select
@@ -139,14 +140,16 @@ const AddPoiModalWindow = ({ onClose, map, latlng }) => {
/> />
</div> </div>
<div className="flex flex-row items-center justify-center"> <div className="flex flex-row items-center justify-between mb-4">
<div className="flex items-center mb-4"> {" "}
<label htmlFor="lat" className="block mr-2 flex-none text-xs"> {/* Ensure proper alignment */}
<div className="flex flex-col items-center">
<label htmlFor="lat" className="block mb-2 text-xs text-gray-700">
Lat : {latitude} Lat : {latitude}
</label> </label>
</div> </div>
<div className="flex items-center mb-4"> <div className="flex flex-col items-center">
<label htmlFor="lng" className="block mr-2 flex-none text-xs"> <label htmlFor="lng" className="block mb-2 text-xs text-gray-700">
Lng : {longitude} Lng : {longitude}
</label> </label>
</div> </div>

16
components/pois/PoiUpdateModal.js
View File

@@ -1,3 +1,4 @@
// /components/pois/PoiUpdateModal.js
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from "react";
import Select from "react-select"; // Importiere react-select import Select from "react-select"; // Importiere react-select
import { useRecoilValue } from "recoil"; import { useRecoilValue } from "recoil";
@@ -17,7 +18,6 @@ const PoiUpdateModal = ({ onClose, poiData, onSubmit }) => {
const [idLD, setIdLD] = useState(poiData ? poiData.idLD : ""); const [idLD, setIdLD] = useState(poiData ? poiData.idLD : "");
const [description, setDescription] = useState(poiData ? poiData.description : ""); const [description, setDescription] = useState(poiData ? poiData.description : "");
// Setzt die initialen POI-Daten beim Öffnen des Modals
useEffect(() => { useEffect(() => {
if (poiData) { if (poiData) {
setPoiId(poiData.idPoi); setPoiId(poiData.idPoi);
@@ -166,16 +166,16 @@ const PoiUpdateModal = ({ onClose, poiData, onSubmit }) => {
</svg> </svg>
</button> </button>
<form onSubmit={handleSubmit} className="m-0 p-2 w-full"> <form onSubmit={handleSubmit} className="m-0 p-2 w-full">
<div className="flex items-center mb-4"> <div className="flex flex-col mb-4">
<label htmlFor="description" className="block mr-2 flex-none"> <label htmlFor="description" className="block mb-2 font-bold text-sm text-gray-700">
Beschreibung: Beschreibung:
</label> </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" /> <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> </div>
{/* React Select for Devices */} {/* React Select for Devices */}
<div className="flex items-center mb-4"> <div className="flex flex-col mb-4">
<label htmlFor="deviceName" className="block mr-2 flex-none"> <label htmlFor="deviceName" className="block mb-2 font-bold text-sm text-gray-700">
Gerät: Gerät:
</label> </label>
<Select <Select
@@ -184,13 +184,14 @@ const PoiUpdateModal = ({ onClose, poiData, onSubmit }) => {
onChange={setDeviceName} onChange={setDeviceName}
options={deviceOptions} // Options for filtering options={deviceOptions} // Options for filtering
placeholder="Gerät auswählen..." placeholder="Gerät auswählen..."
isClearable={true} // Allow clearing the selection
styles={customStyles} // Apply custom styles styles={customStyles} // Apply custom styles
/> />
</div> </div>
{/* React Select for POI Types */} {/* React Select for POI Types */}
<div className="flex items-center mb-4"> <div className="flex flex-col mb-4">
<label htmlFor="idPoiTyp" className="block mr-2 flex-none"> <label htmlFor="idPoiTyp" className="block mb-2 font-bold text-sm text-gray-700">
Typ: Typ:
</label> </label>
<Select <Select
@@ -199,6 +200,7 @@ const PoiUpdateModal = ({ onClose, poiData, onSubmit }) => {
onChange={setPoiTypeId} onChange={setPoiTypeId}
options={poiTypeOptions} // Options for filtering options={poiTypeOptions} // Options for filtering
placeholder="Typ auswählen..." placeholder="Typ auswählen..."
isClearable={true}
styles={customStyles} // Apply custom styles styles={customStyles} // Apply custom styles
/> />
</div> </div>