Ismail/CPLv4.0
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Modul vorhanden test

Browse Source
This commit is contained in:
ISA
2024-10-16 08:01:54 +02:00
parent 0fb0e67df4
commit 8ef87d3779
3 changed files with 138 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.env.local
View File

@@ -1,4 +1,4 @@
#Next.js Webserver, bleibt localhost auf CPL bei production #Next.js Webserver, bleibt localhost auf CPL bei production
NEXT_PUBLIC_API_BASE_URL=http://localhost:3000 #NEXT_PUBLIC_API_BASE_URL=http://localhost:3000
#CPL Webserver für die Entwicklung , um Daten von CPL zu bekommen, hat funktioniert auf dem CPL selbst #CPL Webserver für die Entwicklung , um Daten von CPL zu bekommen, hat funktioniert auf dem CPL selbst
#NEXT_PUBLIC_API_BASE_URL=https://10.10.0.118:443 NEXT_PUBLIC_API_BASE_URL=https://10.10.0.118:443

10
app/kabelueberwachung/page.jsx
View File

@@ -7,6 +7,8 @@ function Kabelueberwachung() {
const [kueIso, setKueIso] = useState([]); // State to store isolation values const [kueIso, setKueIso] = useState([]); // State to store isolation values
const [kueName, setKueName] = useState([]); // State to store the KUE names const [kueName, setKueName] = useState([]); // State to store the KUE names
const [schleifenwiderstand, setSchleifenwiderstand] = useState([]); // State to store the resistance values const [schleifenwiderstand, setSchleifenwiderstand] = useState([]); // State to store the resistance values
//const [kueOnline, setKueOnline] = useState([ 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ]); // Example array for module status
const [kueOnline, setKueOnline] = useState([]); // State to store the module status
// Function to handle rack change // Function to handle rack change
const changeRack = (rack) => { const changeRack = (rack) => {
@@ -30,21 +32,25 @@ function Kabelueberwachung() {
isolationswert: value, // Isolation value for this slot isolationswert: value, // Isolation value for this slot
schleifenwiderstand: schleifenwiderstand[index], // Resistance for this slot schleifenwiderstand: schleifenwiderstand[index], // Resistance for this slot
modulName: kueName[index] || "Unknown", // Name for this slot modulName: kueName[index] || "Unknown", // Name for this slot
kueOnlineStatus: kueOnline[index], // Online status for this slot
})), })),
rack2: kueIso.slice(8, 16).map((value, index) => ({ rack2: kueIso.slice(8, 16).map((value, index) => ({
isolationswert: value, isolationswert: value,
schleifenwiderstand: schleifenwiderstand[8 + index], schleifenwiderstand: schleifenwiderstand[8 + index],
modulName: kueName[8 + index] || "Unknown", modulName: kueName[8 + index] || "Unknown",
kueOnlineStatus: kueOnline[8 + index], // Online status for this slot
})), })),
rack3: kueIso.slice(16, 24).map((value, index) => ({ rack3: kueIso.slice(16, 24).map((value, index) => ({
isolationswert: value, isolationswert: value,
schleifenwiderstand: schleifenwiderstand[16 + index], schleifenwiderstand: schleifenwiderstand[16 + index],
modulName: kueName[16 + index] || "Unknown", modulName: kueName[16 + index] || "Unknown",
kueOnlineStatus: kueOnline[16 + index], // Online status for this slot
})), })),
rack4: kueIso.slice(24, 32).map((value, index) => ({ rack4: kueIso.slice(24, 32).map((value, index) => ({
isolationswert: value, isolationswert: value,
schleifenwiderstand: schleifenwiderstand[24 + index], schleifenwiderstand: schleifenwiderstand[24 + index],
modulName: kueName[24 + index] || "Unknown", modulName: kueName[24 + index] || "Unknown",
kueOnlineStatus: kueOnline[24 + index], // Online status for this slot
})), })),
}; };
@@ -108,13 +114,15 @@ function Kabelueberwachung() {
</div> </div>
{/* Slots for the active rack */} {/* Slots for the active rack */}
<div className="flex flex-row justify-between"> <div className="flex flex-row justify-between">
{racks[`rack${activeRack}`].map((slot, index) => ( {racks[`rack${activeRack}`].map((slot, index) => (
<div key={index} className="flex-grow"> <div key={index} className="flex-grow">
<Kue705FO <Kue705FO
isolationswert={slot.isolationswert} isolationswert={slot.isolationswert}
schleifenwiderstand={slot.schleifenwiderstand} schleifenwiderstand={slot.schleifenwiderstand}
modulName={slot.modulName} modulName={slot.modulName}
kueOnline={kueOnline}
slotIndex={index + (activeRack - 1) * 8} // Slot index calculation for each rack
/> />
</div> </div>
))} ))}

222
components/modules/Kue705FO.jsx
View File

@@ -1,4 +1,4 @@
import React from "react"; import React, { useState } from "react";
import { Icon } from "@iconify/react"; // Für Iconify Icons import { Icon } from "@iconify/react"; // Für Iconify Icons
function Kue705FO({ function Kue705FO({
@@ -6,114 +6,146 @@ function Kue705FO({
schleifenwiderstand, // Übergabeparameter für den Schleifenwiderstand schleifenwiderstand, // Übergabeparameter für den Schleifenwiderstand
modulName, // Übergabeparameter für den Modulnamen modulName, // Übergabeparameter für den Modulnamen
kueVersion = "V4.19", // Optionaler Parameter für die Version (Standardwert) kueVersion = "V4.19", // Optionaler Parameter für die Version (Standardwert)
kueOnline, // Array für den Modulstatus (1: Modul vorhanden, 0: kein Modul)
slotIndex, // Der Index des Slots, für den die Anzeige gilt
}) { }) {
const [activeButton, setActiveButton] = useState("Schleife");
const [displayText, setDisplayText] = useState("Schleifenwiderstand [kOhm]");
const handleButtonClick = (button) => {
if (button === "Schleife") {
setActiveButton("Schleife");
setDisplayText("Schleifenwiderstand [kOhm]");
} else if (button === "TDR") {
setActiveButton("TDR");
setDisplayText("Entfernung [Km]");
}
};
// Überprüfe, ob ein Modul im Slot vorhanden ist
const isModulPresent = kueOnline[slotIndex] === 1;
return ( return (
<div className="relative bg-gray-300 w-[116px] h-[390px] border border-gray-400 scale-110 top-3"> <div className="relative bg-gray-300 w-[116px] h-[390px] border border-gray-400 scale-110 top-3">
{/* Hauptkörper - Linker Bereich */} {isModulPresent ? (
<div className="relative w-[113.202px] h-[242.492px] bg-littwin-blue border-[1.5px] border-gray-400 z-0"> <>
{/* Header-Bereich mit Slotnummer und Zahnrad */} {/* Hauptkörper - Linker Bereich */}
<div className="flex items-start justify-between h-[30px] "> <div className="relative w-[113.202px] h-[242.492px] bg-littwin-blue border-[1.5px] border-gray-400 z-0">
{/* Slotnummer */} {/* Header-Bereich mit Slotnummer und Zahnrad */}
<div className="relative w-[20px] h-[20px] bg-gray-800 flex items-center justify-center"> <div className="flex items-start justify-between h-[30px] ">
<span className="text-white text-[10px]">1</span> {/* Slotnummer */}
</div> <div className="relative w-[20px] h-[20px] bg-gray-800 flex items-center justify-center">
<span className="text-white text-[10px]">{slotIndex + 1}</span>
</div>
{/* KÜ705-FO Text */} {/* KÜ705-FO Text */}
<h3 className="text-white font-bold text-[9px] mr-4">KÜ705-FO</h3> <h3 className="text-white font-bold text-[9px] mr-4">KÜ705-FO</h3>
{/* Zahnrad-Icon */} {/* Zahnrad-Icon */}
<button <button
onClick={() => console.log("Settings clicked")} onClick={() => console.log("Settings clicked")}
className="w-[15px] h-[15px] bg-gray-400 flex items-center justify-center" className="w-[15px] h-[15px] bg-gray-400 flex items-center justify-center"
> >
<span className="text-white text-[20px]">⚙</span> <span className="text-white text-[20px]">⚙</span>
</button> </button>
</div> </div>
{/* Betrieb und Alarm Status */} {/* Betrieb und Alarm Status */}
<div className="flex flex-col mt-[10px] ml-[10px]"> <div className="flex flex-col mt-[10px] ml-[10px]">
<div className="flex items-center"> <div className="flex items-center">
<div className="w-[10px] h-[10px] bg-green-500 rounded-full mr-2"></div> <div className="w-[10px] h-[10px] bg-green-500 rounded-full mr-2"></div>
<span className="text-white text-[10px]">Betrieb</span> <span className="text-white text-[10px]">Betrieb</span>
</div> </div>
<div className="flex items-center mt-1"> <div className="flex items-center mt-1">
<div className="w-[10px] h-[10px] bg-gray-300 rounded-full mr-2"></div> <div className="w-[10px] h-[10px] bg-gray-300 rounded-full mr-2"></div>
<span className="text-white text-[10px]">Alarm</span> <span className="text-white text-[10px]">Alarm</span>
</div> </div>
</div> </div>
{/* Isolationswert-Anzeige */} {/* Isolationswert-Anzeige */}
<div className="relative mt-[50px] mx-auto bg-black text-white w-[80px] h-[40px] flex items-center justify-center text-[18px] z-10"> <div className="relative mt-[50px] mx-auto bg-black text-white w-[80px] h-[40px] flex items-center justify-center text-[18px] z-10">
<div className="text-center"> <div className="text-center">
<span>{isolationswert || ">200"}</span>{" "} <span>{isolationswert || ">200"}</span>{" "}
{/* Dynamischer Isolationswert */} {/* Dynamischer Isolationswert */}
<div className="text-[8px]">ISO MOhm</div> <div className="text-[8px]">ISO MOhm</div>
</div> </div>
</div> </div>
{/* Weiße Linien */} {/* Weiße Linien */}
<div className="absolute top-0 left-[75px] w-[3px] h-full bg-white z-0"></div> <div className="absolute top-0 left-[75px] w-[3px] h-full bg-white z-0"></div>
<div className="absolute top-[40px] left-[75px] w-[40px] h-[3px] bg-white z-0"></div> <div className="absolute top-[40px] left-[75px] w-[40px] h-[3px] bg-white z-0"></div>
{/* Modulname-Anzeige */} {/* Modulname-Anzeige */}
<div className="absolute bottom-[20px] left-[10px] text-black text-[10px] bg-gray-300 p-1 w-[100px] text-center"> <div className="absolute bottom-[20px] left-[10px] text-black text-[10px] bg-gray-300 p-1 w-[100px] text-center">
{modulName || "Test1"} {/* Dynamischer Modulname */} {modulName || "Test1"} {/* Dynamischer Modulname */}
</div> </div>
{/* Version */} {/* Version */}
<div className="absolute bottom-1 right-1 text-black text-[8px]"> <div className="absolute bottom-1 right-1 text-black text-[8px]">
{kueVersion} {/* Dynamische Version */} {kueVersion} {/* Dynamische Version */}
</div>
</div>
{/* Unterer Bereich - Schleifenwiderstand und Messkurve */}
<div className="absolute bottom-1 left-[1.095px] w-[113.182px] h-[130px] bg-gray-300 border-[1.5px] border-gray-400 p-1">
<span className="text-black text-[6px] absolute top-[2px] left-1 mt-1">
Schleifenwiderstand [kOhm]
</span>
{/* Schleifenwiderstand Anzeige */}
<div className="relative w-full h-[45px] bg-gray-100 border border-gray-400 flex items-center justify-center mt-3">
{/* Icon rechts oben */}
<button
onClick={() => console.log("Refresh clicked")}
className="absolute -top-1 -right-1 w-[20px] h-[20px] bg-gray-400 flex items-center justify-center"
>
<span className="text-white text-[18px]">⟳</span>
</button>
{/* Wertanzeige */}
<div className="absolute bottom-[5px] left-1/2 transform -translate-x-1/2">
{/* Dynamischer Schleifenwiderstand */}
<div className="top-[220px] left-[10px] text-black text-[10px]">
<p>{schleifenwiderstand || "0"} kOhm</p>
</div> </div>
</div> </div>
</div>
{/* Schleife und TDR Buttons nebeneinander */} {/* Unterer Bereich - Schleifenwiderstand und Messkurve */}
<div className="flex mt-2 space-x-1"> <div className="absolute bottom-1 left-[1.095px] w-[113.182px] h-[130px] bg-gray-300 border-[1.5px] border-gray-400 p-1">
<button <span className="text-black text-[6px] absolute top-[2px] left-1 mt-1">
onClick={() => console.log("Schleife clicked")} {displayText}
className="w-[50%] h-[25px] bg-littwin-blue text-white text-[10px] flex items-center justify-center" </span>
> {/* Schleifenwiderstand Anzeige */}
Schleife <div className="relative w-full h-[45px] bg-gray-100 border border-gray-400 flex items-center justify-center mt-3">
</button> {/* Icon rechts oben */}
<button <button
onClick={() => console.log("TDR clicked")} onClick={() => console.log("Refresh clicked")}
className="w-[50%] h-[25px] bg-gray-400 text-white text-[10px] flex items-center justify-center" className="absolute -top-1 -right-1 w-[20px] h-[20px] bg-gray-400 flex items-center justify-center"
> >
TDR <span className="text-white text-[18px]">⟳</span>
</button> </button>
</div>
{/* Messkurve Button */} {/* Wertanzeige */}
<button <div className="absolute bottom-[5px] left-1/2 transform -translate-x-1/2">
onClick={() => console.log("Messkurve clicked")} {/* Dynamischer Schleifenwiderstand */}
className="w-full h-[25px] bg-littwin-blue text-white text-[10px] flex items-center justify-center mt-1" <div className="top-[220px] left-[10px] text-black text-[10px]">
> <p>{schleifenwiderstand || "0"} kOhm</p>
Messkurve </div>
</button> </div>
</div> </div>
{/* Schleife und TDR Buttons nebeneinander */}
<div className="flex mt-2 space-x-1">
<button
onClick={() => handleButtonClick("Schleife")}
className={`w-[50%] h-[25px] text-white text-[10px] flex items-center justify-center ${
activeButton === "Schleife"
? "bg-littwin-blue"
: "bg-gray-400"
}`}
>
Schleife
</button>
<button
onClick={() => handleButtonClick("TDR")}
className={`w-[50%] h-[25px] text-white text-[10px] flex items-center justify-center ${
activeButton === "TDR" ? "bg-littwin-blue" : "bg-gray-400"
}`}
>
TDR
</button>
</div>
{/* Messkurve Button */}
<button
onClick={() => console.log("Messkurve clicked")}
className="w-full h-[25px] bg-littwin-blue text-white text-[10px] flex items-center justify-center mt-1"
>
Messkurve
</button>
</div>
</>
) : (
<div className="flex items-center justify-center h-full text-gray-500">
<p>Kein Modul im Slot {slotIndex + 1}</p>
</div>
)}
</div> </div>
); );
} }