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

Feature: Scan-Fortschrittsbalken während OSM-Daten geladen werden

Browse source
This commit is contained in:
rene 2026-04-17 10:39:58 +02:00
parent 7096ba8fea
commit 49d129e00c
4 changed files with 99 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -183,6 +183,13 @@ 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>
@ -402,9 +409,33 @@ window.Page_map = (() => {
else { el.textContent = `Zoom ${z}`; el.style.opacity = '1'; }
}
function _setOsmStatus(text) {
function _setOsmStatus(text, pct = null) {
const el = document.getElementById('map-osm-status');
if (el) el.textContent = text;
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;
if (!text) {
bar.classList.remove('active');
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;
}
if (pct === 100) {
fill.style.width = '100%';
label.textContent = '';
setTimeout(() => bar.classList.remove('active'), 600);
}
}
// ----------------------------------------------------------
@ -464,7 +495,7 @@ window.Page_map = (() => {
}
// Phase 1: sofort DB-Daten zeigen (fast=true)
_setOsmStatus('Lade\u2026');
_setOsmStatus('Lade…');
const fastTasks = activeLayers.map(async ([layerKey, osmType]) => {
const params = new URLSearchParams({ type: osmType, fast: 'true', ...bbox });
try {
@ -475,12 +506,12 @@ window.Page_map = (() => {
});
const fastCounts = await Promise.all(fastTasks);
const fastTotal = fastCounts.reduce((a, b) => a + b, 0);
if (fastTotal > 0) _setOsmStatus(`${fastTotal} aus Datenbank`);
if (fastTotal > 0) _setOsmStatus(`${fastTotal} aus Datenbank`, 20);
// Phase 2: Overpass für fehlende Tiles — mit %-Fortschritt
let _done = 0;
const _total = activeLayers.length;
_setOsmStatus(fastTotal > 0 ? `${fastTotal} gefunden \u00b7 Scanne 0\u202f%` : 'Scanne 0\u202f%');
_setOsmStatus('Scanne…', 20);
const freshTasks = activeLayers.map(async ([layerKey, osmType]) => {
const params = new URLSearchParams({ type: osmType, ...bbox });
@ -489,12 +520,9 @@ window.Page_map = (() => {
const osmCount = _layers[layerKey].filter(m => !m._ownPlace).length;
if (pois.length !== osmCount) _replaceOsmMarkers(layerKey, pois);
_done++;
const pct = Math.round(_done / _total * 100);
const pct = Math.round(20 + _done / _total * 80);
const total = Object.values(_layers).flat().filter(m => !m._ownPlace).length;
_setOsmStatus(pct < 100
? `${total} gefunden \u00b7 Scanne ${pct}\u202f%`
: `${total} Marker`
);
_setOsmStatus(pct < 100 ? `Scanne…` : `${total} Marker`, pct);
return pois.length;
} catch {
_done++;