Kü Einstelung Modal, ID und Name

components/modales/KueModal.jsx

@@ -2,92 +2,112 @@ import ReactModal from "react-modal";
 import { useState, useEffect } from "react";
 
 function KueModal({ showModal, onClose, slot, onModulNameChange }) {
-  // Verwende ein Array von Bezeichnungen und Isolationsgrenzwerten für 32 Slots
+  const [ids, setIds] = useState(Array(32).fill("---")); // IDs für jedes Modul
   const [bezeichnungen, setBezeichnungen] = useState(Array(32).fill("---"));
   const [isolationsgrenzwerte, setIsolationsgrenzwerte] = useState(
-    Array(32).fill(0)
+    Array(32).fill(10.0)
   ); // Default 10.0 MOhm
-  const handleVerzögerungChange = (e) => {
+  const [verzoegerung, setVerzoegerung] = useState(Array(32).fill(1.0)); // Default Verzögerung 1 Sekunde
-    let value = e.target.value;
+  const [untereSchleifenGrenzwerte, setUntereSchleifenGrenzwerte] = useState(
-
+    Array(32).fill(0.1)
-    // Wertebereich von 1 bis 999 überprüfen
+  ); // kOhm
-    if (value < 1) value = 1;
+  const [obereSchleifenGrenzwerte, setObereSchleifenGrenzwerte] = useState(
-    if (value > 999) value = 999;
+    Array(32).fill(1.0)
-
+  ); // kOhm
-    e.target.value = value; // Setze den korrigierten Wert zurück in das Inputfeld
+  const [schleifenintervall, setSchleifenintervall] = useState(
-  };
+    Array(32).fill(24)
+  ); // Default 24 Stunden
 
   useEffect(() => {
-    // Initialisiere die Bezeichnungen basierend auf window.kueName
+    // Initialisierung mit Werten aus dem globalen `window`-Objekt
-    if (window.kueName && Array.isArray(window.kueName)) {
+    if (window.kueID && Array.isArray(window.kueID)) {
-      setBezeichnungen((prevBezeichnungen) => {
+      setIds(window.kueID.map((id) => id.trim() || "---"));
-        const updatedBezeichnungen = [...prevBezeichnungen];
+    }
-        for (let i = 0; i < 32; i++) {
+    if (window.kueName && Array.isArray(window.kueName)) {
-          updatedBezeichnungen[i] = window.kueName[i]?.trim() || "---"; // Leerzeichen entfernen
+      setBezeichnungen(window.kueName.map((name) => name.trim() || "---"));
-        }
-        return updatedBezeichnungen;
-      });
     }
-
-    // Initialisiere die Isolationsgrenzwerte basierend auf window.kueLimit1
     if (window.kueLimit1 && Array.isArray(window.kueLimit1)) {
-      setIsolationsgrenzwerte((prevIsolationsgrenzwerte) => {
+      setIsolationsgrenzwerte(window.kueLimit1);
-        const updatedGrenzwerte = [...prevIsolationsgrenzwerte];
+    }
-        for (let i = 0; i < 32; i++) {
+    if (window.kueDelay && Array.isArray(window.kueDelay)) {
-          updatedGrenzwerte[i] = window.kueLimit1[i] || 10.0; // Default zu 10.0
+      setVerzoegerung(window.kueDelay);
-        }
+    }
-        return updatedGrenzwerte;
+    if (window.kueLowerLimit && Array.isArray(window.kueLowerLimit)) {
-      });
+      setUntereSchleifenGrenzwerte(window.kueLowerLimit);
+    }
+    if (window.kueUpperLimit && Array.isArray(window.kueUpperLimit)) {
+      setObereSchleifenGrenzwerte(window.kueUpperLimit);
+    }
+    if (
+      window.kueSchleifenintervall &&
+      Array.isArray(window.kueSchleifenintervall)
+    ) {
+      setSchleifenintervall(window.kueSchleifenintervall);
     }
   }, []);
 
-  // Funktion zum Ändern der Bezeichnung für den aktuellen Slot
+  // Funktionen zur Änderung der Werte
-  const handleBezeichnungChange = (e, slot) => {
+  const handleChange = (setter, e, slot) => {
-    const newBezeichnung = e.target.value;
+    const value = e.target.value;
-    setBezeichnungen((prevBezeichnungen) => {
+    setter((prev) => {
-      const updatedBezeichnungen = [...prevBezeichnungen];
+      const updated = [...prev];
-      updatedBezeichnungen[slot] = newBezeichnung;
+      updated[slot] = value;
-      return updatedBezeichnungen;
+      return updated;
     });
   };
 
-  // Funktion zum Ändern des Isolationsgrenzwerts für den aktuellen Slot
-  const handleIsolationsgrenzwertChange = (e, slot) => {
-    const newGrenzwert = e.target.value;
-    setIsolationsgrenzwerte((prevGrenzwerte) => {
-      const updatedGrenzwerte = [...prevGrenzwerte];
-      updatedGrenzwerte[slot] = newGrenzwert;
-      return updatedGrenzwerte;
-    });
-  };
   const handleSave = () => {
+    const newId = ids[slot];
     const newBezeichnung = bezeichnungen[slot];
-    // Angepasstes URL-Format gemäß deinem funktionierenden Test
+    const newIsolationsGrenzwert = isolationsgrenzwerte[slot];
+    const newVerzoegerung = verzoegerung[slot];
+    const newUntererSchleifenGrenzwert = untereSchleifenGrenzwerte[slot];
+    const newObererSchleifenGrenzwert = obereSchleifenGrenzwerte[slot];
+    const newSchleifenintervall = schleifenintervall[slot];
+
     const url = `${
       process.env.NEXT_PUBLIC_API_BASE_URL
-    }/cpl?Service/kueDetail.HTML&slot=${slot}&KIA${slot}=${encodeURIComponent(
+    }/cpl?Service/kueDetail.HTML&slot=${slot}&KID${slot}=${encodeURIComponent(
+      newId
+    )}&KIA${slot}=${encodeURIComponent(
       newBezeichnung
-    )}`;
+    )}&KL_${slot}=${newIsolationsGrenzwert}&KD_${slot}=1&KR_${slot}=${newUntererSchleifenGrenzwert}&KRI${slot}=${newSchleifenintervall}`;
 
-    // Fetch-Aufruf, um den neuen Modulnamen zu senden
+    // Fetch-Aufruf, um die neuen Werte zu senden
     fetch(url, { method: "GET" })
       .then((response) => {
         if (response.ok) {
-          alert("Modulname erfolgreich gespeichert!");
+          alert("Daten erfolgreich gespeichert!");
-          onModulNameChange(newBezeichnung); // Hier wird die Änderung weitergegeben
+          onModulNameChange(newBezeichnung); // Weitergabe der Änderung
         } else {
-          alert("Fehler beim Speichern des Modulnamens!");
+          alert("Fehler beim Speichern der Daten!");
         }
       })
       .catch((error) => {
         console.error("Fehler:", error);
-        alert("Fehler beim Senden des Modulnamens!");
+        alert("Fehler beim Senden der Daten!");
       });
 
     // Schließe das Modal nach dem Speichern
     onClose();
   };
 
+  const handleDisplayEinschalten = () => {
+    const url = `${process.env.NEXT_PUBLIC_API_BASE_URL}/cpl?Service/kueDetail.HTML&KSD${slot}=1`;
+    fetch(url, { method: "GET" })
+      .then((response) => {
+        if (response.ok) {
+          alert(`Display für Slot ${slot + 1} erfolgreich eingeschaltet!`);
+        } else {
+          alert("Fehler beim Einschalten des Displays!");
+        }
+      })
+      .catch((error) => {
+        console.error("Fehler:", error);
+        alert("Fehler beim Einschalten des Displays!");
+      });
+  };
+
   return (
     <ReactModal
       isOpen={showModal}
@@ -107,7 +127,7 @@ function KueModal({ showModal, onClose, slot, onModulNameChange }) {
           transform: "translate(-50%, -50%)",
           width: "90%",
           maxWidth: "800px",
-          padding: "0",
+          padding: "20px",
           borderRadius: "8px",
           border: "none",
         },
@@ -115,105 +135,130 @@ function KueModal({ showModal, onClose, slot, onModulNameChange }) {
     >
       {/* Modal Header */}
       <div className="flex items-center justify-between bg-littwin-blue text-white p-2 rounded-t-lg">
-        <h2 className="text-sm font-bold">KUE Einstellung</h2>
+        <h2 className="text-sm font-bold">KUE Einstellung - Slot {slot + 1}</h2>
         <button onClick={onClose} className="text-white text-lg font-bold">
           &times;
         </button>
       </div>
 
+      {/* ID und Modulname anzeigen */}
+      <div className="p-2 mb-4">
+        <div className="mb-2">
+          <label className="font-bold">ID:</label>
+          <input
+            type="text"
+            className="border rounded p-1 w-full text-sm"
+            value={ids[slot]}
+            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)}
+          />
+        </div>
+      </div>
+
       {/* Modal Body */}
       <div className="p-2">
-        <table className="w-full text-left border-collapse">
+        <h3 className="font-bold text-center mb-4">Isolationsmessung</h3>
+        <table className="w-full text-left border-collapse mb-4">
           <thead className="bg-gray-100">
             <tr>
-              <th className="p-2 border text-sm text-center">KÜ</th>
-              <th className="p-2 border text-sm text-center">Bezeichnung</th>
               <th className="p-2 border text-sm text-center">
-                Isolationsgrenzwert
+                Grenzwert (MOhm)
               </th>
-              <th className="p-2 border text-sm text-center">Verzögerung</th>
               <th className="p-2 border text-sm text-center">
-                Schleifengrenzwert
+                Verzögerung (sek)
               </th>
-
-              {/* 
-                     <th className="p-2 border text-sm text-center">TDR Aktiv</th>
-              <th className="p-2 border text-sm text-center">KVZ Aktiv</th>
-              <th className="p-2 border text-sm">Datenlogger</th>
-              */}
             </tr>
           </thead>
           <tbody>
             <tr>
-              <td className="p-2 border text-center">{slot + 1}</td>
+              <td className="p-2 border text-center">
-              <td className="p-2 border">
                 <input
-                  type="text"
+                  type="number"
                   className="w-[6rem] border rounded p-1 text-sm"
-                  value={bezeichnungen[slot] || "---"} // Setze den Wert oder "---"
+                  value={isolationsgrenzwerte[slot]}
-                  onChange={(e) => handleBezeichnungChange(e, slot)} // Update Bezeichnung bei Änderung
+                  onChange={(e) =>
+                    handleChange(setIsolationsgrenzwerte, e, slot)
+                  }
                 />
               </td>
-              <td className="p-2 border text-center text-sm">
+              <td className="p-2 border text-center">
                 <input
                   type="number"
-                  className="w-16 border rounded p-1 text-sm"
+                  className="w-[6rem] border rounded p-1 text-sm"
-                  value={isolationsgrenzwerte[slot]} // Setze den Isolationsgrenzwert
+                  value={verzoegerung[slot]}
-                  onChange={(e) => handleIsolationsgrenzwertChange(e, slot)} // Update Isolationsgrenzwert bei Änderung
+                  onChange={(e) => handleChange(setVerzoegerung, e, slot)}
-                />{" "}
+                />
-                MOhm
-              </td>
-              <td className="p-2 border text-center text-sm">
-                {/* Flexbox für Verzögerung */}
-                <div className="flex items-center justify-center">
-                  <input
-                    type="number"
-                    className="w-12 border rounded p-1 text-sm"
-                    defaultValue="420"
-                    onChange={handleVerzögerungChange}
-                  />
-                  <span className="ml-1">sek.</span>
-                </div>
-              </td>
-              <td className="p-2 border text-center text-sm">
-                <input
-                  type="number"
-                  className="w-16 border rounded p-1"
-                  defaultValue="0.10"
-                />{" "}
-                kOhm
               </td>
+            </tr>
+          </tbody>
+        </table>
 
-              {/* 
+        <h3 className="font-bold text-center mb-4">Schleifenmessung</h3>
-                         <td className="p-2 border text-center">
+        <table className="w-full text-left border-collapse">
-                <input type="checkbox" defaultChecked />
+          <thead className="bg-gray-100">
+            <tr>
+              <th className="p-2 border text-sm text-center">
+                Unterer Grenzwert (kOhm)
+              </th>
+              <th className="p-2 border text-sm text-center">
+                Oberer Grenzwert (kOhm)
+              </th>
+              <th className="p-2 border text-sm text-center">
+                Schleifenintervall (h)
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td className="p-2 border text-center">
+                <input
+                  type="number"
+                  className="w-[6rem] border rounded p-1 text-sm"
+                  value={untereSchleifenGrenzwerte[slot]}
+                  onChange={(e) =>
+                    handleChange(setUntereSchleifenGrenzwerte, e, slot)
+                  }
+                />
               </td>
               <td className="p-2 border text-center">
-                <input type="checkbox" defaultChecked />
+                <input
+                  type="number"
+                  className="w-[6rem] border rounded p-1 text-sm"
+                  value={obereSchleifenGrenzwerte[slot]}
+                  onChange={(e) =>
+                    handleChange(setObereSchleifenGrenzwerte, e, slot)
+                  }
+                />
               </td>
-              <td className="p-2 border">
+              <td className="p-2 border text-center">
-                <select className="border rounded p-1 w-full">
+                <input
-                  <option value="aus">aus</option>
+                  type="number"
-                  <option value="ein">1 (1 min)</option>
+                  className="w-[6rem] border rounded p-1 text-sm"
-                  <option value="zwei">2 (2 min)</option>
+                  value={schleifenintervall[slot]}
-                  <option value="drei">3 (3 min)</option>
+                  onChange={(e) => handleChange(setSchleifenintervall, e, slot)}
-                  <option value="vier">4 (4 min)</option>
+                />
-                  <option value="fuenf">5 (5 min)</option>
-                  <option value="sechs">6 (6 min)</option>
-                  <option value="sieben">7 (7 min)</option>
-                  <option value="acht">8 (8 min)</option>
-                  <option value="neun">9 (9 min)</option>
-                  <option value="zehn">10 (10 min)</option>
-                </select>
               </td>
-              */}
             </tr>
           </tbody>
         </table>
       </div>
 
-      {/* Modal Footer */}
+      {/* Display Einschalten Button */}
       <div className="flex justify-end bg-gray-100 p-4 rounded-b-lg">
+        <button
+          onClick={handleDisplayEinschalten}
+          className="bg-green-500 text-white p-2 rounded flex items-center mr-2"
+        >
+          <span className="mr-2">📺</span> Display einschalten
+        </button>
         <button
           onClick={handleSave}
           className="bg-blue-500 text-white p-2 rounded flex items-center"