feat: dynamische URL-Anpassung für Entwicklungs- und Produktionsumgebung
- Navigation und Weiterleitungen angepasst, um dynamisch `.html`-Endungen in Produktionsumgebung anzuhängen. - Nutzung von `NEXT_PUBLIC_NODE_ENV` ermöglicht unterschiedliche URL-Strukturen in Entwicklungs- und Produktionsumgebung. - `Navigation`-Komponente und `index.js` entsprechend konfiguriert, um `.html` in der Produktionsumgebung automatisch anzuhängen. - Verbesserte Konsistenz und Funktionalität zwischen beiden Umgebungen, 404-Fehler in Produktion behoben.
This commit is contained in:
ISA
168
pages/kabelueberwachung.js
Normal file
168
pages/kabelueberwachung.js
Normal file
@@ -0,0 +1,168 @@
|
||||
"use client"; // app/kabelueberwachung/page.jsx
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import Kue705FO from "../components/modules/Kue705FO";
|
||||
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
|
||||
|
||||
// Verwende den useRouter Hook, um den Rack-Parameter zu extrahieren
|
||||
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
|
||||
}
|
||||
}, [router.query]);
|
||||
|
||||
// Load the external JavaScript file and fetch the isolation values
|
||||
useEffect(() => {
|
||||
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);
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Fehler beim Laden der Variablen:", error);
|
||||
});
|
||||
}, []);
|
||||
|
||||
// Zuerst alle Werte der Arrays speichern
|
||||
const allModules = kueIso.map((iso, index) => ({
|
||||
isolationswert: iso,
|
||||
schleifenwiderstand: schleifenwiderstand[index],
|
||||
modulName: kueID[index] || "Unknown",
|
||||
kueOnlineStatus: kueOnline[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);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const script = document.createElement("script");
|
||||
// Dynamischer Pfad basierend auf der Umgebung
|
||||
const environment = process.env.NEXT_PUBLIC_NODE_ENV || "production";
|
||||
if (environment === "production") {
|
||||
script.src = `CPL?/CPL/SERVICE/kueData.js`; // Produktions-Pfad
|
||||
} else {
|
||||
script.src = `/mockData/SERVICE/kueData.js`; // Mock-Daten-Pfad
|
||||
}
|
||||
script.async = true;
|
||||
document.body.appendChild(script);
|
||||
|
||||
// Cleanup the script if the component unmounts
|
||||
return () => {
|
||||
document.body.removeChild(script);
|
||||
};
|
||||
}, []);
|
||||
|
||||
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>
|
||||
</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
|
||||
isolationswert={slot.isolationswert}
|
||||
schleifenwiderstand={slot.schleifenwiderstand}
|
||||
modulName={slot.modulName}
|
||||
kueOnline={slot.kueOnlineStatus}
|
||||
alarmStatus={alarmStatus} // Pass the calculated alarm status
|
||||
slotIndex={slotIndex}
|
||||
/>
|
||||
{/*
|
||||
console.log(`Module Data (Rack ${activeRack}, Slot ${index + 1}):`,slot);
|
||||
*/}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Kabelueberwachung;
|
||||
Reference in New Issue
Block a user