fix: Firmware-Update-Button stabilisiert und Flackern entfernt

- useAdminAuth aus KueEinstellung entfernt und einmalig in SettingsModalWrapper ausgelagert - isAdminLoggedIn als Prop übergeben, um ständige Aktualisierungen zu vermeiden - Button wird jetzt stabil angezeigt ohne console-Logs oder Intervall-Aufrufe
2025-07-02 12:03:02 +02:00
parent 1dfa1cc1ba
commit a9f6484fb0
14 changed files with 328 additions and 59 deletions
--- a/components/common/ConfirmModal.tsx
+++ b/components/common/ConfirmModal.tsx
@@ -0,0 +1,43 @@
+// components/common/ConfirmModal.tsx
+import React from "react";
+
+interface ConfirmModalProps {
+  open: boolean;
+  title?: string;
+  message: string;
+  onConfirm: () => void;
+  onCancel: () => void;
+}
+
+export default function ConfirmModal({
+  open,
+  title,
+  message,
+  onConfirm,
+  onCancel,
+}: ConfirmModalProps) {
+  if (!open) return null;
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-40 flex items-center justify-center z-50">
+      <div className="bg-white p-6 rounded shadow-xl w-[360px] max-w-full text-center">
+        {title && <h2 className="text-lg font-semibold mb-3">{title}</h2>}
+        <p className="mb-6 text-gray-800">{message}</p>
+        <div className="flex justify-center gap-4">
+          <button
+            className="bg-gray-300 hover:bg-gray-400 text-black px-4 py-2 rounded"
+            onClick={onCancel}
+          >
+            Abbrechen
+          </button>
+          <button
+            className="bg-littwin-blue hover:bg-blue-700 text-white px-4 py-2 rounded"
+            onClick={onConfirm}
+          >
+            Bestätigen
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/components/main/kabelueberwachung/kue705FO/handlers/firmwareUpdate.ts
+++ b/components/main/kabelueberwachung/kue705FO/handlers/firmwareUpdate.ts
@@ -1,24 +1,32 @@
-// /komponents/main/kabelueberwachung/kue705FO/handlers/firmwareUpdate.ts
-const firmwareUpdate = (slot: number) => {
+// @/components/main/kabelueberwachung/kue705FO/handlers/firmwareUpdate.ts
+export default async function firmwareUpdate(
+  slot: number
+): Promise<{ message: string }> {
  const isDev =
    typeof window !== "undefined" && window.location.hostname === "localhost";
  const url = isDev
    ? `${window.location.origin}/api/cpl/kueSingleModuleUpdateMock?slot=${
        slot + 1
      }`
-    : `${window.location.origin}/CPL?/kabelueberwachung.html&KSU${slot}=1`;
+    : `${window.location.origin}/CPL?Service/ae.ACP&KSU${slot}=1`;

-  fetch(url, { method: "GET" })
-    .then((response) => response.json())
-    .then((data) => {
-      alert(
-        data.message || `Update an Slot ${slot + 1} erfolgreich gestartet!`
-      );
-    })
-    .catch((error) => {
-      console.error("Fehler:", error);
-      alert("Fehler beim Update!");
-    });
-};
+  try {
+    const response = await fetch(url, { method: "GET" });

-export default firmwareUpdate;
+    if (!response.ok) {
+      throw new Error(`Fehler: Status ${response.status}`);
+    }
+
+    const data = await response.json();
+
+    //alert(data.message || `Update an Slot ${slot + 1} erfolgreich gestartet!`);
+    const message =
+      data.message || `Update an Slot ${slot + 1} erfolgreich gestartet!`;
+    console.log(message);
+    return { message };
+  } catch (error) {
+    console.error("Fehler:", error);
+    //alert("Fehler beim Update!");
+    return { message: "Fehler beim Update!" };
+  }
+}
--- a/components/main/kabelueberwachung/kue705FO/modals/KueEinstellung.tsx
+++ b/components/main/kabelueberwachung/kue705FO/modals/KueEinstellung.tsx
@@ -1,16 +1,20 @@
 "use client";
-
-import { useState } from "react";
+// components/main/kabelueberwachung/kue705FO/modals/KueEinstellung.tsx
+import { useState, useEffect } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import type { RootState } from "../../../../../redux/store";
 import handleSave from "../handlers/handleSave";
 import handleDisplayEinschalten from "../handlers/handleDisplayEinschalten";
 import firmwareUpdate from "../handlers/firmwareUpdate";
 import { useAdminAuth } from "../../../settingsPageComponents/hooks/useAdminAuth";
+import ProgressModal from "@/components/main/settingsPageComponents/modals/ProgressModal";
+import { toast } from "react-toastify";
+import ConfirmModal from "@/components/common/ConfirmModal";

 interface Props {
  slot: number;
  showModal: boolean;
+  isAdminLoggedIn: boolean; // NEU
  onClose?: () => void;
  onModulNameChange?: (id: string) => void;
 }
@@ -29,7 +33,8 @@ const memoryIntervalOptions = [

 export default function KueEinstellung({
  slot,
-
+  showModal,
+  isAdminLoggedIn,
  onClose = () => {},
  onModulNameChange,
 }: Props) {
@@ -43,18 +48,15 @@ export default function KueEinstellung({
    kueLoopInterval,
    memoryInterval,
  } = useSelector((state: RootState) => state.kueDataSlice);
+  const [showConfirmModal, setShowConfirmModal] = useState(false);

-  const { isAdminLoggedIn } = useAdminAuth(true);
-
-  const formCacheKey = `slot_${slot}`;
-  if (typeof window !== "undefined") {
-    window.__kueCache = window.__kueCache || {};
-  }
-  const cached =
-    typeof window !== "undefined" ? window.__kueCache?.[formCacheKey] : null;
-
+  const [isUpdating, setIsUpdating] = useState(false);
+  const [progress, setProgress] = useState(0);
  const [formData, setFormData] = useState(() => {
-    if (cached) return cached;
+    if (typeof window !== "undefined") {
+      const cache = window.__kueCache?.[`slot_${slot}`];
+      if (cache) return cache;
+    }
    return {
      kueID: kueID[slot] || "",
      kueName: kueName[slot] || "",
@@ -70,17 +72,12 @@ export default function KueEinstellung({
    const updated = { ...formData, [key]: value };
    setFormData(updated);
    if (typeof window !== "undefined") {
-      window.__kueCache![formCacheKey] = updated;
+      window.__kueCache = window.__kueCache || {};
+      window.__kueCache[`slot_${slot}`] = updated;
    }
  };

  const handleSaveWrapper = async () => {
-    const updatedKueID = [...kueID];
-    //updatedKueID[slot] = formData.kueID;
-    /*    if (Object.isFrozen(kueID)) {
-      console.warn("kueID ist readonly!");
-    }
-   */
    const updatedKueName = [...kueName];
    updatedKueName[slot] = formData.kueName;

@@ -100,7 +97,7 @@ export default function KueEinstellung({
    updatedMemoryInterval[slot] = Number(formData.memoryInterval);

    const newData = {
-      kueID: updatedKueID[slot],
+      kueID: kueID[slot],
      kueName: updatedKueName[slot],
      limit1: updatedLimit1[slot].toString(),
      delay1: updatedDelay1[slot].toString(),
@@ -108,13 +105,11 @@ export default function KueEinstellung({
      loopInterval: updatedLoopInterval[slot].toString(),
      memoryInterval: updatedMemoryInterval[slot].toString(),
    };
-
    setFormData(newData);
    if (typeof window !== "undefined") {
      window.__kueCache![`slot_${slot}`] = newData;
    }

-    // 🔧 handleSave aufrufen mit allen Daten
    await handleSave({
      slot,
      ids: kueID,
@@ -122,7 +117,7 @@ export default function KueEinstellung({
      isolationsgrenzwerte: updatedLimit1,
      verzoegerung: updatedDelay1,
      untereSchleifenGrenzwerte: updatedLimit2Low,
-      obereSchleifenGrenzwerte: updatedLimit2Low, // ggf. anpassen, falls du später High-Werte brauchst
+      obereSchleifenGrenzwerte: updatedLimit2Low,
      schleifenintervall: updatedLoopInterval,
      speicherintervall: updatedMemoryInterval,
      originalValues: {
@@ -245,20 +240,62 @@ export default function KueEinstellung({
      </div>
      <div className="flex justify-end gap-2  p-0 rounded">
        {isAdminLoggedIn && (
-          <button
-            onClick={() => {
-              if (
-                window.confirm(
-                  "Warnung: Das Firmware-Update kann einige Minuten dauern und das Gerät neu starten.\nMöchten Sie wirklich fortfahren?"
-                )
-              ) {
-                firmwareUpdate(slot);
+          <>
+            <button
+              onClick={() => setShowConfirmModal(true)}
+              className="bg-littwin-blue text-white px-4 py-2 rounded flex items-center"
+            >
+              Firmware Update
+            </button>
+          </>
+        )}
+        {showConfirmModal && (
+          <ConfirmModal
+            open={showConfirmModal}
+            title="Firmware-Update starten?"
+            message="⚠️ Das Firmware-Update kann einige Minuten dauern. Möchten Sie wirklich fortfahren?"
+            onCancel={() => setShowConfirmModal(false)}
+            onConfirm={async () => {
+              setShowConfirmModal(false);
+              toast.info("Firmware-Update gestartet. Bitte warten...");
+              setIsUpdating(true);
+              setProgress(0);
+
+              const totalDuration = 5000;
+              const intervalMs = 50;
+              const steps = totalDuration / intervalMs;
+              let currentStep = 0;
+
+              const interval = setInterval(() => {
+                currentStep++;
+                const newProgress = Math.min((currentStep / steps) * 100, 100);
+                setProgress(newProgress);
+
+                if (currentStep >= steps) {
+                  clearInterval(interval);
+                  setProgress(100);
+                  setTimeout(() => {
+                    toast.success(
+                      "✅ Firmwareupdate erfolgreich abgeschlossen."
+                    );
+                    setIsUpdating(false);
+                  }, 300);
+                }
+              }, intervalMs);
+
+              try {
+                await firmwareUpdate(slot);
+              } catch (err) {
+                console.error("Firmware-Update-Fehler:", err);
+                clearInterval(interval);
+                toast.error("❌ Fehler beim Firmwareupdate");
+                setIsUpdating(false);
              }
            }}
-            className="bg-littwin-blue text-white px-4 py-2 rounded flex items-center"
-          >
-            Firmware Update
-          </button>
+          />
+        )}
+        {isUpdating && (
+          <ProgressModal visible={isUpdating} progress={progress} />
        )}
        <button
          onClick={() => handleDisplayEinschalten(slot)}
--- a/components/main/kabelueberwachung/kue705FO/modals/SettingsModalWrapper.tsx
+++ b/components/main/kabelueberwachung/kue705FO/modals/SettingsModalWrapper.tsx
@@ -4,6 +4,7 @@ import ReactModal from "react-modal";
 import KueEinstellung from "./KueEinstellung";
 import TdrEinstellung from "./TdrEinstellung";
 import Knotenpunkte from "./Knotenpunkte";
+import { useAdminAuth } from "@/components/main/settingsPageComponents/hooks/useAdminAuth";

 interface KueModalProps {
  showModal: boolean;
@@ -20,6 +21,8 @@ declare global {
 }

 export default function KueModal({ showModal, onClose, slot }: KueModalProps) {
+  const { isAdminLoggedIn } = useAdminAuth(true);
+
  const [activeTab, setActiveTab] = useState<"kue" | "tdr" | "knoten">(() => {
    if (typeof window !== "undefined" && window.__lastKueTab) {
      return window.__lastKueTab;
@@ -100,6 +103,7 @@ export default function KueModal({ showModal, onClose, slot }: KueModalProps) {
            showModal={showModal}
            onModulNameChange={(id) => console.log("Modulname geändert:", id)}
            onClose={onClose}
+            isAdminLoggedIn={isAdminLoggedIn} // Neue
          />
        )}
        {activeTab === "tdr" && (
--- a/components/main/kabelueberwachung/kue705FO/modals/SuccessProgressModal.tsx
+++ b/components/main/kabelueberwachung/kue705FO/modals/SuccessProgressModal.tsx
@@ -0,0 +1,55 @@
+"use client";
+// components/main/kabelueberwachung/kue705FO/modals/SuccessProgressModal.tsx
+import React, { useEffect, useState } from "react";
+
+interface Props {
+  visible: boolean;
+  duration?: number; // in Sekunden
+  onClose: () => void;
+}
+
+const SuccessProgressModal: React.FC<Props> = ({
+  visible,
+  duration = 10,
+  onClose,
+}) => {
+  const [progress, setProgress] = useState(0);
+
+  useEffect(() => {
+    if (!visible) return;
+    setProgress(0);
+    const interval = setInterval(() => {
+      setProgress((prev) => {
+        if (prev >= 100) {
+          clearInterval(interval);
+          setTimeout(onClose, 500); // Schließen nach kurzer Verzögerung
+          return 100;
+        }
+        return prev + 100 / duration;
+      });
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, [visible, duration, onClose]);
+
+  if (!visible) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 bg-black bg-opacity-40 flex items-center justify-center">
+      <div className="bg-white p-6 rounded-lg shadow-md text-center w-72">
+        <h2 className="text-lg font-bold text-green-600 mb-4">
+          ✅ Firmwareupdate erfolgreich abgeschlossen.
+        </h2>
+        <div className="w-full bg-gray-200 rounded h-3 overflow-hidden">
+          <div
+            className="h-3 bg-green-500 transition-all duration-100"
+            style={{ width: `${progress}%` }}
+          ></div>
+        </div>
+        <p className="text-sm mt-2">{Math.floor(progress)}%</p>
+      </div>
+    </div>
+  );
+};
+
+export default SuccessProgressModal;