fix: NVS Generator. cosmetic: Changed CloudFlash page a bit

This commit is contained in:
2026-03-19 21:01:17 +02:00
parent 29bbaead86
commit d8ba64da55
3 changed files with 52 additions and 20 deletions

View File

@@ -130,7 +130,7 @@ function ProgressBar({ label, percent }) {
<span>{label}</span>
<span>{Math.round(percent)}%</span>
</div>
<div className="h-2 rounded-full overflow-hidden" style={{ backgroundColor: "var(--bg-card-hover)" }}>
<div className="h-3 rounded-full overflow-hidden" style={{ backgroundColor: "var(--bg-card-hover)" }}>
<div
className="h-full rounded-full transition-all duration-200"
style={{ width: `${percent}%`, backgroundColor: "var(--accent)" }}
@@ -140,6 +140,32 @@ function ProgressBar({ label, percent }) {
);
}
function CombinedProgressBar({ blPct, partPct, nvsPct, fwPct }) {
// Weights: bl=10%, part=10%, nvs=10%, fw=70%
const overall = blPct * 0.10 + partPct * 0.10 + nvsPct * 0.10 + fwPct * 0.70;
const label =
fwPct > 0 ? `Firmware (${Math.round(fwPct)}%)` :
nvsPct > 0 ? `Device Identity (${Math.round(nvsPct)}%)` :
partPct > 0 ? `Partition Table (${Math.round(partPct)}%)` :
`Bootloader (${Math.round(blPct)}%)`;
return (
<div className="space-y-1.5">
<div className="flex justify-between text-xs" style={{ color: "var(--text-secondary)" }}>
<span>{label}</span>
<span>{Math.round(overall)}%</span>
</div>
<div className="h-3 rounded-full overflow-hidden" style={{ backgroundColor: "var(--bg-card-hover)" }}>
<div
className="h-full rounded-full transition-all duration-200"
style={{ width: `${overall}%`, backgroundColor: "var(--accent)" }}
/>
</div>
</div>
);
}
function InfoBox({ type = "info", children }) {
const styles = {
info: { bg: "var(--badge-blue-bg)", border: "#1e3a5f", color: "var(--badge-blue-text)" },
@@ -858,17 +884,13 @@ function StepFlash({ firmware, flashType, serial, nvsSchema, onDone }) {
</div>
)}
{/* Progress bars */}
{/* Progress bar */}
{(flashing || fwPct > 0) && (
<div className="space-y-3 mb-4">
{isFullWipe && (
<>
<ProgressBar label="Bootloader" percent={blPct} />
<ProgressBar label="Partition Table" percent={partPct} />
<ProgressBar label="Device Identity (NVS)" percent={nvsPct} />
</>
)}
<ProgressBar label="Firmware" percent={fwPct} />
<div className="mb-4">
{isFullWipe
? <CombinedProgressBar blPct={blPct} partPct={partPct} nvsPct={nvsPct} fwPct={fwPct} />
: <ProgressBar label="Firmware" percent={fwPct} />
}
</div>
)}