fix: Firmware-Update läuft nun exakt 5 Minuten bis 100 % Fortschritt

- Fehler behoben, bei dem das Firmware-Update nach wenigen Sekunden vorzeitig beendet wurde
- Fortschrittsanzeige über Redux-Slice `firmwareProgressSlice` korrekt umgesetzt
- Thunk `startFirmwareUpdateThunk` korrekt eingebunden und verwendet
- UI zeigt stabile 5-minütige Progressbar wie erwartet
This commit is contained in:
Ismail Ali
2025-07-02 22:01:17 +02:00
parent e9e929f577
commit b23d939481
9 changed files with 93 additions and 33 deletions

View File

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

View File

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

View File

@@ -1,3 +1,21 @@
## [1.6.525] 2025-07-02
- fix: Toast-Benachrichtigungen wiederhergestellt durch Einbindung von ToastContainer
- <ToastContainer /> in _app.tsx hinzugefügt
- react-toastify funktioniert jetzt wie vorgesehen (z.B. Firmware-Update Feedback)
- autoClose-Zeit für bessere Sichtbarkeit ggf. angepasst
---
## [1.6.524] 2025-07-02
- fix: Toast-Benachrichtigungen wiederhergestellt durch Einbindung von ToastContainer
- <ToastContainer /> in _app.tsx hinzugefügt
- react-toastify funktioniert jetzt wie vorgesehen (z.B. Firmware-Update Feedback)
- autoClose-Zeit für bessere Sichtbarkeit ggf. angepasst
---
## [1.6.523] 2025-07-02 ## [1.6.523] 2025-07-02
- fix: ConfirmModal-Zustand in Redux ausgelagert zur Stabilisierung - fix: ConfirmModal-Zustand in Redux ausgelagert zur Stabilisierung

View File

@@ -13,6 +13,7 @@ import {
openConfirmModal, openConfirmModal,
closeConfirmModal, closeConfirmModal,
} from "@/redux/slices/confirmModalSlice"; } from "@/redux/slices/confirmModalSlice";
import { startFirmwareUpdateThunk } from "@/redux/thunks/startFirmwareUpdateThunk";
interface Props { interface Props {
slot: number; slot: number;
@@ -57,8 +58,13 @@ export default function KueEinstellung({
(state: RootState) => state.confirmModal.open (state: RootState) => state.confirmModal.open
); );
const [isUpdating, setIsUpdating] = useState(false); const isUpdating = useSelector(
const [progress, setProgress] = useState(0); (state: RootState) => state.firmwareProgress.isUpdating
);
const progress = useSelector(
(state: RootState) => state.firmwareProgress.progress
);
const [formData, setFormData] = useState(() => { const [formData, setFormData] = useState(() => {
if (typeof window !== "undefined") { if (typeof window !== "undefined") {
const cache = window.__kueCache?.[`slot_${slot}`]; const cache = window.__kueCache?.[`slot_${slot}`];
@@ -265,38 +271,13 @@ export default function KueEinstellung({
onConfirm={async () => { onConfirm={async () => {
dispatch(closeConfirmModal()); dispatch(closeConfirmModal());
toast.info("Firmware-Update gestartet. Bitte warten..."); toast.info("Firmware-Update gestartet. Bitte warten...");
setIsUpdating(true); dispatch(startFirmwareUpdateThunk(slot)); // Start Redux-Prozess
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 { try {
await firmwareUpdate(slot); await firmwareUpdate(slot);
} catch (err) { } catch (err) {
console.error("Firmware-Update-Fehler:", err); console.error("Firmware-Update-Fehler:", err);
clearInterval(interval);
toast.error("❌ Fehler beim Firmwareupdate"); toast.error("❌ Fehler beim Firmwareupdate");
setIsUpdating(false);
} }
}} }}
/> />

4
package-lock.json generated
View File

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

View File

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

View File

@@ -0,0 +1,28 @@
// redux/slices/firmwareProgressSlice.ts
import { createSlice, PayloadAction } from "@reduxjs/toolkit";
interface State {
progress: number;
isUpdating: boolean;
}
const initialState: State = {
progress: 0,
isUpdating: false,
};
export const firmwareProgressSlice = createSlice({
name: "firmwareProgress",
initialState,
reducers: {
setProgress: (state, action: PayloadAction<number>) => {
state.progress = action.payload;
},
setIsUpdating: (state, action: PayloadAction<boolean>) => {
state.isUpdating = action.payload;
},
},
});
export const { setProgress, setIsUpdating } = firmwareProgressSlice.actions;
export default firmwareProgressSlice.reducer;

View File

@@ -28,6 +28,7 @@ import selectedAnalogInputReducer from "./slices/selectedAnalogInputSlice";
import messagesReducer from "./slices/messagesSlice"; import messagesReducer from "./slices/messagesSlice";
import firmwareUpdateReducer from "@/redux/slices/firmwareUpdateSlice"; import firmwareUpdateReducer from "@/redux/slices/firmwareUpdateSlice";
import confirmModalReducer from "./slices/confirmModalSlice"; import confirmModalReducer from "./slices/confirmModalSlice";
import firmwareProgressReducer from "./slices/firmwareProgressSlice";
const store = configureStore({ const store = configureStore({
reducer: { reducer: {
@@ -58,6 +59,7 @@ const store = configureStore({
messages: messagesReducer, messages: messagesReducer,
firmwareUpdate: firmwareUpdateReducer, firmwareUpdate: firmwareUpdateReducer,
confirmModal: confirmModalReducer, confirmModal: confirmModalReducer,
firmwareProgress: firmwareProgressReducer,
}, },
}); });

View File

@@ -0,0 +1,31 @@
// redux/thunks/startFirmwareUpdateThunk.ts
import { AppDispatch } from "../store";
import {
setProgress,
setIsUpdating,
} from "@/redux/slices/firmwareProgressSlice";
export const startFirmwareUpdateThunk =
(slot: number) => async (dispatch: AppDispatch) => {
dispatch(setIsUpdating(true));
dispatch(setProgress(0));
const totalDuration = 5 * 60 * 1000;
const intervalMs = 1000;
const steps = totalDuration / intervalMs;
let currentStep = 0;
const interval = setInterval(() => {
currentStep++;
const percent = Math.min((currentStep / steps) * 100, 100);
dispatch(setProgress(percent));
if (currentStep >= steps) {
clearInterval(interval);
dispatch(setProgress(100));
setTimeout(() => {
dispatch(setIsUpdating(false));
}, 500);
}
}, intervalMs);
};