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

Record screen: regroup stats (top strip time/temp/clock, bottom HR/dist/speed/alt), equal-width buttons; reset stale HR per session

Browse source 
1) Layout: a top strip shows training time | temperature | clock ('external'
   things); the bottom panel row is now HR, distance, speed, altitude (bigger);
   the separate HR bar is gone; the three controls (HR toggle, pause, stop)
   share the width equally instead of clustering right.
2) Clear currentHr/currentBleData at recording start (+ ble_clear_hr) so a
   stale bpm from the previous session no longer hangs on the display or gets
   written onto this session's points; show -- until a fresh reading.
This commit is contained in:
4aiman 2026-10-17 12:29:14 +03:00
commit dffadf3cd8
3 changed files with 33 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

29
frontend/css/styles.css
View file

@ -1406,11 +1406,22 @@ body.dark-map .poi-badge { background: #111; border-color: #eee; }
}
.rec-val {
font-size: 22px;
font-size: 27px;
font-weight: 700;
color: var(--on-surface);
}
/* Top strip (external info): training time (left), temperature (centre), clock (right). */
.rec-topbar {
display: flex; justify-content: space-between; align-items: center;
padding: 6px 16px; padding-top: calc(6px + var(--safe-area-top));
background: var(--surface); border-bottom: 1px solid var(--border);
font-size: 15px; font-weight: 600; color: var(--on-surface);
}
.rec-topbar .rec-top-mid { color: var(--muted); font-weight: 500; }
/* Status line now stands alone under the stats (no longer stealing the buttons' width). */
.rec-panel > .rec-status { font-size: 12px; color: var(--muted); text-align: center; padding: 0 12px 4px; min-height: 14px; }
.rec-lbl {
font-size: 10px;
color: var(--muted);
@ -1428,23 +1439,19 @@ body.dark-map .poi-badge { background: #111; border-color: #eee; }
.rec-bottom {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 12px;
align-items: stretch;
gap: 10px;
padding: 8px 12px;
padding-bottom: calc(8px + var(--safe-area-bottom));
background: var(--surface);
}
.rec-bottom .rec-status {
font-size: 12px;
color: var(--muted);
flex: 1;
}
/* All three controls (HR toggle, pause, stop) share the width equally — no clustering right. */
.rec-bottom > button { flex: 1 1 0; }
.rec-bottom .gps-rec {
padding: 12px 32px;
flex-shrink: 0;
padding: 12px 0;
flex-shrink: 1;
}
.gps-header {

6
frontend/js/gps.js
View file

@ -1407,6 +1407,12 @@ GPS.startRecording = async function(activityType, weightKg, profile) {
GPS.recording.points = [];
GPS.recording.hrSamples = [];
GPS.recording.hrProfile = profile || null;
// Clear any HR left over from the PREVIOUS session (else a stale bpm hangs on the display and
// gets written onto this session's points). Only a fresh reading this session re-fills it.
GPS.recording.currentHr = null;
GPS.recording.currentBleData = null;
GPS.recording.currentBattery = null;
try { window.__TAURI__.core.invoke("ble_clear_hr"); } catch {}
GPS.recording.startTime = null;
GPS.recording.weightKg = parseFloat(weightKg) || 80;

31
frontend/js/main.js
View file

@ -4581,27 +4581,24 @@ async function renderRecordingInline(container) {
container.innerHTML = `
<div class="rec-screen">
<div class="rec-topbar">
<span class="rec-top" id="rec-time">0:00</span>
<span class="rec-top rec-top-mid" id="rec-temp">—</span>
<span class="rec-top" id="rec-clock">${new Date().toTimeString().slice(0,5)}</span>
</div>
<div class="rec-map-wrap">
<div id="rec-map" class="rec-map"></div>
${GPS.recording.state === "waiting_gps" ? '<div id="gps-placeholder" class="gps-placeholder"><div class="gps-placeholder-text">Поиск GPS...</div></div>' : ''}
</div>
<div class="rec-panel">
<div class="rec-hr-row" id="rec-hr-row" style="display:none">
<span id="rec-hr-val" class="rec-hr-val">--</span>
<span class="rec-hr-unit">bpm</span>
<span id="rec-spo2" class="rec-hr-extra"></span>
<span id="rec-bp" class="rec-hr-extra"></span>
</div>
<div class="rec-stats">
<div class="rec-stat"><span id="rec-hr-val" class="rec-val">--</span><span class="rec-lbl">Пульс</span></div>
<div class="rec-stat"><span id="rec-dist" class="rec-val">0 м</span><span class="rec-lbl">Дистанция</span></div>
<div class="rec-stat"><span id="rec-speed" class="rec-val">0</span><span class="rec-lbl">км/ч</span></div>
<div class="rec-stat"><span id="rec-time" class="rec-val">0:00</span><span class="rec-lbl">Время</span></div>
<div class="rec-stat"><span id="rec-elev" class="rec-val">—</span><span class="rec-lbl">Высота</span></div>
<div class="rec-stat"><span id="rec-clock" class="rec-val">${new Date().toTimeString().slice(0,5)}</span><span class="rec-lbl">Часы</span></div>
<div class="rec-stat"><span id="rec-temp" class="rec-val">—</span><span class="rec-lbl">t&deg;C</span></div>
</div>
<div class="rec-status" id="rec-status">${GPS.recording.state === "waiting_gps" ? "Поиск GPS..." : GPS.recording.state === "ready" ? "Начните движение..." : ""}</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><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>
@ -5081,20 +5078,10 @@ async function renderRecordingInline(container) {
// HR update from BLE
GPS.recording.onHrUpdate = (reading) => {
let row = document.querySelector("#rec-hr-row");
if (!row) return;
row.style.display = "flex";
let hrEl = document.querySelector("#rec-hr-val");
if (hrEl) {
hrEl.textContent = reading.hr;
hrEl.className = "rec-hr-val " + hrZoneClass(reading.hr);
}
let hrEl = document.querySelector("#rec-hr-val"); // HR stat in the bottom row
if (hrEl) { hrEl.textContent = reading.hr; hrEl.className = "rec-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");
if (bpEl) bpEl.textContent = (reading.bp_sys && reading.bp_dia) ? `${reading.bp_sys}/${reading.bp_dia}` : "";
};
// Timer — excludes pauses, starts only when recording