feat: Firmwareupdate für alle KÜ-Module mit Fortschrittsanzeige und Abschlussmeldung

- ProgressModal-Komponente implementiert, die während des Updates angezeigt wird
- Firmwareupdate dauert 5 Minuten (Mock-Simulation)
- Nach Abschluss erscheint automatisch ein Toast-Hinweis
- Verbesserte Benutzerführung durch blockierendes Modal während Update
- Logging in kueFirmwareUpdateLog.json integriert (Mock)

components/main/settingsPageComponents/GeneralSettings.tsx

@@ -13,12 +13,17 @@ import { getSystemSettingsThunk } from "../../../redux/thunks/getSystemSettingsT
 import handleGeneralSubmit from "./handlers/handleGeneralSubmit";
 import handleKueFirmwareUpdate from "@/components/main/settingsPageComponents/handlers/handleKueFirmwareUpdate";
 import { useAdminAuth } from "@/components/main/settingsPageComponents/hooks/useAdminAuth";
+import ProgressModal from "@/components/main/settingsPageComponents/modals/ProgressModal";
+
+import "react-toastify/dist/ReactToastify.css";
 
 const GeneralSettings: React.FC = () => {
   const dispatch = useDispatch<AppDispatch>();
   const systemSettings = useSelector(
     (state: RootState) => state.systemSettingsSlice
   );
+  const [isUpdating, setIsUpdating] = useState(false);
+  const [progress, setProgress] = useState(0);
 
   const { isAdminLoggedIn } = useAdminAuth(true);
 
@@ -143,50 +148,6 @@ const GeneralSettings: React.FC = () => {
           />
         </div>
 
-        {/* Admin Login */}
-        {/*
-                        <div className="col-span-2 flex flex-col gap-1">
-          {isAdminLoggedIn ? (
-            <button
-              type="button"
-              className="bg-littwin-blue text-white px-4 py-2 h-8 text-xs rounded whitespace-nowrap"
-              onClick={logoutAdmin}
-            >
-              Admin abmelden
-            </button>
-          ) : (
-            <>
-              <div className="flex flex-row gap-3">
-                <input
-                  type="text"
-                  placeholder="Benutzername"
-                  className="border border-gray-300 rounded h-8 p-1 w-full text-xs"
-                  value={username}
-                  onChange={(e) => setUsername(e.target.value)}
-                />
-                <input
-                  type="password"
-                  placeholder="Passwort"
-                  className="border border-gray-300 rounded h-8 p-1 w-full text-xs"
-                  value={password}
-                  onChange={(e) => setPassword(e.target.value)}
-                />
-                <button
-                  type="button"
-                  className="bg-littwin-blue text-white px-4 py-2 h-8 text-xs rounded whitespace-nowrap"
-                  onClick={handleLogin}
-                >
-                  Admin anmelden
-                </button>
-              </div>
-            </>
-          )}
-        </div>
-                */}
-
-        {/* Feedback */}
-        {/* You can add feedback here if needed */}
-
         {/* Buttons */}
         <div className="col-span-2 flex flex-wrap md:justify-between gap-1 mt-2">
           <button
@@ -205,7 +166,45 @@ const GeneralSettings: React.FC = () => {
                   "⚠️ Wollen Sie wirklich ein Firmwareupdate für alle KÜ-Module starten?"
                 );
                 if (confirmed) {
-                  handleKueFirmwareUpdate();
+                  setIsUpdating(true);
+                  setProgress(0);
+
+                  const updateDuration = 300; // Sekunden (5 Minuten)
+                  const intervalMs = 1000;
+                  let elapsed = 0;
+
+                  const interval = setInterval(() => {
+                    elapsed++;
+                    const newProgress = Math.min(
+                      (elapsed / updateDuration) * 100,
+                      100
+                    );
+                    setProgress(newProgress);
+                    if (elapsed >= updateDuration) {
+                      clearInterval(interval);
+                      setIsUpdating(false);
+                    }
+                  }, intervalMs);
+
+                  handleKueFirmwareUpdate()
+                    .then(() => {
+                      clearInterval(interval);
+                      setProgress(100);
+
+                      setTimeout(() => {
+                        setIsUpdating(false);
+                        setProgress(100);
+
+                        setTimeout(() => {
+                          alert("✅ Firmwareupdate erfolgreich abgeschlossen.");
+                        }, 300); // Nach Modal-Schließung
+                      }, 500);
+                    })
+                    .catch((error) => {
+                      console.error("Update-Fehler:", error);
+                      clearInterval(interval);
+                      setIsUpdating(false);
+                    });
                 }
               }}
             >
@@ -213,6 +212,8 @@ const GeneralSettings: React.FC = () => {
             </button>
           )}
 
+          <ProgressModal visible={isUpdating} progress={progress} />
+
           <button
             type="button"
             className="bg-littwin-blue text-white px-4 py-2 h-8 text-xs rounded whitespace-nowrap"

components/main/settingsPageComponents/handlers/handleKueFirmwareUpdate.ts

@@ -11,7 +11,7 @@ const handleKueFirmwareUpdate = async () => {
     const result = await res.text();
 
     console.log("Firmwareupdate gesendet:", result);
-    alert("Firmwareupdate wurde an alle KÜ-Module gesendet.");
+    // alert("Firmwareupdate wurde an alle KÜ-Module gesendet.");
   } catch (error) {
     console.error("Fehler beim Firmwareupdate:", error);
     alert("Fehler beim Firmwareupdate.");

components/main/settingsPageComponents/modals/ProgressModal.tsx

@@ -0,0 +1,28 @@
+"use client";
+import React from "react";
+
+type Props = {
+  visible: boolean;
+  progress: number;
+};
+
+const ProgressModal: React.FC<Props> = ({ visible, progress }) => {
+  if (!visible) return null;
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+      <div className="bg-white p-6 rounded shadow-md text-center w-80">
+        <h2 className="text-lg font-bold mb-4">Firmwareupdate läuft...</h2>
+        <div className="w-full bg-gray-200 rounded-full h-4">
+          <div
+            className="bg-blue-500 h-4 rounded-full transition-all duration-100"
+            style={{ width: `${progress}%` }}
+          ></div>
+        </div>
+        <p className="mt-4 text-sm">{Math.round(progress)}% abgeschlossen</p>
+      </div>
+    </div>
+  );
+};
+
+export default ProgressModal;