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

60
backend/static/css/components.css
View file

@ -2036,6 +2036,66 @@ textarea.form-control {
.map-place-btns .btn { flex: 1; }
/* Statusleiste: nur Info, unten links */
/* Scan-Fortschrittsbalken — oben im Kartenfenster */
.map-scan-bar {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 1001;
height: 40px;
background: rgba(255,255,255,0.92);
backdrop-filter: blur(6px);
border-bottom: 1px solid var(--c-border-light);
display: flex;
align-items: center;
gap: var(--space-3);
padding: 0 var(--space-4);
opacity: 0;
pointer-events: none;
transition: opacity 0.25s;
overflow: hidden;
}
.map-scan-bar.active {
opacity: 1;
}
.map-scan-bar__track {
flex: 1;
height: 6px;
background: var(--c-border-light);
border-radius: var(--radius-full);
overflow: hidden;
position: relative;
}
.map-scan-bar__fill {
height: 6px;
background: var(--c-primary);
border-radius: var(--radius-full);
width: 0%;
transition: width 0.4s ease;
position: relative;
}
.map-scan-bar__fill::after {
content: '';
position: absolute;
top: 0; right: 0; bottom: 0;
width: 60px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
animation: scan-shimmer 1.2s ease-in-out infinite;
}
@keyframes scan-shimmer {
0% { transform: translateX(-60px); opacity: 0; }
50% { opacity: 1; }
100% { transform: translateX(60px); opacity: 0; }
}
.map-scan-bar__label {
font-size: 12px;
font-weight: 600;
color: var(--c-primary);
min-width: 80px;
white-space: nowrap;
}
.map-statusbar {
position: absolute;
bottom: var(--space-3);

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

@ -3,7 +3,7 @@
Router, State-Management, Navigation, Initialisierung.
============================================================ */
const APP_VER = '96'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
const APP_VER = '97'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
const App = (() => {

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++;

2
backend/static/sw.js
View file

@ -3,7 +3,7 @@
Offline-Cache + Push Notifications + Tile-Cache
============================================================ */
const CACHE_VERSION = 'by-v121';
const CACHE_VERSION = 'by-v122';
const CACHE_STATIC = `${CACHE_VERSION}-static`;
const CACHE_TILES = 'ban-yaro-tiles-v1'; // bleibt über SW-Updates erhalten