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

docs: Screenshots in README.md

Browse Source
This commit is contained in:
ISA
2025-06-05 11:28:56 +02:00
parent 40cb07b485
commit 9273195d8f
16 changed files with 302 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
components/pois/AddPOIModal.js
View File

@@ -11,9 +11,9 @@ import { fetchPoiIconsDataThunk } from "../../redux/thunks/database/pois/fetchPo
const AddPOIModal = ({ onClose, map, latlng }) => {
const dispatch = useDispatch();
const poiTypData = useSelector((state) => state.poiTypes.data);
const status = useSelector((state) => state.addPoi.status);
const error = useSelector((state) => state.addPoi.error);
const poiTypData = useSelector(state => state.poiTypes.data);
const status = useSelector(state => state.addPoi.status);
const error = useSelector(state => state.addPoi.error);
const [name, setName] = useState("");
const [poiTypeId, setPoiTypeId] = useState("");
@@ -33,7 +33,7 @@ const AddPOIModal = ({ onClose, map, latlng }) => {
useEffect(() => {
if (locationDeviceData?.length > 0) {
setDeviceName((prev) => prev || locationDeviceData[0]?.LD_Name || "");
setDeviceName(prev => prev || locationDeviceData[0]?.LD_Name || "");
}
}, [locationDeviceData]);
@@ -41,7 +41,7 @@ const AddPOIModal = ({ onClose, map, latlng }) => {
dispatch(fetchPoiTypThunk());
}, [dispatch]);
const handleSubmit = async (event) => {
const handleSubmit = async event => {
event.preventDefault();
const formData = {
@@ -49,7 +49,7 @@ const AddPOIModal = ({ onClose, map, latlng }) => {
poiTypeId: Number(poiTypeId),
latitude,
longitude,
idLD: locationDeviceData.find((device) => device.LD_Name === deviceName)?.IdLD,
idLD: locationDeviceData.find(device => device.LD_Name === deviceName)?.IdLD,
};
try {
@@ -72,25 +72,48 @@ const AddPOIModal = ({ onClose, map, latlng }) => {
};
return (
<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()}>
<button onClick={onClose} className="absolute top-2 right-2 text-gray-600 hover:text-gray-900">
<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()}
>
<button
onClick={onClose}
className="absolute top-2 right-2 text-gray-600 hover:text-gray-900"
>
✖
</button>
<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:
Bezeichnung:
</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="POI-Bezeichnung eingeben"
className="block p-2 w-full border-2 border-gray-200 rounded-md text-sm"
/>
</div>
<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">
<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"
>
<option value="">-- Gerät auswählen --</option>
{locationDeviceData.map((device, index) => (
<option key={device?.IdLD || index} value={device?.LD_Name}>
@@ -104,13 +127,19 @@ const AddPOIModal = ({ onClose, map, latlng }) => {
<label htmlFor="idPoiTyp2" className="block mr-2 flex-none">
Typ:
</label>
<select id="idPoiTyp2" name="idPoiTyp2" value={poiTypeId} onChange={(e) => setPoiTypeId(Number(e.target.value))} className="block p-2 w-full border-2 border-gray-200 rounded-md text-sm">
<select
id="idPoiTyp2"
name="idPoiTyp2"
value={poiTypeId}
onChange={e => setPoiTypeId(Number(e.target.value))}
className="block p-2 w-full border-2 border-gray-200 rounded-md text-sm"
>
{poiTypData.length === 0 ? (
<option value="" disabled>
Keine POI-Typen verfügbar
</option>
) : (
poiTypData.map((poiTyp) => (
poiTypData.map(poiTyp => (
<option key={poiTyp.idPoiTyp} value={poiTyp.idPoiTyp}>
{poiTyp.name}
</option>
@@ -124,10 +153,17 @@ const AddPOIModal = ({ onClose, map, latlng }) => {
<span>Lng: {longitude}</span>
</div>
{status === "loading" && <div className="text-blue-500 mb-2 text-sm">Wird hinzugefügt...</div>}
{status === "failed" && error && <div className="text-red-500 mb-2 text-sm">❌ Fehler: {error}</div>}
{status === "loading" && (
<div className="text-blue-500 mb-2 text-sm">Wird hinzugefügt...</div>
)}
{status === "failed" && error && (
<div className="text-red-500 mb-2 text-sm">❌ Fehler: {error}</div>
)}
<button type="submit" className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded w-full">
<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>