Kabelüberwachung liest aus Redux
This commit is contained in:
ISA
@@ -2,232 +2,108 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import Kue705FO from "../components/modules/Kue705FO";
|
||||
import { loadWindowVariables } from "../utils/loadWindowVariables";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import { setVariables } from "../store/variablesSlice";
|
||||
//import { loadWindowVariables } from "../utils/loadWindowVariables";
|
||||
|
||||
function Kabelueberwachung() {
|
||||
const router = useRouter();
|
||||
const [activeRack, setActiveRack] = useState(1); // Track the active rack
|
||||
const [kueIso, setKueIso] = useState([]); // State to store isolation values
|
||||
const [kueID, setKueID] = useState([]); // State to store the KUE names
|
||||
const [schleifenwiderstand, setSchleifenwiderstand] = useState([]); // State to store the resistance values
|
||||
const [kueOnline, setKueOnline] = useState([]); // State to store the module status
|
||||
const [alarmStatus, setAlarmStatus] = useState([]); // State to store the alarm status
|
||||
const dispatch = useDispatch();
|
||||
const [activeRack, setActiveRack] = useState(1); // Aktives Rack
|
||||
const [alarmStatus, setAlarmStatus] = useState([]); // Alarmstatus
|
||||
|
||||
// Verwende den useRouter Hook, um den Rack-Parameter zu extrahieren
|
||||
// Redux-Variablen aus dem Store abrufen
|
||||
const {
|
||||
kueOnline,
|
||||
kueID,
|
||||
kueIso,
|
||||
kueAlarm1,
|
||||
kueAlarm2,
|
||||
kueRes,
|
||||
kueCableBreak,
|
||||
kueGroundFault,
|
||||
} = useSelector((state) => state.variables);
|
||||
|
||||
// URL-Parameter 'rack' abfragen und setzen
|
||||
useEffect(() => {
|
||||
const query = new URLSearchParams(window.location.search);
|
||||
const rackParam = query.get("rack");
|
||||
|
||||
if (rackParam) {
|
||||
setActiveRack(parseInt(rackParam)); // Setze das aktive Rack basierend auf dem URL-Parameter
|
||||
setActiveRack(parseInt(rackParam));
|
||||
}
|
||||
}, [router.query]);
|
||||
|
||||
// Load the external JavaScript file and fetch the isolation values
|
||||
useEffect(() => {
|
||||
const fetchData = () => {
|
||||
loadWindowVariables()
|
||||
.then(() => {
|
||||
if (window.kueIso && Array.isArray(window.kueIso)) {
|
||||
setKueIso(window.kueIso);
|
||||
}
|
||||
if (window.kueRes && Array.isArray(window.kueRes)) {
|
||||
setSchleifenwiderstand(window.kueRes);
|
||||
}
|
||||
if (window.kueOnline && Array.isArray(window.kueOnline)) {
|
||||
setKueOnline(window.kueOnline);
|
||||
}
|
||||
if (window.kueID && Array.isArray(window.kueID)) {
|
||||
setKueID(window.kueID);
|
||||
}
|
||||
updateAlarmStatus(); // Alarmstatus sofort aktualisieren
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Fehler beim Laden der Variablen:", error);
|
||||
});
|
||||
// Laden der `window`-Variablen und Speichern in Redux
|
||||
/* useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
const variables = await loadWindowVariables();
|
||||
dispatch(setVariables(variables));
|
||||
};
|
||||
|
||||
const updateAlarmStatus = () => {
|
||||
const updatedAlarmStatus = kueIso.map((_, index) => {
|
||||
return (
|
||||
(window.kueAlarm1 && window.kueAlarm1[index]) ||
|
||||
(window.kueAlarm2 && window.kueAlarm2[index]) ||
|
||||
(window.kueCableBreak && window.kueCableBreak[index]) ||
|
||||
(window.kueGroundFault && window.kueGroundFault[index])
|
||||
);
|
||||
});
|
||||
// console.log("Aktualisierter alarmStatus:", updatedAlarmStatus);
|
||||
setAlarmStatus(updatedAlarmStatus); // State für Alarmstatus aktualisieren
|
||||
};
|
||||
|
||||
fetchData();
|
||||
const interval = setInterval(fetchData, 10000); // alle 5 Sekunden
|
||||
}, [dispatch]);
|
||||
*/
|
||||
// Alarmstatus basierend auf Redux-Variablen berechnen
|
||||
const updateAlarmStatus = () => {
|
||||
const updatedAlarmStatus = kueIso.map((_, index) => {
|
||||
return (
|
||||
(kueAlarm1 && kueAlarm1[index]) ||
|
||||
(kueAlarm2 && kueAlarm2[index]) ||
|
||||
(kueCableBreak && kueCableBreak[index]) ||
|
||||
(kueGroundFault && kueGroundFault[index])
|
||||
);
|
||||
});
|
||||
setAlarmStatus(updatedAlarmStatus);
|
||||
};
|
||||
|
||||
// Alarmstatus initial berechnen und alle 10 Sekunden aktualisieren
|
||||
useEffect(() => {
|
||||
updateAlarmStatus();
|
||||
const interval = setInterval(updateAlarmStatus, 10000);
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
}, [kueIso, kueAlarm1, kueAlarm2, kueCableBreak, kueGroundFault]);
|
||||
|
||||
// Zuerst alle Werte der Arrays speichern
|
||||
// Modul- und Rack-Daten aufbereiten
|
||||
const allModules = kueIso.map((iso, index) => ({
|
||||
isolationswert: iso,
|
||||
schleifenwiderstand: schleifenwiderstand[index],
|
||||
schleifenwiderstand: kueRes[index],
|
||||
modulName: kueID[index] || "Unknown",
|
||||
kueOnlineStatus: kueOnline[index],
|
||||
alarmStatus: alarmStatus[index],
|
||||
}));
|
||||
|
||||
// Dann die Module für jedes Rack in 8er-Gruppen aufteilen
|
||||
const racks = {
|
||||
rack1: allModules.slice(0, 8),
|
||||
rack2: allModules.slice(8, 16),
|
||||
rack3: allModules.slice(16, 24),
|
||||
rack4: allModules.slice(24, 32),
|
||||
};
|
||||
// Log the racks in the console for debugging
|
||||
/* console.log("Rack 1:", racks.rack1);
|
||||
console.log("Rack 2:", racks.rack2);
|
||||
console.log("Rack 3:", racks.rack3);
|
||||
console.log("Rack 4:", racks.rack4); */
|
||||
|
||||
// Function to handle rack change
|
||||
const changeRack = (rack) => {
|
||||
setActiveRack(rack);
|
||||
};
|
||||
// Funktion zum Wechseln des Racks
|
||||
const changeRack = (rack) => setActiveRack(rack);
|
||||
|
||||
useEffect(() => {
|
||||
const script = document.createElement("script");
|
||||
const environment = process.env.NEXT_PUBLIC_NODE_ENV || "production";
|
||||
script.src =
|
||||
environment === "production"
|
||||
? "CPL?/CPL/SERVICE/kueData.js"
|
||||
: "/CPLmockData/SERVICE/kueData.js";
|
||||
script.async = true;
|
||||
document.body.appendChild(script);
|
||||
|
||||
// Cleanup function mit Überprüfung
|
||||
return () => {
|
||||
if (script.parentNode === document.body) {
|
||||
document.body.removeChild(script);
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
//----------------------------------------------
|
||||
useEffect(() => {
|
||||
const fetchData = () => {
|
||||
const existingScript = document.querySelector(
|
||||
"script[src*='kueData.js']"
|
||||
);
|
||||
|
||||
// Stelle sicher, dass das Element existiert und ein Kind von `document.body` ist, bevor du es entfernst
|
||||
if (existingScript && existingScript.parentNode === document.body) {
|
||||
document.body.removeChild(existingScript);
|
||||
}
|
||||
|
||||
// Füge das Skript erneut hinzu
|
||||
const script = document.createElement("script");
|
||||
script.src =
|
||||
process.env.NODE_ENV === "production"
|
||||
? "CPL?/CPL/SERVICE/kueData.js" // Produktionspfad
|
||||
: "/CPLmockData/SERVICE/kueData.js"; // Entwicklungs-Pfad für Mock-Daten
|
||||
script.async = true;
|
||||
|
||||
script.onload = () => {
|
||||
// Aktualisiere die Variablen nach kurzer Verzögerung, um sicherzustellen, dass sie geladen sind
|
||||
setTimeout(() => {
|
||||
if (window.kueIso && Array.isArray(window.kueIso)) {
|
||||
setKueIso(window.kueIso);
|
||||
}
|
||||
if (window.kueRes && Array.isArray(window.kueRes)) {
|
||||
setSchleifenwiderstand(window.kueRes);
|
||||
}
|
||||
if (window.kueOnline && Array.isArray(window.kueOnline)) {
|
||||
setKueOnline(window.kueOnline);
|
||||
}
|
||||
if (window.kueID && Array.isArray(window.kueID)) {
|
||||
setKueID(window.kueID);
|
||||
}
|
||||
updateAlarmStatus(); // Aktualisiere den Alarmstatus
|
||||
}, 500); // 500 ms Verzögerung, um sicherzustellen, dass die Daten geladen sind
|
||||
};
|
||||
document.body.appendChild(script);
|
||||
};
|
||||
|
||||
const updateAlarmStatus = () => {
|
||||
const updatedAlarmStatus = window.kueIso.map((_, index) => {
|
||||
return (
|
||||
(window.kueAlarm1 && window.kueAlarm1[index]) ||
|
||||
(window.kueAlarm2 && window.kueAlarm2[index]) ||
|
||||
(window.kueCableBreak && window.kueCableBreak[index]) ||
|
||||
(window.kueGroundFault && window.kueGroundFault[index])
|
||||
);
|
||||
});
|
||||
// console.log("Aktualisierter alarmStatus:", updatedAlarmStatus);
|
||||
setAlarmStatus(updatedAlarmStatus); // Setze den aktualisierten Alarmstatus
|
||||
};
|
||||
|
||||
// Lade die Daten sofort und alle 5 Sekunden neu
|
||||
fetchData();
|
||||
const interval = setInterval(fetchData, 10000);
|
||||
|
||||
return () => clearInterval(interval); // Bereinige das Intervall beim Entladen der Komponente
|
||||
}, []);
|
||||
|
||||
//----------------------------------------------
|
||||
return (
|
||||
<div className="bg-gray-100 flex-1 p-6 text-black">
|
||||
<h1 className="text-2xl mb-4">Kabelüberwachung</h1>
|
||||
|
||||
<div className="mb-4">
|
||||
<button
|
||||
onClick={() => changeRack(1)}
|
||||
className={`mr-1 ${
|
||||
activeRack === 1
|
||||
? "bg-littwin-blue text-white p-1 rounded-sm "
|
||||
: "bg-gray-300 p-1 text-sm"
|
||||
}`}
|
||||
>
|
||||
Rack 1
|
||||
</button>
|
||||
<button
|
||||
onClick={() => changeRack(2)}
|
||||
className={`mr-2 ${
|
||||
activeRack === 2
|
||||
? "bg-littwin-blue text-white p-1 rounded-sm"
|
||||
: "bg-gray-300 p-1 text-sm"
|
||||
}`}
|
||||
>
|
||||
Rack 2
|
||||
</button>
|
||||
<button
|
||||
onClick={() => changeRack(3)}
|
||||
className={`mr-2 ${
|
||||
activeRack === 3
|
||||
? "bg-littwin-blue text-white p-1 rounded-sm"
|
||||
: "bg-gray-300 p-1 text-sm"
|
||||
}`}
|
||||
>
|
||||
Rack 3
|
||||
</button>
|
||||
<button
|
||||
onClick={() => changeRack(4)}
|
||||
className={`mr-2 ${
|
||||
activeRack === 4
|
||||
? "bg-littwin-blue text-white p-1 rounded-sm"
|
||||
: "bg-gray-300 p-1 text-sm"
|
||||
}`}
|
||||
>
|
||||
Rack 4
|
||||
</button>
|
||||
{[1, 2, 3, 4].map((rack) => (
|
||||
<button
|
||||
key={rack}
|
||||
onClick={() => changeRack(rack)}
|
||||
className={`mr-2 ${
|
||||
activeRack === rack
|
||||
? "bg-littwin-blue text-white p-1 rounded-sm"
|
||||
: "bg-gray-300 p-1 text-sm"
|
||||
}`}
|
||||
>
|
||||
Rack {rack}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-row space-x-4 scale-110 ml-[5%] mt-[5%]">
|
||||
{racks[`rack${activeRack}`].map((slot, index) => {
|
||||
const slotIndex = index + (activeRack - 1) * 8;
|
||||
const alarmStatus =
|
||||
(window.kueAlarm1 && window.kueAlarm1[slotIndex]) ||
|
||||
(window.kueAlarm2 && window.kueAlarm2[slotIndex]) ||
|
||||
(window.kueCableBreak && window.kueCableBreak[slotIndex]) ||
|
||||
(window.kueGroundFault && window.kueGroundFault[slotIndex]);
|
||||
|
||||
return (
|
||||
<div key={index} className="flex">
|
||||
<Kue705FO
|
||||
@@ -235,12 +111,9 @@ function Kabelueberwachung() {
|
||||
schleifenwiderstand={slot.schleifenwiderstand}
|
||||
modulName={slot.modulName}
|
||||
kueOnline={slot.kueOnlineStatus}
|
||||
alarmStatus={alarmStatus} // Pass the calculated alarm status
|
||||
alarmStatus={slot.alarmStatus}
|
||||
slotIndex={slotIndex}
|
||||
/>
|
||||
{/*
|
||||
console.log(`Module Data (Rack ${activeRack}, Slot ${index + 1}):`,slot);
|
||||
*/}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
Reference in New Issue
Block a user