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)
This commit is contained in:
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user