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

Feature: Scan-Fortschritt als SVG-Ring um das Zoom-Statusfeld

Browse source
This commit is contained in:
rene 2026-04-17 10:44:52 +02:00
parent 49d129e00c
commit cd3f118113
4 changed files with 73 additions and 87 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 = '97'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
const APP_VER = '98'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
const App = (() => {

96
backend/static/js/pages/map.js
View file

@ -183,13 +183,6 @@ window.Page_map = (() => {
<button class="map-fab" id="map-locate-btn" title="Meinen Standort"><svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#map-pin"></use></svg></button>
</div>
<div class="map-scan-bar" id="map-scan-bar">
<span class="map-scan-bar__label" id="map-scan-label"></span>
<div class="map-scan-bar__track">
<div class="map-scan-bar__fill" id="map-scan-fill"></div>
</div>
</div>
<div class="map-statusbar" id="map-statusbar">
<span id="map-zoom-info"></span>
<span id="map-osm-status"></span>
@ -412,29 +405,82 @@ window.Page_map = (() => {
function _setOsmStatus(text, pct = null) {
const el = document.getElementById('map-osm-status');
if (el) el.textContent = text;
_updateScanRing(text ? pct : null);
}
const bar = document.getElementById('map-scan-bar');
const fill = document.getElementById('map-scan-fill');
const label = document.getElementById('map-scan-label');
if (!bar || !fill || !label) return;
function _updateScanRing(pct) {
const statusbar = document.getElementById('map-statusbar');
if (!statusbar) return;
const mapEl = statusbar.closest('.map-main') || statusbar.parentElement;
if (!mapEl) return;
if (!text) {
bar.classList.remove('active');
let svg = document.getElementById('map-scan-ring');
// Ring ausblenden / entfernen
if (pct === null) {
if (svg) { svg.style.opacity = '0'; setTimeout(() => svg?.remove(), 600); }
statusbar.style.border = '';
return;
}
bar.classList.add('active');
if (pct !== null) {
fill.style.width = `${pct}%`;
label.textContent = pct < 100 ? `Scanne ${pct}\u202f%` : '';
} else {
fill.style.width = '30%';
fill.classList.add('indeterminate');
label.textContent = text;
// SVG einmalig erzeugen
if (!svg) {
svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.id = 'map-scan-ring';
svg.setAttribute('overflow', 'visible');
svg.style.cssText = 'position:absolute;pointer-events:none;z-index:1002;transition:opacity 0.55s ease';
const path = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
path.id = 'map-scan-ring-rect';
path.setAttribute('fill', 'none');
path.setAttribute('stroke', '#C4843A');
path.setAttribute('stroke-width', '3');
path.setAttribute('stroke-linecap', 'round');
svg.appendChild(path);
mapEl.appendChild(svg);
}
if (pct === 100) {
fill.style.width = '100%';
label.textContent = '';
setTimeout(() => bar.classList.remove('active'), 600);
// Position relativ zum Map-Container berechnen
const sr = statusbar.getBoundingClientRect();
const mr = mapEl.getBoundingClientRect();
const w = sr.width;
const h = sr.height;
const r = h / 2; // border-radius-full = Hälfte der Höhe
const p = 2; // Abstand zur inneren Kante
// Umfang der Pill: gerades Stück + zwei Halbkreise
const perim = 2 * (w - h) + Math.PI * h;
// Stroke beginnt oben-links und läuft im Uhrzeigersinn
// Um bei 12 Uhr zu starten: Offset um das linke Halbkreis-Viertel + halbe Geraden verschieben
const startShift = (w - h) / 2 + (Math.PI * h) / 4;
const progress = Math.min(100, Math.max(0, pct));
const dashOffset = perim * (1 - progress / 100) + startShift;
svg.style.left = (sr.left - mr.left - p) + 'px';
svg.style.top = (sr.top - mr.top - p) + 'px';
svg.style.width = (w + p * 2) + 'px';
svg.style.height = (h + p * 2) + 'px';
svg.style.opacity = '1';
const rect = document.getElementById('map-scan-ring-rect');
rect.setAttribute('x', String(p));
rect.setAttribute('y', String(p));
rect.setAttribute('width', String(w));
rect.setAttribute('height', String(h));
rect.setAttribute('rx', String(r));
rect.setAttribute('ry', String(r));
rect.setAttribute('stroke-dasharray', perim.toFixed(2));
rect.setAttribute('stroke-dashoffset', dashOffset.toFixed(2));
// Original-Rahmen verstecken während Ring aktiv ist
statusbar.style.border = 'none';
if (progress >= 100) {
setTimeout(() => {
const s = document.getElementById('map-scan-ring');
if (s) s.style.opacity = '0';
statusbar.style.border = '';
setTimeout(() => s?.remove(), 600);
}, 500);
}
}