4aiman/baldav
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Record screen: show the live HR number on the HR toggle button

Browse source 
The HR toggle (ex-wind button) showed only the heart+pulse icon. Now the
current bpm renders on it (onHrUpdate writes #rec-hr-num); it clears when HR
is toggled off, leaving just the grey icon.
This commit is contained in:
4aiman 2026-10-17 10:57:08 +03:00
commit 553a4fcf80
2 changed files with 7 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

4
frontend/css/styles.css
View file

@ -726,9 +726,11 @@ select {
.workout-screen .btn-primary, .workout-screen .btn-secondary { margin-top: 8px; width: 100%; }
/* HR on/off toggle on the record screen (replaces the wind button): grey = off, coloured = on. */
.rec-hr-toggle { color: #888; display: inline-flex; align-items: center; justify-content: center; min-width: 46px; padding: 6px 10px; }
.rec-hr-toggle { color: #888; display: inline-flex; align-items: center; justify-content: center; gap: 3px; padding: 6px 10px; }
.rec-hr-toggle svg { display: block; }
.rec-hr-toggle.active { color: #ef5350; background: rgba(239, 83, 80, 0.18); }
.rec-hr-num { font-size: 14px; font-weight: 700; min-width: 0; }
.rec-hr-num:empty { display: none; }
/* Progress fill for long-running action buttons: the background fills left-to-right by
--pct (0-100%, set from JS). The label stays on top and readable; the unfilled part keeps

5
frontend/js/main.js
View file

@ -4602,7 +4602,7 @@ async function renderRecordingInline(container) {
</div>
<div class="rec-bottom">
<div class="rec-status" id="rec-status">${GPS.recording.state === "waiting_gps" ? "Поиск GPS..." : GPS.recording.state === "ready" ? "Начните движение..." : ""}</div>
<button id="rec-hr-toggle" class="btn-secondary rec-hr-toggle${GPS.recording.hrOn ? " active" : ""}" title="Пульсометр вкл/выкл" aria-label="ЧСС"><svg viewBox="0 0 24 22" width="22" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20S3 14.5 3 8.3C3 5.6 5 4 7.2 4 9 4 10.6 5.1 12 7 13.4 5.1 15 4 16.8 4 19 4 21 5.6 21 8.3c0 1.3-.4 2.5-1 3.7"/><path d="M2 13h5l2-3 2.4 6 2-3H22"/></svg></button>
<button id="rec-hr-toggle" class="btn-secondary rec-hr-toggle${GPS.recording.hrOn ? " active" : ""}" title="Пульсометр вкл/выкл" aria-label="ЧСС"><svg viewBox="0 0 24 22" width="22" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20S3 14.5 3 8.3C3 5.6 5 4 7.2 4 9 4 10.6 5.1 12 7 13.4 5.1 15 4 16.8 4 19 4 21 5.6 21 8.3c0 1.3-.4 2.5-1 3.7"/><path d="M2 13h5l2-3 2.4 6 2-3H22"/></svg><span id="rec-hr-num" class="rec-hr-num"></span></button>
<button id="rec-pause" class="btn-secondary">${GPS.recording.manualPaused ? "Продолжить" : "Пауза"}</button>
<button id="rec-stop" class="btn-primary gps-rec recording">Стоп</button>
</div>
@ -5089,6 +5089,8 @@ async function renderRecordingInline(container) {
hrEl.textContent = reading.hr;
hrEl.className = "rec-hr-val " + hrZoneClass(reading.hr);
}
let hrNum = document.querySelector("#rec-hr-num"); // live HR on the toggle button itself
if (hrNum) hrNum.textContent = reading.hr;
let spo2El = document.querySelector("#rec-spo2");
if (spo2El) spo2El.textContent = reading.spo2 ? `SpO2: ${reading.spo2}%` : "";
let bpEl = document.querySelector("#rec-bp");
@ -5149,6 +5151,7 @@ async function renderRecordingInline(container) {
hrToggle.disabled = true;
await GPS.setHrOn(!GPS.recording.hrOn);
hrToggle.classList.toggle("active", !!GPS.recording.hrOn);
if (!GPS.recording.hrOn) { let n = container.querySelector("#rec-hr-num"); if (n) n.textContent = ""; } // off -> icon only
hrToggle.disabled = false;
};