From 8c9e4c0022fd3f60493ba52930d8016782ead1cd Mon Sep 17 00:00:00 2001
From: ISA <Ismail.ali@littwin-systemtechnik.de>
Date: Thu, 23 Jan 2025 08:45:42 +0100
Subject: [PATCH] =?UTF-8?q?Kabel=C3=BCberwachungsseite=20responsive=20in?=
 =?UTF-8?q?=202xl,=20xl=20und=20laptop?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/modules/Kue705FO.jsx | 88 +++++++++++++++++----------------
 pages/kabelueberwachung.js      |  2 +-
 2 files changed, 47 insertions(+), 43 deletions(-)

diff --git a/components/modules/Kue705FO.jsx b/components/modules/Kue705FO.jsx
index 1e78abb..ab8f5f4 100644
--- a/components/modules/Kue705FO.jsx
+++ b/components/modules/Kue705FO.jsx
@@ -433,25 +433,29 @@ function Kue705FO({
   //---------------------------------------------------
   return (
     <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
              "
     >
       {kueOnline === 1 ? (
         <>
-          <div className="relative w-[113.202px] h-[242.492px] bg-littwin-blue border-[1.5px] border-gray-400 z-0">
-            <div className="flex items-start justify-between h-[30px]">
-              <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 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-[1.875rem]">
+              <div className="relative w-[1.25rem] h-[1.25rem] bg-gray-800 flex items-center justify-center">
+                <span className="text-white text-[0.625rem]">
+                  {slotIndex + 1}
+                </span>
               </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
                 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>
             </div>
             {}
@@ -461,16 +465,16 @@ function Kue705FO({
               slot={slotIndex}
               onModulNameChange={setCurrentModulName}
             />
-            <div className="flex flex-col mt-[10px] ml-[10px]">
-              <div className="flex items-center space-x-4 mt-[10px]">
-                <div className="flex flex-col items-start space-y-1 mr-1">
-                  <span className="text-white text-[10px]">Betrieb</span>
-                  <span className="text-white text-[10px]">Alarm</span>
+            <div className="flex flex-col mt-[0.625rem] ml-[0.625rem]">
+              <div className="flex items-center space-x-[0.25rem] mt-[0.625rem]">
+                <div className="flex flex-col items-start space-y-[0.063rem] mr-[0.063rem]">
+                  <span className="text-white text-[0.625rem]">Betrieb</span>
+                  <span className="text-white text-[0.625rem]">Alarm</span>
                 </div>
-                <div className="flex flex-col items-center space-y-3">
-                  <div className="w-[10px] h-[10px] bg-green-500 rounded-full"></div>
+                <div className="flex flex-col items-center space-y-[0.188rem]">
+                  <div className="w-[0.625rem] h-[0.625rem] bg-green-500 rounded-full"></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"
                     }`}
                   ></div>
@@ -479,7 +483,7 @@ function Kue705FO({
             </div>
 
             {/* 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">
                 <span
                   className={
@@ -488,9 +492,9 @@ function Kue705FO({
                     kueGroundFault?.[slotIndex] === 1 ||
                     kueAlarm1?.[slotIndex] === 1 ||
                     kueAlarm2?.[slotIndex] === 1
-                      ? "text-red-500 text-[14px]"
+                      ? "text-red-500 text-[0.875rem]"
                       : kueOverflow?.[slotIndex] === 1
-                      ? "text-white text-[14px]"
+                      ? "text-white text-[0.875rem]"
                       : ""
                   }
                 >
@@ -503,40 +507,40 @@ function Kue705FO({
                   kueAlarm1?.[slotIndex] !== 1 &&
                   kueAlarm2?.[slotIndex] !== 1 &&
                   kueOverflow?.[slotIndex] !== 1 && (
-                    <div className="text-[8px]">ISO MOhm</div>
+                    <div className="text-[0.5rem]">ISO MOhm</div>
                   )}
               </div>
             </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-0 left-[4.688rem] w-[0.188rem] h-full 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}`}
             </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}
             </div>
           </div>
 
           {/* 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">
-            <span className="text-black text-[7px] absolute top-[2px] left-1 mt-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-[0.438rem] absolute top-[0.125rem] left-[0.063rem] mt-[0.063rem]">
               {loopTitleText}
             </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
                 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
               >
-                <span className="text-white text-[18px]">⟳</span>
+                <span className="text-white text-[1.125rem]">⟳</span>
               </button>
 
-              <div className="absolute bottom-[5px] left-1/2 transform -translate-x-1/2 w-[100px] flex justify-center items-center">
-                <div className="text-center text-black text-[10px]">
+              <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-[0.625rem]">
                   <p>
                     {loopDisplayValue +
                       (activeButton === "Schleife" ? " KOhm" : " Km")}
@@ -545,10 +549,10 @@ function Kue705FO({
               </div>
             </div>
 
-            <div className="flex mt-2 space-x-1">
+            <div className="flex mt-[0.125rem] space-x-[0.063rem]">
               <button
                 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"
                     ? "bg-littwin-blue"
                     : "bg-gray-400"
@@ -558,7 +562,7 @@ function Kue705FO({
               </button>
               <button
                 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
                     ? "bg-gray-200 cursor-not-allowed" // Deaktiviert: Hellgrau
                     : activeButton === "TDR"
@@ -573,7 +577,7 @@ function Kue705FO({
 
             <button
               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
             </button>
@@ -595,9 +599,9 @@ function Kue705FO({
                   marginRight: "-50%",
                   transform: "translate(-50%, -50%)",
                   width: "95%",
-                  maxWidth: "1200px",
-                  height: "650px",
-                  padding: "10px",
+                  maxWidth: "75rem",
+                  height: "40.625rem",
+                  padding: "0.625rem",
                 },
               }}
             >
@@ -605,11 +609,11 @@ function Kue705FO({
                 onClick={handleCloseChartModal}
                 style={{
                   position: "absolute",
-                  top: "10px",
-                  right: "10px",
+                  top: "0.625rem",
+                  right: "0.625rem",
                   background: "transparent",
                   border: "none",
-                  fontSize: "24px",
+                  fontSize: "1.5rem",
                   cursor: "pointer",
                 }}
               >
@@ -620,7 +624,7 @@ function Kue705FO({
               <canvas
                 id="myChart"
                 ref={chartRef}
-                style={{ width: "100%", height: "600px" }}
+                style={{ width: "100%", height: "37.5rem" }}
               ></canvas>
             </ReactModal>
           )}
diff --git a/pages/kabelueberwachung.js b/pages/kabelueberwachung.js
index 2897121..e5a319b 100644
--- a/pages/kabelueberwachung.js
+++ b/pages/kabelueberwachung.js
@@ -95,7 +95,7 @@ function Kabelueberwachung() {
   }, [activeRack, racks]);
 
   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>
       <div className="mb-4">
         {[1, 2, 3, 4].map((rack) => (