jens/brewpi
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Browser GUI: swap total/step countdown order; always use h:mm:ss format

Browse Source 
Total remaining now appears above step remaining in the header. Both
countdowns and all other duration displays always use h:mm:ss format
regardless of whether hours is zero, so the layout never shifts width.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01SH2D4LRuCnhLSzoYerAfJX
This commit is contained in:
jens
2026-06-28 12:00:11 +02:00
co-authored by Claude Sonnet 4.6
parent 8714a140bb
commit b54cda2f97
2 changed files with 8 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/app.js
+6 -9
View File
@@ -90,10 +90,7 @@ function formatDuration(seconds) {
const hours = Math.floor(seconds / 3600); const hours = Math.floor(seconds / 3600);
const minutes = Math.floor((seconds % 3600) / 60); const minutes = Math.floor((seconds % 3600) / 60);
const secs = seconds % 60; const secs = seconds % 60;
if (hours) { return `${hours}:${String(minutes).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;
return `${hours}:${String(minutes).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;
}
return `${minutes}:${String(secs).padStart(2, '0')}`;
} }
// --- Sud schedule resolution - ports components/sud.py's _merge_defaults()/ // --- Sud schedule resolution - ports components/sud.py's _merge_defaults()/
@@ -166,7 +163,7 @@ function createStepPlate(index, step, resolvedTemp) {
title.textContent = `Step ${index + 1}: ${step.descr || ''}`; title.textContent = `Step ${index + 1}: ${step.descr || ''}`;
const remaining = document.createElement('div'); const remaining = document.createElement('div');
remaining.className = 'remaining'; remaining.className = 'remaining';
remaining.textContent = '--:--'; remaining.textContent = '-:--:--';
const target = document.createElement('div'); const target = document.createElement('div');
target.className = 'field span2'; target.className = 'field span2';
const actual = document.createElement('div'); const actual = document.createElement('div');
@@ -245,7 +242,7 @@ function updateStepPlates() {
const total = Math.max(0, endT - startT); const total = Math.max(0, endT - startT);
plate.remaining.textContent = formatDuration(Math.max(0, Math.min(total, endT - currentElapsed))); plate.remaining.textContent = formatDuration(Math.max(0, Math.min(total, endT - currentElapsed)));
} else { } else {
plate.remaining.textContent = '--:--'; plate.remaining.textContent = '-:--:--';
} }
if (sudStepIndex === null || i > sudStepIndex) { if (sudStepIndex === null || i > sudStepIndex) {
@@ -279,8 +276,8 @@ function updateStepPlates() {
function updateHeaderCountdown() { function updateHeaderCountdown() {
const currentElapsed = (elapsed !== null) ? elapsed : 0; const currentElapsed = (elapsed !== null) ? elapsed : 0;
const n = sudSchedule.length; const n = sudSchedule.length;
let stepText = '--:--'; let stepText = '-:--:--';
let totalText = '--:--'; let totalText = '-:--:--';
let visible = false; let visible = false;
if (n > 0 && sudStepIndex !== null) { if (n > 0 && sudStepIndex !== null) {
visible = true; visible = true;
@@ -465,7 +462,7 @@ function updateStatusLine() {
const pot = sudPotMass; const pot = sudPotMass;
const massText = `Pot: ${pot.toFixed(2)} kg, Water: ${water.toFixed(2)} kg, Grain ${grain.toFixed(2)} kg, total ${(pot + water + grain).toFixed(2)} kg`; const massText = `Pot: ${pot.toFixed(2)} kg, Water: ${water.toFixed(2)} kg, Grain ${grain.toFixed(2)} kg, total ${(pot + water + grain).toFixed(2)} kg`;
text = text ? `${text} ${massText}` : massText; text = text ? `${text} ${massText}` : massText;
const elapsedText = `Elapsed ${elapsed !== null ? formatDuration(elapsed) : '--:--'}`; const elapsedText = `Elapsed ${elapsed !== null ? formatDuration(elapsed) : '-:--:--'}`;
const totalEnergyKwh = (Object.values(energyByStep).reduce((a, b) => a + b, 0) + energyCurrent) / 1000.0; const totalEnergyKwh = (Object.values(energyByStep).reduce((a, b) => a + b, 0) + energyCurrent) / 1000.0;
const energyText = `Energy ${totalEnergyKwh.toFixed(2)} kWh`; const energyText = `Energy ${totalEnergyKwh.toFixed(2)} kWh`;
el.textContent = `${text} ${elapsedText} ${energyText}`; el.textContent = `${text} ${elapsedText} ${energyText}`;
web/index.html
+2 -2
View File
@@ -20,8 +20,8 @@
<button id="btn-sud-pause" class="transport-btn transport-pause" title="Pause">&#9646;&#9646;</button> <button id="btn-sud-pause" class="transport-btn transport-pause" title="Pause">&#9646;&#9646;</button>
<button id="btn-sud-stop" class="transport-btn transport-stop" title="Stop">&#9632;</button> <button id="btn-sud-stop" class="transport-btn transport-stop" title="Stop">&#9632;</button>
<span id="header-countdown" class="hidden"> <span id="header-countdown" class="hidden">
<span class="hdr-cdown-row"><span class="hdr-cdown-lbl">step</span><span id="hdr-step-remaining">--:--</span></span> <span class="hdr-cdown-row"><span class="hdr-cdown-lbl">total</span><span id="hdr-total-remaining">-:--:--</span></span>
<span class="hdr-cdown-row"><span class="hdr-cdown-lbl">total</span><span id="hdr-total-remaining">--:--</span></span> <span class="hdr-cdown-row"><span class="hdr-cdown-lbl">step</span><span id="hdr-step-remaining">-:--:--</span></span>
</span> </span>
</span> </span>
</header> </header>