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)
2025-07-01 10:08:33 +02:00
parent b0efd3aa0f
commit 1dfa1cc1ba
10 changed files with 167 additions and 61 deletions
--- a/.env.development
+++ b/.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)

--- a/.env.production
+++ b/.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
--- a/CHANGELOG.md
+++ b/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
--- a/components/main/settingsPageComponents/GeneralSettings.tsx
+++ b/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"
--- a/components/main/settingsPageComponents/handlers/handleKueFirmwareUpdate.ts
+++ b/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.");
--- a/components/main/settingsPageComponents/modals/ProgressModal.tsx
+++ b/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;
--- a/mocks/device-cgi-simulator/settings/kueFirmwareUpdateLog.json
+++ b/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",
--- a/package-lock.json
+++ b/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",
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "cpl-v4",
-  "version": "1.6.512",
+  "version": "1.6.513",
  "private": true,
  "scripts": {
    "dev": "next dev",
--- a/pages/api/cpl/kueFirmwareUpdateMock.ts
+++ b/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);
-    res
-      .status(500)
-      .json({
+    console.error("❌ Fehler beim Firmwareupdate-Mock:", error);
+    res.status(500).json({
      status: "error",
      message: "Fehler beim Speichern des Firmwareupdates",
    });