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

fix: Anzeige der analogen Eingänge auf 8 Einträge beschränkt und Chart korrigiert

Browse Source 
- Tabelle filtert nun korrekt auf echte analoge Eingänge (ID vorhanden)
- Diagramm zeigt nur echte analoge Eingänge (ID vorhanden)
- Leere oder ungültige Einträge werden nicht mehr angezeigt
- Konsistente Darstellung in Tabelle und Chart
This commit is contained in:
ISA
2025-04-28 11:39:53 +02:00
parent db3ccf06c8
commit 7fead4cc39
8 changed files with 106 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
components/main/analogeEingaenge/AnalogeEingaengeTable.tsx
View File

@@ -1,4 +1,5 @@
"use client"; // components/main/analogeEingaenge/AnalogeEingaengeTable.tsx
"use client";
// components/main/analogeEingaenge/AnalogeEingaengeTable.tsx
import React, { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { RootState, AppDispatch } from "../../../redux/store";
@@ -8,14 +9,14 @@ export default function AnalogeEingaengeTable() {
const dispatch = useDispatch<AppDispatch>();
useEffect(() => {
dispatch(fetchAnalogeEingaengeThunk()); // ✅ Holt die API-Daten nur im Client
dispatch(fetchAnalogeEingaengeThunk());
}, [dispatch]);
const analogeEingaenge = useSelector(
(state: RootState) => state.analogeEingaengeSlice
);
const [selectedEingang, setSelectedEingang] = useState(null);
const [selectedEingang, setSelectedEingang] = useState<any>(null);
const openSettingsModal = (eingang: any) => {
setSelectedEingang(eingang);
@@ -35,49 +36,32 @@ export default function AnalogeEingaengeTable() {
<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>
{Object.values(analogeEingaenge).map((eingang, index) => (
<tr
key={index}
className="text-gray-700 hover:bg-gray-50 transition"
>
<td className="border p-3">{eingang.id ?? "-"}</td>
<td className="border p-3">{eingang.value ?? "-"}</td>
<td className="border p-3">{eingang.name || "----"}</td>
{/*
<td className="border p-3 text-center">
{eingang.uW ? "🟢" : "⚪"}
</td>
<td className="border p-3 text-center">
{eingang.uG ? "🟢" : "⚪"}
</td>
<td className="border p-3 text-center">
{eingang.oW ? "🟠" : "⚪"}
</td>
<td className="border p-3 text-center">
{eingang.oG ? "🟢" : "⚪"}
</td>
*/}
<td className="border p-3 text-center">
<button
onClick={() => openSettingsModal(eingang)}
className=" text-white text-xs px-2 py-1 rounded hover:bg-blue-500 transition"
>
⚙️
</button>
</td>
</tr>
))}
{Object.values(analogeEingaenge)
.filter(
(eingang) => eingang?.id !== null && eingang?.id !== undefined
)
.map((eingang, index) => (
<tr
key={index}
className="text-gray-700 hover:bg-gray-50 transition"
>
<td className="border p-3">{eingang.id ?? "-"}</td>
<td className="border p-3">{eingang.value ?? "-"}</td>
<td className="border p-3">{eingang.name || "----"}</td>
<td className="border p-3 text-center">
<button
onClick={() => openSettingsModal(eingang)}
className="text-white bg-blue-500 hover:bg-blue-600 text-xs px-2 py-1 rounded transition"
>
⚙️
</button>
</td>
</tr>
))}
</tbody>
</table>
</div>
@@ -102,12 +86,12 @@ export default function AnalogeEingaengeTable() {
<div>
<strong>Einheit:</strong>
</div>
<div>{selectedEingang.einheit}</div>
<div>{selectedEingang.unit}</div>
<div>
<strong>Faktor:</strong>
</div>
<div>{selectedEingang.faktor}</div>
<div>{selectedEingang.factor}</div>
<div>
<strong>Offset:</strong>
@@ -117,12 +101,12 @@ export default function AnalogeEingaengeTable() {
<div>
<strong>Gewichtung:</strong>
</div>
<div>{selectedEingang.gewichtung}</div>
<div>{selectedEingang.weighting}</div>
<div>
<strong>Loggerinterval:</strong>
<strong>Logger-Intervall:</strong>
</div>
<div>{selectedEingang.loggerinterval} Minuten</div>
<div>{selectedEingang.loggerInterval} Minuten</div>
</div>
<div className="flex justify-end mt-6">