refactor: loadTDRChartData und loadLoopChartData in separate Utils-Dateien ausgelagert
- `loadTDRChartData.ts` in `utils` für die TDR-Datenverarbeitung erstellt - `loadLoopChartData.ts` in `utils` für die Schleifenmesskurvendaten erstellt - `Kue705FO.tsx` angepasst, um die Funktionen auszulagern und Code sauberer zu halten
This commit is contained in:
ISA
@@ -14,6 +14,11 @@ import {
|
||||
} from "../../redux/slices/variablesSlice";
|
||||
import TDRPopup from "../modales/kueModal/TDRPopup";
|
||||
import { createLoopChart, createTDRChart } from "../../utils/chartUtils";
|
||||
import { getAlarmDisplayText } from "../../utils/alarmUtils";
|
||||
import { goLoop } from "../../utils/goLoop";
|
||||
import { goTDR } from "../../utils/goTDR";
|
||||
import { loadTDRChartData } from "../../utils/loadTDRChartData";
|
||||
import { loadLoopChartData } from "../../utils/loadLoopChartData";
|
||||
|
||||
const Kue705FO: React.FC<Kue705FOProps> = ({
|
||||
isolationswert,
|
||||
@@ -84,11 +89,12 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
|
||||
const handleOpenChartModal = () => {
|
||||
setShowChartModal(true);
|
||||
if (activeButton === "TDR") {
|
||||
loadTDRChartData();
|
||||
loadTDRChartData(selectedFileName, setChartData);
|
||||
} else {
|
||||
loadLoopChartData();
|
||||
loadLoopChartData(slotIndex, setChartData);
|
||||
}
|
||||
};
|
||||
|
||||
const handleButtonClick = (button: "Schleife" | "TDR") => {
|
||||
if (button === "Schleife") {
|
||||
setActiveButton("Schleife");
|
||||
@@ -105,78 +111,12 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
|
||||
}
|
||||
};
|
||||
|
||||
// Funktion für die Schleifenmessung
|
||||
const goLoop = () => {
|
||||
let slot: number = slotIndex;
|
||||
|
||||
if (slot >= 32) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Entfernt führende Nullen, falls vorhanden
|
||||
let slotFormat = slot < 10 ? `${slot}` : `${slot}`;
|
||||
|
||||
setLoading(true); // Setze den Ladezustand auf true
|
||||
alert(`Schleifenmessung wird für Slot ${slot + 1} gestartet...`);
|
||||
|
||||
fetch(`/CPL?kabelueberwachung.html&KS_${slotFormat}=1&slot=${slot}`, {
|
||||
method: "GET",
|
||||
})
|
||||
.then((response) => {
|
||||
if (response.ok) {
|
||||
alert(`Schleifenmessung erfolgreich gestartet für Slot ${slot + 1}`);
|
||||
console.log("Schleifenmessung erfolgreich gestartet für Slot", slot);
|
||||
} else {
|
||||
alert("Fehler beim Starten der Schleifenmessung.");
|
||||
console.error("Fehler beim Senden der Schleifen-Anfrage");
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
alert("Ein Fehler ist aufgetreten.");
|
||||
console.error("Fehler:", error);
|
||||
})
|
||||
.finally(() => setLoading(false)); // Ladezustand zurücksetzen
|
||||
};
|
||||
|
||||
// Funktion für die TDR-Messung
|
||||
const goTDR = () => {
|
||||
//-------------------------------------------------
|
||||
let slot: number = slotIndex;
|
||||
|
||||
if (slot >= 32) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Entfernt führende Nullen, falls vorhanden
|
||||
let slotFormat = slot < 10 ? `${slot}` : `${slot}`;
|
||||
|
||||
setLoading(true);
|
||||
alert(`TDR wird für Slot ${slot + 1} gestartet...`);
|
||||
fetch(
|
||||
`/CPL?Service/Kabelueberwachung.html&KTT${slotFormat}=1&slot=${slot}`,
|
||||
{
|
||||
method: "GET",
|
||||
}
|
||||
)
|
||||
.then((response) => {
|
||||
if (response.ok) {
|
||||
alert(`TDR erfolgreich gestartet für Slot ${slot + 1}`);
|
||||
console.log("TDR erfolgreich gestartet für Slot", slot + 1);
|
||||
} else {
|
||||
console.error("Fehler beim Senden der TDR-Anfrage");
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Fehler:", error);
|
||||
})
|
||||
.finally(() => setLoading(false));
|
||||
};
|
||||
// Bestimme, welche Funktion ausgeführt wird, basierend auf dem aktiven Button
|
||||
// Funktion aufrufen in handleRefreshClick
|
||||
const handleRefreshClick = () => {
|
||||
if (activeButton === "Schleife") {
|
||||
goLoop(); // Wenn Schleife aktiv ist, starte goLoop
|
||||
goLoop(slotIndex, setLoading);
|
||||
} else if (activeButton === "TDR") {
|
||||
goTDR(); // Wenn TDR aktiv ist, starte goTDR
|
||||
goTDR(slotIndex, setLoading);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -197,49 +137,6 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
|
||||
(state: RootState) => state.variables.selectedFileName
|
||||
);
|
||||
|
||||
const loadTDRChartData = () => {
|
||||
if (!selectedFileName) {
|
||||
console.error("Kein Dateiname in Redux gespeichert.");
|
||||
return;
|
||||
}
|
||||
|
||||
const yearFolder = `Year_${jahr.toString().slice(-2)}`;
|
||||
const monthFolder = `Month_${monat.toString().padStart(2, "0")}`;
|
||||
|
||||
//const filePath = `/CPLmockData/LastTDR/kue_01/${yearFolder}/${monthFolder}/${selectedFileName}`;
|
||||
const filePath = `/CPLmockData/LastTDR/kue_01/Year_24/Month_01/02-1911.json`;
|
||||
|
||||
fetch(filePath)
|
||||
.then((response) => response.json())
|
||||
.then((data) => {
|
||||
console.log("Geladene Daten:", data);
|
||||
setChartData(data);
|
||||
createTDRChart(data);
|
||||
})
|
||||
.catch((error) =>
|
||||
console.error("Fehler beim Laden der TDR-Daten:", error)
|
||||
);
|
||||
};
|
||||
|
||||
const loadLoopChartData = () => {
|
||||
const slot = slotIndex;
|
||||
const environment = process.env.NODE_ENV || "production";
|
||||
const fileData =
|
||||
environment === "production"
|
||||
? `/CPL?/CPL/4000values/slot${slot}.json`
|
||||
: `/CPLmockData/4000values/slot${slot}.json`;
|
||||
|
||||
fetch(fileData)
|
||||
.then((response) => response.json())
|
||||
.then((data) => {
|
||||
setChartData(data);
|
||||
createLoopChart(data, "Schleifenmesskurve");
|
||||
})
|
||||
.catch((error) =>
|
||||
console.error("Fehler beim Laden der Schleifenmesskurvendaten:", error)
|
||||
);
|
||||
};
|
||||
|
||||
// Füge das Plugin zu Chart.js hinzu
|
||||
useEffect(() => {
|
||||
// Lade das Plugin nur, wenn `window` verfügbar ist
|
||||
@@ -282,54 +179,23 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
|
||||
// Funktion zum Aktualisieren der Anzeige basierend auf dem Alarmstatus mit Icon und Blinken
|
||||
// Funktion zum Aktualisieren der Anzeige basierend auf dem Alarmstatus mit Icon und Blinken
|
||||
useEffect(() => {
|
||||
let intervalId: NodeJS.Timeout | undefined;
|
||||
|
||||
// Funktion zum Blinken des Textes oder Icons
|
||||
const setBlinkingText = (text: string | JSX.Element) => {
|
||||
// Setze den Text direkt beim ersten Aufruf, ohne auf das Intervall zu warten
|
||||
setIsoDisplayValue(text);
|
||||
|
||||
// Starte dann das Intervall
|
||||
intervalId = setInterval(() => {
|
||||
setIsoDisplayValue((prevValue) =>
|
||||
prevValue === text ? (
|
||||
<i
|
||||
className="bi bi-exclamation-triangle"
|
||||
style={{ fontSize: "24px", color: "red" }}
|
||||
></i>
|
||||
) : (
|
||||
text
|
||||
)
|
||||
);
|
||||
}, 5000); // Intervall für das Blinken
|
||||
};
|
||||
|
||||
// Priorisierte Alarmanzeige
|
||||
if (Number(kuePSTmMinus96V?.[slotIndex]) === 1) {
|
||||
clearInterval(intervalId); // Stoppt das vorherige Intervall, falls aktiv
|
||||
setBlinkingText("PST-M prüfen");
|
||||
} else if (Number(kueCableBreak?.[slotIndex]) === 1) {
|
||||
clearInterval(intervalId);
|
||||
setBlinkingText(isoDisplayText);
|
||||
} else if (Number(kueGroundFault?.[slotIndex]) === 1) {
|
||||
clearInterval(intervalId);
|
||||
setBlinkingText(groundFaultDisplayText);
|
||||
} else if (Number(kueAlarm1?.[slotIndex]) === 1) {
|
||||
clearInterval(intervalId);
|
||||
setBlinkingText(isoFaultDisplayText);
|
||||
} else if (Number(kueAlarm2?.[slotIndex]) === 1) {
|
||||
clearInterval(intervalId);
|
||||
setBlinkingText(loopFaultDisplayText);
|
||||
} else if (Number(kueOverflow?.[slotIndex]) === 1) {
|
||||
clearInterval(intervalId);
|
||||
setIsoDisplayValue(isoGreaterThan200);
|
||||
} else {
|
||||
clearInterval(intervalId);
|
||||
setIsoDisplayValue(isolationswert.toString()); // Standardanzeige ohne Alarm
|
||||
}
|
||||
|
||||
// Cleanup bei Änderungen des Status oder Schließen des Effekts
|
||||
return () => clearInterval(intervalId);
|
||||
setIsoDisplayValue(
|
||||
getAlarmDisplayText(
|
||||
slotIndex,
|
||||
kuePSTmMinus96V,
|
||||
kueCableBreak,
|
||||
kueGroundFault,
|
||||
kueAlarm1,
|
||||
kueAlarm2,
|
||||
kueOverflow,
|
||||
isolationswert,
|
||||
isoDisplayText,
|
||||
groundFaultDisplayText,
|
||||
isoFaultDisplayText,
|
||||
loopFaultDisplayText,
|
||||
isoGreaterThan200
|
||||
)
|
||||
);
|
||||
}, [
|
||||
slotIndex,
|
||||
isolationswert,
|
||||
@@ -345,7 +211,6 @@ const Kue705FO: React.FC<Kue705FOProps> = ({
|
||||
kueAlarm2,
|
||||
kueOverflow,
|
||||
]);
|
||||
|
||||
//---------------------------------------------------
|
||||
|
||||
// Effekt, um Modulnamen zu aktualisieren, wenn sich der Prop ändert
|
||||
|
||||
31
utils/alarmUtils.ts
Normal file
31
utils/alarmUtils.ts
Normal file
@@ -0,0 +1,31 @@
|
||||
export const getAlarmDisplayText = (
|
||||
slotIndex: number,
|
||||
kuePSTmMinus96V: number[] | undefined,
|
||||
kueCableBreak: number[] | undefined,
|
||||
kueGroundFault: number[] | undefined,
|
||||
kueAlarm1: number[] | undefined,
|
||||
kueAlarm2: number[] | undefined,
|
||||
kueOverflow: number[] | undefined,
|
||||
isolationswert: string | number,
|
||||
isoDisplayText: string,
|
||||
groundFaultDisplayText: string,
|
||||
isoFaultDisplayText: string,
|
||||
loopFaultDisplayText: string,
|
||||
isoGreaterThan200: string
|
||||
) => {
|
||||
if (Number(kuePSTmMinus96V?.[slotIndex]) === 1) {
|
||||
return "PST-M prüfen";
|
||||
} else if (Number(kueCableBreak?.[slotIndex]) === 1) {
|
||||
return isoDisplayText;
|
||||
} else if (Number(kueGroundFault?.[slotIndex]) === 1) {
|
||||
return groundFaultDisplayText;
|
||||
} else if (Number(kueAlarm1?.[slotIndex]) === 1) {
|
||||
return isoFaultDisplayText;
|
||||
} else if (Number(kueAlarm2?.[slotIndex]) === 1) {
|
||||
return loopFaultDisplayText;
|
||||
} else if (Number(kueOverflow?.[slotIndex]) === 1) {
|
||||
return isoGreaterThan200;
|
||||
} else {
|
||||
return isolationswert.toString();
|
||||
}
|
||||
};
|
||||
36
utils/goLoop.ts
Normal file
36
utils/goLoop.ts
Normal file
@@ -0,0 +1,36 @@
|
||||
export const goLoop = (
|
||||
slotIndex: number,
|
||||
setLoading: (loading: boolean) => void
|
||||
) => {
|
||||
if (slotIndex >= 32) {
|
||||
return;
|
||||
}
|
||||
|
||||
const slotFormat = slotIndex < 10 ? `${slotIndex}` : `${slotIndex}`;
|
||||
|
||||
setLoading(true);
|
||||
alert(`Schleifenmessung wird für Slot ${slotIndex + 1} gestartet...`);
|
||||
|
||||
fetch(`/CPL?kabelueberwachung.html&KS_${slotFormat}=1&slot=${slotIndex}`, {
|
||||
method: "GET",
|
||||
})
|
||||
.then((response) => {
|
||||
if (response.ok) {
|
||||
alert(
|
||||
`Schleifenmessung erfolgreich gestartet für Slot ${slotIndex + 1}`
|
||||
);
|
||||
console.log(
|
||||
"Schleifenmessung erfolgreich gestartet für Slot",
|
||||
slotIndex
|
||||
);
|
||||
} else {
|
||||
alert("Fehler beim Starten der Schleifenmessung.");
|
||||
console.error("Fehler beim Senden der Schleifen-Anfrage");
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
alert("Ein Fehler ist aufgetreten.");
|
||||
console.error("Fehler:", error);
|
||||
})
|
||||
.finally(() => setLoading(false));
|
||||
};
|
||||
32
utils/goTDR.ts
Normal file
32
utils/goTDR.ts
Normal file
@@ -0,0 +1,32 @@
|
||||
export const goTDR = (
|
||||
slotIndex: number,
|
||||
setLoading: (loading: boolean) => void
|
||||
) => {
|
||||
if (slotIndex >= 32) {
|
||||
return;
|
||||
}
|
||||
|
||||
const slotFormat = slotIndex < 10 ? `${slotIndex}` : `${slotIndex}`;
|
||||
|
||||
setLoading(true);
|
||||
alert(`TDR wird für Slot ${slotIndex + 1} gestartet...`);
|
||||
|
||||
fetch(
|
||||
`/CPL?Service/Kabelueberwachung.html&KTT${slotFormat}=1&slot=${slotIndex}`,
|
||||
{
|
||||
method: "GET",
|
||||
}
|
||||
)
|
||||
.then((response) => {
|
||||
if (response.ok) {
|
||||
alert(`TDR erfolgreich gestartet für Slot ${slotIndex + 1}`);
|
||||
console.log("TDR erfolgreich gestartet für Slot", slotIndex + 1);
|
||||
} else {
|
||||
console.error("Fehler beim Senden der TDR-Anfrage");
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Fehler:", error);
|
||||
})
|
||||
.finally(() => setLoading(false));
|
||||
};
|
||||
22
utils/loadLoopChartData.ts
Normal file
22
utils/loadLoopChartData.ts
Normal file
@@ -0,0 +1,22 @@
|
||||
import { createLoopChart } from "./chartUtils";
|
||||
|
||||
export const loadLoopChartData = (
|
||||
slotIndex: number,
|
||||
setChartData: (data: any) => void
|
||||
) => {
|
||||
const environment = process.env.NODE_ENV || "production";
|
||||
const fileData =
|
||||
environment === "production"
|
||||
? `/CPL?/CPL/4000values/slot${slotIndex}.json`
|
||||
: `/CPLmockData/4000values/slot${slotIndex}.json`;
|
||||
|
||||
fetch(fileData)
|
||||
.then((response) => response.json())
|
||||
.then((data) => {
|
||||
setChartData(data);
|
||||
createLoopChart(data, "Schleifenmesskurve");
|
||||
})
|
||||
.catch((error) =>
|
||||
console.error("Fehler beim Laden der Schleifenmesskurvendaten:", error)
|
||||
);
|
||||
};
|
||||
27
utils/loadTDRChartData.ts
Normal file
27
utils/loadTDRChartData.ts
Normal file
@@ -0,0 +1,27 @@
|
||||
import { createTDRChart } from "./chartUtils";
|
||||
|
||||
export const loadTDRChartData = (
|
||||
selectedFileName: string | null,
|
||||
setChartData: (data: any) => void
|
||||
) => {
|
||||
if (!selectedFileName) {
|
||||
console.error("Kein Dateiname in Redux gespeichert.");
|
||||
return;
|
||||
}
|
||||
|
||||
const yearFolder = `Year_${new Date().getFullYear().toString().slice(-2)}`;
|
||||
const monthFolder = `Month_${(new Date().getMonth() + 1)
|
||||
.toString()
|
||||
.padStart(2, "0")}`;
|
||||
|
||||
const filePath = `/CPLmockData/LastTDR/kue_01/${yearFolder}/${monthFolder}/${selectedFileName}`;
|
||||
|
||||
fetch(filePath)
|
||||
.then((response) => response.json())
|
||||
.then((data) => {
|
||||
console.log("Geladene TDR-Daten:", data);
|
||||
setChartData(data);
|
||||
createTDRChart(data);
|
||||
})
|
||||
.catch((error) => console.error("Fehler beim Laden der TDR-Daten:", error));
|
||||
};
|
||||
Reference in New Issue
Block a user