rene/banyaro
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix: Routenaufzeichnung — Stopp-Button braucht Long-Press (1.8s), DIM-Timer 10s → 5s (SW by-v655)

Browse source 
Verhindert versehentliches Stoppen durch Hosentaschen-Druck: Stopp-Button reagiert
nur auf 1.8s Gedrückt-Halten mit Fill-Animation, Einzeltap tut nichts. DIM-Schutz-
Overlay greift jetzt nach 5s statt 10s.
This commit is contained in:
rene 2026-05-03 20:24:14 +02:00
parent 9103c7950f
commit ccb92254b6
4 changed files with 45 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

2
backend/static/js/app.js
View file

@ -3,7 +3,7 @@
Router, State-Management, Navigation, Initialisierung.
============================================================ */
const APP_VER = '654'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
const APP_VER = '655'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
const APP_VERSION = '1.3.0'; // ← semantische Version, wird bei make release gesetzt
const IS_STAGING = location.hostname === 'staging.banyaro.app';

43
backend/static/js/pages/routes.js
View file

@ -696,9 +696,44 @@ window.Page_routes = (() => {
_recTrack = []; _recDistKm = 0; _recStartTime = Date.now();
const ctrl = document.getElementById('rk-rec-ctrl');
ctrl.innerHTML = `<button id="rk-rec-stopbtn" style="${_btnStyle()}flex:1;border-color:var(--c-danger);background:var(--c-danger);color:#fff;">
${UI.icon('path')} Stopp & Speichern</button>`;
ctrl.querySelector('#rk-rec-stopbtn').addEventListener('click', () => _stopRecInOvl(true));
ctrl.innerHTML = `
<button id="rk-rec-stopbtn" style="${_btnStyle()}flex:1;border-color:var(--c-danger);background:var(--c-danger);color:#fff;position:relative;overflow:hidden;touch-action:none;user-select:none;">
<span id="rk-stop-label" style="position:relative;z-index:1;display:flex;align-items:center;gap:6px;pointer-events:none">
${UI.icon('path')} Gedrückt halten zum Stoppen
</span>
<div id="rk-stop-fill" style="position:absolute;inset:0;background:rgba(0,0,0,0.35);transform:scaleX(0);transform-origin:left center;transition:transform 0.05s linear;pointer-events:none"></div>
</button>`;
// Long-Press 1.8s zum Stoppen
let _stopTimer = null, _stopTick = null;
const btn = ctrl.querySelector('#rk-rec-stopbtn');
const fill = ctrl.querySelector('#rk-stop-fill');
const startHold = () => {
if (_stopTimer) return;
const DURATION = 1800;
const start = Date.now();
_stopTick = setInterval(() => {
const p = Math.min((Date.now() - start) / DURATION, 1);
fill.style.transition = 'none';
fill.style.transform = `scaleX(${p})`;
}, 30);
_stopTimer = setTimeout(() => {
clearInterval(_stopTick); _stopTick = null; _stopTimer = null;
fill.style.transform = 'scaleX(1)';
_stopRecInOvl(true);
}, DURATION);
};
const cancelHold = () => {
if (!_stopTimer && !_stopTick) return;
clearTimeout(_stopTimer); clearInterval(_stopTick);
_stopTimer = null; _stopTick = null;
fill.style.transition = 'transform 0.25s ease';
fill.style.transform = 'scaleX(0)';
};
btn.addEventListener('pointerdown', e => { e.preventDefault(); startHold(); });
btn.addEventListener('pointerup', cancelHold);
btn.addEventListener('pointerleave', cancelHold);
btn.addEventListener('pointercancel', cancelHold);
document.getElementById('rk-rec-stats-bar').style.display = '';
_recPolyline = L.polyline([], { color: '#ef4444', weight: 5, opacity: 0.9 }).addTo(_recMap);
@ -789,7 +824,7 @@ window.Page_routes = (() => {
dim.style.display = 'flex';
_recDimmed = true;
}
}, 10000);
}, 5000);
}
async function _stopRecInOvl(save) {