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

Kabelüberwachungsseite responsive in 2xl, xl und laptop

Browse Source
This commit is contained in:
ISA
2025-01-23 08:45:42 +01:00
parent b2eb899793
commit 8c9e4c0022
2 changed files with 47 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
components/modules/Kue705FO.jsx
View File

@@ -433,25 +433,29 @@ function Kue705FO({
//--------------------------------------------------- //---------------------------------------------------
return ( return (
<div <div
className="relative bg-gray-300 w-[116px] h-[390px] border border-gray-400 className="relative bg-gray-300 w-[7.25rem] h-[24.375rem] border border-gray-400 transform laptop:-translate-y-12 2xl:-translate-y-0
scale-100 sm:scale-95 md:scale-100 lg:scale-105 xl:scale-90 2xl:scale-125 top-3 scale-100 sm:scale-95 md:scale-100 lg:scale-105 xl:scale-90 2xl:scale-125 top-3
" "
> >
{kueOnline === 1 ? ( {kueOnline === 1 ? (
<> <>
<div className="relative w-[113.202px] h-[242.492px] bg-littwin-blue border-[1.5px] border-gray-400 z-0"> <div className="relative w-[7.075rem] h-[15.156rem] bg-littwin-blue border-[0.094rem] border-gray-400 z-0">
<div className="flex items-start justify-between h-[30px]"> <div className="flex items-start justify-between h-[1.875rem]">
<div className="relative w-[20px] h-[20px] bg-gray-800 flex items-center justify-center"> <div className="relative w-[1.25rem] h-[1.25rem] bg-gray-800 flex items-center justify-center">
<span className="text-white text-[10px]">{slotIndex + 1}</span> <span className="text-white text-[0.625rem]">
{slotIndex + 1}
</span>
</div> </div>
<h3 className="text-white font-bold text-[9px] mr-4">KÜ705-FO</h3> <h3 className="text-white font-bold text-[0.563rem] mr-[1rem]">
KÜ705-FO
</h3>
<button <button
onClick={handleOpenModal} onClick={handleOpenModal}
className="w-[15px] h-[15px] bg-gray-400 flex items-center justify-center" className="w-[0.938rem] h-[0.938rem] bg-gray-400 flex items-center justify-center"
> >
<span className="text-white text-[20px]">⚙</span> <span className="text-white text-[1.25rem]">⚙</span>
</button> </button>
</div> </div>
{} {}
@@ -461,16 +465,16 @@ function Kue705FO({
slot={slotIndex} slot={slotIndex}
onModulNameChange={setCurrentModulName} onModulNameChange={setCurrentModulName}
/> />
<div className="flex flex-col mt-[10px] ml-[10px]"> <div className="flex flex-col mt-[0.625rem] ml-[0.625rem]">
<div className="flex items-center space-x-4 mt-[10px]"> <div className="flex items-center space-x-[0.25rem] mt-[0.625rem]">
<div className="flex flex-col items-start space-y-1 mr-1"> <div className="flex flex-col items-start space-y-[0.063rem] mr-[0.063rem]">
<span className="text-white text-[10px]">Betrieb</span> <span className="text-white text-[0.625rem]">Betrieb</span>
<span className="text-white text-[10px]">Alarm</span> <span className="text-white text-[0.625rem]">Alarm</span>
</div> </div>
<div className="flex flex-col items-center space-y-3"> <div className="flex flex-col items-center space-y-[0.188rem]">
<div className="w-[10px] h-[10px] bg-green-500 rounded-full"></div> <div className="w-[0.625rem] h-[0.625rem] bg-green-500 rounded-full"></div>
<div <div
className={`w-[10px] h-[10px] rounded-full ${ className={`w-[0.625rem] h-[0.625rem] rounded-full ${
currentAlarmStatus ? "bg-red-500" : "bg-gray-300" currentAlarmStatus ? "bg-red-500" : "bg-gray-300"
}`} }`}
></div> ></div>
@@ -479,7 +483,7 @@ function Kue705FO({
</div> </div>
{/* Anzeige des Isolation */} {/* Anzeige des Isolation */}
<div className="relative mt-[50px] mx-auto bg-black text-white w-[100px] h-[40px] flex items-center justify-center text-[18px] z-10"> <div className="relative mt-[3.125rem] mx-auto bg-black text-white w-[6.25rem] h-[2.5rem] flex items-center justify-center text-[1.125rem] z-10">
<div className="text-center"> <div className="text-center">
<span <span
className={ className={
@@ -488,9 +492,9 @@ function Kue705FO({
kueGroundFault?.[slotIndex] === 1 || kueGroundFault?.[slotIndex] === 1 ||
kueAlarm1?.[slotIndex] === 1 || kueAlarm1?.[slotIndex] === 1 ||
kueAlarm2?.[slotIndex] === 1 kueAlarm2?.[slotIndex] === 1
? "text-red-500 text-[14px]" ? "text-red-500 text-[0.875rem]"
: kueOverflow?.[slotIndex] === 1 : kueOverflow?.[slotIndex] === 1
? "text-white text-[14px]" ? "text-white text-[0.875rem]"
: "" : ""
} }
> >
@@ -503,40 +507,40 @@ function Kue705FO({
kueAlarm1?.[slotIndex] !== 1 && kueAlarm1?.[slotIndex] !== 1 &&
kueAlarm2?.[slotIndex] !== 1 && kueAlarm2?.[slotIndex] !== 1 &&
kueOverflow?.[slotIndex] !== 1 && ( kueOverflow?.[slotIndex] !== 1 && (
<div className="text-[8px]">ISO MOhm</div> <div className="text-[0.5rem]">ISO MOhm</div>
)} )}
</div> </div>
</div> </div>
<div className="absolute top-0 left-[75px] w-[3px] h-full bg-white z-0"></div> <div className="absolute top-0 left-[4.688rem] w-[0.188rem] 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-[2.5rem] left-[4.688rem] w-[2.5rem] h-[0.188rem] bg-white z-0"></div>
<div className="absolute bottom-[20px] left-0 right-0 text-black text-[10px] bg-gray-300 p-1 text-center"> <div className="absolute bottom-[1.25rem] left-0 right-0 text-black text-[0.625rem] bg-gray-300 p-[0.063rem] text-center">
{currentModulName || `Modul ${slotIndex + 1}`} {currentModulName || `Modul ${slotIndex + 1}`}
</div> </div>
<div className="absolute bottom-1 right-1 text-black text-[8px]"> <div className="absolute bottom-[0.063rem] right-[0.063rem] text-black text-[0.5rem]">
{kueVersion} {kueVersion}
</div> </div>
</div> </div>
{/* loopDisplay: Zeigt Schleifenwiderstand oder TDR-Distanz an, je nach Modus */} {/* loopDisplay: Zeigt Schleifenwiderstand oder TDR-Distanz an, je nach Modus */}
<div className="absolute bottom-1 left-[1.095px] w-[113.182px] h-[130px] bg-gray-300 border-[1.5px] border-gray-400 p-1"> <div className="absolute bottom-[0.063rem] left-[0.068rem] w-[7.074rem] h-[8.125rem] bg-gray-300 border-[0.094rem] border-gray-400 p-[0.063rem]">
<span className="text-black text-[7px] absolute top-[2px] left-1 mt-1"> <span className="text-black text-[0.438rem] absolute top-[0.125rem] left-[0.063rem] mt-[0.063rem]">
{loopTitleText} {loopTitleText}
</span> </span>
<div className="relative w-full h-[45px] bg-gray-100 border border-gray-400 flex items-center justify-center mt-3"> <div className="relative w-full h-[2.813rem] bg-gray-100 border border-gray-400 flex items-center justify-center mt-[0.188rem]">
<button <button
onClick={handleRefreshClick} // Dynamische Funktion basierend auf aktivem Button onClick={handleRefreshClick} // Dynamische Funktion basierend auf aktivem Button
className="absolute -top-1 -right-1 w-[20px] h-[20px] bg-gray-400 flex items-center justify-center" className="absolute -top-[0.063rem] -right-[0.063rem] w-[1.25rem] h-[1.25rem] bg-gray-400 flex items-center justify-center"
disabled={loading} // Disable button while loading disabled={loading} // Disable button while loading
> >
<span className="text-white text-[18px]">⟳</span> <span className="text-white text-[1.125rem]">⟳</span>
</button> </button>
<div className="absolute bottom-[5px] left-1/2 transform -translate-x-1/2 w-[100px] flex justify-center items-center"> <div className="absolute bottom-[0.313rem] left-1/2 transform -translate-x-1/2 w-[6.25rem] flex justify-center items-center">
<div className="text-center text-black text-[10px]"> <div className="text-center text-black text-[0.625rem]">
<p> <p>
{loopDisplayValue + {loopDisplayValue +
(activeButton === "Schleife" ? " KOhm" : " Km")} (activeButton === "Schleife" ? " KOhm" : " Km")}
@@ -545,10 +549,10 @@ function Kue705FO({
</div> </div>
</div> </div>
<div className="flex mt-2 space-x-1"> <div className="flex mt-[0.125rem] space-x-[0.063rem]">
<button <button
onClick={() => handleButtonClick("Schleife")} onClick={() => handleButtonClick("Schleife")}
className={`w-[50%] h-[25px] text-white text-[10px] flex items-center justify-center ${ className={`w-[50%] h-[1.563rem] text-white text-[0.625rem] flex items-center justify-center ${
activeButton === "Schleife" activeButton === "Schleife"
? "bg-littwin-blue" ? "bg-littwin-blue"
: "bg-gray-400" : "bg-gray-400"
@@ -558,7 +562,7 @@ function Kue705FO({
</button> </button>
<button <button
onClick={() => handleButtonClick("TDR")} onClick={() => handleButtonClick("TDR")}
className={`w-[50%] h-[25px] text-white text-[10px] flex items-center justify-center ${ className={`w-[50%] h-[1.563rem] text-white text-[0.625rem] flex items-center justify-center ${
tdrActive[slotIndex] === 0 tdrActive[slotIndex] === 0
? "bg-gray-200 cursor-not-allowed" // Deaktiviert: Hellgrau ? "bg-gray-200 cursor-not-allowed" // Deaktiviert: Hellgrau
: activeButton === "TDR" : activeButton === "TDR"
@@ -573,7 +577,7 @@ function Kue705FO({
<button <button
onClick={handleOpenChartModal} // Öffnet das Chart-Modal onClick={handleOpenChartModal} // Öffnet das Chart-Modal
className="w-full h-[25px] bg-littwin-blue text-white text-[10px] flex items-center justify-center mt-1" className="w-full h-[1.563rem] bg-littwin-blue text-white text-[0.625rem] flex items-center justify-center mt-[0.063rem]"
> >
Messkurve Messkurve
</button> </button>
@@ -595,9 +599,9 @@ function Kue705FO({
marginRight: "-50%", marginRight: "-50%",
transform: "translate(-50%, -50%)", transform: "translate(-50%, -50%)",
width: "95%", width: "95%",
maxWidth: "1200px", maxWidth: "75rem",
height: "650px", height: "40.625rem",
padding: "10px", padding: "0.625rem",
}, },
}} }}
> >
@@ -605,11 +609,11 @@ function Kue705FO({
onClick={handleCloseChartModal} onClick={handleCloseChartModal}
style={{ style={{
position: "absolute", position: "absolute",
top: "10px", top: "0.625rem",
right: "10px", right: "0.625rem",
background: "transparent", background: "transparent",
border: "none", border: "none",
fontSize: "24px", fontSize: "1.5rem",
cursor: "pointer", cursor: "pointer",
}} }}
> >
@@ -620,7 +624,7 @@ function Kue705FO({
<canvas <canvas
id="myChart" id="myChart"
ref={chartRef} ref={chartRef}
style={{ width: "100%", height: "600px" }} style={{ width: "100%", height: "37.5rem" }}
></canvas> ></canvas>
</ReactModal> </ReactModal>
)} )}

2
pages/kabelueberwachung.js
View File

@@ -95,7 +95,7 @@ function Kabelueberwachung() {
}, [activeRack, racks]); }, [activeRack, racks]);
return ( return (
<div className="bg-gray-100 flex-1 p-6 text-black xl:p-4 2xl:p-6"> <div className="bg-gray-100 flex-1 p-6 text-black xl:p-4 2xl:p-6 h-[calc(100vh-13vh-8vh)]">
<h1 className="text-2xl xl:text-xl mb-4">Kabelüberwachung</h1> <h1 className="text-2xl xl:text-xl mb-4">Kabelüberwachung</h1>
<div className="mb-4"> <div className="mb-4">
{[1, 2, 3, 4].map((rack) => ( {[1, 2, 3, 4].map((rack) => (