feat: Implementiere bedingtes Speichern der geänderten KUE-Parameter

- Nur geänderte Werte werden beim Klick auf den "Speichern"-Button gesendet.
- Verwendet handleChange, um die lokalen Werte zu aktualisieren, ohne sofortige API-Anfragen.
- Verbesserte Logik zur Erkennung von Änderungen gegenüber den Originalwerten.
- Sicherstellung, dass keine unnötigen API-Aufrufe gesendet werden, wenn keine Änderungen vorliegen.

app/dashboard/page.jsx

@@ -168,10 +168,12 @@ function Dashboard() {
             Letzten 20 Meldungen
           </h1>
         </div>
-        <Icon
+        {/* 
+                <Icon
           icon="ph:trash"
           className="text-red-500 hover:text-red-600 mr-8 text-3xl cursor-pointer"
         />
+        */}
       </div>
 
       <div className="flex flex-col lg:flex-row gap-1 overflow-hidden">
@@ -244,7 +246,7 @@ function Dashboard() {
             <div className="flex flex-row p-2 space-x-2">
               <Icon icon="mdi:web" className="text-xl text-blue-400" />
               <p className="text-sm text-gray-600">
-                <span className="font-bold">Webserverversion: </span> 5.3.4.1
+                <span className="font-bold">Webserverversion: </span> 1.0.0
               </p>
             </div>
           </div>

components/Header.jsx

@@ -32,7 +32,33 @@ function Header() {
         console.error("Fehler beim Laden der Variablen:", error);
       });
   }, [apiUrl]);
+  //--------------------------------------------------------------------------------
+  const files = [
+    "de.acp",
+    "kueConfig.acp",
+    "kueData.js",
+    "kueDetailTdr.acp",
+    "Start.acp",
+    "System.acp",
+  ]; // Manuelle Liste der Dateien, die du einbinden möchtest
 
+  useEffect(() => {
+    // Füge jede Datei als Skript in den Head-Bereich ein
+    files.forEach((file) => {
+      const script = document.createElement("script");
+      script.src = `/CPL?/CPL/SERVICE/${file}`; // Lade die Datei aus dem public Verzeichnis
+      script.async = true;
+      script.onload = () => {
+        console.log(`${file} wurde erfolgreich geladen.`);
+      };
+      script.onerror = (error) => {
+        console.error(`Fehler beim Laden von ${file}:`, error);
+      };
+      document.head.appendChild(script); // Füge das Skript in den Head ein
+    });
+  }, []);
+
+  //--------------------------------------------------------------------------------
   return (
     <header className="bg-gray-300 flex justify-between items-center w-full h-28 relative">
       {/* Logo - Vergrößert und verschoben */}

components/Navigation.jsx

@@ -19,7 +19,7 @@ function Navigation() {
     //{ name: "Zutrittskontrolle", path: "/access" },
     //{ name: "Ein- und Ausgänge", path: "/einausgaenge" },
     //{ name: "Analoge Eingänge", path: "/analogeEingaenge" },
-    { name: "Meldungen", path: "/meldungen" },
+    //{ name: "Meldungen", path: "/meldungen" },
   ];
 
   return (

components/modales/KueModal.jsx

@@ -18,6 +18,20 @@ function KueModal({ showModal, onClose, slot, onModulNameChange }) {
   const [schleifenintervall, setSchleifenintervall] = useState(
     Array(32).fill(24)
   ); // Default 24 Stunden
+  // Originalwerte speichern
+  const [originalValues, setOriginalValues] = useState({});
+  useEffect(() => {
+    const initialValues = {
+      ids: [...ids],
+      bezeichnungen: [...bezeichnungen],
+      isolationsgrenzwerte: [...isolationsgrenzwerte],
+      verzoegerung: [...verzoegerung],
+      untereSchleifenGrenzwerte: [...untereSchleifenGrenzwerte],
+      obereSchleifenGrenzwerte: [...obereSchleifenGrenzwerte],
+      schleifenintervall: [...schleifenintervall],
+    };
+    setOriginalValues(initialValues);
+  }, [showModal]);
 
   useEffect(() => {
     // Initialisierung mit Werten aus dem globalen `window`-Objekt
@@ -58,37 +72,64 @@ function KueModal({ showModal, onClose, slot, onModulNameChange }) {
   };
 
   const handleSave = () => {
-    const newId = ids[slot];
+    const changes = {};
-    const newBezeichnung = bezeichnungen[slot];
-    const newIsolationsGrenzwert = isolationsgrenzwerte[slot];
-    const newVerzoegerung = verzoegerung[slot];
-    const newUntererSchleifenGrenzwert = untereSchleifenGrenzwerte[slot];
-    const newObererSchleifenGrenzwert = obereSchleifenGrenzwerte[slot];
-    const newSchleifenintervall = schleifenintervall[slot];
 
-    const url = `${
+    // Vergleich mit den Originalwerten, um Änderungen zu erkennen
-      process.env.NEXT_PUBLIC_API_BASE_URL
+    if (ids[slot] !== originalValues.ids[slot]) {
-    }/cpl?Service/kueDetail.HTML&slot=${slot}&KID${slot}=${encodeURIComponent(
+      changes.KID = ids[slot];
-      newId
+    }
-    )}&KIA${slot}=${encodeURIComponent(
+    if (bezeichnungen[slot] !== originalValues.bezeichnungen[slot]) {
-      newBezeichnung
+      changes.KIA = bezeichnungen[slot];
-    )}&KL_${slot}=${newIsolationsGrenzwert}&KD_${slot}=1&KR_${slot}=${newUntererSchleifenGrenzwert}&KRI${slot}=${newSchleifenintervall}`;
+    }
+    if (
+      isolationsgrenzwerte[slot] !== originalValues.isolationsgrenzwerte[slot]
+    ) {
+      changes.KL_ = isolationsgrenzwerte[slot];
+    }
+    if (verzoegerung[slot] !== originalValues.verzoegerung[slot]) {
+      changes.KD_ = verzoegerung[slot];
+    }
+    if (
+      untereSchleifenGrenzwerte[slot] !==
+      originalValues.untereSchleifenGrenzwerte[slot]
+    ) {
+      changes.KR_ = untereSchleifenGrenzwerte[slot];
+    }
+    if (
+      obereSchleifenGrenzwerte[slot] !==
+      originalValues.obereSchleifenGrenzwerte[slot]
+    ) {
+      changes.KRO_ = obereSchleifenGrenzwerte[slot];
+    }
+    if (schleifenintervall[slot] !== originalValues.schleifenintervall[slot]) {
+      changes.KRI = schleifenintervall[slot];
+    }
 
-    // Fetch-Aufruf, um die neuen Werte zu senden
+    // Falls Änderungen vorhanden sind, die fetch-Requests auslösen
-    fetch(url, { method: "GET" })
+    if (Object.keys(changes).length > 0) {
-      .then((response) => {
+      let url = `${process.env.NEXT_PUBLIC_API_BASE_URL}/cpl?Service/kueDetail.HTML&slot=${slot}`;
-        if (response.ok) {
+
-          alert("Daten erfolgreich gespeichert!");
+      Object.keys(changes).forEach((paramKey) => {
-          onModulNameChange(newBezeichnung); // Weitergabe der Änderung
+        url += `&${paramKey}${slot}=${encodeURIComponent(changes[paramKey])}`;
-        } else {
-          alert("Fehler beim Speichern der Daten!");
-        }
-      })
-      .catch((error) => {
-        console.error("Fehler:", error);
-        alert("Fehler beim Senden der Daten!");
       });
 
+      fetch(url, { method: "GET" })
+        .then((response) => {
+          if (response.ok) {
+            alert("Daten erfolgreich gespeichert!");
+            onModulNameChange(bezeichnungen[slot]); // Weitergabe der Änderung
+          } else {
+            alert("Fehler beim Speichern der Daten!");
+          }
+        })
+        .catch((error) => {
+          console.error("Fehler:", error);
+          alert("Fehler beim Senden der Daten!");
+        });
+    } else {
+      alert("Keine Änderungen vorgenommen.");
+    }
+
     // Schließe das Modal nach dem Speichern
     onClose();
   };

components/modales/SettingsModal.jsx

@@ -15,7 +15,7 @@ function SettingModal({ showModal, onClose }) {
   const [ntp2, setNtp2] = useState("0.0.0.0");
   const [ntp3, setNtp3] = useState("0.0.0.0");
   const [zeitzone, setZeitzone] = useState("2");
-  const [activ, setActiv] = useState("1");
+  const [active, setActive] = useState("1");
   const [showRebootModal, setShowRebootModal] = useState(false);
 
   useEffect(() => {
@@ -30,7 +30,7 @@ function SettingModal({ showModal, onClose }) {
     if (window.ntpServer2Ip) setNtp2(window.ntpServer2Ip);
     if (window.ntpServer3Ip) setNtp3(window.ntpServer3Ip);
     if (window.ntpTimezone) setZeitzone(window.ntpTimezone);
-    if (window.ntpActive) setActiv(window.ntpActive);
+    if (window.ntpActive) setActive(window.ntpActive);
   }, []);
 
   const handleReboot = () => {
@@ -66,7 +66,7 @@ function SettingModal({ showModal, onClose }) {
 
   const handleSubmit = () => {
     if (window.confirm("Möchten Sie die Änderungen wirklich übernehmen?")) {
-      const url = `CPL?KUEdetail.ACP&SNNA=${name}&SEI01=${ip}&SEI02=${subnet}&SEI03=${gateway}&SNIP1=${ntp1}&SNIP2=${ntp2}&SNIP3=${ntp3}&SNTZ=${zeitzone}&SNAC=${activ}`;
+      const url = `CPL?KUEdetail.ACP&SNNA=${name}&SEI01=${ip}&SEI02=${subnet}&SEI03=${gateway}&SNIP1=${ntp1}&SNIP2=${ntp2}&SNIP3=${ntp3}&SNTZ=${zeitzone}&SNAC=${active}`;
 
       fetch(url)
         .then((response) => {
@@ -149,6 +149,7 @@ function SettingModal({ showModal, onClose }) {
                   className="border border-gray-300 rounded p-2 w-full"
                   value={mac1}
                   onChange={(e) => setMac1(e.target.value)}
+                  disabled
                 />
               </div>
               <div>
@@ -160,6 +161,7 @@ function SettingModal({ showModal, onClose }) {
                   className="border border-gray-300 rounded p-2 w-full"
                   value={mac2}
                   onChange={(e) => setMac2(e.target.value)}
+                  disabled
                 />
               </div>
             </div>
@@ -203,6 +205,15 @@ function SettingModal({ showModal, onClose }) {
                   value={systemUhr}
                   disabled
                 />
+                {/* Button für Systemzeit übernehmen */}
+                <div className="flex w-full mt-1 justify-end">
+                  <button
+                    className="bg-green-500 text-white px-4 py-2 rounded"
+                    onClick={() => console.log("Systemzeit übernehmen")}
+                  >
+                    Systemzeit übernehmen
+                  </button>
+                </div>
               </div>
             </div>
 
@@ -252,12 +263,12 @@ function SettingModal({ showModal, onClose }) {
                 />
               </div>
               <div>
-                <label className="block text-sm font-medium">Activ:</label>
+                <label className="block text-sm font-medium">NTP Active:</label>
                 <input
                   type="text"
                   className="border border-gray-300 rounded p-2 w-full"
-                  value={activ}
+                  value={active}
-                  onChange={(e) => setActiv(e.target.value)}
+                  onChange={(e) => setActive(e.target.value)}
                 />
               </div>
             </div>

components/modules/Kue705FO.jsx

@@ -185,6 +185,14 @@ function Kue705FO({
     }
   };
 
+  // Bestimme, welche Funktion ausgeführt wird, basierend auf dem aktiven Button
+  const handleRefreshClick = () => {
+    if (activeButton === "Schleife") {
+      goLoop(); // Wenn Schleife aktiv ist, starte goLoop
+    } else if (activeButton === "TDR") {
+      goTDR(); // Wenn TDR aktiv ist, starte goTDR
+    }
+  };
   return (
     <div className="relative bg-gray-300 w-[116px] h-[390px] border border-gray-400 scale-110 top-3">
       {isModulPresent ? (
@@ -249,8 +257,9 @@ function Kue705FO({
 
             <div className="relative w-full h-[45px] bg-gray-100 border border-gray-400 flex items-center justify-center mt-3">
               <button
-                onClick={() => console.log("Refresh clicked")}
+                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"
+                disabled={loading} // Disable button while loading
               >
                 <span className="text-white text-[18px]">⟳</span>
               </button>

public/CPL/SERVICE/Start.acp

@@ -0,0 +1 @@
+var last20Messages=<%=SAM01%>

public/CPL/SERVICE/System.acp

@@ -0,0 +1,15 @@
+var deviceName="<%=SAN01%>";
+var mac1="<%=SEM01%>";
+var mac2="<%=SEM02%>";
+var ip="<%=SEI01%>";
+var subnet="<%=SES01%>";
+var gateway="<%=SEG01%>";
+var datetime="<%=SCL01%>";
+var opcState="<%=SOS01%>";
+var opcSessions="<%=SOC01%>";
+var opcName="<%=SON01%>";
+var ntp1="<%=STP01%>";
+var ntp2="<%=STP02%>";
+var ntp3="<%=STP03%>";
+var ntpTimezone="<%=STT00%>";
+var ntpActive="<%=STA00%>";

public/CPL/SERVICE/de.acp

@@ -0,0 +1,3 @@
+var de=[<%=DES80%>,<%=DES81%>,<%=DES82%>,<%=DES83%>];
+var counter=[<%=DEC80%>,<%=DEC81%>,<%=DEC82%>,<%=DEC83%>];
+var flutter=[<%=DEF80%>,<%=DEF81%>,<%=DEF82%>,<%=DEF83%>];

public/CPL/SERVICE/kueConfig.acp

@@ -0,0 +1,4 @@
+var kueOnline=[<%=KSO80%>,<%=KSO81%>,<%=KSO82%>,<%=KSO83%>];
+var kueID=[<%=KSI80%>,<%=KSI81%>,<%=KSI82%>,<%=KSI83%>];
+var kueName=[<%=KSA80%>,<%=KSA81%>,<%=KSA82%>,<%=KSA83%>];
+var kueIso=[<%=KIM80%>,<%=KIM81%>,<%=KIM82%>,<%=KIM83%>];

public/CPL/SERVICE/kueData.js

@@ -0,0 +1,25 @@
+
+var kueOnline=[<%=KSO80%>,<%=KSO81%>,<%=KSO82%>,<%=KSO83%>];
+var kueIso=[<%=KIM80%>,<%=KIM81%>,<%=KIM82%>,<%=KIM83%>];
+var kueValid=[<%=KIV80%>,<%=KIV81%>,<%=KIV82%>,<%=KIV83%>];
+var kueAlarm1=[<%=KIA80%>,<%=KIA81%>,<%=KIA82%>,<%=KIA83%>];
+var kueAlarm2=[<%=KRA80%>,<%=KRA81%>,<%=KRA82%>,<%=KRA83%>];
+var kueRes=[<%=KRM80%>,<%=KRM81%>,<%=KRM82%>,<%=KRM83%>];
+var kueCableBreak=[<%=KSC80%>,<%=KSC81%>,<%=KSC82%>,<%=KSC83%>];
+var kueGroundFault=[<%=KSG80%>,<%=KSG81%>,<%=KSG82%>,<%=KSG83%>];
+var kueLimit1=[<%=KIG80%>,<%=KIG81%>,<%=KIG82%>,<%=KIG83%>];
+var kueLimit2Low=[<%=KRG80%>,<%=KRG81%>,<%=KRG82%>,<%=KRG83%>];
+var kueLimit2High=[<%=KRH80%>,<%=KRH81%>,<%=KRH82%>,<%=KRH83%>];
+var kueDelay1=[<%=KID80%>,<%=KID81%>,<%=KID82%>,<%=KID83%>];
+var kueLoopInterval=[<%=KRI80%>,<%=KRI81%>,<%=KRI82%>,<%=KRI83%>];
+var kueID=[<%=KSI80%>,<%=KSI81%>,<%=KSI82%>,<%=KSI83%>];
+var kueName=[<%=KSA80%>,<%=KSA81%>,<%=KSA82%>,<%=KSA83%>];
+var kueVersion=[<%=KSV80%>,<%=KSV81%>,<%=KSV82%>,<%=KSV83%>];
+var kueOverflow=[<%=KIW80%>,<%=KIW81%>,<%=KIW82%>,<%=KIW83%>];
+var kue100V=[<%=KSS80%>,<%=KSS81%>,<%=KSS82%>,<%=KSS83%>];
+var kueResidence=[<%=KSN80%>,<%=KSN81%>,<%=KSN82%>,<%=KSN83%>];
+var kueBooting=[<%=KSB80%>,<%=KSB81%>,<%=KSB82%>,<%=KSB83%>];
+
+
+
+

public/CPL/SERVICE/kueDetailTdr.acp

@@ -0,0 +1,17 @@
+var kueOnline=[<%=KSO80%>,<%=KSO81%>,<%=KSO82%>,<%=KSO83%>];
+var kueValid=[<%=KIV80%>,<%=KIV81%>,<%=KIV82%>,<%=KIV83%>];
+
+
+var kueID=[<%=KSI80%>,<%=KSI81%>,<%=KSI82%>,<%=KSI83%>];
+var kueName=[<%=KSA80%>,<%=KSA81%>,<%=KSA82%>,<%=KSA83%>];
+var kueVersion=[<%=KSV80%>,<%=KSV81%>,<%=KSV82%>,<%=KSV83%>];
+
+
+var tdrAtten=[<%=KTD80%>,<%=KTD81%>,<%=KTD82%>,<%=KTD83%>];
+var tdrPulse=[<%=KTP80%>,<%=KTP81%>,<%=KTP82%>,<%=KTP83%>];
+var tdrSpeed=[<%=KTS80%>,<%=KTS81%>,<%=KTS82%>,<%=KTS83%>];
+var tdrAmp=[<%=KTA80%>,<%=KTA81%>,<%=KTA82%>,<%=KTA83%>];
+var tdrTrigger=[<%=KTE80%>,<%=KTE81%>,<%=KTE82%>,<%=KTE83%>];
+var tdrLocation=[<%=KTF80%>,<%=KTF81%>,<%=KTF82%>,<%=KTF83%>];
+var tdrActive=[<%=KTX80%>,<%=KTX81%>,<%=KTX82%>,<%=KTX83%>];
+var tdrLast=[<%=KTL80%>,<%=KTL81%>,<%=KTL82%>,<%=KTL83%>];