Ismail/CPLv4.0
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Progressbar mit Prozent und Zeit

Browse Source
This commit is contained in:
ISA
2025-08-13 14:04:21 +02:00
parent 974f468766
commit 8fcbf6cfcd
9 changed files with 153 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.env.development
View File

@@ -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.707
NEXT_PUBLIC_APP_VERSION=1.6.708
NEXT_PUBLIC_CPL_MODE=json # json (Entwicklungsumgebung) oder jsSimulatedProd (CPL ->CGI-Interface-Simulator) oder production (CPL-> CGI-Interface Platzhalter)

2
.env.production
View File

@@ -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.707
NEXT_PUBLIC_APP_VERSION=1.6.708
NEXT_PUBLIC_CPL_MODE=production

5
CHANGELOG.md
View File

@@ -1,3 +1,8 @@
## [1.6.708] – 2025-08-13
- feat: Slot Nummer anzeigen bei Events
---
## [1.6.707] – 2025-08-13
- feat: Meldung für Events darstellen (Kalibrierung, TDR ud Schleifenmessung)

129
components/common/GlobalActivityOverlay.tsx
View File

@@ -1,5 +1,5 @@
"use client";
import React from "react";
import React, { useEffect, useState } from "react";
import { useAppSelector } from "@/redux/store";
export default function GlobalActivityOverlay() {
@@ -9,9 +9,11 @@ export default function GlobalActivityOverlay() {
const ksx = useAppSelector((s) => s.deviceEvents.ksx);
const ksy = useAppSelector((s) => s.deviceEvents.ksy);
const ksz = useAppSelector((s) => s.deviceEvents.ksz);
const active = anyLoop || anyTdr || anyAlign;
if (!active) return null;
const loopStartedAt = useAppSelector((s) => s.deviceEvents.loopStartedAt);
const tdrStartedAt = useAppSelector((s) => s.deviceEvents.tdrStartedAt);
const alignmentStartedAt = useAppSelector(
(s) => s.deviceEvents.alignmentStartedAt
);
const fmt = (arr: number[]) =>
arr
@@ -19,16 +21,121 @@ export default function GlobalActivityOverlay() {
.filter((n) => n !== 0)
.join(", ");
const messages: string[] = [];
if (anyLoop) messages.push(`Schleifenmessung läuft… (KÜ: ${fmt(ksx)})`);
if (anyTdr) messages.push(`TDR-Messung läuft… (KÜ: ${fmt(ksy)})`);
if (anyAlign) messages.push(`Abgleich läuft… (KÜ: ${fmt(ksz)})`);
// Simple 1s ticker so progress bars advance while overlay is shown
const [now, setNow] = useState<number>(Date.now());
useEffect(() => {
const active = anyLoop || anyTdr || anyAlign;
if (!active) return;
const id = setInterval(() => setNow(Date.now()), 1000);
return () => clearInterval(id);
}, [anyLoop, anyTdr, anyAlign]);
const active = anyLoop || anyTdr || anyAlign;
if (!active) return null;
const clamp = (v: number, min = 0, max = 1) =>
Math.max(min, Math.min(max, v));
const formatEta = (ms: number) => {
if (ms <= 0) return "gleich fertig";
const totalSec = Math.ceil(ms / 1000);
const m = Math.floor(totalSec / 60);
const s = totalSec % 60;
return m > 0 ? `${m}:${s.toString().padStart(2, "0")} min` : `${s} s`;
};
const compute = (startedAt: number | null, durationMs: number) => {
if (!startedAt) return { pct: 0, remaining: durationMs };
const elapsed = now - startedAt;
const pct = clamp(elapsed / durationMs) * 100;
const remaining = Math.max(0, durationMs - Math.max(0, elapsed));
return { pct, remaining };
};
// Durations
const LOOP_MS = 2 * 60 * 1000; // ~2 min
const TDR_MS = 30 * 1000; // ~30 s
const ALIGN_MS = 10 * 60 * 1000; // ~10 min
return (
<div className="fixed inset-0 z-[2000] flex items-center justify-center bg-white/70 backdrop-blur-sm">
<div className="p-4 rounded-md shadow bg-white border border-gray-200">
<div className="font-semibold mb-2">Bitte warten…</div>
<div className="text-sm text-gray-700">{messages.join(" · ")}</div>
<div className="p-4 rounded-md shadow bg-white border border-gray-200 w-[min(90vw,680px)]">
<div className="font-semibold mb-3">Bitte warten…</div>
<div className="space-y-3">
{anyLoop && (
<div>
<div className="text-sm text-gray-800 mb-1">
Schleifenmessung läuft… (KÜ: {fmt(ksx)})
</div>
{(() => {
const { pct, remaining } = compute(loopStartedAt, LOOP_MS);
return (
<div>
<div className="h-2 w-full bg-gray-200 rounded overflow-hidden">
<div
className="h-full bg-littwin-blue transition-all"
style={{ width: `${pct}%` }}
/>
</div>
<div className="text-xs text-gray-600 mt-1">
{Math.round(pct)}% · ~{formatEta(remaining)}
</div>
</div>
);
})()}
</div>
)}
{anyTdr && (
<div>
<div className="text-sm text-gray-800 mb-1">
TDR-Messung läuft… (KÜ: {fmt(ksy)})
</div>
{(() => {
const { pct, remaining } = compute(tdrStartedAt, TDR_MS);
return (
<div>
<div className="h-2 w-full bg-gray-200 rounded overflow-hidden">
<div
className="h-full bg-yellow-500 transition-all"
style={{ width: `${pct}%` }}
/>
</div>
<div className="text-xs text-gray-600 mt-1">
{Math.round(pct)}% · ~{formatEta(remaining)}
</div>
</div>
);
})()}
</div>
)}
{anyAlign && (
<div>
<div className="text-sm text-gray-800 mb-1">
Abgleich läuft… (KÜ: {fmt(ksz)})
</div>
{(() => {
const { pct, remaining } = compute(
alignmentStartedAt,
ALIGN_MS
);
return (
<div>
<div className="h-2 w-full bg-gray-200 rounded overflow-hidden">
<div
className="h-full bg-emerald-500 transition-all"
style={{ width: `${pct}%` }}
/>
</div>
<div className="text-xs text-gray-600 mt-1">
{Math.round(pct)}% · ~{formatEta(remaining)}
</div>
</div>
);
})()}
</div>
)}
</div>
</div>
</div>
);

2
docs/TODO.md
View File

@@ -69,3 +69,5 @@ in Rot, wenn Schleifenfehler ansteht
- [ ] TODO: Abgleich Dauer entsprechend progress balken einbauen
- [ ] TODO: Benutzer passwort ändern
- [ ] TODO: PlayWright
- ISO Abgleich 10 Minuten
-

2
mocks/device-cgi-simulator/SERVICE/kabelueberwachungMockData.js
View File

@@ -260,7 +260,7 @@ var win_fallSensors = [
// Event Schleifenmessung KSX
var loopMeasurementEvent = [
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0,
];
//Event TDR-Messung

4
package-lock.json generated
View File

@@ -1,12 +1,12 @@
{
"name": "cpl-v4",
"version": "1.6.707",
"version": "1.6.708",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "cpl-v4",
"version": "1.6.707",
"version": "1.6.708",
"dependencies": {
"@fontsource/roboto": "^5.1.0",
"@headlessui/react": "^2.2.4",

2
package.json
View File

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

22
redux/slices/deviceEventsSlice.ts
View File

@@ -7,6 +7,9 @@ export interface DeviceEventsState {
anyLoopActive: boolean;
anyTdrActive: boolean;
anyAlignmentActive: boolean;
loopStartedAt: number | null; // unix ms timestamp when KSX became active
tdrStartedAt: number | null; // unix ms timestamp when KSY became active
alignmentStartedAt: number | null; // unix ms timestamp when KSZ became active
}
const ZERO32 = Array.from({ length: 32 }, () => 0);
@@ -18,6 +21,9 @@ const initialState: DeviceEventsState = {
anyLoopActive: false,
anyTdrActive: false,
anyAlignmentActive: false,
loopStartedAt: null,
tdrStartedAt: null,
alignmentStartedAt: null,
};
export const deviceEventsSlice = createSlice({
@@ -28,6 +34,9 @@ export const deviceEventsSlice = createSlice({
state,
action: PayloadAction<{ ksx?: number[]; ksy?: number[]; ksz?: number[] }>
) {
const prevLoop = state.anyLoopActive;
const prevTdr = state.anyTdrActive;
const prevAlign = state.anyAlignmentActive;
const to32 = (arr?: number[]) => {
if (!Array.isArray(arr)) return ZERO32.slice();
const a = arr
@@ -42,6 +51,16 @@ export const deviceEventsSlice = createSlice({
state.anyLoopActive = state.ksx.some((v) => v === 1);
state.anyTdrActive = state.ksy.some((v) => v === 1);
state.anyAlignmentActive = state.ksz.some((v) => v === 1);
// Transition detection to set/reset startedAt timestamps
if (!prevLoop && state.anyLoopActive) state.loopStartedAt = Date.now();
if (prevLoop && !state.anyLoopActive) state.loopStartedAt = null;
if (!prevTdr && state.anyTdrActive) state.tdrStartedAt = Date.now();
if (prevTdr && !state.anyTdrActive) state.tdrStartedAt = null;
if (!prevAlign && state.anyAlignmentActive)
state.alignmentStartedAt = Date.now();
if (prevAlign && !state.anyAlignmentActive)
state.alignmentStartedAt = null;
},
resetEvents(state) {
state.ksx = ZERO32.slice();
@@ -50,6 +69,9 @@ export const deviceEventsSlice = createSlice({
state.anyLoopActive = false;
state.anyTdrActive = false;
state.anyAlignmentActive = false;
state.loopStartedAt = null;
state.tdrStartedAt = null;
state.alignmentStartedAt = null;
},
},
});