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.
2024-10-18 10:21:11 +02:00
parent dd09a83fb8
commit f0c490df5b
12 changed files with 191 additions and 37 deletions
--- a/components/Header.jsx
+++ b/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 */}
--- a/components/Navigation.jsx
+++ b/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 (
--- a/components/modales/KueModal.jsx
+++ b/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 newBezeichnung = bezeichnungen[slot];
-    const newIsolationsGrenzwert = isolationsgrenzwerte[slot];
-    const newVerzoegerung = verzoegerung[slot];
-    const newUntererSchleifenGrenzwert = untereSchleifenGrenzwerte[slot];
-    const newObererSchleifenGrenzwert = obereSchleifenGrenzwerte[slot];
-    const newSchleifenintervall = schleifenintervall[slot];
+    const changes = {};

-    const url = `${
-      process.env.NEXT_PUBLIC_API_BASE_URL
-    }/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}`;
+    // Vergleich mit den Originalwerten, um Änderungen zu erkennen
+    if (ids[slot] !== originalValues.ids[slot]) {
+      changes.KID = ids[slot];
+    }
+    if (bezeichnungen[slot] !== originalValues.bezeichnungen[slot]) {
+      changes.KIA = bezeichnungen[slot];
+    }
+    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
-    fetch(url, { method: "GET" })
-      .then((response) => {
-        if (response.ok) {
-          alert("Daten erfolgreich gespeichert!");
-          onModulNameChange(newBezeichnung); // Weitergabe der Änderung
-        } else {
-          alert("Fehler beim Speichern der Daten!");
-        }
-      })
-      .catch((error) => {
-        console.error("Fehler:", error);
-        alert("Fehler beim Senden der Daten!");
+    // Falls Änderungen vorhanden sind, die fetch-Requests auslösen
+    if (Object.keys(changes).length > 0) {
+      let url = `${process.env.NEXT_PUBLIC_API_BASE_URL}/cpl?Service/kueDetail.HTML&slot=${slot}`;
+
+      Object.keys(changes).forEach((paramKey) => {
+        url += `&${paramKey}${slot}=${encodeURIComponent(changes[paramKey])}`;
      });

+      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();
  };
--- a/components/modales/SettingsModal.jsx
+++ b/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}
-                  onChange={(e) => setActiv(e.target.value)}
+                  value={active}
+                  onChange={(e) => setActive(e.target.value)}
                />
              </div>
            </div>
--- a/components/modules/Kue705FO.jsx
+++ b/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>