KÜ705-FO Modulname von kueID und nicht von kueName nehmen, ID in Modal entfernen

app/kabelueberwachung/page.jsx

@@ -39,7 +39,7 @@ function Kabelueberwachung() {
     rack1: kueIso.slice(0, 8).map((value, index) => ({
       isolationswert: value, // Isolation value for this slot
       schleifenwiderstand: schleifenwiderstand[index], // Resistance for this slot
-      modulName: kueName[index] || "Unknown", // Name for this slot
+      modulName: kueID[index] || "Unknown", // Name for this slot
       kueOnlineStatus: kueOnline[index], // Online status for this slot
     })),
     rack2: kueIso.slice(8, 16).map((value, index) => ({
@@ -107,8 +107,10 @@ function Kabelueberwachung() {
       <div className="mb-4">
         <button
           onClick={() => changeRack(1)}
-          className={`mr-2 ${
-            activeRack === 1 ? "bg-blue-500 text-white" : "bg-gray-300"
+          className={`mr-1 ${
+            activeRack === 1
+              ? "bg-littwin-blue text-white p-1 rounded-sm "
+              : "bg-gray-300 p-1 text-sm"
           }`}
         >
           Rack 1
@@ -116,7 +118,9 @@ function Kabelueberwachung() {
         <button
           onClick={() => changeRack(2)}
           className={`mr-2 ${
-            activeRack === 2 ? "bg-blue-500 text-white" : "bg-gray-300"
+            activeRack === 2
+              ? "bg-littwin-blue text-white p-1 rounded-sm"
+              : "bg-gray-300 p-1 text-sm"
           }`}
         >
           Rack 2
@@ -124,7 +128,9 @@ function Kabelueberwachung() {
         <button
           onClick={() => changeRack(3)}
           className={`mr-2 ${
-            activeRack === 3 ? "bg-blue-500 text-white" : "bg-gray-300"
+            activeRack === 3
+              ? "bg-littwin-blue text-white p-1 rounded-sm"
+              : "bg-gray-300 p-1 text-sm"
           }`}
         >
           Rack 3
@@ -132,7 +138,9 @@ function Kabelueberwachung() {
         <button
           onClick={() => changeRack(4)}
           className={`mr-2 ${
-            activeRack === 4 ? "bg-blue-500 text-white" : "bg-gray-300"
+            activeRack === 4
+              ? "bg-littwin-blue text-white p-1 rounded-sm"
+              : "bg-gray-300 p-1 text-sm"
           }`}
         >
           Rack 4
@@ -140,9 +148,11 @@ function Kabelueberwachung() {
       </div>
 
       {/* Slots for the active rack */}
-      <div className="flex flex-row justify-between">
+      <div className="flex flex-row space-x-4">
         {racks[`rack${activeRack}`].map((slot, index) => (
-          <div key={index} className="flex-grow">
+          <div key={index} className="flex">
+            {" "}
+            {/* No gap */}
             <Kue705FO
               isolationswert={slot.isolationswert}
               schleifenwiderstand={slot.schleifenwiderstand}

components/modales/KueModal.jsx

@@ -35,11 +35,12 @@ function KueModal({ showModal, onClose, slot, onModulNameChange }) {
 
   useEffect(() => {
     // Initialisierung mit Werten aus dem globalen `window`-Objekt
+    //ID statt Name
     if (window.kueID && Array.isArray(window.kueID)) {
       setIds(window.kueID.map((id) => id.trim() || "---"));
     }
-    if (window.kueName && Array.isArray(window.kueName)) {
-      setBezeichnungen(window.kueName.map((name) => name.trim() || "---"));
+    if (window.kueID && Array.isArray(window.kueID)) {
+      setBezeichnungen(window.kueID.map((name) => name.trim() || "---"));
     }
     if (window.kueLimit1 && Array.isArray(window.kueLimit1)) {
       setIsolationsgrenzwerte(window.kueLimit1);
@@ -117,7 +118,7 @@ function KueModal({ showModal, onClose, slot, onModulNameChange }) {
         .then((response) => {
           if (response.ok) {
             alert("Daten erfolgreich gespeichert!");
-            onModulNameChange(bezeichnungen[slot]); // Weitergabe der Änderung
+            onModulNameChange(ids[slot]); // Weitergabe der Änderung
           } else {
             alert("Fehler beim Speichern der Daten!");
           }
@@ -185,7 +186,8 @@ function KueModal({ showModal, onClose, slot, onModulNameChange }) {
 
       {/* ID und Modulname anzeigen */}
       <div className="p-2 mb-4">
-        <div className="mb-2">
+        {/* 
+           <div className="mb-2">
           <label className="font-bold">ID:</label>
           <input
             type="text"
@@ -194,13 +196,15 @@ function KueModal({ showModal, onClose, slot, onModulNameChange }) {
             onChange={(e) => handleChange(setIds, e, slot)}
           />
         </div>
+        */}
+
         <div className="mb-2">
           <label className="font-bold">Modulname:</label>
           <input
             type="text"
             className="border rounded p-1 w-full text-sm"
-            value={bezeichnungen[slot]}
-            onChange={(e) => handleChange(setBezeichnungen, e, slot)}
+            value={ids[slot]}
+            onChange={(e) => handleChange(setIds, e, slot)}
           />
         </div>
       </div>