ISO, RSL, TDR, und KVZ Modal nach Wünsch angepasst für KÜs
This commit is contained in:
@@ -234,7 +234,11 @@ const IsoChartView: React.FC<IsoChartViewProps> = ({
|
||||
</div>
|
||||
<IsoChartActionBar />
|
||||
<div style={{ flex: 1, height: "90%" }}>
|
||||
{chartTitle === "Messkurve" ? <IsoMeasurementChart /> : <Report />}
|
||||
{chartTitle === "Messkurve" ? (
|
||||
<IsoMeasurementChart />
|
||||
) : (
|
||||
<Report moduleType="ISO" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</ReactModal>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
"use client"; // Report.tsx
|
||||
|
||||
import React, { useState, useEffect, useCallback } from "react";
|
||||
import React, { useState, useEffect, useCallback, useMemo } from "react";
|
||||
import { useSelector, useDispatch } from "react-redux";
|
||||
import { RootState, AppDispatch } from "@/redux/store";
|
||||
import { getMessagesThunk } from "@/redux/thunks/getMessagesThunk";
|
||||
@@ -15,7 +15,13 @@ type Meldung = {
|
||||
v: string; // value/status text
|
||||
};
|
||||
|
||||
const Report: React.FC = () => {
|
||||
type ModuleType = "ISO" | "TDR" | "RSL" | "KVZ";
|
||||
|
||||
interface ReportProps {
|
||||
moduleType: ModuleType;
|
||||
}
|
||||
|
||||
const Report: React.FC<ReportProps> = ({ moduleType }) => {
|
||||
const dispatch = useDispatch<AppDispatch>();
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
@@ -109,6 +115,24 @@ const Report: React.FC = () => {
|
||||
[]
|
||||
);
|
||||
|
||||
// Modul-spezifische Schlüsselwörter (alle lowercase, ö => oe normalisiert)
|
||||
const moduleKeywordMap = useMemo<Record<ModuleType, string[]>>(
|
||||
() => ({
|
||||
ISO: ["modul online", "aderbruch", "erdschluss", "isofehler"],
|
||||
TDR: ["modul online", "tdr aktiv", "tdr entfernung"],
|
||||
RSL: ["modul online", "aderbruch", "schleifenfehler"],
|
||||
KVZ: ["modul online", "aderbruch", "kvz störung", "kvz stoerung"],
|
||||
}),
|
||||
[]
|
||||
);
|
||||
|
||||
const normalize = (text: string) =>
|
||||
text
|
||||
.toLowerCase()
|
||||
.replace(/ö/g, "oe")
|
||||
.replace(/ä/g, "ae")
|
||||
.replace(/ü/g, "ue");
|
||||
|
||||
// Daten laden
|
||||
const loadMessages = useCallback(async () => {
|
||||
if (slotNumber === null) return;
|
||||
@@ -135,12 +159,24 @@ const Report: React.FC = () => {
|
||||
// Filter anwenden wenn sich Nachrichten oder Slot ändern
|
||||
useEffect(() => {
|
||||
if (slotNumber !== null && messages.length > 0) {
|
||||
const filtered = filterMessagesForSlot(messages, slotNumber);
|
||||
setFilteredMessages(filtered);
|
||||
const slotFiltered = filterMessagesForSlot(messages, slotNumber);
|
||||
// Modul-Filter anwenden
|
||||
const keywords = moduleKeywordMap[moduleType].map(normalize);
|
||||
const moduleFiltered = slotFiltered.filter((m) => {
|
||||
const msgNorm = normalize(m.m);
|
||||
return keywords.some((kw) => msgNorm.includes(kw));
|
||||
});
|
||||
setFilteredMessages(moduleFiltered);
|
||||
} else {
|
||||
setFilteredMessages([]);
|
||||
}
|
||||
}, [messages, slotNumber, filterMessagesForSlot]);
|
||||
}, [
|
||||
messages,
|
||||
slotNumber,
|
||||
filterMessagesForSlot,
|
||||
moduleType,
|
||||
moduleKeywordMap,
|
||||
]);
|
||||
|
||||
// Automatisches Laden beim Mount und bei Änderungen
|
||||
useEffect(() => {
|
||||
@@ -169,8 +205,8 @@ const Report: React.FC = () => {
|
||||
{filteredMessages.length === 0 ? (
|
||||
<div className="text-center text-gray-500 ">
|
||||
Keine Meldungen für CableLine
|
||||
{slotNumber !== null ? slotNumber + 1 : "-"} im gewählten Zeitraum
|
||||
gefunden.
|
||||
{slotNumber !== null ? slotNumber + 1 : "-"} (Filter: {moduleType}) im
|
||||
gewählten Zeitraum gefunden.
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex-1 overflow-auto ">
|
||||
@@ -213,9 +249,9 @@ const Report: React.FC = () => {
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="mt-4 text-sm text-gray-500 text-center mt-4">
|
||||
{filteredMessages.length} Meldung(en) gefunden
|
||||
</div>
|
||||
{/* <div className="mt-4 text-sm text-gray-500 text-center mt-4">
|
||||
{filteredMessages.length} Meldung(en) (Filter: {moduleType}) gefunden
|
||||
</div> */}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -34,6 +34,9 @@ const KVZChartView: React.FC<KVZChartViewProps> = ({
|
||||
const isFullScreen = useSelector(
|
||||
(state: RootState) => state.kabelueberwachungChartSlice.isFullScreen
|
||||
);
|
||||
const slotNumber = useSelector(
|
||||
(state: RootState) => state.kabelueberwachungChartSlice.slotNumber
|
||||
);
|
||||
|
||||
// Beim Öffnen Slot setzen (damit konsistent zu anderen Modals)
|
||||
useEffect(() => {
|
||||
@@ -129,14 +132,20 @@ const KVZChartView: React.FC<KVZChartViewProps> = ({
|
||||
<h3 className="text-lg font-semibold mb-1">KVz Zustände & Meldungen</h3>
|
||||
|
||||
{/* LED Bereich */}
|
||||
<div className="w-full flex justify-start mb-4">
|
||||
<div className="w-full flex justify-between mb-4">
|
||||
<div className="flex items-center">
|
||||
<label className="text-sm font-semibold">
|
||||
KÜ {slotNumber !== null ? slotNumber + 1 : "-"}
|
||||
</label>
|
||||
</div>
|
||||
<div style={{ width: "12rem" }}>
|
||||
<FallSensors slotIndex={slotIndex} />
|
||||
</div>
|
||||
<div></div>
|
||||
</div>
|
||||
{/* Meldungen Bereich */}
|
||||
<div className="flex-1 border rounded bg-white overflow-hidden">
|
||||
<Report />
|
||||
<Report moduleType="KVZ" />
|
||||
</div>
|
||||
</div>
|
||||
</ReactModal>
|
||||
|
||||
@@ -235,7 +235,11 @@ const LoopChartView: React.FC<LoopChartViewProps> = ({
|
||||
</div>
|
||||
<LoopChartActionBar />
|
||||
<div style={{ flex: 1, height: "90%" }}>
|
||||
{chartTitle === "Messkurve" ? <LoopMeasurementChart /> : <Report />}
|
||||
{chartTitle === "Messkurve" ? (
|
||||
<LoopMeasurementChart />
|
||||
) : (
|
||||
<Report moduleType="RSL" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</ReactModal>
|
||||
|
||||
@@ -225,7 +225,7 @@ const TDRChartView: React.FC<TDRChartViewProps> = ({
|
||||
{chartTitle === "Messkurve" ? (
|
||||
<TDRChart isFullScreen={isFullScreen} />
|
||||
) : (
|
||||
<Report />
|
||||
<Report moduleType="TDR" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user