feat: implement chart modal with report functionality for cable monitoring
- Add chartTitle state management to kabelueberwachungChartSlice with "Messkurve"/"Meldungen" options - Update IsoChartActionBar dropdown to show current chartTitle value with proper binding - Implement conditional rendering in IsoChartView between IsoMeasurementChart and Report components - Create Report.tsx component using same data structure as MeldungenView (Meldung type) - Add slot-based message filtering for specific cable monitoring units (KÜ) - Integrate getMessagesThunk for consistent data loading across components - Style Report component with consistent table layout, German date formatting, and Littwin branding - Enable seamless switching between measurement chart and filtered messages in modal
This commit is contained in:
ISA
@@ -0,0 +1,175 @@
|
||||
"use client"; // Report.tsx
|
||||
|
||||
import React, { useState, useEffect, useCallback } from "react";
|
||||
import { useSelector, useDispatch } from "react-redux";
|
||||
import { RootState, AppDispatch } from "@/redux/store";
|
||||
import { getMessagesThunk } from "@/redux/thunks/getMessagesThunk";
|
||||
|
||||
// Gleiche Datenstruktur wie MeldungenView
|
||||
type Meldung = {
|
||||
t: string; // timestamp
|
||||
s: number; // status/priority
|
||||
c: string; // color
|
||||
m: string; // message
|
||||
i: string; // source/info
|
||||
v: string; // value/status text
|
||||
};
|
||||
|
||||
const Report: React.FC = () => {
|
||||
const dispatch = useDispatch<AppDispatch>();
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [filteredMessages, setFilteredMessages] = useState<Meldung[]>([]);
|
||||
|
||||
const { vonDatum, bisDatum, slotNumber } = useSelector(
|
||||
(state: RootState) => state.kabelueberwachungChartSlice
|
||||
);
|
||||
|
||||
// Nachrichten aus dem globalen Store
|
||||
const messages = useSelector((state: RootState) => state.messages.data);
|
||||
|
||||
// Nachrichten für den aktuellen Slot filtern
|
||||
const filterMessagesForSlot = useCallback(
|
||||
(allMessages: Meldung[], slot: number) => {
|
||||
if (slot === null) return [];
|
||||
|
||||
// Filter basierend auf der Quelle (i-Feld)
|
||||
return allMessages.filter((msg: Meldung) => {
|
||||
// Verschiedene mögliche Slot-Identifikationen
|
||||
const slotIdentifiers = [
|
||||
`CableLine${slot + 1}`,
|
||||
`Slot${slot + 1}`,
|
||||
`KÜ${slot + 1}`,
|
||||
`Kue${slot + 1}`,
|
||||
`Cable${slot + 1}`,
|
||||
`Line${slot + 1}`,
|
||||
];
|
||||
|
||||
return slotIdentifiers.some((identifier) => msg.i.includes(identifier));
|
||||
});
|
||||
},
|
||||
[]
|
||||
);
|
||||
|
||||
// Daten laden
|
||||
const loadMessages = useCallback(async () => {
|
||||
if (slotNumber === null) return;
|
||||
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
// Redux Thunk verwenden (wie in MeldungenView)
|
||||
await dispatch(
|
||||
getMessagesThunk({
|
||||
fromDate: vonDatum,
|
||||
toDate: bisDatum,
|
||||
})
|
||||
).unwrap();
|
||||
} catch (err) {
|
||||
console.error("Fehler beim Laden der Berichte:", err);
|
||||
setError("Fehler beim Laden der Meldungen.");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [dispatch, vonDatum, bisDatum, slotNumber]);
|
||||
|
||||
// Filter anwenden wenn sich Nachrichten oder Slot ändern
|
||||
useEffect(() => {
|
||||
if (slotNumber !== null && messages.length > 0) {
|
||||
const filtered = filterMessagesForSlot(messages, slotNumber);
|
||||
setFilteredMessages(filtered);
|
||||
} else {
|
||||
setFilteredMessages([]);
|
||||
}
|
||||
}, [messages, slotNumber, filterMessagesForSlot]);
|
||||
|
||||
// Automatisches Laden beim Mount und bei Änderungen
|
||||
useEffect(() => {
|
||||
if (slotNumber !== null) {
|
||||
loadMessages();
|
||||
}
|
||||
}, [loadMessages, slotNumber]);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-64">
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="w-4 h-4 border-2 border-t-2 border-blue-500 rounded-full animate-spin" />
|
||||
<span>Lade Meldungen...</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return <div className="text-center text-red-500 p-4">{error}</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="w-full h-full flex flex-col">
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<h4 className="text-lg font-semibold">
|
||||
Meldungen für KÜ {slotNumber !== null ? slotNumber + 1 : "-"}
|
||||
</h4>
|
||||
<button
|
||||
onClick={loadMessages}
|
||||
className="px-3 py-1 bg-littwin-blue text-white rounded text-sm hover:bg-blue-600"
|
||||
>
|
||||
Aktualisieren
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{filteredMessages.length === 0 ? (
|
||||
<div className="text-center text-gray-500 py-8">
|
||||
Keine Meldungen im gewählten Zeitraum gefunden.
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex-1 overflow-auto max-h-[80vh]">
|
||||
<table className="min-w-full border text-sm">
|
||||
<thead className="bg-gray-100 text-left sticky top-0 z-10">
|
||||
<tr>
|
||||
<th className="p-2 border">Prio</th>
|
||||
<th className="p-2 border">Zeitstempel</th>
|
||||
<th className="p-2 border">Quelle</th>
|
||||
<th className="p-2 border">Meldung</th>
|
||||
<th className="p-2 border">Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{filteredMessages.map((msg, index) => (
|
||||
<tr key={index} className="hover:bg-gray-200">
|
||||
<td className="border p-2">
|
||||
<div
|
||||
className="w-4 h-4 rounded"
|
||||
style={{ backgroundColor: msg.c }}
|
||||
></div>
|
||||
</td>
|
||||
<td className="border p-2">
|
||||
{new Date(msg.t).toLocaleString("de-DE", {
|
||||
day: "2-digit",
|
||||
month: "2-digit",
|
||||
year: "numeric",
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
second: "2-digit",
|
||||
})}
|
||||
</td>
|
||||
<td className="border p-2">{msg.i}</td>
|
||||
<td className="border p-2">{msg.m}</td>
|
||||
<td className="border p-2">{msg.v}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="mt-4 text-sm text-gray-500 text-center">
|
||||
{filteredMessages.length} Meldung(en) gefunden
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Report;
|
||||
Reference in New Issue
Block a user