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

Version 1.0.2 mit node_modules Verzeichnis

Browse Source
This commit is contained in:
ISA
2024-10-02 07:58:24 +02:00
parent f353a06b1b
commit 62b6e55a0a
68228 changed files with 4548477 additions and 651 deletions
Download Patch File Download Diff File Expand all files Collapse all files

151
components/pois/PoiUpdateModal.js
View File

@@ -1,5 +1,4 @@
// components/pois/poiUpdateModal.js
// /components/pois/PoiUpdateModal.js
import React, { useState, useEffect } from "react";
import Select from "react-select"; // Importiere react-select
import { useRecoilState } from "recoil";
@@ -15,12 +14,11 @@ const PoiUpdateModal = ({ onClose, poiData, onSubmit }) => {
const [poiId, setPoiId] = useState(poiData ? poiData.idPoi : "");
const [name, setName] = useState(poiData ? poiData.name : "");
const [poiTypData, setPoiTypData] = useState([]);
const [poiTypeId, setPoiTypeId] = useState("");
const [poiTypeId, setPoiTypeId] = useState(null); // Verwende null für react-select
const [locationDeviceData, setLocationDeviceData] = useState([]);
const [filteredDevices, setFilteredDevices] = useState([]);
const [deviceName, setDeviceName] = useState(poiData ? poiData.deviceName : null); // Verwende null für react-select
const [idLD, setIdLD] = useState(poiData ? poiData.idLD : "");
const [description, setDescription] = useState(poiData ? poiData.description : "");
// Map von Systemnamen zu IDs (wie zuvor)
@@ -45,63 +43,36 @@ const PoiUpdateModal = ({ onClose, poiData, onSubmit }) => {
useEffect(() => {
if (poiData) {
//console.log("Initial poiData:", poiData);
setPoiId(poiData.idPoi);
setName(poiData.name);
setPoiTypeId(poiData.idPoiTyp);
setPoiTypeId(poiData.idPoiTyp); // Setze den Typ-ID
setIdLD(poiData.idLD);
setDescription(poiData.description);
setDeviceName(poiData.idLD);
//console.log("Loaded POI Data for editing:", poiData);
}
}, [poiData]);
useEffect(() => {
const fetchDeviceId = async () => {
if (poiData && poiData.idLD) {
try {
const response = await fetch(`/api/talas_v5_DB/locationDevice/getDeviceIdById?idLD=${poiData.idLD}`);
const data = await response.json();
if (data) setDeviceName(data.name);
} catch (error) {
console.error("Fehler beim Abrufen der Geräteinformation in PoiUpdateModel.js: ", error);
}
}
};
fetchDeviceId();
}, [poiData]);
const handleDeletePoi = async () => {
if (confirm("Sind Sie sicher, dass Sie diesen POI löschen möchten?")) {
try {
const response = await fetch(`/api/talas_v5_DB/pois/deletePoi?id=${poiId}`, {
method: "DELETE",
});
if (response.ok) {
alert("POI wurde erfolgreich gelöscht.");
onClose();
window.location.reload();
} else {
throw new Error("Fehler beim Löschen des POI.");
}
} catch (error) {
console.error("Fehler beim Löschen des POI 2:", error);
alert("Fehler beim Löschen des POI.");
}
}
};
// Fetch POI types and set the current POI type in the react-select dropdown
useEffect(() => {
const fetchPoiTypData = async () => {
try {
const response = await fetch("/api/talas_v5_DB/poiTyp/readPoiTyp");
const data = await response.json();
setPoiTypData(data);
if (selectedPoi && data) {
const matchingType = data.find((pt) => pt.name === selectedPoi.typ);
// Prüfe den gespeicherten Typ im localStorage
const storedPoiType = localStorage.getItem("selectedPoiType");
// Finde den passenden Typ in den abgerufenen Daten und setze ihn als ausgewählt
if (storedPoiType) {
const matchingType = data.find((type) => type.name === storedPoiType);
if (matchingType) {
setPoiTypeId(matchingType.idPoiTyp);
setPoiTypeId({ value: matchingType.idPoiTyp, label: matchingType.name });
}
} else if (poiData && poiData.idPoiTyp) {
// Falls kein Typ im localStorage ist, setze den Typ von poiData
const matchingType = data.find((type) => type.idPoiTyp === poiData.idPoiTyp);
if (matchingType) {
setPoiTypeId({ value: matchingType.idPoiTyp, label: matchingType.name });
}
}
} catch (error) {
@@ -109,45 +80,27 @@ const PoiUpdateModal = ({ onClose, poiData, onSubmit }) => {
}
};
fetchPoiTypData();
}, [selectedPoi]);
}, [poiData]);
// Fetch location devices and pre-select the current device
useEffect(() => {
const fetchData = async () => {
const fetchLocationDevices = async () => {
try {
// const response = await fetch("/api/talas_v5/location_device"); //"/api/talas_v5_DB/locationDevice/location_device"
const response = await fetch("/api/talas_v5_DB/locationDevice/locationDevices");
const response = await fetch("/api/talas5/location_device");
const data = await response.json();
setLocationDeviceData(data);
filterDevices(data);
if (poiData && poiData.idLD) {
const selectedDevice = data.find((device) => device.id === poiData.idLD);
setDeviceName(selectedDevice ? selectedDevice.id : data[0].id);
//console.log("Selected Device in poiUpdate:", selectedDevice);
const selectedDevice = data.find((device) => device.idLD === poiData.idLD);
setDeviceName(selectedDevice ? { value: selectedDevice.name, label: selectedDevice.name } : null);
}
} catch (error) {
console.error("Fehler beim Abrufen der Standort- und Gerätedaten:", error);
}
};
fetchData();
}, []);
useEffect(() => {
fetch("/api/talas_v5_DB/locationDevice/locationDevices")
.then((response) => response.json())
.then((data) => {
setLocationDeviceData(data);
const currentDevice = data.find((device) => device.idLD === currentPoi.idLD);
if (currentDevice) {
setDeviceName(currentDevice.name);
//console.log("Current Device name in poiUpdate:", currentDevice.name);
}
})
.catch((error) => {
console.error("Fehler beim Abrufen der Gerätedaten:", error);
setLocationDeviceData([]);
});
}, [poiData?.idLD, currentPoi]);
fetchLocationDevices();
}, [poiData]);
// Funktion zum Filtern der Geräte basierend auf den aktiven Systemen (Layern)
const filterDevices = (devices) => {
@@ -163,9 +116,10 @@ const PoiUpdateModal = ({ onClose, poiData, onSubmit }) => {
const handleSubmit = async (event) => {
event.preventDefault();
const idLDResponse = await fetch(`/api/talas_v5_DB/locationDevice/getDeviceId?deviceName=${encodeURIComponent(deviceName)}`);
const idLDResponse = await fetch(`/api/talas_v5_DB/locationDevice/getDeviceId?deviceName=${encodeURIComponent(deviceName?.value)}`);
const idLDData = await idLDResponse.json();
const idLD = idLDData.idLD;
try {
const response = await fetch("/api/talas_v5_DB/pois/updatePoi", {
method: "POST",
@@ -176,7 +130,7 @@ const PoiUpdateModal = ({ onClose, poiData, onSubmit }) => {
idPoi: poiId,
name: name,
description: description,
idPoiTyp: poiTypeId,
idPoiTyp: poiTypeId?.value, // Den ausgewählten Typ mitsenden
idLD: idLD,
}),
});
@@ -248,43 +202,48 @@ 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>
<div className="flex items-center mb-4">
<label htmlFor="deviceName" className="block mr-2 flex-none">
{/* React Select for Devices */}
<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 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.id}>
{device.name}
</option>
))}
</select>
<Select
id="deviceName"
value={deviceName}
onChange={setDeviceName}
options={deviceOptions} // Options for filtering
placeholder="Gerät auswählen..."
isClearable={true} // Allow clearing the selection
styles={customStyles} // Apply custom styles
/>
</div>
<div className="flex items-center mb-4">
<label htmlFor="idPoiTyp2" className="block mr-2 flex-none">
{/* React Select for POI Types */}
<div className="flex flex-col mb-4">
<label htmlFor="idPoiTyp" className="block mb-2 font-bold text-sm text-gray-700">
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.map((poiTyp, index) => (
<option key={index} value={poiTyp.idPoiTyp}>
{poiTyp.name}
</option>
))}
</select>
<Select
id="idPoiTyp"
value={poiTypeId}
onChange={setPoiTypeId}
options={poiTypeOptions} // Options for filtering
placeholder="Typ auswählen..."
isClearable={true}
styles={customStyles} // Apply custom styles
/>
</div>
<button type="button" onClick={handleDeletePoi} className="bg-red-400 hover:bg-red-600 text-white font-bold py-2 px-4 rounded w-full mb-4">
POI löschen
</button>
<button type="submit" className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded w-full">
POI aktualisieren
</button>