feat: Einstellungs-Popup für analoge Eingänge hinzugefügt

- Modal (Popup) für Einstellungen hinzugefügt
- ⚙️-Button öffnet das Einstellungsfenster für den jeweiligen Eingang
- Eingabefelder für Bezeichnung, uG, uW, oW, oG, Faktor, Offset, Filterzeit & Datenlogger integriert
- -Button zum Schließen des Modals hinzugefügt
- 💾-Button für zukünftige Speicherfunktion vorbereitet
- UI optimiert für bessere Benutzerfreundlichkeit
This commit is contained in:
ISA
2025-03-17 10:30:19 +01:00
parent c800b0e82a
commit 2c88ef3205
2 changed files with 140 additions and 9 deletions

View File

@@ -1,35 +1,44 @@
"use client"; // components/main/analogeEingaenge/AnalogeEingaengeTable.tsx
import React from "react";
import React, { useState } from "react";
import { useSelector } from "react-redux";
import { RootState } from "../../../redux/store";
import { useFetchAnalogeEingaenge } from "./hooks/useFetchAnalogeEingaenge"; // ✅ Hook importieren
import { useFetchAnalogeEingaenge } from "./hooks/useFetchAnalogeEingaenge";
export default function AnalogeEingaengeTable() {
useFetchAnalogeEingaenge(); // ✅ Hook aufrufen (lädt Daten und aktualisiert sie regelmäßig)
useFetchAnalogeEingaenge();
const analogeEingaenge = useSelector(
(state: RootState) => state.analogeEingaenge
);
console.log("Aktuelle Redux-Daten:", analogeEingaenge); // 🔍 Prüfen, ob Redux wirklich aktualisiert wird
console.log("Aktuelle Redux-Daten:", analogeEingaenge);
// State für das geöffnete Modal
const [selectedEingang, setSelectedEingang] = useState(null);
const openSettingsModal = (eingang: any) => {
setSelectedEingang(eingang);
};
const closeSettingsModal = () => {
setSelectedEingang(null);
};
return (
<div className="w-full">
<div className="bg-white shadow-lg rounded-lg p-4 border border-gray-200">
<h2 className="text-lg md:text-xl font-semibold mb-4 text-gray-700">
Analoge Eingänge
</h2>
<div className="overflow-x-auto">
<table className="w-full border-collapse border border-gray-300 text-sm md:text-base">
<thead>
<tr className="bg-gray-100 text-gray-700">
<th className="border p-3 text-left">Eingang</th>
<th className="border p-1 text-left">Eingang</th>
<th className="border p-3 text-left">Wert</th>
<th className="border p-3 text-left">Bezeichnung</th>
<th className="border p-3 text-center">uW</th>
<th className="border p-3 text-center">uG</th>
<th className="border p-3 text-center">oW</th>
<th className="border p-3 text-center">oG</th>
<th className="border p-3 text-center">Einstellung</th>
</tr>
</thead>
<tbody>
@@ -53,12 +62,134 @@ export default function AnalogeEingaengeTable() {
<td className="border p-3 text-center">
{eingang.oG ? "🟢" : "⚪"}
</td>
<td className="border p-3 text-center">
<button
onClick={() => openSettingsModal(eingang)}
className="bg-blue-500 text-white text-xs px-2 py-1 rounded hover:bg-blue-600 transition"
>
</button>
</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
{/* Modal */}
{selectedEingang && (
<div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50">
<div className="bg-white p-6 rounded-lg shadow-lg w-3/4 max-w-3xl">
<div className="flex justify-between items-center border-b pb-2">
<h2 className="text-lg font-bold text-gray-700">
Analoge Eingänge Einstellungen
</h2>
<button onClick={closeSettingsModal} className="text-gray-500">
</button>
</div>
<div className="mt-4">
<label className="block text-sm text-gray-700">Eingang:</label>
<input
type="text"
className="w-full border px-2 py-1 rounded"
value={selectedEingang.id}
readOnly
/>
<label className="block text-sm text-gray-700 mt-2">
Bezeichnung:
</label>
<input
type="text"
className="w-full border px-2 py-1 rounded"
defaultValue={selectedEingang.name}
/>
<label className="block text-sm text-gray-700 mt-2">Typ:</label>
<input
type="text"
className="w-full border px-2 py-1 rounded"
defaultValue="Spg."
readOnly
/>
<div className="grid grid-cols-4 gap-2 mt-4">
<div>
<label className="block text-sm text-gray-700">uG:</label>
<input
type="number"
className="w-full border px-2 py-1 rounded"
/>
</div>
<div>
<label className="block text-sm text-gray-700">uW:</label>
<input
type="number"
className="w-full border px-2 py-1 rounded"
/>
</div>
<div>
<label className="block text-sm text-gray-700">oW:</label>
<input
type="number"
className="w-full border px-2 py-1 rounded"
/>
</div>
<div>
<label className="block text-sm text-gray-700">oG:</label>
<input
type="number"
className="w-full border px-2 py-1 rounded"
/>
</div>
</div>
<div className="grid grid-cols-3 gap-2 mt-4">
<div>
<label className="block text-sm text-gray-700">Faktor:</label>
<input
type="number"
className="w-full border px-2 py-1 rounded"
/>
</div>
<div>
<label className="block text-sm text-gray-700">Offset:</label>
<input
type="number"
className="w-full border px-2 py-1 rounded"
/>
</div>
<div>
<label className="block text-sm text-gray-700">
Filterzeit:
</label>
<input
type="number"
className="w-full border px-2 py-1 rounded"
/>
</div>
</div>
<label className="block text-sm text-gray-700 mt-2">
Datenlogger:
</label>
<select className="w-full border px-2 py-1 rounded">
<option>aus</option>
<option>ein</option>
</select>
</div>
<div className="flex justify-end mt-4">
<button className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
💾 Speichern
</button>
</div>
</div>
</div>
)}
</div>
);
}

View File

@@ -6,5 +6,5 @@
2: Patch oder Hotfix (Bugfixes oder kleine Änderungen).
*/
const webVersion = "1.6.132";
const webVersion = "1.6.133";
export default webVersion;