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

19
components/main/analogeEingaenge/AnalogInputsChart.tsx
View File

@@ -1,4 +1,5 @@
"use client"; // components/main/analogeEingaenge/AnalogInputsChart.tsx
"use client";
// components/main/analogeEingaenge/AnalogInputsChart.tsx
import React from "react";
import { useSelector } from "react-redux";
import { RootState } from "../../../redux/store";
@@ -17,17 +18,15 @@ export default function AnalogInputsChart() {
(state: RootState) => state.analogeEingaengeSlice
);
// Daten für das Diagramm vorbereiten
const chartData = Object.values(analogInputs).map((input) => ({
name: `Input ${input.id}`,
value: input.value ?? 0, // Falls kein Wert vorhanden ist, wird 0 gesetzt
}));
const chartData = Object.values(analogInputs)
.filter((input) => input?.id !== null && input?.id !== undefined)
.map((input) => ({
name: `Eingang ${input.id}`,
Wert: input.value ?? 0,
}));
return (
<div className="w-full h-[350px] bg-white shadow-md rounded-lg p-4 border border-gray-200">
<h3 className="text-sm font-semibold mb-2 text-gray-700">
Analog Inputs Chart
</h3>
<ResponsiveContainer width="100%" height="100%">
<LineChart
data={chartData}
@@ -39,7 +38,7 @@ export default function AnalogInputsChart() {
<Tooltip />
<Line
type="monotone"
dataKey="value"
dataKey="Wert"
stroke="#4A90E2"
strokeWidth={2}
/>

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">