5b2cb762cc
- `index.js` als Client-Komponente deklariert (`"use client"`) zur Vermeidung von SSR-Problemen. - `useEffect` optimiert, um unendliche API-Requests durch `isMounted`-Check zu verhindern. - `loadData()` angepasst, um API-Fehler korrekt abzufangen und erneute Ladeversuche zu vermeiden. - Doppelte Registrierung von `poiReadFromDbTriggerAtom` durch HMR verhindert. - Ungültige MySQL-Option `acquireTimeout` entfernt, um Verbindungsfehler zu beheben. Diese Änderungen verhindern unerwartete Reloads und verbessern die Stabilität der Anwendung.
265 lines
10 KiB
JavaScript
265 lines
10 KiB
JavaScript
// pages/api/poiUpdateModal.js
|
|
//
|
|
import React, { useState, useEffect } from "react";
|
|
import { useRecoilValue } from "recoil";
|
|
import { selectedPoiState } from "../store/atoms/poiState";
|
|
import { currentPoiState } from "../store/atoms/currentPoiState";
|
|
|
|
const PoiUpdateModal = ({ onClose, poiData }) => {
|
|
const currentPoi = useRecoilValue(currentPoiState);
|
|
const selectedPoi = useRecoilValue(selectedPoiState);
|
|
const [poiId, setPoiId] = useState(poiData ? poiData.idPoi : "");
|
|
const [name, setName] = useState(poiData ? poiData.name : "");
|
|
const [poiTypData, setPoiTypData] = useState([]);
|
|
const [poiTypeId, setPoiTypeId] = useState("");
|
|
const [locationDeviceData, setLocationDeviceData] = useState([]);
|
|
const [deviceName, setDeviceName] = useState("");
|
|
const [idLD, setIdLD] = useState(poiData ? poiData.idLD : "");
|
|
const [idLocationDevice, setIdLocationDevice] = useState("");
|
|
|
|
const [description, setDescription] = useState(poiData ? poiData.description : "");
|
|
|
|
// Log the initial POI data
|
|
useEffect(() => {
|
|
if (poiData) {
|
|
setPoiId(poiData.idPoi);
|
|
setName(poiData.name);
|
|
setPoiTypeId(poiData.idPoiTyp);
|
|
setIdLD(poiData.idLD);
|
|
|
|
setDescription(poiData.description);
|
|
setDeviceName(poiData.idLD);
|
|
console.log("Loaded POI Data for editing:", poiData);
|
|
console.log("POI ID:", poiData.idPoi);
|
|
console.log("POI Name:", poiData.name);
|
|
console.log("POI Typ ID:", poiData.idPoiTyp);
|
|
console.log("POI Beschreibung:", poiData.description);
|
|
console.log("POI Geräte-ID:", poiData.idLD);
|
|
}
|
|
}, [poiData]);
|
|
|
|
/* const fetchDeviceNameById = async (idLD) => {
|
|
try {
|
|
const response = await fetch(`/api/getDeviceNameById?idLD=${idLD}`);
|
|
const data = await response.json();
|
|
setDeviceName(data.deviceName);
|
|
} catch (error) {
|
|
console.error("Error fetching device name:", error);
|
|
}
|
|
}; */
|
|
|
|
/* const fetchDeviceNameById = async (idLD) => {
|
|
try {
|
|
const response = await fetch(`/api/talas_v5_DB/locationDevice/locationDeviceNameById?idLD=${idLD}`);
|
|
const data = await response.json();
|
|
setDeviceName(data.deviceName);
|
|
} catch (error) {
|
|
console.error("Error fetching device name:", error);
|
|
}
|
|
}; */
|
|
|
|
// Beim Öffnen des Modals die Geräte-ID basierend auf dem Gerätenamen abrufen, wenn vorhanden
|
|
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]);
|
|
|
|
// Function to handle deleting a POI
|
|
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(); // Close the modal
|
|
//Browser neu laden, um die aktualisierte Liste anzuzeigen
|
|
window.location.reload();
|
|
} else {
|
|
throw new Error("Fehler beim Löschen des POI.");
|
|
}
|
|
} catch (error) {
|
|
console.error("Fehler beim Löschen des POI 1:", error);
|
|
alert("Fehler beim Löschen des POI.");
|
|
}
|
|
}
|
|
};
|
|
|
|
// Fetch POI types
|
|
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);
|
|
if (matchingType) {
|
|
setPoiTypeId(matchingType.idPoiTyp);
|
|
}
|
|
}
|
|
} catch (error) {
|
|
console.error("Fehler beim Abrufen der poiTyp Daten:", error);
|
|
}
|
|
};
|
|
fetchPoiTypData();
|
|
}, [selectedPoi]);
|
|
|
|
// Fetch device data um den Gerät Namen in den dropdown menu anzuzeigen also erstmal die Liste der Geräte abrufen
|
|
useEffect(() => {
|
|
const fetchData = async () => {
|
|
try {
|
|
const response = await fetch("/api/talas_v5/location_device");
|
|
const data = await response.json();
|
|
//console.log("Standort- und Gerätedaten:", data);
|
|
setLocationDeviceData(data);
|
|
console.log("Standort- und Gerätedaten poiData:", poiData);
|
|
if (poiData && poiData.idLD) {
|
|
const selectedDevice = data.find((device) => device.id === poiData.idLD);
|
|
setDeviceName(selectedDevice ? selectedDevice.id : data[0].id); // Hier wird die ID als initialer Zustand gesetzt
|
|
console.log("Selected Device:", selectedDevice);
|
|
console.log("Selected devciceName:", deviceName);
|
|
}
|
|
} catch (error) {
|
|
console.error("Fehler beim Abrufen der Standort- und Gerätedaten:", error);
|
|
}
|
|
};
|
|
fetchData();
|
|
}, []);
|
|
//--------------------------------------------------------------------------------------------
|
|
// Fetch device name basierend auf der Geräte-ID
|
|
|
|
useEffect(() => {
|
|
console.log("currentPoi von PoiUpdateModal.js : ", currentPoi.idLD);
|
|
fetch("/api/talas_v5_DB/locationDevice/locationDevices")
|
|
.then((response) => response.json())
|
|
.then((data) => {
|
|
setLocationDeviceData(data);
|
|
console.log("Standort- und Gerätedaten 3:", data);
|
|
console.log("Standort- und Gerätedaten 3 poiData:", poiData);
|
|
// Findet das Gerät, das der aktuellen IDLD entspricht
|
|
const currentDevice = data.find((device) => device.idLD === currentPoi.idLD);
|
|
if (currentDevice) {
|
|
setDeviceName(currentDevice.name);
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
console.error("Fehler beim Abrufen der Gerätedaten:", error);
|
|
setLocationDeviceData([]);
|
|
});
|
|
}, [poiData?.idLD, currentPoi]);
|
|
|
|
//--------------------------------------------------------------------------------------------
|
|
// Angenommen, deviceName enthält die Geräte-ID
|
|
//const idLD = deviceName; // Stellen Sie sicher, dass dies eine ID ist und kein Name
|
|
|
|
const handleSubmit = async (event) => {
|
|
event.preventDefault();
|
|
const idLDResponse = await fetch(`/api/talas_v5_DB/locationDevice/getDeviceId?deviceName=${encodeURIComponent(deviceName)}`);
|
|
const idLDData = await idLDResponse.json();
|
|
const idLD = idLDData.idLD;
|
|
try {
|
|
const response = await fetch("/api/talas_v5_DB/pois/updatePoi", {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify({
|
|
idPoi: poiId,
|
|
name: name,
|
|
description: description,
|
|
idPoiTyp: poiTypeId,
|
|
idLD: idLD,
|
|
//idLD: parseInt(deviceName, 10), // Konvertieren in eine Ganzzahl
|
|
}),
|
|
});
|
|
|
|
if (response.ok) {
|
|
onClose();
|
|
window.location.reload();
|
|
} else {
|
|
const errorResponse = await response.json();
|
|
throw new Error(errorResponse.error || "Fehler beim Aktualisieren des POI.");
|
|
}
|
|
} catch (error) {
|
|
console.error("Fehler beim Aktualisieren des POI:", error);
|
|
alert("Fehler beim Aktualisieren des POI.");
|
|
}
|
|
};
|
|
|
|
//ausgewählte poi Informationen in Console anzeigen
|
|
console.log("Selected POI:", selectedPoi);
|
|
console.log("Selected POI Gerät id in poiUpdateModal.js:", selectedPoi.id);
|
|
console.log("Selected POI Typ name in poiUpdateModal.js:", selectedPoi.typ); //als Typ in dropdown menu
|
|
console.log("Selected POI Beschreibung in poiUpdateModal.js:", selectedPoi.description);
|
|
console.log("Selected POI Gerät deviceId in poiUpdateModal.js:", selectedPoi.deviceId);
|
|
|
|
return (
|
|
<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">
|
|
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">
|
|
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) => (
|
|
console.log("device.id und name:", device),
|
|
(
|
|
<option key={index} value={device.id}>
|
|
{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.map((poiTyp, index) => (
|
|
<option key={index} value={poiTyp.idPoiTyp}>
|
|
{poiTyp.name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
<button
|
|
type="button" // Use button type to prevent form submission
|
|
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>
|
|
</form>
|
|
);
|
|
};
|
|
|
|
export default PoiUpdateModal;
|