From 992a0ff254b93cb74ebe4d0c00deae443f636680 Mon Sep 17 00:00:00 2001
From: ISA <Ismail.ali@littwin-systemtechnik.de>
Date: Tue, 6 May 2025 11:24:19 +0200
Subject: [PATCH] =?UTF-8?q?fix:=20Kabel=C3=BCberwachung=20Modal=20style=20?=
 =?UTF-8?q?alle=20Buttons=20mit=20Littwinblue=20alle=20Buttons=20ohne=20Mo?=
 =?UTF-8?q?useover=20effect?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../SERVICE/kabelueberwachungMockData.js      |   2 +-
 .../kue705FO/modals/KueEinstellung.tsx        | 169 ++++++++----------
 .../kue705FO/modals/SettingsModalWrapper.tsx  |  12 +-
 .../kue705FO/modals/TdrEinstellung.tsx        |  42 ++---
 4 files changed, 104 insertions(+), 121 deletions(-)

diff --git a/apiMockData/SERVICE/kabelueberwachungMockData.js b/apiMockData/SERVICE/kabelueberwachungMockData.js
index 95f59f8..b4f09e3 100644
--- a/apiMockData/SERVICE/kabelueberwachungMockData.js
+++ b/apiMockData/SERVICE/kabelueberwachungMockData.js
@@ -135,7 +135,7 @@ var win_kueID = [
 
 //-------------TDR---------------------------------------------------
 var win_tdrActive = [
-  0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1
+  1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1
 ];
 //----------------------------------------------------
 var win_tdrAtten = [
diff --git a/components/main/kabelueberwachung/kue705FO/modals/KueEinstellung.tsx b/components/main/kabelueberwachung/kue705FO/modals/KueEinstellung.tsx
index 9a405a9..9ba2fe0 100644
--- a/components/main/kabelueberwachung/kue705FO/modals/KueEinstellung.tsx
+++ b/components/main/kabelueberwachung/kue705FO/modals/KueEinstellung.tsx
@@ -133,123 +133,108 @@ export default function KueEinstellung({
   };
 
   return (
-    <div
-      className="overflow-y-auto"
-      style={{ maxHeight: "55vh" }} // oder z. B. 600px
-    >
-      <div>
-        <label className="font-bold">Kabelbezeichnung:</label>
+    <div className="p-4 text-sm">
+      {/* Kabelbezeichnung */}
+      <div className="mb-4 grid grid-cols-3 items-center gap-2 w-full">
+        <label className="">Kabelbezeichnung:</label>
         <input
           type="text"
-          className="w-full border rounded p-1 text-sm"
+          className="w-full border rounded p-1"
           value={formData.name}
           onChange={(e) => handleChange("name", e.target.value)}
         />
       </div>
-
-      <div>
-        <h3 className="font-bold text-center mb-2">Isolationsmessung</h3>
-        <table className="w-full border-collapse text-sm">
-          <thead className="bg-gray-100">
-            <tr>
-              <th className="border p-2 text-center">Grenzwert (MOhm)</th>
-              <th className="border p-2 text-center">Verzögerung (sek)</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td className="border p-2 text-center">
-                <input
-                  type="number"
-                  step="0.1"
-                  className="w-[6rem] border rounded p-1"
-                  value={formData.limit1}
-                  onChange={(e) => handleChange("limit1", e.target.value)}
-                />
-              </td>
-              <td className="border p-2 text-center">
-                <input
-                  type="number"
-                  step="0.1"
-                  className="w-[6rem] border rounded p-1"
-                  value={formData.delay1}
-                  onChange={(e) => handleChange("delay1", e.target.value)}
-                />
-              </td>
-            </tr>
-          </tbody>
-        </table>
+      {/* Speicherintervall */}
+      <div className="mb-4 grid grid-cols-3 items-center gap-2 w-full">
+        <label className="">Speicherintervall:</label>
+        <select
+          className="w-full border rounded p-1"
+          value={formData.memoryInterval}
+          onChange={(e) => handleChange("memoryInterval", e.target.value)}
+        >
+          {memoryIntervalOptions.map((opt) => (
+            <option key={opt.value} value={opt.value}>
+              {opt.label}
+            </option>
+          ))}
+        </select>
       </div>
-
-      <div>
-        <h3 className="font-bold text-center mb-2">Schleifenmessung</h3>
-        <table className="w-full border-collapse text-sm mb-2">
-          <thead className="bg-gray-100">
-            <tr>
-              <th className="border p-2 text-center">Grenzwert (kOhm)</th>
-              <th className="border p-2 text-center">Schleifenintervall (h)</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td className="border p-2 text-center">
-                <input
-                  type="number"
-                  step="0.1"
-                  className="w-[6rem] border rounded p-1"
-                  value={formData.limit2Low}
-                  onChange={(e) => handleChange("limit2Low", e.target.value)}
-                />
-              </td>
-              <td className="border p-2 text-center">
-                <input
-                  type="number"
-                  step="0.1"
-                  className="w-[6rem] border rounded p-1"
-                  value={formData.loopInterval}
-                  onChange={(e) => handleChange("loopInterval", e.target.value)}
-                />
-              </td>
-            </tr>
-          </tbody>
-        </table>
-
-        <div>
-          <label className="font-bold block mb-1">Speicherintervall</label>
-          <select
-            className="w-full border rounded p-1 text-sm"
-            value={formData.memoryInterval}
-            onChange={(e) => handleChange("memoryInterval", e.target.value)}
-          >
-            {memoryIntervalOptions.map((opt) => (
-              <option key={opt.value} value={opt.value}>
-                {opt.label}
-              </option>
-            ))}
-          </select>
+      {/* Isolationsmessung */}
+      <div className="mb-4  w-full">
+        <h3 className="font-bold mb-2">Isolationsmessung</h3>
+        <div className="mb-4 grid grid-cols-3 items-center gap-2 w-full">
+          <label className="w-48 ">Grenzwert:</label>
+          <div>
+            <input
+              type="number"
+              className="w-24 border rounded p-1 mr-2 text-right"
+              value={formData.limit1}
+              onChange={(e) => handleChange("limit1", e.target.value)}
+            />
+            <span>MOhm</span>
+          </div>
+        </div>
+        <div className="mb-4 grid grid-cols-3 items-center gap-2 w-full">
+          <label className="w-48 ">Verzögerung:</label>
+          <div>
+            <input
+              type="number"
+              className="w-24 border rounded p-1 mr-2 text-right"
+              value={formData.delay1}
+              onChange={(e) => handleChange("delay1", e.target.value)}
+            />
+            <span>Sekunden</span>
+          </div>
+        </div>
+      </div>
+      {/* Schleifenmessung */}
+      <div className="mb-4">
+        <h3 className="font-bold mb-2">Schleifenmessung</h3>
+        <div className="mb-4 grid grid-cols-3 items-center gap-2 w-full">
+          <label className="w-48 ">Grenzwert:</label>
+          <div>
+            <input
+              type="number"
+              className="w-24 border rounded p-1 mr-2 text-right"
+              value={formData.limit2Low}
+              onChange={(e) => handleChange("limit2Low", e.target.value)}
+            />
+            <span>kOhm</span>
+          </div>
+        </div>
+        <div className="mb-4 grid grid-cols-3 items-center gap-2 w-full">
+          <label className="w-48 ">Schleifenmessintervall:</label>
+          <div>
+            <input
+              type="number"
+              className="w-24 border rounded p-1 mr-2 text-right"
+              value={formData.loopInterval}
+              onChange={(e) => handleChange("loopInterval", e.target.value)}
+            />
+            <span>Stunden</span>
+          </div>
         </div>
       </div>
-
       <div className="flex justify-end gap-2 bg-gray-100 p-3 rounded">
         {isAdminLoggedIn && (
           <button
             onClick={() => firmwareUpdate(slot)}
             className="bg-littwin-blue text-white px-4 py-2 rounded flex items-center"
           >
-            <span className="mr-2">🔧</span> Firmware Update
+            Firmware Update
           </button>
         )}
         <button
           onClick={() => handleDisplayEinschalten(slot)}
           className="bg-littwin-blue text-white px-4 py-2 rounded flex items-center"
         >
-          <span className="mr-2">📺</span> Display einschalten
-        </button>
+          Display einschalten
+        </button>{" "}
         <button
           onClick={handleSaveWrapper}
           className="bg-littwin-blue text-white px-4 py-2 rounded flex items-center"
         >
-          <span className="mr-2">💾</span> Speichern
+          Speichern
         </button>
       </div>
     </div>
diff --git a/components/main/kabelueberwachung/kue705FO/modals/SettingsModalWrapper.tsx b/components/main/kabelueberwachung/kue705FO/modals/SettingsModalWrapper.tsx
index 7c6a96e..27e1774 100644
--- a/components/main/kabelueberwachung/kue705FO/modals/SettingsModalWrapper.tsx
+++ b/components/main/kabelueberwachung/kue705FO/modals/SettingsModalWrapper.tsx
@@ -58,16 +58,18 @@ export default function KueModal({ showModal, onClose, slot }: KueModalProps) {
       }}
     >
       <div className="p-2 flex justify-between items-center rounded-t-md">
-        <h2 className="text-base font-bold">Steckplatz {slot + 1}</h2>
+        <h2 className="text-base font-bold">
+          Einstellungen Steckplatz {slot + 1}
+        </h2>
         <button onClick={onClose} className="text-2xl hover:text-gray-200">
           <i className="bi bi-x-circle-fill"></i>
         </button>
       </div>
 
-      <div className="flex justify-center bg-gray-100 space-x-2 p-2">
+      <div className="flex justify-start bg-gray-100 space-x-2 p-2">
         {[
-          { label: "KUE Einstellung", key: "kue" },
-          { label: "TDR Einstellung", key: "tdr" },
+          { label: "Allgemein", key: "kue" },
+          { label: "TDR ", key: "tdr" },
           { label: "Knotenpunkte", key: "knoten" },
         ].map(({ label, key }) => (
           <button
@@ -75,7 +77,7 @@ export default function KueModal({ showModal, onClose, slot }: KueModalProps) {
             onClick={() => setActiveTab(key as any)}
             className={`px-4 py-1 rounded-t font-bold text-sm ${
               activeTab === key
-                ? "bg-white text-blue-600"
+                ? "bg-white text-littwin-blue"
                 : "text-gray-500 hover:text-black"
             }`}
           >
diff --git a/components/main/kabelueberwachung/kue705FO/modals/TdrEinstellung.tsx b/components/main/kabelueberwachung/kue705FO/modals/TdrEinstellung.tsx
index 7dfbb02..fe4fd56 100644
--- a/components/main/kabelueberwachung/kue705FO/modals/TdrEinstellung.tsx
+++ b/components/main/kabelueberwachung/kue705FO/modals/TdrEinstellung.tsx
@@ -173,7 +173,7 @@ export default function TdrEinstellung({ slot, onClose }: Props) {
           aria-checked={tdrActive}
           onClick={handleTdrToggle}
           className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 ${
-            tdrActive ? "bg-green-500" : "bg-gray-300"
+            tdrActive ? "bg-littwin-blue" : "bg-gray-300"
           }`}
         >
           <span
@@ -187,58 +187,54 @@ export default function TdrEinstellung({ slot, onClose }: Props) {
         </span>
       </div>
 
-      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-        <div>
-          <label className="block text-sm font-medium mb-1">TDR Dämpfung</label>
-          <div className="relative">
+      <div className="mt-6 mb-4">
+        <h3 className="font-bold mb-2">TDR Einstellungen</h3>
+
+        <div className="mb-4 grid grid-cols-2 items-center gap-2 w-full">
+          <label className="font-semibold">TDR Dämpfung</label>
+          <div className="flex items-center gap-2">
             <input
               type="number"
+              className="w-24 border rounded p-1"
               value={tdrData.daempfung}
               onChange={(e) => {
                 const updated = { ...tdrData, daempfung: e.target.value };
                 setTdrData(updated);
                 updateCache(updated);
               }}
-              className="border px-2 py-1 rounded w-full pr-10"
             />
-            <span className="absolute right-2 top-1/2 -translate-y-1/2 text-xs text-gray-500">
-              dB
-            </span>
+            <span>dB</span>
           </div>
         </div>
 
-        <div>
-          <label className="block text-sm font-medium mb-1">
-            Geschwindigkeit
-          </label>
-          <div className="relative">
+        <div className="mb-4 grid grid-cols-2 items-center gap-2 w-full">
+          <label className="font-semibold">Geschwindigkeit</label>
+          <div className="flex items-center gap-2">
             <input
               type="number"
+              className="w-24 border rounded p-1"
               value={tdrData.geschwindigkeit}
               onChange={(e) => {
                 const updated = { ...tdrData, geschwindigkeit: e.target.value };
                 setTdrData(updated);
                 updateCache(updated);
               }}
-              className="border px-2 py-1 rounded w-full pr-14"
             />
-            <span className="absolute right-2 top-1/2 -translate-y-1/2 text-xs text-gray-500">
-              m/µs
-            </span>
+            <span>m/µs</span>
           </div>
         </div>
 
-        <div>
-          <label className="block text-sm font-medium mb-1">Trigger</label>
+        <div className="mb-4 grid grid-cols-2 items-center gap-2 w-full">
+          <label className="font-semibold">Trigger</label>
           <input
             type="number"
+            className="w-full border rounded p-1"
             value={tdrData.trigger}
             onChange={(e) => {
               const updated = { ...tdrData, trigger: e.target.value };
               setTdrData(updated);
               updateCache(updated);
             }}
-            className="border px-2 py-1 rounded w-full"
           />
         </div>
       </div>
@@ -246,9 +242,9 @@ export default function TdrEinstellung({ slot, onClose }: Props) {
       <div className="qhd:pt-48  2xl:pt-16  xl:pt-8 laptop:pt-2 flex justify-end">
         <button
           onClick={handleSave}
-          className="bg-littwin-blue text-white px-4 py-2 rounded shadow hover:bg-blue-700"
+          className="bg-littwin-blue text-white px-4 py-2 rounded shadow hover:bg-blue-500"
         >
-          💾 Einstellungen senden
+          Einstellungen senden
         </button>
       </div>
     </div>