Karten-Ausbau (OSM), Forum-Erweiterung, UI-Komponenten, Refactor Tagebuch/Gassi (DRY), Landing/SEO — APP_VER 1155
This commit is contained in:
parent
2d907f6370
commit
10e39ed135
18 changed files with 871 additions and 405 deletions
|
|
@ -1306,37 +1306,7 @@ window.Page_diary = (() => {
|
|||
</div>
|
||||
<div class="form-group" id="diary-location-group">
|
||||
<label class="form-label">Ort <span class="text-secondary">(optional)</span></label>
|
||||
|
||||
<!-- Karte (Lesemodus, Edit per Button aktivierbar) -->
|
||||
<div style="position:relative">
|
||||
<div id="diary-map-wrap" style="border-radius:var(--radius-md);overflow:hidden;height:220px;background:var(--c-surface-2)"></div>
|
||||
<button type="button" id="diary-map-edit-btn" class="btn btn-secondary btn-sm"
|
||||
style="position:absolute;bottom:var(--space-2);right:var(--space-2);z-index:500">
|
||||
<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#pencil-simple"></use></svg>
|
||||
<span id="diary-map-edit-label">Position ändern</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- POI-Name + Aktionen -->
|
||||
<div class="mt-2">
|
||||
<div id="diary-location-chip-wrap" style="${entry?.location_name ? '' : 'display:none'}">
|
||||
<div class="diary-location-chip">
|
||||
<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#map-pin"></use></svg>
|
||||
<span id="diary-location-label">${UI.escape(entry?.location_name || '')}</span>
|
||||
<button type="button" id="diary-location-clear" aria-label="Name entfernen">
|
||||
<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#x"></use></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex;gap:var(--space-2);margin-top:var(--space-2)">
|
||||
<button type="button" class="btn btn-danger" id="diary-coords-clear">Ort entfernen</button>
|
||||
<button type="button" class="btn btn-secondary btn-sm" id="diary-location-btn">
|
||||
<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#map-pin"></use></svg>
|
||||
<span id="diary-location-btn-label">POI suchen</span>
|
||||
</button>
|
||||
</div>
|
||||
<div id="diary-location-suggestions" style="display:none;margin-top:var(--space-2)"></div>
|
||||
</div>
|
||||
<div id="diary-location-picker"></div>
|
||||
</div>
|
||||
${dogPickerHtml}
|
||||
<div class="form-group" style="margin-top:var(--space-5)">
|
||||
|
|
@ -1538,140 +1508,15 @@ window.Page_diary = (() => {
|
|||
let _locLat = (entry?.gps_lat != null) ? entry.gps_lat : null;
|
||||
let _locLon = (entry?.gps_lon != null) ? entry.gps_lon : null;
|
||||
let _locName = entry?.location_name || null;
|
||||
let _miniMap = null, _miniMarker = null;
|
||||
|
||||
const _pinSvg = '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="40" viewBox="0 0 32 40"><path d="M16 0C7.163 0 0 7.163 0 16c0 10 16 24 16 24S32 26 32 16C32 7.163 24.837 0 16 0z" fill="#C4843A"/><circle cx="16" cy="16" r="7" fill="white"/></svg>';
|
||||
const _mkIcon = () => L.divIcon({ html: _pinSvg, className: '', iconSize: [32,40], iconAnchor: [16,40] });
|
||||
|
||||
function _setName(name) {
|
||||
_locName = name;
|
||||
document.getElementById('diary-location-label').textContent = name;
|
||||
document.getElementById('diary-location-chip-wrap').style.display = '';
|
||||
document.getElementById('diary-location-suggestions').style.display = 'none';
|
||||
}
|
||||
|
||||
function _placeMarker(lat, lon) {
|
||||
if (_miniMarker) { _miniMarker.setLatLng([lat, lon]); return; }
|
||||
_miniMarker = L.marker([lat, lon], { draggable: false, icon: _mkIcon() }).addTo(_miniMap);
|
||||
_miniMarker.on('dragend', () => {
|
||||
const p = _miniMarker.getLatLng(); _locLat = p.lat; _locLon = p.lng;
|
||||
document.getElementById('diary-location-btn-label').textContent = 'POI suchen';
|
||||
// Location Picker (gemeinsame UI-Komponente)
|
||||
setTimeout(() => {
|
||||
const _diaryPicker = UI.locationPicker({
|
||||
containerId: 'diary-location-picker',
|
||||
onSelect: (lat, lon, name) => { _locLat = lat; _locLon = lon; _locName = name; },
|
||||
});
|
||||
}
|
||||
|
||||
document.getElementById('diary-location-clear')?.addEventListener('click', () => {
|
||||
_locName = null;
|
||||
document.getElementById('diary-location-chip-wrap').style.display = 'none';
|
||||
});
|
||||
const _clearBtn = document.getElementById('diary-coords-clear');
|
||||
let _clearPending = false;
|
||||
_clearBtn?.addEventListener('click', () => {
|
||||
if (!_clearPending) {
|
||||
_clearPending = true;
|
||||
_clearBtn.textContent = 'Wirklich entfernen?';
|
||||
_clearBtn.style.color = 'var(--c-danger)';
|
||||
setTimeout(() => {
|
||||
if (_clearPending) {
|
||||
_clearPending = false;
|
||||
_clearBtn.textContent = 'Ort entfernen';
|
||||
_clearBtn.style.color = 'var(--c-text-muted)';
|
||||
}
|
||||
}, 3000);
|
||||
return;
|
||||
}
|
||||
_clearPending = false;
|
||||
_clearBtn.textContent = 'Ort entfernen';
|
||||
_clearBtn.style.color = 'var(--c-text-muted)';
|
||||
_locLat = null; _locLon = null; _locName = null;
|
||||
document.getElementById('diary-location-chip-wrap').style.display = 'none';
|
||||
document.getElementById('diary-location-suggestions').style.display = 'none';
|
||||
document.getElementById('diary-location-btn-label').textContent = 'POI suchen';
|
||||
if (_miniMarker) { _miniMarker.remove(); _miniMarker = null; }
|
||||
if (_miniMap) { _miniMap.setView([48.0, 11.9], 7); _setMapEditing(false); }
|
||||
});
|
||||
|
||||
let _mapEditing = false;
|
||||
|
||||
function _setMapEditing(on) {
|
||||
_mapEditing = on;
|
||||
const lbl = document.getElementById('diary-map-edit-label');
|
||||
if (lbl) lbl.textContent = on ? 'Fertig' : 'Position ändern';
|
||||
if (!_miniMap) return;
|
||||
if (on) {
|
||||
if (_miniMarker) _miniMarker.dragging.enable();
|
||||
} else {
|
||||
if (_miniMarker) _miniMarker.dragging.disable();
|
||||
}
|
||||
}
|
||||
|
||||
document.getElementById('diary-map-edit-btn')?.addEventListener('click', () => {
|
||||
_setMapEditing(!_mapEditing);
|
||||
});
|
||||
|
||||
// Karte beim Formular-Open automatisch laden
|
||||
UI.loadLeaflet().then(() => {
|
||||
setTimeout(() => {
|
||||
const lat = _locLat || 48.0, lon = _locLon || 11.9, zoom = _locLat ? 15 : 7;
|
||||
_miniMap = L.map('diary-map-wrap', {
|
||||
zoomControl: true, attributionControl: false,
|
||||
dragging: true, scrollWheelZoom: false,
|
||||
}).setView([lat, lon], zoom);
|
||||
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19 })
|
||||
.addTo(_miniMap);
|
||||
_miniMap.invalidateSize();
|
||||
if (_locLat) {
|
||||
_placeMarker(lat, lon);
|
||||
_miniMarker.dragging.disable(); // Lesemodus: kein Drag
|
||||
}
|
||||
// Klick nur im Edit-Modus
|
||||
_miniMap.on('click', e => {
|
||||
if (!_mapEditing) return;
|
||||
_locLat = e.latlng.lat; _locLon = e.latlng.lng;
|
||||
_placeMarker(_locLat, _locLon);
|
||||
if (!_mapEditing) _miniMarker.dragging.disable();
|
||||
document.getElementById('diary-location-btn-label').textContent = 'POI suchen';
|
||||
});
|
||||
}, 150);
|
||||
});
|
||||
|
||||
async function _showSuggestions() {
|
||||
const btn = document.getElementById('diary-location-btn');
|
||||
UI.setLoading(btn, true);
|
||||
try {
|
||||
let lat = _locLat, lon = _locLon;
|
||||
if (lat == null || lon == null) {
|
||||
const pos = await API.getLocation();
|
||||
lat = pos.lat; lon = pos.lon;
|
||||
_locLat = lat; _locLon = lon;
|
||||
if (_miniMap) { _miniMap.setView([lat, lon], 15); _placeMarker(lat, lon); }
|
||||
document.getElementById('diary-location-btn-label').textContent = 'POI suchen';
|
||||
}
|
||||
const suggestions = await API.diary.nearby(_appState.activeDog.id, lat, lon);
|
||||
const sugEl = document.getElementById('diary-location-suggestions');
|
||||
if (suggestions.length === 0) {
|
||||
sugEl.innerHTML = '<p style="font-size:var(--text-sm);color:var(--c-text-secondary);padding:var(--space-2) 0">Keine Orte in der Nähe gefunden.</p>';
|
||||
} else {
|
||||
sugEl.innerHTML = suggestions.map(s => `
|
||||
<button type="button" class="diary-location-suggestion"
|
||||
data-name="${UI.escape(s.name)}" data-lat="${s.lat}" data-lon="${s.lon}">
|
||||
<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#${_sourceIcon(s.source)}"></use></svg>
|
||||
<span>${UI.escape(s.name)}</span>
|
||||
<small>${s.distance_m < 1000 ? s.distance_m + ' m' : (s.distance_m / 1000).toFixed(1) + ' km'}</small>
|
||||
</button>`).join('');
|
||||
sugEl.querySelectorAll('.diary-location-suggestion').forEach(el => {
|
||||
el.addEventListener('click', () => _setName(el.dataset.name));
|
||||
});
|
||||
}
|
||||
sugEl.style.display = '';
|
||||
} catch (err) {
|
||||
UI.toast.error(err?.message?.includes('GPS') || lat == null
|
||||
? 'GPS nicht verfügbar.' : 'Ortssuche fehlgeschlagen.');
|
||||
} finally {
|
||||
UI.setLoading(btn, false);
|
||||
}
|
||||
}
|
||||
|
||||
document.getElementById('diary-location-btn')?.addEventListener('click', _showSuggestions);
|
||||
if (_locLat != null) _diaryPicker.setValue(_locLat, _locLon, _locName);
|
||||
}, 50);
|
||||
|
||||
document.getElementById('diary-form-delete')?.addEventListener('click', async () => {
|
||||
const ok = await UI.modal.confirm({
|
||||
|
|
|
|||
|
|
@ -640,6 +640,17 @@ function _fmtDate(iso) {
|
|||
} catch (err) { UI.toast.error(err.message); }
|
||||
});
|
||||
|
||||
// Liker-Liste anzeigen (Klick auf die Zahl)
|
||||
const _thLikeCount = document.getElementById('thread-like-count');
|
||||
if (_thLikeCount) {
|
||||
_thLikeCount.style.cursor = 'pointer';
|
||||
_thLikeCount.title = 'Wer hat geliked?';
|
||||
_thLikeCount.addEventListener('click', e => {
|
||||
e.stopPropagation();
|
||||
if ((thread.likes || 0) > 0) _showLikers('thread', thread.id);
|
||||
});
|
||||
}
|
||||
|
||||
// Report thread
|
||||
document.getElementById('thread-report-btn')?.addEventListener('click', () => {
|
||||
_showReportForm('thread', thread.id);
|
||||
|
|
@ -812,9 +823,9 @@ function _fmtDate(iso) {
|
|||
// Like
|
||||
container.querySelectorAll('.forum-post-like:not([data-bound])').forEach(btn => {
|
||||
btn.dataset.bound = '1';
|
||||
const postId = parseInt(btn.dataset.postId);
|
||||
btn.addEventListener('click', async () => {
|
||||
if (!uid) { UI.toast.info('Bitte erst anmelden.'); return; }
|
||||
const postId = parseInt(btn.dataset.postId);
|
||||
try {
|
||||
const res = await API.forum.like('post', postId);
|
||||
btn.classList.toggle('active', res.liked);
|
||||
|
|
@ -822,6 +833,16 @@ function _fmtDate(iso) {
|
|||
if (countEl) countEl.textContent = res.count;
|
||||
} catch (err) { UI.toast.error(err.message); }
|
||||
});
|
||||
// Klick auf die Zahl → Liker-Liste
|
||||
const countEl = btn.querySelector('.forum-post-like-count');
|
||||
if (countEl) {
|
||||
countEl.style.cursor = 'pointer';
|
||||
countEl.title = 'Wer hat geliked?';
|
||||
countEl.addEventListener('click', e => {
|
||||
e.stopPropagation();
|
||||
if (parseInt(countEl.textContent) > 0) _showLikers('post', postId);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Report
|
||||
|
|
@ -874,6 +895,28 @@ function _fmtDate(iso) {
|
|||
});
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------
|
||||
// Liker-Liste — wer hat geliked?
|
||||
// ----------------------------------------------------------
|
||||
async function _showLikers(targetType, targetId) {
|
||||
try {
|
||||
const likers = await API.forum.likers(targetType, targetId);
|
||||
if (!likers.length) { UI.toast.info('Noch keine Likes.'); return; }
|
||||
const rows = likers.map(l => `
|
||||
<div style="display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) 0;border-bottom:1px solid var(--c-border-light)">
|
||||
<div class="forum-avatar forum-avatar--sm">${UI.escape(_initial(l.name))}</div>
|
||||
<span style="font-size:0.9rem">${UI.escape(l.name || 'Unbekannt')}</span>
|
||||
${l.founder_number ? `<span style="font-size:10px;font-weight:700;background:#7c3aed;color:#fff;padding:1px 5px;border-radius:4px;margin-left:auto">Gründer #${l.founder_number}</span>` : ''}
|
||||
</div>`).join('');
|
||||
UI.modal.open({
|
||||
title: `${UI.icon('heart')} ${likers.length} ${likers.length === 1 ? 'Like' : 'Likes'}`,
|
||||
body: `<div style="max-height:50vh;overflow-y:auto">${rows}</div>`,
|
||||
footer: `<button type="button" class="btn btn-secondary w-full" id="likers-close">Schließen</button>`,
|
||||
});
|
||||
document.getElementById('likers-close')?.addEventListener('click', UI.modal.close);
|
||||
} catch (err) { UI.toast.error(err.message); }
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------
|
||||
// Report-Formular
|
||||
// ----------------------------------------------------------
|
||||
|
|
|
|||
|
|
@ -59,6 +59,7 @@ window.Page_map = (() => {
|
|||
treffpunkt: [],
|
||||
community: [],
|
||||
zuechter: [],
|
||||
hotel: [],
|
||||
};
|
||||
|
||||
const VISIBLE_KEY = 'by_map_visible_v1';
|
||||
|
|
@ -130,6 +131,10 @@ window.Page_map = (() => {
|
|||
interactive: false,
|
||||
};
|
||||
|
||||
// Orts-Suche
|
||||
let _searchTimer = null;
|
||||
let _searchMarker = null;
|
||||
|
||||
let _overpassTimer = null;
|
||||
let _overpassActive = false;
|
||||
let _ringClosing = false;
|
||||
|
|
@ -210,13 +215,50 @@ window.Page_map = (() => {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="map-fabs">
|
||||
<button class="map-fab map-fab--pin" id="map-pin-btn" title="Marker setzen"><svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#push-pin"></use></svg></button>
|
||||
${App.hasPro(_appState?.user) ? `
|
||||
<button class="map-fab" id="map-radar-btn" title="Regenradar ein-/ausblenden"><svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#cloud-rain"></use></svg></button>
|
||||
<button class="map-fab" id="map-temp-btn" title="Temperatur ein-/ausblenden"><svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#thermometer"></use></svg></button>
|
||||
` : ''}
|
||||
<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>
|
||||
<!-- Orts-Suche Panel (von oben einschiebend, geschlossen per default) -->
|
||||
<div class="map-search-wrap" id="map-search-wrap">
|
||||
<div class="map-search-row">
|
||||
<svg class="ph-icon" aria-hidden="true" style="width:16px;height:16px;flex-shrink:0;color:#888"><use href="/icons/phosphor.svg#magnifying-glass"></use></svg>
|
||||
<input type="search" id="map-search-input" class="map-search-input"
|
||||
placeholder="Ort oder Adresse…" autocomplete="off" autocorrect="off" spellcheck="false">
|
||||
<button class="map-search-clear" id="map-search-clear" aria-label="Suche schließen">
|
||||
<svg class="ph-icon" aria-hidden="true" style="width:14px;height:14px"><use href="/icons/phosphor.svg#x"></use></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="map-search-results" id="map-search-results" style="display:none"></div>
|
||||
</div>
|
||||
|
||||
<!-- Speed Dial -->
|
||||
<div class="map-speed-dial" id="map-speed-dial">
|
||||
<div class="map-sd-items">
|
||||
<!-- DOM-Reihenfolge = Aufklappreihenfolge von unten nach oben -->
|
||||
<div class="map-sd-item">
|
||||
<span class="map-sd-label">Mein Standort</span>
|
||||
<button class="map-sd-btn" id="map-locate-btn" title="Mein Standort"><svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#map-pin"></use></svg></button>
|
||||
</div>
|
||||
<div class="map-sd-item">
|
||||
<span class="map-sd-label">Ort suchen</span>
|
||||
<button class="map-sd-btn" id="map-search-btn" title="Ort suchen"><svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#magnifying-glass"></use></svg></button>
|
||||
</div>
|
||||
<div class="map-sd-item">
|
||||
<span class="map-sd-label">Marker setzen</span>
|
||||
<button class="map-sd-btn map-fab--pin" id="map-pin-btn" title="Marker setzen"><svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#push-pin"></use></svg></button>
|
||||
</div>
|
||||
${App.hasPro(_appState?.user) ? `
|
||||
<div class="map-sd-item">
|
||||
<span class="map-sd-label">Regenradar</span>
|
||||
<button class="map-sd-btn" id="map-radar-btn" title="Regenradar"><svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#cloud-rain"></use></svg></button>
|
||||
</div>
|
||||
<div class="map-sd-item">
|
||||
<span class="map-sd-label">Temperatur</span>
|
||||
<button class="map-sd-btn" id="map-temp-btn" title="Temperatur"><svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#thermometer"></use></svg></button>
|
||||
</div>
|
||||
` : ''}
|
||||
</div>
|
||||
<button class="map-fab map-sd-trigger" id="map-sd-trigger" title="Karten-Aktionen">
|
||||
<svg class="ph-icon map-sd-icon-open" aria-hidden="true"><use href="/icons/phosphor.svg#dots-three-vertical"></use></svg>
|
||||
<svg class="ph-icon map-sd-icon-close" aria-hidden="true"><use href="/icons/phosphor.svg#x"></use></svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="map-statusbar" id="map-statusbar">
|
||||
|
|
@ -289,7 +331,19 @@ window.Page_map = (() => {
|
|||
_saveVisible();
|
||||
});
|
||||
|
||||
// Speed Dial
|
||||
const _sdEl = document.getElementById('map-speed-dial');
|
||||
document.getElementById('map-sd-trigger')?.addEventListener('click', e => {
|
||||
e.stopPropagation();
|
||||
_sdEl?.classList.toggle('open');
|
||||
});
|
||||
// Klick auf Karte / außerhalb schließt Speed Dial
|
||||
document.getElementById('central-map')?.addEventListener('pointerdown', () => {
|
||||
_sdEl?.classList.remove('open');
|
||||
});
|
||||
|
||||
document.getElementById('map-locate-btn').addEventListener('click', () => {
|
||||
_sdEl?.classList.remove('open');
|
||||
if (_userPos) {
|
||||
_map?.setView([_userPos.lat, _userPos.lon], 16);
|
||||
} else {
|
||||
|
|
@ -297,9 +351,54 @@ window.Page_map = (() => {
|
|||
}
|
||||
});
|
||||
|
||||
document.getElementById('map-pin-btn').addEventListener('click', _togglePlacementMode);
|
||||
document.getElementById('map-radar-btn')?.addEventListener('click', _toggleRadar);
|
||||
document.getElementById('map-temp-btn')?.addEventListener('click', _toggleTemp);
|
||||
document.getElementById('map-pin-btn').addEventListener('click', () => {
|
||||
_sdEl?.classList.remove('open');
|
||||
_togglePlacementMode();
|
||||
});
|
||||
document.getElementById('map-radar-btn')?.addEventListener('click', () => {
|
||||
_sdEl?.classList.remove('open');
|
||||
_toggleRadar();
|
||||
});
|
||||
document.getElementById('map-temp-btn')?.addEventListener('click', () => {
|
||||
_sdEl?.classList.remove('open');
|
||||
_toggleTemp();
|
||||
});
|
||||
|
||||
// Suche — FAB öffnet Panel
|
||||
document.getElementById('map-search-btn')?.addEventListener('click', () => {
|
||||
document.getElementById('map-speed-dial')?.classList.remove('open');
|
||||
const wrap = document.getElementById('map-search-wrap');
|
||||
const isOpen = wrap?.classList.contains('active');
|
||||
if (isOpen) {
|
||||
_clearSearch();
|
||||
} else {
|
||||
wrap?.classList.add('active');
|
||||
setTimeout(() => document.getElementById('map-search-input')?.focus(), 60);
|
||||
document.getElementById('map-search-btn')?.classList.add('active');
|
||||
}
|
||||
});
|
||||
|
||||
const searchInput = document.getElementById('map-search-input');
|
||||
const searchResults = document.getElementById('map-search-results');
|
||||
|
||||
searchInput?.addEventListener('input', () => {
|
||||
const q = searchInput.value.trim();
|
||||
clearTimeout(_searchTimer);
|
||||
if (q.length < 2) { searchResults.style.display = 'none'; return; }
|
||||
_searchTimer = setTimeout(() => _runSearch(q), 400);
|
||||
});
|
||||
|
||||
searchInput?.addEventListener('keydown', e => {
|
||||
if (e.key === 'Escape') _clearSearch();
|
||||
});
|
||||
|
||||
document.getElementById('map-search-clear')?.addEventListener('click', _clearSearch);
|
||||
|
||||
// Klick auf Karte schließt Ergebnisse (aber behält Marker)
|
||||
document.getElementById('central-map')?.addEventListener('pointerdown', () => {
|
||||
searchResults.style.display = 'none';
|
||||
searchInput?.blur();
|
||||
});
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------
|
||||
|
|
@ -907,7 +1006,7 @@ window.Page_map = (() => {
|
|||
const params = new URLSearchParams({ type: osmType, ...bbox });
|
||||
try {
|
||||
const pois = await fetch(`/api/osm/pois?${params}`).then(r => r.json());
|
||||
const osmCount = _layers[layerKey].filter(m => !m._ownPlace).length;
|
||||
const osmCount = (_layers[layerKey] || []).filter(m => !m._ownPlace).length;
|
||||
if (pois.length !== osmCount) _replaceOsmMarkers(layerKey, pois);
|
||||
_done++;
|
||||
const pct = Math.round(20 + _done / _total * 80);
|
||||
|
|
@ -919,11 +1018,14 @@ window.Page_map = (() => {
|
|||
const pct = Math.round(20 + _done / _total * 80);
|
||||
const total = Object.values(_layers).flat().filter(m => !m._ownPlace).length;
|
||||
_setOsmStatus(pct < 100 ? `Scanne…` : `${total} Marker`, pct);
|
||||
return _layers[layerKey].filter(m => !m._ownPlace).length;
|
||||
return (_layers[layerKey] || []).filter(m => !m._ownPlace).length;
|
||||
}
|
||||
});
|
||||
await Promise.all(freshTasks);
|
||||
_overpassActive = false;
|
||||
try {
|
||||
await Promise.all(freshTasks);
|
||||
} finally {
|
||||
_overpassActive = false;
|
||||
}
|
||||
|
||||
const totalLoaded = Object.values(_layers).flat().filter(m => !m._ownPlace).length;
|
||||
const allHidden = Object.keys(OSM_LAYER_MAP).every(k => _visible[k] === false);
|
||||
|
|
@ -931,10 +1033,13 @@ window.Page_map = (() => {
|
|||
_setOsmStatus('Layer deaktiviert — Liste antippen', 100);
|
||||
}
|
||||
|
||||
// Wenn 0 OSM-Marker: Hintergrund-Fetch läuft noch — max 3× automatisch nachfragen
|
||||
if (totalLoaded === 0 && zoom >= 14 && _autoRetryCount < 3) {
|
||||
// Wenn 0 OSM-Marker: Hintergrund-Overpass-Fetch läuft noch — bis zu 8× nachfragen
|
||||
// Overpass für alle Layer sequential: bis zu ~4min → Retries müssen das abdecken
|
||||
if (totalLoaded === 0 && zoom >= 14 && _autoRetryCount < 8) {
|
||||
_autoRetryCount++;
|
||||
const delay = _autoRetryCount * 30000; // 30s, 60s, 90s
|
||||
// 10s, 20s, 35s, 50s, 70s, 90s, 120s, 150s
|
||||
const delays = [10000, 20000, 35000, 50000, 70000, 90000, 120000, 150000];
|
||||
const delay = delays[_autoRetryCount - 1] || 120000;
|
||||
_setOsmStatus(`Neue Umgebung – Daten werden geladen…`);
|
||||
setTimeout(() => { if (!_overpassActive) _scheduleOsmLoad(); }, delay);
|
||||
}
|
||||
|
|
@ -1944,6 +2049,92 @@ window.Page_map = (() => {
|
|||
} catch { /* still */ }
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------
|
||||
// Orts-Suche (Nominatim-Proxy)
|
||||
// ----------------------------------------------------------
|
||||
async function _runSearch(q) {
|
||||
const resultsEl = document.getElementById('map-search-results');
|
||||
if (!resultsEl) return;
|
||||
resultsEl.innerHTML = '<div class="map-search-loading">Suche…</div>';
|
||||
resultsEl.style.display = '';
|
||||
try {
|
||||
const data = await API.get(`/osm/geocode?q=${encodeURIComponent(q)}`);
|
||||
if (!data.length) {
|
||||
resultsEl.innerHTML = '<div class="map-search-empty">Keine Ergebnisse</div>';
|
||||
return;
|
||||
}
|
||||
resultsEl.innerHTML = data.map((r, i) =>
|
||||
`<div class="map-search-item" data-i="${i}">
|
||||
<div class="map-search-item-name">${UI.escape(r.name)}</div>
|
||||
${r.subtitle ? `<div class="map-search-item-sub">${UI.escape(r.subtitle)}</div>` : ''}
|
||||
</div>`
|
||||
).join('');
|
||||
resultsEl.querySelectorAll('.map-search-item').forEach(el => {
|
||||
el.addEventListener('pointerdown', e => {
|
||||
e.stopPropagation();
|
||||
const r = data[+el.dataset.i];
|
||||
_flyToResult(r);
|
||||
document.getElementById('map-search-input').value = r.name;
|
||||
document.getElementById('map-search-clear').style.display = '';
|
||||
resultsEl.style.display = 'none';
|
||||
});
|
||||
});
|
||||
} catch {
|
||||
resultsEl.innerHTML = '<div class="map-search-empty">Suche nicht verfügbar</div>';
|
||||
}
|
||||
}
|
||||
|
||||
function _flyToResult(r) {
|
||||
if (!_map || !window.L) return;
|
||||
_searchMarker?.remove();
|
||||
_map.flyTo([r.lat, r.lon], 15, { duration: 1.0 });
|
||||
_searchMarker = L.marker([r.lat, r.lon], {
|
||||
icon: L.divIcon({
|
||||
className: '',
|
||||
html: `<div style="background:#C4843A;color:#fff;font-size:15px;
|
||||
width:32px;height:32px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);
|
||||
display:flex;align-items:center;justify-content:center;
|
||||
box-shadow:0 2px 8px rgba(0,0,0,0.4)">
|
||||
<span style="transform:rotate(45deg)">
|
||||
<svg style="width:16px;height:16px" viewBox="0 0 256 256" fill="currentColor">
|
||||
<path d="M128,16a96,96,0,1,0,96,96A96.11,96.11,0,0,0,128,16Zm0,48a32,32,0,1,1-32,32A32,32,0,0,1,128,64Zm0,144a80,80,0,0,1-56.37-23.37C74.18,170.06,98.65,160,128,160s53.82,10.06,56.37,24.63A80,80,0,0,1,128,208Z"/>
|
||||
</svg>
|
||||
</span></div>`,
|
||||
iconSize: [32, 32],
|
||||
iconAnchor: [16, 32],
|
||||
}),
|
||||
zIndexOffset: 1000,
|
||||
})
|
||||
.addTo(_map)
|
||||
.bindPopup(`<div style="font-size:13px;font-weight:600">${UI.escape(r.name)}</div>
|
||||
${r.subtitle ? `<div style="font-size:11px;color:#888">${UI.escape(r.subtitle)}</div>` : ''}
|
||||
<button class="btn btn-secondary btn-sm" id="search-marker-close" style="margin-top:8px">
|
||||
Marker entfernen
|
||||
</button>`, { maxWidth: 240 })
|
||||
.openPopup();
|
||||
|
||||
setTimeout(() => {
|
||||
document.getElementById('search-marker-close')?.addEventListener('click', () => {
|
||||
_clearSearch();
|
||||
_searchMarker?.closePopup();
|
||||
});
|
||||
}, 50);
|
||||
}
|
||||
|
||||
function _clearSearch() {
|
||||
const input = document.getElementById('map-search-input');
|
||||
const results = document.getElementById('map-search-results');
|
||||
const wrap = document.getElementById('map-search-wrap');
|
||||
const btn = document.getElementById('map-search-btn');
|
||||
if (input) { input.value = ''; input.blur(); }
|
||||
if (results) results.style.display = 'none';
|
||||
wrap?.classList.remove('active');
|
||||
btn?.classList.remove('active');
|
||||
_searchMarker?.remove();
|
||||
_searchMarker = null;
|
||||
clearTimeout(_searchTimer);
|
||||
}
|
||||
|
||||
return { init, refresh, onDogChange, startRecording: _startRecording, stopRecording: _stopRecording, isRecording: () => _recActive };
|
||||
|
||||
})();
|
||||
|
|
|
|||
|
|
@ -1698,6 +1698,10 @@ window.Page_routes = (() => {
|
|||
center: [mid.lat, mid.lon], zoom: 15,
|
||||
zoomControl: false, attributionControl: false,
|
||||
});
|
||||
// Container hat im frisch eingefügten Fixed-Overlay erst jetzt seine
|
||||
// finale Flex-Höhe — Leaflet muss sie neu vermessen, sonst lädt es nur
|
||||
// oben Tiles und der Rest bleibt grau.
|
||||
_navMap.invalidateSize();
|
||||
|
||||
// Route-Polylines: erledigt (grün) + ausstehend (orange)
|
||||
const doneLine = L.polyline([], { color: '#22c55e', weight: 5, opacity: 0.85 }).addTo(_navMap);
|
||||
|
|
@ -1705,6 +1709,14 @@ window.Page_routes = (() => {
|
|||
_navMap.fitBounds(remainLine.getBounds(), { padding: [20, 20] });
|
||||
_addRouteArrows(_navMap, track, '#3b82f6');
|
||||
|
||||
// iOS rendert das Flex-Layout teils verzögert — nochmal neu vermessen
|
||||
// und Ausschnitt erneut anpassen.
|
||||
setTimeout(() => {
|
||||
if (!_navMap) return;
|
||||
_navMap.invalidateSize();
|
||||
_navMap.fitBounds(remainLine.getBounds(), { padding: [20, 20] });
|
||||
}, 250);
|
||||
|
||||
// Start/End-Marker (als Variable damit Reverse sie neu setzen kann)
|
||||
const mkPin = (p, color) => L.circleMarker([p.lat, p.lon], {
|
||||
radius: 8, color: '#fff', weight: 2, fillColor: color, fillOpacity: 1
|
||||
|
|
|
|||
|
|
@ -897,8 +897,6 @@ window.Page_walks = (() => {
|
|||
let _locLon = v.lon != null ? parseFloat(v.lon) : null;
|
||||
let _locName = v.ort_name || null;
|
||||
|
||||
const _pinSvg = '<svg xmlns="http://www.w3.org/2000/svg" width="28" height="36" viewBox="0 0 32 40"><path d="M16 0C7.163 0 0 7.163 0 16c0 10 16 24 16 24S32 26 32 16C32 7.163 24.837 0 16 0z" fill="#C4843A"/><circle cx="16" cy="16" r="7" fill="white"/></svg>';
|
||||
|
||||
const body = `
|
||||
<form id="walk-form" autocomplete="off">
|
||||
|
||||
|
|
@ -924,48 +922,7 @@ window.Page_walks = (() => {
|
|||
|
||||
<div class="form-group" id="wf-location-group">
|
||||
<label class="form-label">Treffpunkt</label>
|
||||
|
||||
<!-- Mini-Karte -->
|
||||
<div style="position:relative">
|
||||
<div id="wf-map-wrap" style="border-radius:var(--radius-md);overflow:hidden;height:200px;background:var(--c-surface-2)"></div>
|
||||
<button type="button" id="wf-map-pin-here" style="
|
||||
position:absolute;bottom:10px;left:50%;transform:translateX(-50%);
|
||||
z-index:1000;background:var(--c-primary);color:#fff;border:none;
|
||||
border-radius:var(--radius-full);padding:6px 14px;font-size:var(--text-xs);
|
||||
font-weight:600;box-shadow:var(--shadow-md);cursor:pointer;
|
||||
display:flex;align-items:center;gap:6px;white-space:nowrap">
|
||||
${UI.icon('map-pin')} Pin hier setzen
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Ort-Chip -->
|
||||
<div class="mt-2">
|
||||
<div id="wf-location-chip-wrap" style="${_locName ? '' : 'display:none'}">
|
||||
<div class="diary-location-chip">
|
||||
${UI.icon('map-pin')}
|
||||
<span id="wf-location-label">${UI.escape(_locName || '')}</span>
|
||||
<button type="button" id="wf-location-clear" aria-label="Name entfernen">
|
||||
${UI.icon('x')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:flex;gap:var(--space-2);margin-top:var(--space-2)">
|
||||
<button type="button" class="btn btn-danger btn-sm" id="wf-coords-clear">Ort entfernen</button>
|
||||
<button type="button" class="btn btn-secondary flex-1" id="wf-location-btn">
|
||||
${UI.icon('map-pin')}
|
||||
<span id="wf-location-btn-label">${_locLat ? 'POI suchen' : 'GPS → POI suchen'}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Vorschläge -->
|
||||
<div id="wf-location-suggestions" style="display:none;margin-top:var(--space-2)"></div>
|
||||
</div>
|
||||
|
||||
<!-- Versteckte Koordinaten-Felder -->
|
||||
<input type="hidden" name="lat" id="wf-lat" value="${_locLat || ''}">
|
||||
<input type="hidden" name="lon" id="wf-lon" value="${_locLon || ''}">
|
||||
<input type="hidden" name="ort_name" id="wf-ort-name" value="${UI.escape(_locName || '')}">
|
||||
<div id="wf-location-picker"></div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
|
|
@ -996,157 +953,16 @@ window.Page_walks = (() => {
|
|||
|
||||
document.getElementById('wf-cancel')?.addEventListener('click', UI.modal.close);
|
||||
|
||||
// --- Mini-Karte ---
|
||||
let _miniMap = null, _miniMarker = null, _mapEditing = false;
|
||||
|
||||
const _mkIcon = () => L.divIcon({ html: _pinSvg, className: '', iconSize: [28, 36], iconAnchor: [14, 36] });
|
||||
|
||||
function _placeMarker(lat, lon) {
|
||||
if (_miniMarker) { _miniMarker.setLatLng([lat, lon]); return; }
|
||||
_miniMarker = L.marker([lat, lon], { draggable: true, icon: _mkIcon() }).addTo(_miniMap);
|
||||
_miniMarker.on('dragend', () => {
|
||||
const p = _miniMarker.getLatLng();
|
||||
_locLat = p.lat; _locLon = p.lng;
|
||||
document.getElementById('wf-lat').value = _locLat;
|
||||
document.getElementById('wf-lon').value = _locLon;
|
||||
document.getElementById('wf-location-btn-label').textContent = 'POI suchen';
|
||||
// Location Picker
|
||||
let _wfPicker = null;
|
||||
setTimeout(() => {
|
||||
_wfPicker = UI.locationPicker({
|
||||
containerId: 'wf-location-picker',
|
||||
onSelect: (lat, lon, name) => { _locLat = lat; _locLon = lon; _locName = name; },
|
||||
});
|
||||
}
|
||||
if (_locLat != null) _wfPicker.setValue(_locLat, _locLon, _locName);
|
||||
}, 50);
|
||||
|
||||
function _setCoords(lat, lon) {
|
||||
_locLat = lat; _locLon = lon;
|
||||
document.getElementById('wf-lat').value = lat;
|
||||
document.getElementById('wf-lon').value = lon;
|
||||
}
|
||||
|
||||
function _setName(name) {
|
||||
_locName = name;
|
||||
document.getElementById('wf-location-label').textContent = name;
|
||||
document.getElementById('wf-location-chip-wrap').style.display = '';
|
||||
document.getElementById('wf-ort-name').value = name;
|
||||
document.getElementById('wf-location-suggestions').style.display = 'none';
|
||||
}
|
||||
|
||||
UI.loadLeaflet().then(() => {
|
||||
setTimeout(() => {
|
||||
const lat = _locLat || 48.0, lon = _locLon || 11.9, zoom = _locLat ? 15 : 7;
|
||||
_miniMap = L.map('wf-map-wrap', {
|
||||
zoomControl: true, attributionControl: false,
|
||||
dragging: true, scrollWheelZoom: false,
|
||||
}).setView([lat, lon], zoom);
|
||||
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19 })
|
||||
.addTo(_miniMap);
|
||||
_miniMap.invalidateSize();
|
||||
if (_locLat) _placeMarker(lat, lon);
|
||||
_miniMap.on('click', e => {
|
||||
_setCoords(e.latlng.lat, e.latlng.lng);
|
||||
_placeMarker(_locLat, _locLon);
|
||||
document.getElementById('wf-location-btn-label').textContent = 'POI suchen';
|
||||
});
|
||||
document.getElementById('wf-map-pin-here')?.addEventListener('click', () => {
|
||||
const c = _miniMap.getCenter();
|
||||
_setCoords(c.lat, c.lng);
|
||||
_placeMarker(c.lat, c.lng);
|
||||
document.getElementById('wf-location-btn-label').textContent = 'POI suchen';
|
||||
});
|
||||
}, 150);
|
||||
});
|
||||
|
||||
// Ort-Name-Chip entfernen
|
||||
document.getElementById('wf-location-clear')?.addEventListener('click', () => {
|
||||
_locName = null;
|
||||
document.getElementById('wf-location-chip-wrap').style.display = 'none';
|
||||
document.getElementById('wf-ort-name').value = '';
|
||||
});
|
||||
|
||||
// Koordinaten + Name entfernen (Zwei-Klick)
|
||||
const clearBtn = document.getElementById('wf-coords-clear');
|
||||
let _clearPending = false;
|
||||
clearBtn?.addEventListener('click', () => {
|
||||
if (!_clearPending) {
|
||||
_clearPending = true;
|
||||
clearBtn.textContent = 'Wirklich entfernen?';
|
||||
clearBtn.style.color = 'var(--c-danger)';
|
||||
setTimeout(() => {
|
||||
_clearPending = false;
|
||||
if (clearBtn) {
|
||||
clearBtn.textContent = 'Ort entfernen';
|
||||
clearBtn.style.color = '';
|
||||
}
|
||||
}, 3000);
|
||||
return;
|
||||
}
|
||||
_clearPending = false;
|
||||
clearBtn.textContent = 'Ort entfernen';
|
||||
clearBtn.style.color = '';
|
||||
_locLat = null; _locLon = null; _locName = null;
|
||||
document.getElementById('wf-lat').value = '';
|
||||
document.getElementById('wf-lon').value = '';
|
||||
document.getElementById('wf-ort-name').value = '';
|
||||
document.getElementById('wf-location-chip-wrap').style.display = 'none';
|
||||
document.getElementById('wf-location-suggestions').style.display = 'none';
|
||||
document.getElementById('wf-location-btn-label').textContent = 'GPS → POI suchen';
|
||||
if (_miniMarker) { _miniMarker.remove(); _miniMarker = null; }
|
||||
if (_miniMap) { _miniMap.setView([48.0, 11.9], 7); }
|
||||
});
|
||||
|
||||
// GPS → POI-Suche (wie diary.js)
|
||||
async function _showSuggestions() {
|
||||
const btn = document.getElementById('wf-location-btn');
|
||||
UI.setLoading(btn, true);
|
||||
try {
|
||||
let lat = _locLat, lon = _locLon;
|
||||
if (lat == null || lon == null) {
|
||||
const pos = await API.getLocation({ enableHighAccuracy: true });
|
||||
lat = pos.lat; lon = pos.lon;
|
||||
_setCoords(lat, lon);
|
||||
if (_miniMap) {
|
||||
_miniMap.setView([lat, lon], 15);
|
||||
_placeMarker(lat, lon);
|
||||
if (_miniMarker) _miniMarker.dragging.disable();
|
||||
}
|
||||
document.getElementById('wf-location-btn-label').textContent = 'POI suchen';
|
||||
}
|
||||
|
||||
const suggestions = _appState.user
|
||||
? await API.walks.nearby(lat, lon)
|
||||
: [];
|
||||
|
||||
const sugEl = document.getElementById('wf-location-suggestions');
|
||||
if (!suggestions.length) {
|
||||
sugEl.innerHTML = '<p style="font-size:var(--text-sm);color:var(--c-text-secondary);padding:var(--space-2) 0">Keine Orte in der Nähe gefunden.</p>';
|
||||
} else {
|
||||
sugEl.innerHTML = suggestions.map(s => `
|
||||
<button type="button" class="diary-location-suggestion"
|
||||
data-name="${UI.escape(s.name)}" data-lat="${s.lat}" data-lon="${s.lon}">
|
||||
${UI.icon(_sourceIcon(s.source))}
|
||||
<span>${UI.escape(s.name)}</span>
|
||||
<small>${s.distance_m < 1000 ? s.distance_m + ' m' : (s.distance_m / 1000).toFixed(1) + ' km'}</small>
|
||||
</button>`).join('');
|
||||
sugEl.querySelectorAll('.diary-location-suggestion').forEach(el => {
|
||||
el.addEventListener('click', () => {
|
||||
const slat = parseFloat(el.dataset.lat);
|
||||
const slon = parseFloat(el.dataset.lon);
|
||||
_setCoords(slat, slon);
|
||||
_setName(el.dataset.name);
|
||||
if (_miniMap) {
|
||||
_miniMap.setView([slat, slon], 16);
|
||||
_placeMarker(slat, slon);
|
||||
if (_miniMarker) _miniMarker.dragging.disable();
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
sugEl.style.display = '';
|
||||
} catch (err) {
|
||||
UI.toast.error(err?.message?.includes('GPS') || _locLat == null
|
||||
? 'GPS nicht verfügbar.' : 'Ortssuche fehlgeschlagen.');
|
||||
} finally {
|
||||
UI.setLoading(btn, false);
|
||||
}
|
||||
}
|
||||
|
||||
document.getElementById('wf-location-btn')?.addEventListener('click', _showSuggestions);
|
||||
|
||||
// Formular absenden
|
||||
document.getElementById('walk-form')?.addEventListener('submit', async e => {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue