Sprint 6: Karte / Orte / Routen mit GPS-Aufzeichnung
- backend/routes/places.py: CRUD für hundefreundliche Orte (6 Typen) - backend/routes/routen.py: CRUD für Gassi-Routen mit GPS-Track (JSON) - main.py: beide Router eingehängt (/api/places, /api/routes) - api.js: places + routes erweitert (list, update, delete) - pages/places.js: Karte + Liste, Typ-Filter, Ort anlegen/bearbeiten - pages/routes.js: Routen entdecken + GPS-Aufzeichnung mit Stoppuhr - pages/map.js: zentrale Übersichtskarte (Orte + Giftköder, Layer-Toggle) - components.css: Styles für alle drei neuen Seiten - sw.js: by-v19 → by-v20
This commit is contained in:
parent
956e34db88
commit
b9df636535
9 changed files with 1948 additions and 9 deletions
|
|
@ -160,26 +160,34 @@ const API = (() => {
|
|||
// KARTE & ORTE
|
||||
// ----------------------------------------------------------
|
||||
const places = {
|
||||
listNearby(lat, lon, type = null, radius = 3000) {
|
||||
list(typ = null) {
|
||||
return get(`/places${typ ? '?typ=' + encodeURIComponent(typ) : ''}`);
|
||||
},
|
||||
listNearby(lat, lon, typ = null, radius = 5000) {
|
||||
const params = new URLSearchParams({ lat, lon, radius });
|
||||
if (type) params.set('type', type);
|
||||
if (typ) params.set('typ', typ);
|
||||
return get(`/places?${params}`);
|
||||
},
|
||||
get(id) { return get(`/places/${id}`); },
|
||||
create(data) { return post('/places', data); },
|
||||
rate(id, rating, comment) { return post(`/places/${id}/ratings`, { rating, comment }); },
|
||||
get(id) { return get(`/places/${id}`); },
|
||||
create(data) { return post('/places', data); },
|
||||
update(id, data) { return patch(`/places/${id}`, data); },
|
||||
delete(id) { return del(`/places/${id}`); },
|
||||
};
|
||||
|
||||
// ----------------------------------------------------------
|
||||
// GASSI-ROUTEN
|
||||
// ----------------------------------------------------------
|
||||
const routes = {
|
||||
list() {
|
||||
return get('/routes');
|
||||
},
|
||||
listNearby(lat, lon, radius = 10000) {
|
||||
return get(`/routes?lat=${lat}&lon=${lon}&radius=${radius}`);
|
||||
},
|
||||
get(id) { return get(`/routes/${id}`); },
|
||||
create(data) { return post('/routes', data); },
|
||||
rate(id, d) { return post(`/routes/${id}/ratings`, d); },
|
||||
get(id) { return get(`/routes/${id}`); },
|
||||
create(data) { return post('/routes', data); },
|
||||
update(id, data) { return patch(`/routes/${id}`, data); },
|
||||
delete(id) { return del(`/routes/${id}`); },
|
||||
};
|
||||
|
||||
// ----------------------------------------------------------
|
||||
|
|
|
|||
230
backend/static/js/pages/map.js
Normal file
230
backend/static/js/pages/map.js
Normal file
|
|
@ -0,0 +1,230 @@
|
|||
/* ============================================================
|
||||
BAN YARO — Zentrale Karte
|
||||
Alle Layer auf einer Karte: Orte + Giftköder
|
||||
============================================================ */
|
||||
|
||||
window.Page_map = (() => {
|
||||
|
||||
let _container = null;
|
||||
let _appState = null;
|
||||
let _map = null;
|
||||
let _leafletLoaded = false;
|
||||
let _userPos = null;
|
||||
|
||||
// Layer-Marker
|
||||
let _layers = {
|
||||
restaurant: [],
|
||||
freilauf: [],
|
||||
shop: [],
|
||||
kotbeutel: [],
|
||||
tierarzt: [],
|
||||
hundeschule: [],
|
||||
poison: [],
|
||||
};
|
||||
|
||||
// Layer-Sichtbarkeit
|
||||
let _visible = {
|
||||
restaurant: true,
|
||||
freilauf: true,
|
||||
shop: true,
|
||||
kotbeutel: true,
|
||||
tierarzt: true,
|
||||
hundeschule: true,
|
||||
poison: true,
|
||||
};
|
||||
|
||||
const TYPEN = {
|
||||
restaurant: { icon: '🍽️', label: 'Restaurant', color: '#F97316' },
|
||||
freilauf: { icon: '🐕', label: 'Freilauf', color: '#22C55E' },
|
||||
shop: { icon: '🛒', label: 'Shop', color: '#3B82F6' },
|
||||
kotbeutel: { icon: '🧻', label: 'Kotbeutel', color: '#6B7280' },
|
||||
tierarzt: { icon: '🩺', label: 'Tierarzt', color: '#EF4444' },
|
||||
hundeschule: { icon: '🎓', label: 'Hundeschule', color: '#8B5CF6' },
|
||||
poison: { icon: '⚠️', label: 'Giftköder', color: '#DC2626' },
|
||||
};
|
||||
|
||||
// ----------------------------------------------------------
|
||||
// INIT
|
||||
// ----------------------------------------------------------
|
||||
async function init(container, appState) {
|
||||
_container = container;
|
||||
_appState = appState;
|
||||
_render();
|
||||
try { _userPos = await API.getLocation(); } catch {}
|
||||
await _loadLeaflet();
|
||||
_initMap();
|
||||
_loadAll();
|
||||
}
|
||||
|
||||
function refresh() { _loadAll(); }
|
||||
function onDogChange() {}
|
||||
|
||||
// ----------------------------------------------------------
|
||||
// RENDER
|
||||
// ----------------------------------------------------------
|
||||
function _render() {
|
||||
_container.innerHTML = `
|
||||
<div class="map-full-layout">
|
||||
|
||||
<!-- Layer-Legende -->
|
||||
<div class="map-legend" id="map-legend">
|
||||
${Object.entries(TYPEN).map(([k, t]) => `
|
||||
<button class="map-legend-btn active" data-layer="${k}"
|
||||
style="--layer-color:${t.color}">
|
||||
${t.icon} ${t.label}
|
||||
</button>
|
||||
`).join('')}
|
||||
</div>
|
||||
|
||||
<!-- Karte -->
|
||||
<div id="central-map" class="map-full"></div>
|
||||
|
||||
<!-- GPS-Button -->
|
||||
<button class="map-locate-btn" id="map-locate-btn" title="Meinen Standort">📍</button>
|
||||
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Layer-Toggle
|
||||
document.getElementById('map-legend').addEventListener('click', e => {
|
||||
const btn = e.target.closest('.map-legend-btn');
|
||||
if (!btn) return;
|
||||
const layer = btn.dataset.layer;
|
||||
_visible[layer] = !_visible[layer];
|
||||
btn.classList.toggle('active', _visible[layer]);
|
||||
_applyVisibility(layer);
|
||||
});
|
||||
|
||||
// GPS-Locate
|
||||
document.getElementById('map-locate-btn').addEventListener('click', async () => {
|
||||
try {
|
||||
_userPos = await API.getLocation({ enableHighAccuracy: true });
|
||||
_map?.setView([_userPos.lat, _userPos.lon], 14);
|
||||
} catch { UI.toast.error('Standort konnte nicht ermittelt werden.'); }
|
||||
});
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------
|
||||
// Leaflet laden
|
||||
// ----------------------------------------------------------
|
||||
async function _loadLeaflet() {
|
||||
if (_leafletLoaded || window.L) { _leafletLoaded = true; return; }
|
||||
const link = document.createElement('link');
|
||||
link.rel = 'stylesheet';
|
||||
link.href = '/css/leaflet.css';
|
||||
document.head.appendChild(link);
|
||||
await new Promise(resolve => {
|
||||
const s = document.createElement('script');
|
||||
s.src = '/js/leaflet.js';
|
||||
s.onload = resolve;
|
||||
document.head.appendChild(s);
|
||||
});
|
||||
_leafletLoaded = true;
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------
|
||||
// Karte initialisieren
|
||||
// ----------------------------------------------------------
|
||||
function _initMap() {
|
||||
const el = document.getElementById('central-map');
|
||||
if (!el || !window.L || _map) return;
|
||||
|
||||
const center = _userPos ? [_userPos.lat, _userPos.lon] : [51.1657, 10.4515];
|
||||
const zoom = _userPos ? 13 : 6;
|
||||
|
||||
_map = L.map('central-map', { zoomControl: true, attributionControl: false })
|
||||
.setView(center, zoom);
|
||||
|
||||
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19 })
|
||||
.addTo(_map);
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------
|
||||
// Alle Layer laden
|
||||
// ----------------------------------------------------------
|
||||
async function _loadAll() {
|
||||
// Alles zurücksetzen
|
||||
Object.values(_layers).flat().forEach(m => m.remove?.());
|
||||
_layers = { restaurant: [], freilauf: [], shop: [], kotbeutel: [], tierarzt: [], hundeschule: [], poison: [] };
|
||||
|
||||
// Parallel laden
|
||||
const [places, poisonList] = await Promise.allSettled([
|
||||
API.places.list(),
|
||||
_userPos
|
||||
? API.poison.listNearby(_userPos.lat, _userPos.lon, 10000)
|
||||
: Promise.resolve([]),
|
||||
]);
|
||||
|
||||
if (places.status === 'fulfilled') _addPlaces(places.value);
|
||||
if (poisonList.status === 'fulfilled') _addPoison(poisonList.value);
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------
|
||||
// Orte-Marker
|
||||
// ----------------------------------------------------------
|
||||
function _addPlaces(places) {
|
||||
if (!_map || !window.L) return;
|
||||
places.forEach(place => {
|
||||
const t = TYPEN[place.typ];
|
||||
if (!t) return;
|
||||
const m = _createMarker(place.lat, place.lon, t, place.name, () => _showPlacePopup(place));
|
||||
_layers[place.typ]?.push(m);
|
||||
if (!_visible[place.typ]) m.setOpacity(0);
|
||||
});
|
||||
}
|
||||
|
||||
function _showPlacePopup(place) {
|
||||
const t = TYPEN[place.typ] || { icon: '📍', label: place.typ };
|
||||
UI.toast.info(`${t.icon} ${place.name}${place.adresse ? ' · ' + place.adresse : ''}`);
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------
|
||||
// Giftköder-Marker
|
||||
// ----------------------------------------------------------
|
||||
function _addPoison(items) {
|
||||
if (!_map || !window.L) return;
|
||||
items.forEach(p => {
|
||||
const t = TYPEN.poison;
|
||||
const m = _createMarker(p.lat, p.lon, t, `Giftköder-Alarm${p.beschreibung ? ': ' + p.beschreibung : ''}`, () => {
|
||||
App.navigate('poison');
|
||||
});
|
||||
_layers.poison.push(m);
|
||||
if (!_visible.poison) m.setOpacity(0);
|
||||
});
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------
|
||||
// Marker-Hilfsfunktion
|
||||
// ----------------------------------------------------------
|
||||
function _createMarker(lat, lon, t, tooltip, onClick) {
|
||||
const icon = L.divIcon({
|
||||
className: '',
|
||||
html: `<div style="
|
||||
background:${t.color};color:#fff;font-size:15px;
|
||||
width:32px;height:32px;border-radius:50%;
|
||||
display:flex;align-items:center;justify-content:center;
|
||||
box-shadow:0 2px 5px rgba(0,0,0,0.35);
|
||||
border:2px solid rgba(255,255,255,0.7)
|
||||
">${t.icon}</div>`,
|
||||
iconSize: [32, 32],
|
||||
iconAnchor: [16, 16],
|
||||
});
|
||||
return L.marker([lat, lon], { icon })
|
||||
.addTo(_map)
|
||||
.bindTooltip(tooltip, { direction: 'top', offset: [0, -16] })
|
||||
.on('click', onClick);
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------
|
||||
// Layer ein/ausblenden
|
||||
// ----------------------------------------------------------
|
||||
function _applyVisibility(layer) {
|
||||
(_layers[layer] || []).forEach(m => {
|
||||
// Leaflet hat keine native hide — Opacity-Trick
|
||||
if (m.setOpacity) m.setOpacity(_visible[layer] ? 1 : 0);
|
||||
});
|
||||
}
|
||||
|
||||
return { init, refresh, onDogChange };
|
||||
|
||||
})();
|
||||
482
backend/static/js/pages/places.js
Normal file
482
backend/static/js/pages/places.js
Normal file
|
|
@ -0,0 +1,482 @@
|
|||
/* ============================================================
|
||||
BAN YARO — Orte (Hundefreundliche Orte)
|
||||
Karte + Liste, Eigene Orte anlegen/bearbeiten
|
||||
============================================================ */
|
||||
|
||||
window.Page_places = (() => {
|
||||
|
||||
let _container = null;
|
||||
let _appState = null;
|
||||
let _map = null;
|
||||
let _markers = [];
|
||||
let _data = [];
|
||||
let _activeTyp = null; // null = alle
|
||||
let _leafletLoaded = false;
|
||||
let _userPos = null;
|
||||
|
||||
// ----------------------------------------------------------
|
||||
// Typen-Konfiguration
|
||||
// ----------------------------------------------------------
|
||||
const TYPEN = {
|
||||
restaurant: { icon: '🍽️', label: 'Restaurant & Café', color: '#F97316' },
|
||||
freilauf: { icon: '🐕', label: 'Freilauffläche', color: '#22C55E' },
|
||||
shop: { icon: '🛒', label: 'Shop', color: '#3B82F6' },
|
||||
kotbeutel: { icon: '🧻', label: 'Kotbeutel-Station', color: '#6B7280' },
|
||||
tierarzt: { icon: '🩺', label: 'Tierarzt', color: '#EF4444' },
|
||||
hundeschule: { icon: '🎓', label: 'Hundeschule', color: '#8B5CF6' },
|
||||
};
|
||||
|
||||
function _esc(s) {
|
||||
return String(s || '').replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>').replace(/"/g,'"');
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------
|
||||
// INIT
|
||||
// ----------------------------------------------------------
|
||||
async function init(container, appState) {
|
||||
_container = container;
|
||||
_appState = appState;
|
||||
_render();
|
||||
_loadData();
|
||||
try { _userPos = await API.getLocation(); } catch {}
|
||||
}
|
||||
|
||||
function refresh() { _loadData(); }
|
||||
function onDogChange() {}
|
||||
|
||||
// ----------------------------------------------------------
|
||||
// RENDER — Grundstruktur
|
||||
// ----------------------------------------------------------
|
||||
function _render() {
|
||||
_container.innerHTML = `
|
||||
<div class="places-layout">
|
||||
|
||||
<!-- Toolbar -->
|
||||
<div class="places-toolbar">
|
||||
<div class="places-filter" id="places-filter">
|
||||
<button class="places-filter-btn active" data-typ="">🗺️ Alle</button>
|
||||
${Object.entries(TYPEN).map(([k, t]) =>
|
||||
`<button class="places-filter-btn" data-typ="${k}">${t.icon} ${t.label}</button>`
|
||||
).join('')}
|
||||
</div>
|
||||
<button class="btn btn-primary btn-sm" id="places-add-btn" style="white-space:nowrap">
|
||||
+ Ort hinzufügen
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Karte -->
|
||||
<div id="places-map" class="places-map"></div>
|
||||
|
||||
<!-- Liste -->
|
||||
<div id="places-list" class="places-list">
|
||||
<div class="places-list-inner">
|
||||
<p style="color:var(--c-text-secondary);text-align:center;padding:var(--space-6)">
|
||||
Lädt…
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Events
|
||||
document.getElementById('places-filter').addEventListener('click', e => {
|
||||
const btn = e.target.closest('.places-filter-btn');
|
||||
if (!btn) return;
|
||||
document.querySelectorAll('.places-filter-btn').forEach(b => b.classList.remove('active'));
|
||||
btn.classList.add('active');
|
||||
_activeTyp = btn.dataset.typ || null;
|
||||
_applyFilter();
|
||||
});
|
||||
|
||||
document.getElementById('places-add-btn').addEventListener('click', () => {
|
||||
if (!_appState.user) {
|
||||
UI.toast.warning('Bitte zuerst anmelden.');
|
||||
App.navigate('settings');
|
||||
return;
|
||||
}
|
||||
_showForm(null);
|
||||
});
|
||||
|
||||
_loadLeaflet().then(_initMap);
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------
|
||||
// Leaflet laden (wie poison.js)
|
||||
// ----------------------------------------------------------
|
||||
async function _loadLeaflet() {
|
||||
if (_leafletLoaded || window.L) { _leafletLoaded = true; return; }
|
||||
const link = document.createElement('link');
|
||||
link.rel = 'stylesheet';
|
||||
link.href = '/css/leaflet.css';
|
||||
document.head.appendChild(link);
|
||||
await new Promise(resolve => {
|
||||
const s = document.createElement('script');
|
||||
s.src = '/js/leaflet.js';
|
||||
s.onload = resolve;
|
||||
document.head.appendChild(s);
|
||||
});
|
||||
_leafletLoaded = true;
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------
|
||||
// Karte initialisieren
|
||||
// ----------------------------------------------------------
|
||||
function _initMap() {
|
||||
const el = document.getElementById('places-map');
|
||||
if (!el || !window.L || _map) return;
|
||||
|
||||
const center = _userPos ? [_userPos.lat, _userPos.lon] : [51.1657, 10.4515];
|
||||
const zoom = _userPos ? 13 : 6;
|
||||
|
||||
_map = L.map('places-map', { zoomControl: true, attributionControl: false })
|
||||
.setView(center, zoom);
|
||||
|
||||
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19 })
|
||||
.addTo(_map);
|
||||
|
||||
// GPS-Locate-Button
|
||||
L.Control.Locate = L.Control.extend({
|
||||
onAdd() {
|
||||
const btn = L.DomUtil.create('button', 'places-locate-btn');
|
||||
btn.innerHTML = '📍';
|
||||
btn.title = 'Meinen Standort';
|
||||
btn.onclick = async () => {
|
||||
try {
|
||||
const pos = await API.getLocation({ enableHighAccuracy: true });
|
||||
_userPos = pos;
|
||||
_map.setView([pos.lat, pos.lon], 14);
|
||||
} catch { UI.toast.error('Standort konnte nicht ermittelt werden.'); }
|
||||
};
|
||||
return btn;
|
||||
},
|
||||
onRemove() {},
|
||||
});
|
||||
new L.Control.Locate({ position: 'bottomright' }).addTo(_map);
|
||||
|
||||
_renderMarkers();
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------
|
||||
// Daten laden
|
||||
// ----------------------------------------------------------
|
||||
async function _loadData() {
|
||||
try {
|
||||
_data = await API.places.list();
|
||||
_renderList();
|
||||
_renderMarkers();
|
||||
} catch (err) {
|
||||
UI.toast.error(err.message || 'Fehler beim Laden der Orte.');
|
||||
}
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------
|
||||
// Filter anwenden
|
||||
// ----------------------------------------------------------
|
||||
function _filtered() {
|
||||
return _activeTyp ? _data.filter(p => p.typ === _activeTyp) : _data;
|
||||
}
|
||||
|
||||
function _applyFilter() {
|
||||
_renderList();
|
||||
_renderMarkers();
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------
|
||||
// Marker rendern
|
||||
// ----------------------------------------------------------
|
||||
function _renderMarkers() {
|
||||
if (!_map || !window.L) return;
|
||||
_markers.forEach(m => m.remove());
|
||||
_markers = [];
|
||||
|
||||
_filtered().forEach(place => {
|
||||
const t = TYPEN[place.typ] || { icon: '📍', color: '#6B7280' };
|
||||
const icon = L.divIcon({
|
||||
className: '',
|
||||
html: `<div style="
|
||||
background:${t.color};color:#fff;font-size:16px;
|
||||
width:34px;height:34px;border-radius:50%;
|
||||
display:flex;align-items:center;justify-content:center;
|
||||
box-shadow:0 2px 6px rgba(0,0,0,0.4);
|
||||
border:2px solid rgba(255,255,255,0.7)
|
||||
">${t.icon}</div>`,
|
||||
iconSize: [34, 34],
|
||||
iconAnchor: [17, 17],
|
||||
});
|
||||
const marker = L.marker([place.lat, place.lon], { icon })
|
||||
.addTo(_map)
|
||||
.on('click', () => _openDetail(place));
|
||||
_markers.push(marker);
|
||||
});
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------
|
||||
// Liste rendern
|
||||
// ----------------------------------------------------------
|
||||
function _renderList() {
|
||||
const list = document.getElementById('places-list');
|
||||
if (!list) return;
|
||||
const items = _filtered();
|
||||
|
||||
if (!items.length) {
|
||||
list.innerHTML = `
|
||||
<div class="places-list-inner">
|
||||
<p style="color:var(--c-text-secondary);text-align:center;padding:var(--space-6)">
|
||||
${_activeTyp ? 'Keine Orte in dieser Kategorie.' : 'Noch keine Orte eingetragen.'}
|
||||
</p>
|
||||
</div>`;
|
||||
return;
|
||||
}
|
||||
|
||||
list.innerHTML = `
|
||||
<div class="places-list-inner">
|
||||
${items.map(p => _cardHTML(p)).join('')}
|
||||
</div>`;
|
||||
|
||||
list.querySelectorAll('.places-card').forEach(card => {
|
||||
const id = parseInt(card.dataset.id);
|
||||
const place = _data.find(p => p.id === id);
|
||||
if (place) card.addEventListener('click', () => _openDetail(place));
|
||||
});
|
||||
}
|
||||
|
||||
function _cardHTML(p) {
|
||||
const t = TYPEN[p.typ] || { icon: '📍', label: p.typ, color: '#6B7280' };
|
||||
const flags = [
|
||||
p.hund_rein === true ? '🐕 Hund rein' : null,
|
||||
p.leine_pflicht === true ? '🔗 Leinenpflicht' : null,
|
||||
p.wasser_fuer_hunde === true ? '💧 Wasser' : null,
|
||||
].filter(Boolean);
|
||||
|
||||
return `
|
||||
<div class="places-card" data-id="${p.id}" style="--typ-color:${t.color}">
|
||||
<div class="places-card-icon">${t.icon}</div>
|
||||
<div class="places-card-body">
|
||||
<div class="places-card-name">${_esc(p.name)}</div>
|
||||
<div class="places-card-meta">
|
||||
<span class="places-card-typ" style="color:${t.color}">${t.label}</span>
|
||||
${p.adresse ? `· <span>${_esc(p.adresse)}</span>` : ''}
|
||||
</div>
|
||||
${flags.length ? `<div class="places-card-flags">${flags.map(f => `<span class="places-flag">${f}</span>`).join('')}</div>` : ''}
|
||||
</div>
|
||||
<div class="places-card-arrow">›</div>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------
|
||||
// Detail-Modal
|
||||
// ----------------------------------------------------------
|
||||
function _openDetail(place) {
|
||||
const t = TYPEN[place.typ] || { icon: '📍', label: place.typ, color: '#6B7280' };
|
||||
const isOwn = _appState.user?.id === place.user_id;
|
||||
|
||||
const flags = [
|
||||
place.hund_rein === true ? '🐕 Hund erlaubt' : (place.hund_rein === false ? '🚫 Kein Hund' : null),
|
||||
place.leine_pflicht === true ? '🔗 Leinenpflicht' : (place.leine_pflicht === false ? '✅ Leine optional' : null),
|
||||
place.wasser_fuer_hunde === true ? '💧 Wasser vorhanden': null,
|
||||
].filter(Boolean);
|
||||
|
||||
const body = `
|
||||
<div style="display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-4)">
|
||||
<div style="font-size:2.5rem">${t.icon}</div>
|
||||
<div>
|
||||
<div style="font-size:1.1rem;font-weight:600">${_esc(place.name)}</div>
|
||||
<div style="color:${t.color};font-size:0.9rem">${t.label}</div>
|
||||
</div>
|
||||
</div>
|
||||
${place.adresse ? `<p style="color:var(--c-text-secondary);margin-bottom:var(--space-2)">📍 ${_esc(place.adresse)}</p>` : ''}
|
||||
${place.website ? `<p style="margin-bottom:var(--space-2)"><a href="${_esc(place.website)}" target="_blank" style="color:var(--c-primary)">🌐 ${_esc(place.website)}</a></p>` : ''}
|
||||
${flags.length ? `<div style="display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-3)">${flags.map(f => `<span class="places-flag places-flag--detail">${f}</span>`).join('')}</div>` : ''}
|
||||
<p style="color:var(--c-text-muted);font-size:0.8rem;margin-top:var(--space-4)">
|
||||
Eingetragen von ${_esc(place.user_name || 'Unbekannt')}
|
||||
</p>
|
||||
`;
|
||||
|
||||
const footer = isOwn ? `
|
||||
<button type="button" class="btn btn-secondary flex-1" id="place-detail-close">Schließen</button>
|
||||
<button type="button" class="btn btn-ghost btn-sm" id="place-detail-delete" style="color:var(--c-danger)">Löschen</button>
|
||||
<button type="button" class="btn btn-primary flex-1" id="place-detail-edit">Bearbeiten</button>
|
||||
` : `
|
||||
<button type="button" class="btn btn-primary flex-1" id="place-detail-close">Schließen</button>
|
||||
`;
|
||||
|
||||
UI.modal.open({ title: `${t.icon} ${place.name}`, body, footer });
|
||||
|
||||
document.getElementById('place-detail-close')?.addEventListener('click', UI.modal.close);
|
||||
|
||||
document.getElementById('place-detail-edit')?.addEventListener('click', () => {
|
||||
UI.modal.close();
|
||||
_showForm(place);
|
||||
});
|
||||
|
||||
document.getElementById('place-detail-delete')?.addEventListener('click', async () => {
|
||||
const ok = await UI.modal.confirm({
|
||||
title: 'Ort löschen?',
|
||||
message: `„${place.name}" wird dauerhaft entfernt.`,
|
||||
confirmText: 'Löschen',
|
||||
danger: true,
|
||||
});
|
||||
if (!ok) return;
|
||||
try {
|
||||
await API.places.delete(place.id);
|
||||
_data = _data.filter(p => p.id !== place.id);
|
||||
UI.modal.close();
|
||||
_renderList();
|
||||
_renderMarkers();
|
||||
UI.toast.success('Ort gelöscht.');
|
||||
} catch (err) {
|
||||
UI.toast.error(err.message || 'Fehler beim Löschen.');
|
||||
}
|
||||
});
|
||||
|
||||
// Auf Karte zentrieren
|
||||
if (_map) _map.setView([place.lat, place.lon], 15);
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------
|
||||
// Formular — Ort anlegen / bearbeiten
|
||||
// ----------------------------------------------------------
|
||||
function _showForm(place) {
|
||||
const isEdit = !!place;
|
||||
|
||||
const typOpts = Object.entries(TYPEN)
|
||||
.map(([k, t]) => `<option value="${k}" ${place?.typ === k ? 'selected' : ''}>${t.icon} ${t.label}</option>`)
|
||||
.join('');
|
||||
|
||||
const body = `
|
||||
<form id="place-form" autocomplete="off">
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">Name *</label>
|
||||
<input class="form-control" type="text" name="name"
|
||||
value="${_esc(place?.name || '')}" placeholder="z. B. Café Hund & Herrchen" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">Kategorie *</label>
|
||||
<select class="form-control" name="typ">${typOpts}</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">GPS-Position *</label>
|
||||
<div style="display:flex;gap:var(--space-2);align-items:center">
|
||||
<input class="form-control" type="text" id="pf-lat-disp"
|
||||
placeholder="Breite" readonly style="flex:1"
|
||||
value="${place ? place.lat.toFixed(6) : ''}">
|
||||
<input class="form-control" type="text" id="pf-lon-disp"
|
||||
placeholder="Länge" readonly style="flex:1"
|
||||
value="${place ? place.lon.toFixed(6) : ''}">
|
||||
<button type="button" class="btn btn-secondary" id="pf-gps-btn" title="GPS">📍</button>
|
||||
</div>
|
||||
<input type="hidden" name="lat" id="pf-lat" value="${place?.lat || ''}">
|
||||
<input type="hidden" name="lon" id="pf-lon" value="${place?.lon || ''}">
|
||||
<small id="pf-gps-hint" style="color:var(--c-text-secondary)">
|
||||
${place ? '✅ Position gespeichert' : 'GPS-Button drücken oder Standort ermitteln'}
|
||||
</small>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">Adresse <span style="color:var(--c-text-secondary)">(optional)</span></label>
|
||||
<input class="form-control" type="text" name="adresse"
|
||||
value="${_esc(place?.adresse || '')}" placeholder="Musterstraße 1, 12345 Musterstadt">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">Website <span style="color:var(--c-text-secondary)">(optional)</span></label>
|
||||
<input class="form-control" type="url" name="website"
|
||||
value="${_esc(place?.website || '')}" placeholder="https://…">
|
||||
</div>
|
||||
|
||||
<div class="form-group" style="display:flex;flex-direction:column;gap:var(--space-2)">
|
||||
<label class="form-label">Hundefreundlichkeit</label>
|
||||
<label style="display:flex;align-items:center;gap:var(--space-2);cursor:pointer">
|
||||
<input type="checkbox" name="hund_rein" ${place?.hund_rein ? 'checked' : ''}>
|
||||
🐕 Hund darf rein
|
||||
</label>
|
||||
<label style="display:flex;align-items:center;gap:var(--space-2);cursor:pointer">
|
||||
<input type="checkbox" name="leine_pflicht" ${place?.leine_pflicht ? 'checked' : ''}>
|
||||
🔗 Leinenpflicht beachten
|
||||
</label>
|
||||
<label style="display:flex;align-items:center;gap:var(--space-2);cursor:pointer">
|
||||
<input type="checkbox" name="wasser_fuer_hunde" ${place?.wasser_fuer_hunde ? 'checked' : ''}>
|
||||
💧 Wasser für Hunde vorhanden
|
||||
</label>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
`;
|
||||
|
||||
const footer = `
|
||||
<button type="button" class="btn btn-secondary flex-1" id="place-form-cancel">Abbrechen</button>
|
||||
<button type="submit" form="place-form" class="btn btn-primary flex-1">
|
||||
${isEdit ? 'Speichern' : 'Ort hinzufügen'}
|
||||
</button>
|
||||
`;
|
||||
|
||||
UI.modal.open({ title: isEdit ? `${place.name} bearbeiten` : '📍 Neuer Ort', body, footer });
|
||||
|
||||
document.getElementById('place-form-cancel')?.addEventListener('click', UI.modal.close);
|
||||
|
||||
// GPS-Button
|
||||
document.getElementById('pf-gps-btn')?.addEventListener('click', async () => {
|
||||
const btn = document.getElementById('pf-gps-btn');
|
||||
UI.setLoading(btn, true);
|
||||
try {
|
||||
const pos = await API.getLocation({ enableHighAccuracy: true });
|
||||
_userPos = pos;
|
||||
document.getElementById('pf-lat').value = pos.lat;
|
||||
document.getElementById('pf-lon').value = pos.lon;
|
||||
document.getElementById('pf-lat-disp').value = pos.lat.toFixed(6);
|
||||
document.getElementById('pf-lon-disp').value = pos.lon.toFixed(6);
|
||||
document.getElementById('pf-gps-hint').textContent = '✅ Standort ermittelt';
|
||||
} catch {
|
||||
UI.toast.error('GPS nicht verfügbar.');
|
||||
}
|
||||
UI.setLoading(btn, false);
|
||||
});
|
||||
|
||||
document.getElementById('place-form')?.addEventListener('submit', async e => {
|
||||
e.preventDefault();
|
||||
const btn = document.querySelector('[form="place-form"][type="submit"]') || e.target.querySelector('[type="submit"]');
|
||||
const fd = UI.formData(e.target);
|
||||
|
||||
if (!fd.lat || !fd.lon) {
|
||||
UI.toast.warning('Bitte GPS-Position ermitteln.');
|
||||
return;
|
||||
}
|
||||
|
||||
await UI.asyncButton(btn, async () => {
|
||||
const payload = {
|
||||
name: fd.name?.trim(),
|
||||
typ: fd.typ,
|
||||
lat: parseFloat(fd.lat),
|
||||
lon: parseFloat(fd.lon),
|
||||
adresse: fd.adresse || null,
|
||||
website: fd.website || null,
|
||||
hund_rein: 'hund_rein' in fd,
|
||||
leine_pflicht: 'leine_pflicht' in fd,
|
||||
wasser_fuer_hunde: 'wasser_fuer_hunde' in fd,
|
||||
};
|
||||
|
||||
if (isEdit) {
|
||||
const updated = await API.places.update(place.id, payload);
|
||||
const idx = _data.findIndex(p => p.id === place.id);
|
||||
if (idx !== -1) _data[idx] = updated;
|
||||
UI.toast.success('Gespeichert.');
|
||||
} else {
|
||||
const created = await API.places.create(payload);
|
||||
_data.unshift(created);
|
||||
UI.toast.success('Ort hinzugefügt!');
|
||||
}
|
||||
|
||||
UI.modal.close();
|
||||
_renderList();
|
||||
_renderMarkers();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
return { init, refresh, onDogChange };
|
||||
|
||||
})();
|
||||
583
backend/static/js/pages/routes.js
Normal file
583
backend/static/js/pages/routes.js
Normal file
|
|
@ -0,0 +1,583 @@
|
|||
/* ============================================================
|
||||
BAN YARO — Gassi-Routen
|
||||
Routen entdecken (Karte + Liste) + GPS-Aufzeichnung
|
||||
============================================================ */
|
||||
|
||||
window.Page_routes = (() => {
|
||||
|
||||
let _container = null;
|
||||
let _appState = null;
|
||||
let _map = null;
|
||||
let _polylines = [];
|
||||
let _data = [];
|
||||
let _activeTab = 'entdecken'; // 'entdecken' | 'aufzeichnen'
|
||||
let _leafletLoaded = false;
|
||||
let _userPos = null;
|
||||
|
||||
// Aufzeichnung
|
||||
let _recording = false;
|
||||
let _watchId = null;
|
||||
let _track = []; // [{lat, lon}]
|
||||
let _distanceKm = 0;
|
||||
let _startTime = null;
|
||||
let _timerInt = null;
|
||||
let _recPolyline = null;
|
||||
let _recMarker = null;
|
||||
|
||||
const SCHWIERIGKEIT = ['leicht', 'mittel', 'anspruchsvoll'];
|
||||
const UNTERGRUND = { wald: '🌲 Wald', asphalt: '🛣️ Asphalt', wiese: '🌿 Wiese', mix: '🔀 Mix' };
|
||||
|
||||
function _esc(s) {
|
||||
return String(s || '').replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>').replace(/"/g,'"');
|
||||
}
|
||||
|
||||
function _haversine(lat1, lon1, lat2, lon2) {
|
||||
const R = 6371000;
|
||||
const p1 = lat1 * Math.PI / 180, p2 = lat2 * Math.PI / 180;
|
||||
const dp = (lat2 - lat1) * Math.PI / 180;
|
||||
const dl = (lon2 - lon1) * Math.PI / 180;
|
||||
const a = Math.sin(dp/2)**2 + Math.cos(p1)*Math.cos(p2)*Math.sin(dl/2)**2;
|
||||
return 2 * R * Math.asin(Math.sqrt(a));
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------
|
||||
// INIT
|
||||
// ----------------------------------------------------------
|
||||
async function init(container, appState) {
|
||||
_container = container;
|
||||
_appState = appState;
|
||||
_render();
|
||||
_loadData();
|
||||
try { _userPos = await API.getLocation(); } catch {}
|
||||
}
|
||||
|
||||
function refresh() { _loadData(); }
|
||||
function onDogChange() {}
|
||||
|
||||
// ----------------------------------------------------------
|
||||
// RENDER — Grundstruktur
|
||||
// ----------------------------------------------------------
|
||||
function _render() {
|
||||
_container.innerHTML = `
|
||||
<div class="routes-layout">
|
||||
|
||||
<!-- Tabs -->
|
||||
<div class="routes-tabs" id="routes-tabs">
|
||||
<button class="routes-tab active" data-tab="entdecken">🥾 Routen entdecken</button>
|
||||
<button class="routes-tab" data-tab="aufzeichnen">🔴 Aufzeichnen</button>
|
||||
</div>
|
||||
|
||||
<!-- TAB: Entdecken -->
|
||||
<div id="tab-entdecken" class="routes-tab-content">
|
||||
<div id="routes-map" class="routes-map"></div>
|
||||
<div id="routes-list" class="routes-list">
|
||||
<p style="color:var(--c-text-secondary);text-align:center;padding:var(--space-6)">Lädt…</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- TAB: Aufzeichnen -->
|
||||
<div id="tab-aufzeichnen" class="routes-tab-content" style="display:none">
|
||||
<div id="rec-map" class="routes-map"></div>
|
||||
<div class="routes-rec-panel" id="rec-panel">
|
||||
<div class="routes-rec-stats" id="rec-stats" style="display:none">
|
||||
<div class="routes-rec-stat">
|
||||
<span class="routes-rec-stat-val" id="rec-dist">0.00</span>
|
||||
<span class="routes-rec-stat-lbl">km</span>
|
||||
</div>
|
||||
<div class="routes-rec-stat">
|
||||
<span class="routes-rec-stat-val" id="rec-time">00:00</span>
|
||||
<span class="routes-rec-stat-lbl">Zeit</span>
|
||||
</div>
|
||||
<div class="routes-rec-stat">
|
||||
<span class="routes-rec-stat-val" id="rec-pts">0</span>
|
||||
<span class="routes-rec-stat-lbl">Punkte</span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="rec-idle">
|
||||
<p style="color:var(--c-text-secondary);margin-bottom:var(--space-4);text-align:center">
|
||||
Starte die Aufzeichnung und geh mit deinem Hund los.<br>
|
||||
Der GPS-Track wird automatisch gespeichert.
|
||||
</p>
|
||||
<button class="btn btn-primary btn-lg" id="rec-start-btn" style="width:100%">
|
||||
🔴 Aufzeichnung starten
|
||||
</button>
|
||||
</div>
|
||||
<div id="rec-active" style="display:none">
|
||||
<div style="display:flex;gap:var(--space-3)">
|
||||
<button class="btn btn-secondary flex-1" id="rec-pause-btn">⏸ Pause</button>
|
||||
<button class="btn btn-danger flex-1" id="rec-stop-btn">⏹ Stop & Speichern</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Tab-Switching
|
||||
document.getElementById('routes-tabs').addEventListener('click', e => {
|
||||
const btn = e.target.closest('.routes-tab');
|
||||
if (!btn) return;
|
||||
_switchTab(btn.dataset.tab);
|
||||
});
|
||||
|
||||
document.getElementById('rec-start-btn')?.addEventListener('click', _startRecording);
|
||||
|
||||
_loadLeaflet().then(() => {
|
||||
_initDiscoverMap();
|
||||
_initRecordMap();
|
||||
});
|
||||
}
|
||||
|
||||
function _switchTab(tab) {
|
||||
_activeTab = tab;
|
||||
document.querySelectorAll('.routes-tab').forEach(b =>
|
||||
b.classList.toggle('active', b.dataset.tab === tab));
|
||||
document.getElementById('tab-entdecken').style.display = tab === 'entdecken' ? '' : 'none';
|
||||
document.getElementById('tab-aufzeichnen').style.display = tab === 'aufzeichnen' ? '' : 'none';
|
||||
if (tab === 'entdecken' && _map) setTimeout(() => _map.invalidateSize(), 50);
|
||||
if (tab === 'aufzeichnen' && _recMap) setTimeout(() => _recMap.invalidateSize(), 50);
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------
|
||||
// Leaflet laden
|
||||
// ----------------------------------------------------------
|
||||
async function _loadLeaflet() {
|
||||
if (_leafletLoaded || window.L) { _leafletLoaded = true; return; }
|
||||
const link = document.createElement('link');
|
||||
link.rel = 'stylesheet';
|
||||
link.href = '/css/leaflet.css';
|
||||
document.head.appendChild(link);
|
||||
await new Promise(resolve => {
|
||||
const s = document.createElement('script');
|
||||
s.src = '/js/leaflet.js';
|
||||
s.onload = resolve;
|
||||
document.head.appendChild(s);
|
||||
});
|
||||
_leafletLoaded = true;
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------
|
||||
// Entdecken-Karte
|
||||
// ----------------------------------------------------------
|
||||
function _initDiscoverMap() {
|
||||
const el = document.getElementById('routes-map');
|
||||
if (!el || !window.L || _map) return;
|
||||
|
||||
const center = _userPos ? [_userPos.lat, _userPos.lon] : [51.1657, 10.4515];
|
||||
const zoom = _userPos ? 12 : 6;
|
||||
|
||||
_map = L.map('routes-map', { zoomControl: true, attributionControl: false })
|
||||
.setView(center, zoom);
|
||||
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19 }).addTo(_map);
|
||||
_renderPolylines();
|
||||
}
|
||||
|
||||
let _recMap = null;
|
||||
|
||||
function _initRecordMap() {
|
||||
const el = document.getElementById('rec-map');
|
||||
if (!el || !window.L || _recMap) return;
|
||||
|
||||
const center = _userPos ? [_userPos.lat, _userPos.lon] : [51.1657, 10.4515];
|
||||
|
||||
_recMap = L.map('rec-map', { zoomControl: false, attributionControl: false })
|
||||
.setView(center, _userPos ? 15 : 6);
|
||||
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19 }).addTo(_recMap);
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------
|
||||
// Daten laden
|
||||
// ----------------------------------------------------------
|
||||
async function _loadData() {
|
||||
try {
|
||||
_data = await API.routes.list();
|
||||
_renderList();
|
||||
_renderPolylines();
|
||||
} catch (err) {
|
||||
UI.toast.error(err.message || 'Fehler beim Laden der Routen.');
|
||||
}
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------
|
||||
// Polylines auf Entdecken-Karte
|
||||
// ----------------------------------------------------------
|
||||
function _renderPolylines() {
|
||||
if (!_map || !window.L) return;
|
||||
_polylines.forEach(p => p.remove());
|
||||
_polylines = [];
|
||||
|
||||
// Nur Routen mit bekanntem Startpunkt (List-Response hat start_lat/lon)
|
||||
_data.forEach((route, i) => {
|
||||
if (!route.start_lat) return;
|
||||
// Startpunkt-Marker
|
||||
const colors = ['#C4843A','#3B82F6','#22C55E','#EF4444','#8B5CF6','#F97316'];
|
||||
const color = colors[i % colors.length];
|
||||
const icon = L.divIcon({
|
||||
className: '',
|
||||
html: `<div style="background:${color};color:#fff;font-size:11px;font-weight:700;
|
||||
width:28px;height:28px;border-radius:50%;display:flex;align-items:center;
|
||||
justify-content:center;box-shadow:0 2px 5px rgba(0,0,0,0.3)">${i + 1}</div>`,
|
||||
iconSize: [28, 28], iconAnchor: [14, 14],
|
||||
});
|
||||
const m = L.marker([route.start_lat, route.start_lon], { icon })
|
||||
.addTo(_map)
|
||||
.on('click', () => _openDetail(route.id));
|
||||
_polylines.push(m);
|
||||
});
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------
|
||||
// Listen-Karten
|
||||
// ----------------------------------------------------------
|
||||
function _renderList() {
|
||||
const list = document.getElementById('routes-list');
|
||||
if (!list) return;
|
||||
|
||||
if (!_data.length) {
|
||||
list.innerHTML = `<p style="color:var(--c-text-secondary);text-align:center;padding:var(--space-6)">
|
||||
Noch keine Routen vorhanden.<br>
|
||||
<button class="btn btn-primary btn-sm" style="margin-top:var(--space-3)"
|
||||
onclick="document.querySelector('[data-tab=aufzeichnen]').click()">
|
||||
Erste Route aufzeichnen
|
||||
</button>
|
||||
</p>`;
|
||||
return;
|
||||
}
|
||||
|
||||
list.innerHTML = _data.map((r, i) => _routeCardHTML(r, i)).join('');
|
||||
|
||||
list.querySelectorAll('.routes-card').forEach(card => {
|
||||
card.addEventListener('click', () => _openDetail(parseInt(card.dataset.id)));
|
||||
});
|
||||
}
|
||||
|
||||
function _routeCardHTML(r, i) {
|
||||
const colors = ['#C4843A','#3B82F6','#22C55E','#EF4444','#8B5CF6','#F97316'];
|
||||
const color = colors[i % colors.length];
|
||||
const schwTag = r.schwierigkeit
|
||||
? `<span class="routes-badge routes-badge--${r.schwierigkeit}">${r.schwierigkeit}</span>` : '';
|
||||
const ug = r.untergrund ? (UNTERGRUND[r.untergrund] || r.untergrund) : null;
|
||||
|
||||
return `
|
||||
<div class="routes-card" data-id="${r.id}" style="--route-color:${color}">
|
||||
<div class="routes-card-num" style="background:${color}">${i + 1}</div>
|
||||
<div class="routes-card-body">
|
||||
<div class="routes-card-name">${_esc(r.name)}</div>
|
||||
<div class="routes-card-meta">
|
||||
${r.distanz_km ? `🗺️ ${r.distanz_km.toFixed(1)} km` : ''}
|
||||
${r.dauer_min ? `· ⏱ ${_formatDuration(r.dauer_min)}` : ''}
|
||||
${ug ? `· ${ug}` : ''}
|
||||
</div>
|
||||
<div class="routes-card-tags">
|
||||
${schwTag}
|
||||
${r.schatten ? '<span class="routes-badge">🌳 Schatten</span>' : ''}
|
||||
${r.leine_empfohlen ? '<span class="routes-badge">🔗 Leine empfohlen</span>' : ''}
|
||||
</div>
|
||||
<div style="color:var(--c-text-muted);font-size:0.75rem;margin-top:var(--space-1)">
|
||||
von ${_esc(r.user_name || 'Unbekannt')}
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
function _formatDuration(min) {
|
||||
if (min < 60) return `${min} min`;
|
||||
return `${Math.floor(min / 60)}h ${min % 60 ? (min % 60) + 'min' : ''}`.trim();
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------
|
||||
// Detail-Modal mit vollständiger Polyline
|
||||
// ----------------------------------------------------------
|
||||
async function _openDetail(routeId) {
|
||||
let route;
|
||||
try {
|
||||
route = await API.routes.get(routeId);
|
||||
} catch (err) {
|
||||
UI.toast.error(err.message);
|
||||
return;
|
||||
}
|
||||
|
||||
const isOwn = _appState.user?.id === route.user_id;
|
||||
const ug = route.untergrund ? (UNTERGRUND[route.untergrund] || route.untergrund) : null;
|
||||
const track = route.gps_track || [];
|
||||
|
||||
// Mini-Map als div mit ID, wird nach open() befüllt
|
||||
const body = `
|
||||
<div id="route-detail-map" style="height:220px;border-radius:var(--radius-md);margin-bottom:var(--space-4);background:var(--c-surface-2)"></div>
|
||||
<div style="display:flex;flex-wrap:wrap;gap:var(--space-2);margin-bottom:var(--space-3)">
|
||||
${route.distanz_km ? `<span class="routes-badge routes-badge--info">🗺️ ${route.distanz_km.toFixed(2)} km</span>` : ''}
|
||||
${route.dauer_min ? `<span class="routes-badge routes-badge--info">⏱ ${_formatDuration(route.dauer_min)}</span>` : ''}
|
||||
${route.schwierigkeit ? `<span class="routes-badge routes-badge--${route.schwierigkeit}">${route.schwierigkeit}</span>` : ''}
|
||||
${ug ? `<span class="routes-badge">${ug}</span>` : ''}
|
||||
${route.schatten ? '<span class="routes-badge">🌳 Schatten</span>' : ''}
|
||||
${route.leine_empfohlen ? '<span class="routes-badge">🔗 Leine empfohlen</span>' : ''}
|
||||
</div>
|
||||
${route.beschreibung ? `<p style="color:var(--c-text-secondary)">${_esc(route.beschreibung)}</p>` : ''}
|
||||
<p style="color:var(--c-text-muted);font-size:0.8rem;margin-top:var(--space-3)">
|
||||
${track.length} GPS-Punkte · von ${_esc(route.user_name || 'Unbekannt')}
|
||||
</p>
|
||||
`;
|
||||
|
||||
const footer = isOwn ? `
|
||||
<button type="button" class="btn btn-secondary flex-1" id="rd-close">Schließen</button>
|
||||
<button type="button" class="btn btn-ghost btn-sm" id="rd-delete" style="color:var(--c-danger)">Löschen</button>
|
||||
` : `
|
||||
<button type="button" class="btn btn-primary flex-1" id="rd-close">Schließen</button>
|
||||
`;
|
||||
|
||||
UI.modal.open({ title: `🥾 ${route.name}`, body, footer });
|
||||
|
||||
document.getElementById('rd-close')?.addEventListener('click', UI.modal.close);
|
||||
document.getElementById('rd-delete')?.addEventListener('click', async () => {
|
||||
const ok = await UI.modal.confirm({
|
||||
title: 'Route löschen?', message: `„${route.name}" wird dauerhaft entfernt.`,
|
||||
confirmText: 'Löschen', danger: true,
|
||||
});
|
||||
if (!ok) return;
|
||||
try {
|
||||
await API.routes.delete(route.id);
|
||||
_data = _data.filter(r => r.id !== route.id);
|
||||
UI.modal.close();
|
||||
_renderList();
|
||||
_renderPolylines();
|
||||
UI.toast.success('Route gelöscht.');
|
||||
} catch (err) { UI.toast.error(err.message); }
|
||||
});
|
||||
|
||||
// Mini-Map mit Polyline nach DOM-Einfüge
|
||||
setTimeout(() => {
|
||||
const el = document.getElementById('route-detail-map');
|
||||
if (!el || !window.L || !track.length) return;
|
||||
const detailMap = L.map('route-detail-map', { zoomControl: false, attributionControl: false });
|
||||
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19 }).addTo(detailMap);
|
||||
const latlngs = track.map(p => [p.lat, p.lon]);
|
||||
const polyline = L.polyline(latlngs, { color: '#C4843A', weight: 4, opacity: 0.85 }).addTo(detailMap);
|
||||
// Start/End-Marker
|
||||
L.circleMarker(latlngs[0], { radius: 7, color: '#22C55E', fillColor: '#22C55E', fillOpacity: 1 }).addTo(detailMap);
|
||||
L.circleMarker(latlngs[latlngs.length-1], { radius: 7, color: '#EF4444', fillColor: '#EF4444', fillOpacity: 1 }).addTo(detailMap);
|
||||
detailMap.fitBounds(polyline.getBounds(), { padding: [10, 10] });
|
||||
}, 100);
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------
|
||||
// GPS-AUFZEICHNUNG
|
||||
// ----------------------------------------------------------
|
||||
function _startRecording() {
|
||||
if (!_appState.user) {
|
||||
UI.toast.warning('Bitte zuerst anmelden.');
|
||||
App.navigate('settings');
|
||||
return;
|
||||
}
|
||||
if (!navigator.geolocation) {
|
||||
UI.toast.error('GPS wird von diesem Browser nicht unterstützt.');
|
||||
return;
|
||||
}
|
||||
|
||||
_recording = true;
|
||||
_track = [];
|
||||
_distanceKm = 0;
|
||||
_startTime = Date.now();
|
||||
|
||||
// UI umschalten
|
||||
document.getElementById('rec-idle').style.display = 'none';
|
||||
document.getElementById('rec-active').style.display = '';
|
||||
document.getElementById('rec-stats').style.display = '';
|
||||
|
||||
// Stopuhr
|
||||
_timerInt = setInterval(_updateRecTimer, 1000);
|
||||
|
||||
// GPS-Tracking
|
||||
_watchId = navigator.geolocation.watchPosition(
|
||||
pos => _onGpsPoint(pos.coords.latitude, pos.coords.longitude),
|
||||
err => UI.toast.warning('GPS-Fehler: ' + err.message),
|
||||
{ enableHighAccuracy: true, maximumAge: 0, timeout: 15000 }
|
||||
);
|
||||
|
||||
// Buttons binden
|
||||
document.getElementById('rec-stop-btn').onclick = _stopRecording;
|
||||
document.getElementById('rec-pause-btn').onclick = _togglePause;
|
||||
|
||||
UI.toast.success('Aufzeichnung gestartet — los geht\'s!');
|
||||
}
|
||||
|
||||
let _paused = false;
|
||||
|
||||
function _togglePause() {
|
||||
_paused = !_paused;
|
||||
const btn = document.getElementById('rec-pause-btn');
|
||||
if (btn) btn.textContent = _paused ? '▶ Weiter' : '⏸ Pause';
|
||||
if (_paused && _timerInt) clearInterval(_timerInt);
|
||||
if (!_paused) _timerInt = setInterval(_updateRecTimer, 1000);
|
||||
}
|
||||
|
||||
function _onGpsPoint(lat, lon) {
|
||||
if (_paused) return;
|
||||
const pt = { lat, lon };
|
||||
if (_track.length > 0) {
|
||||
const prev = _track[_track.length - 1];
|
||||
_distanceKm += _haversine(prev.lat, prev.lon, lat, lon) / 1000;
|
||||
}
|
||||
_track.push(pt);
|
||||
_updateRecStats();
|
||||
_updateRecMap(lat, lon);
|
||||
}
|
||||
|
||||
function _updateRecMap(lat, lon) {
|
||||
if (!_recMap || !window.L) return;
|
||||
const latlng = [lat, lon];
|
||||
if (!_recPolyline) {
|
||||
_recPolyline = L.polyline([latlng], { color: '#EF4444', weight: 5, opacity: 0.9 }).addTo(_recMap);
|
||||
} else {
|
||||
_recPolyline.addLatLng(latlng);
|
||||
}
|
||||
if (!_recMarker) {
|
||||
_recMarker = L.circleMarker(latlng, {
|
||||
radius: 8, color: '#EF4444', fillColor: '#fff', fillOpacity: 1, weight: 3,
|
||||
}).addTo(_recMap);
|
||||
} else {
|
||||
_recMarker.setLatLng(latlng);
|
||||
}
|
||||
_recMap.setView(latlng);
|
||||
}
|
||||
|
||||
function _updateRecStats() {
|
||||
const dist = document.getElementById('rec-dist');
|
||||
const pts = document.getElementById('rec-pts');
|
||||
if (dist) dist.textContent = _distanceKm.toFixed(2);
|
||||
if (pts) pts.textContent = _track.length;
|
||||
}
|
||||
|
||||
function _updateRecTimer() {
|
||||
const el = document.getElementById('rec-time');
|
||||
if (!el) return;
|
||||
const secs = Math.floor((Date.now() - _startTime) / 1000);
|
||||
const mm = String(Math.floor(secs / 60)).padStart(2, '0');
|
||||
const ss = String(secs % 60).padStart(2, '0');
|
||||
el.textContent = `${mm}:${ss}`;
|
||||
}
|
||||
|
||||
function _stopRecording() {
|
||||
if (_watchId !== null) { navigator.geolocation.clearWatch(_watchId); _watchId = null; }
|
||||
if (_timerInt) { clearInterval(_timerInt); _timerInt = null; }
|
||||
_recording = false;
|
||||
_paused = false;
|
||||
|
||||
if (_track.length < 2) {
|
||||
UI.toast.warning('Zu wenige GPS-Punkte — bitte etwas länger gehen.');
|
||||
_resetRecUI();
|
||||
return;
|
||||
}
|
||||
|
||||
const dauer = Math.floor((Date.now() - _startTime) / 1000 / 60);
|
||||
_showSaveForm(_track, _distanceKm, dauer);
|
||||
}
|
||||
|
||||
function _resetRecUI() {
|
||||
document.getElementById('rec-idle').style.display = '';
|
||||
document.getElementById('rec-active').style.display = 'none';
|
||||
document.getElementById('rec-stats').style.display = 'none';
|
||||
if (_recPolyline) { _recPolyline.remove(); _recPolyline = null; }
|
||||
if (_recMarker) { _recMarker.remove(); _recMarker = null; }
|
||||
_track = []; _distanceKm = 0;
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------
|
||||
// Speicher-Formular nach Aufzeichnung
|
||||
// ----------------------------------------------------------
|
||||
function _showSaveForm(track, distKm, dauMin) {
|
||||
const schwOpts = SCHWIERIGKEIT
|
||||
.map(s => `<option value="${s}">${s.charAt(0).toUpperCase() + s.slice(1)}</option>`)
|
||||
.join('');
|
||||
const ugOpts = Object.entries(UNTERGRUND)
|
||||
.map(([v, l]) => `<option value="${v}">${l}</option>`)
|
||||
.join('');
|
||||
|
||||
const body = `
|
||||
<p style="color:var(--c-text-secondary);margin-bottom:var(--space-4)">
|
||||
🎉 ${track.length} GPS-Punkte · ${distKm.toFixed(2)} km · ca. ${dauMin} min
|
||||
</p>
|
||||
<form id="route-save-form" autocomplete="off">
|
||||
<div class="form-group">
|
||||
<label class="form-label">Name der Route *</label>
|
||||
<input class="form-control" type="text" name="name"
|
||||
placeholder="z. B. Waldspaziergang am See" required>
|
||||
</div>
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)">
|
||||
<div class="form-group">
|
||||
<label class="form-label">Schwierigkeit</label>
|
||||
<select class="form-control" name="schwierigkeit">${schwOpts}</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Untergrund</label>
|
||||
<select class="form-control" name="untergrund">
|
||||
<option value="">– unbekannt –</option>
|
||||
${ugOpts}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group" style="display:flex;gap:var(--space-4)">
|
||||
<label style="display:flex;align-items:center;gap:var(--space-2);cursor:pointer">
|
||||
<input type="checkbox" name="schatten"> 🌳 Viel Schatten
|
||||
</label>
|
||||
<label style="display:flex;align-items:center;gap:var(--space-2);cursor:pointer">
|
||||
<input type="checkbox" name="leine_empfohlen"> 🔗 Leine empfohlen
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Beschreibung <span style="color:var(--c-text-secondary)">(optional)</span></label>
|
||||
<textarea class="form-control" name="beschreibung" rows="2"
|
||||
placeholder="Besonderheiten, Highlights, Tipps…"></textarea>
|
||||
</div>
|
||||
</form>
|
||||
`;
|
||||
|
||||
const footer = `
|
||||
<button type="button" class="btn btn-secondary flex-1" id="rs-discard">Verwerfen</button>
|
||||
<button type="submit" form="route-save-form" class="btn btn-primary flex-1">💾 Route speichern</button>
|
||||
`;
|
||||
|
||||
UI.modal.open({ title: '🥾 Route benennen', body, footer });
|
||||
|
||||
document.getElementById('rs-discard')?.addEventListener('click', () => {
|
||||
UI.modal.close();
|
||||
_resetRecUI();
|
||||
});
|
||||
|
||||
document.getElementById('route-save-form')?.addEventListener('submit', async e => {
|
||||
e.preventDefault();
|
||||
const btn = document.querySelector('[form="route-save-form"][type="submit"]') || e.target.querySelector('[type="submit"]');
|
||||
const fd = UI.formData(e.target);
|
||||
|
||||
await UI.asyncButton(btn, async () => {
|
||||
const payload = {
|
||||
name: fd.name?.trim(),
|
||||
beschreibung: fd.beschreibung || null,
|
||||
gps_track: track,
|
||||
distanz_km: Math.round(distKm * 100) / 100,
|
||||
dauer_min: dauMin,
|
||||
schwierigkeit: fd.schwierigkeit || 'leicht',
|
||||
untergrund: fd.untergrund || null,
|
||||
schatten: 'schatten' in fd,
|
||||
leine_empfohlen: 'leine_empfohlen' in fd,
|
||||
};
|
||||
|
||||
const saved = await API.routes.create(payload);
|
||||
// Für die Liste: start_lat/lon aus Track ergänzen
|
||||
saved.start_lat = track[0].lat;
|
||||
saved.start_lon = track[0].lon;
|
||||
_data.unshift(saved);
|
||||
|
||||
UI.modal.close();
|
||||
_resetRecUI();
|
||||
_renderList();
|
||||
_renderPolylines();
|
||||
_switchTab('entdecken');
|
||||
UI.toast.success(`Route „${saved.name}" gespeichert! 🎉`);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
return { init, refresh, onDogChange };
|
||||
|
||||
})();
|
||||
Loading…
Add table
Add a link
Reference in a new issue