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)

.env.development

@@ -6,6 +6,6 @@ NEXT_PUBLIC_USE_MOCK_BACKEND_LOOP_START=false
 NEXT_PUBLIC_EXPORT_STATIC=false
 NEXT_PUBLIC_USE_CGI=false
 # App-Versionsnummer
-NEXT_PUBLIC_APP_VERSION=1.6.512
+NEXT_PUBLIC_APP_VERSION=1.6.513
 NEXT_PUBLIC_CPL_MODE=json   # json (Entwicklungsumgebung) oder jsSimulatedProd (CPL ->CGI-Interface-Simulator) oder production (CPL-> CGI-Interface Platzhalter)
 

.env.production

@@ -5,5 +5,5 @@ NEXT_PUBLIC_CPL_API_PATH=/CPL
 NEXT_PUBLIC_EXPORT_STATIC=true
 NEXT_PUBLIC_USE_CGI=true
 # App-Versionsnummer
-NEXT_PUBLIC_APP_VERSION=1.6.512
+NEXT_PUBLIC_APP_VERSION=1.6.513
 NEXT_PUBLIC_CPL_MODE=production

CHANGELOG.md

@@ -1,3 +1,8 @@
+## [1.6.513] – 2025-07-01
+
+- feat:  alle KÜs Firmware update confirm
+
+---
 ## [1.6.512] – 2025-07-01
 
 - fix: hide Firmware update button if admin not loged in

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;

mocks/device-cgi-simulator/settings/kueFirmwareUpdateLog.json

@@ -1,4 +1,69 @@
 [
+  {
+    "timestamp": "2025-07-01T08:03:33.189Z",
+    "command": "&KSU99=1",
+    "message": "Firmwareupdate an alle KÜ-Module ausgelöst (Mock)"
+  },
+  {
+    "timestamp": "2025-07-01T07:55:54.961Z",
+    "command": "&KSU99=1",
+    "message": "Firmwareupdate an alle KÜ-Module ausgelöst (Mock)"
+  },
+  {
+    "timestamp": "2025-07-01T07:53:19.780Z",
+    "command": "&KSU99=1",
+    "message": "Firmwareupdate an alle KÜ-Module ausgelöst (Mock)"
+  },
+  {
+    "timestamp": "2025-07-01T07:49:25.419Z",
+    "command": "&KSU99=1",
+    "message": "Firmwareupdate an alle KÜ-Module ausgelöst (Mock)"
+  },
+  {
+    "timestamp": "2025-07-01T07:46:30.008Z",
+    "command": "&KSU99=1",
+    "message": "Firmwareupdate an alle KÜ-Module ausgelöst (Mock)"
+  },
+  {
+    "timestamp": "2025-07-01T07:45:57.366Z",
+    "command": "&KSU99=1",
+    "message": "Firmwareupdate an alle KÜ-Module ausgelöst (Mock)"
+  },
+  {
+    "timestamp": "2025-07-01T07:39:41.157Z",
+    "command": "&KSU99=1",
+    "message": "Firmwareupdate an alle KÜ-Module ausgelöst (Mock)"
+  },
+  {
+    "timestamp": "2025-07-01T07:39:05.316Z",
+    "command": "&KSU99=1",
+    "message": "Firmwareupdate an alle KÜ-Module ausgelöst (Mock)"
+  },
+  {
+    "timestamp": "2025-07-01T07:37:55.313Z",
+    "command": "&KSU99=1",
+    "message": "Firmwareupdate an alle KÜ-Module ausgelöst (Mock)"
+  },
+  {
+    "timestamp": "2025-07-01T07:37:20.818Z",
+    "command": "&KSU99=1",
+    "message": "Firmwareupdate an alle KÜ-Module ausgelöst (Mock)"
+  },
+  {
+    "timestamp": "2025-07-01T07:26:45.785Z",
+    "command": "&KSU99=1",
+    "message": "Firmwareupdate an alle KÜ-Module ausgelöst (Mock)"
+  },
+  {
+    "timestamp": "2025-07-01T06:19:21.460Z",
+    "command": "&KSU99=1",
+    "message": "Firmwareupdate an alle KÜ-Module ausgelöst (Mock)"
+  },
+  {
+    "timestamp": "2025-07-01T06:06:58.694Z",
+    "command": "&KSU99=1",
+    "message": "Firmwareupdate an alle KÜ-Module ausgelöst (Mock)"
+  },
   {
     "timestamp": "2025-07-01T05:48:51.161Z",
     "command": "&KSU99=1",

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "cpl-v4",
-  "version": "1.6.512",
+  "version": "1.6.513",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "cpl-v4",
-      "version": "1.6.512",
+      "version": "1.6.513",
       "dependencies": {
         "@fontsource/roboto": "^5.1.0",
         "@iconify-icons/ri": "^1.2.10",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cpl-v4",
-  "version": "1.6.512",
+  "version": "1.6.513",
   "private": true,
   "scripts": {
     "dev": "next dev",

pages/api/cpl/kueFirmwareUpdateMock.ts

@@ -1,8 +1,15 @@
+// pages/api/cpl/kueFirmwareUpdateMock.ts
 import type { NextApiRequest, NextApiResponse } from "next";
 import fs from "fs";
 import path from "path";
 
-export default function handler(req: NextApiRequest, res: NextApiResponse) {
+// Hilfsfunktion für künstliche Verzögerung
+const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
+
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
   try {
     const logFilePath = path.join(
       process.cwd(),
@@ -22,20 +29,20 @@ export default function handler(req: NextApiRequest, res: NextApiResponse) {
       existingLog = JSON.parse(fileContent);
     }
 
-    // Letzten 50 Einträge speichern
     const updatedLog = [logEntry, ...existingLog].slice(0, 50);
-
     fs.writeFileSync(logFilePath, JSON.stringify(updatedLog, null, 2), "utf-8");
 
+    console.log("🕒 Starte Firmware-Mock-Wartezeit (5 Minuten)...");
+    await delay(10000); // 5 Minuten simulieren (300.000 ms)
+
+    console.log("✅ Firmwareupdate-Mock abgeschlossen.");
     res.status(200).json({
       status: "success",
       log: logEntry,
     });
   } catch (error) {
-    console.error("Fehler beim Firmwareupdate-Mock:", error);
+    console.error("❌ Fehler beim Firmwareupdate-Mock:", error);
-    res
+    res.status(500).json({
-      .status(500)
-      .json({
       status: "error",
       message: "Fehler beim Speichern des Firmwareupdates",
     });