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:
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user