Karten: Mitglieder-Karte (Forum) auf GL + verwaiste Orte-Seite gelöscht
Mitglieder-Karte (forum.js): L.map/L.tileLayer(OSM) → UI.map.create, Cluster + Marker über die Facade (UI.map.clusterGroup/svgMarker), eigenes Leaflet-/ MarkerCluster-Nachladen raus. destroy() gibt Karte+Gruppe beim Verlassen frei. Headless verifiziert: GL-Canvas, 2 Mitglieder-Marker, keine Fehler. places.js (separate 'Hundefreundliche Orte'-Seite) war verwaist — in keiner Navigation/keinem pages-Registry, nicht erreichbar. Die hundefreundlichen Orte laufen längst als POI-Marker auf der zentralen GL-Karte (map.js). Auf Renés Entscheidung gelöscht (JS + CSS-Block in components.css). Damit laufen ALLE erreichbaren Karten der App auf MapLibre GL.
This commit is contained in:
parent
720971d252
commit
da6451a1c7
8 changed files with 32 additions and 650 deletions
2
VERSION
2
VERSION
|
|
@ -1 +1 @@
|
||||||
1205
|
1206
|
||||||
|
|
@ -2514,115 +2514,6 @@ html.modal-open {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ============================================================
|
|
||||||
ORTE (places.js)
|
|
||||||
============================================================ */
|
|
||||||
.places-layout {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
height: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
.places-toolbar {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: var(--space-3);
|
|
||||||
padding: var(--space-3) var(--space-4);
|
|
||||||
background: var(--c-surface);
|
|
||||||
border-bottom: 1px solid var(--c-border-light);
|
|
||||||
flex-shrink: 0;
|
|
||||||
overflow-x: auto;
|
|
||||||
scrollbar-width: none;
|
|
||||||
}
|
|
||||||
.places-toolbar::-webkit-scrollbar { display: none; }
|
|
||||||
.places-filter {
|
|
||||||
display: flex;
|
|
||||||
gap: var(--space-2);
|
|
||||||
flex: 1;
|
|
||||||
overflow-x: auto;
|
|
||||||
scrollbar-width: none;
|
|
||||||
}
|
|
||||||
.places-filter::-webkit-scrollbar { display: none; }
|
|
||||||
.places-filter-btn {
|
|
||||||
padding: var(--space-1) var(--space-3);
|
|
||||||
border-radius: var(--radius-full);
|
|
||||||
border: 1.5px solid var(--c-border);
|
|
||||||
background: var(--c-surface);
|
|
||||||
color: var(--c-text-secondary);
|
|
||||||
font-size: var(--text-sm);
|
|
||||||
cursor: pointer;
|
|
||||||
white-space: nowrap;
|
|
||||||
transition: all 0.15s;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
.places-filter-btn.active {
|
|
||||||
background: var(--c-primary);
|
|
||||||
border-color: var(--c-primary);
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
.places-map {
|
|
||||||
height: 42%;
|
|
||||||
flex-shrink: 0;
|
|
||||||
min-height: 180px;
|
|
||||||
}
|
|
||||||
.places-list {
|
|
||||||
flex: 1;
|
|
||||||
overflow-y: auto;
|
|
||||||
scrollbar-width: thin;
|
|
||||||
scrollbar-color: var(--c-primary) var(--c-surface);
|
|
||||||
}
|
|
||||||
.places-list-inner {
|
|
||||||
padding: var(--space-3) var(--space-4);
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: var(--space-2);
|
|
||||||
}
|
|
||||||
.places-card {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: var(--space-3);
|
|
||||||
padding: var(--space-3);
|
|
||||||
background: var(--c-surface);
|
|
||||||
border: 1.5px solid var(--c-border-light);
|
|
||||||
border-left: 4px solid var(--typ-color, var(--c-primary));
|
|
||||||
border-radius: var(--radius-lg);
|
|
||||||
cursor: pointer;
|
|
||||||
transition: box-shadow 0.15s;
|
|
||||||
}
|
|
||||||
.places-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
|
|
||||||
.places-card-icon { font-size: 1.6rem; flex-shrink: 0; }
|
|
||||||
.places-card-body { flex: 1; min-width: 0; }
|
|
||||||
.places-card-name { font-weight: var(--weight-semibold); color: var(--c-text); }
|
|
||||||
.places-card-meta { font-size: var(--text-sm); color: var(--c-text-secondary); margin-top: 2px; }
|
|
||||||
.places-card-flags { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-1); }
|
|
||||||
.places-card-arrow { color: var(--c-text-muted); font-size: 1.2rem; }
|
|
||||||
.places-flag {
|
|
||||||
font-size: var(--text-xs);
|
|
||||||
padding: 2px 7px;
|
|
||||||
border-radius: var(--radius-full);
|
|
||||||
background: var(--c-surface-2);
|
|
||||||
color: var(--c-text-secondary);
|
|
||||||
}
|
|
||||||
.places-flag--detail {
|
|
||||||
font-size: var(--text-sm);
|
|
||||||
padding: var(--space-1) var(--space-3);
|
|
||||||
}
|
|
||||||
.places-locate-btn {
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
border-radius: 50%;
|
|
||||||
background: #C4843A;
|
|
||||||
color: #fff;
|
|
||||||
border: none;
|
|
||||||
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
|
|
||||||
cursor: pointer;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
margin: 10px;
|
|
||||||
}
|
|
||||||
.places-locate-btn:hover { background: #9E6520; }
|
|
||||||
|
|
||||||
/* ============================================================
|
/* ============================================================
|
||||||
ROUTEN — Komoot-Stil (routes.js)
|
ROUTEN — Komoot-Stil (routes.js)
|
||||||
============================================================ */
|
============================================================ */
|
||||||
|
|
|
||||||
|
|
@ -86,14 +86,14 @@
|
||||||
<title>Ban Yaro</title>
|
<title>Ban Yaro</title>
|
||||||
|
|
||||||
<!-- Theme + theme-color Statusleiste vor CSS setzen -->
|
<!-- Theme + theme-color Statusleiste vor CSS setzen -->
|
||||||
<script src="/js/boot-early.js?v=1205"></script>
|
<script src="/js/boot-early.js?v=1206"></script>
|
||||||
|
|
||||||
<!-- CSS: Reihenfolge ist wichtig — ?v= zwingt Browser zur Neuladung -->
|
<!-- CSS: Reihenfolge ist wichtig — ?v= zwingt Browser zur Neuladung -->
|
||||||
<link rel="stylesheet" href="/css/design-system.css?v=1205">
|
<link rel="stylesheet" href="/css/design-system.css?v=1206">
|
||||||
<link rel="stylesheet" href="/css/layout.css?v=1205">
|
<link rel="stylesheet" href="/css/layout.css?v=1206">
|
||||||
<link rel="stylesheet" href="/css/components.css?v=1205">
|
<link rel="stylesheet" href="/css/components.css?v=1206">
|
||||||
<link rel="stylesheet" href="/css/utilities.css?v=1205">
|
<link rel="stylesheet" href="/css/utilities.css?v=1206">
|
||||||
<link rel="stylesheet" href="/css/lists.css?v=1205">
|
<link rel="stylesheet" href="/css/lists.css?v=1206">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
|
|
@ -617,11 +617,11 @@
|
||||||
<div id="modal-container"></div>
|
<div id="modal-container"></div>
|
||||||
|
|
||||||
<!-- JS: Reihenfolge ist wichtig — erst Basis, dann Features -->
|
<!-- JS: Reihenfolge ist wichtig — erst Basis, dann Features -->
|
||||||
<script src="/js/api.js?v=1205"></script>
|
<script src="/js/api.js?v=1206"></script>
|
||||||
<script src="/js/ui.js?v=1205"></script>
|
<script src="/js/ui.js?v=1206"></script>
|
||||||
<script src="/js/app.js?v=1205"></script>
|
<script src="/js/app.js?v=1206"></script>
|
||||||
<script src="/js/worlds.js?v=1205"></script>
|
<script src="/js/worlds.js?v=1206"></script>
|
||||||
<script src="/js/offline-indicator.js?v=1205"></script>
|
<script src="/js/offline-indicator.js?v=1206"></script>
|
||||||
|
|
||||||
<!-- Feature-Seiten werden lazy geladen -->
|
<!-- Feature-Seiten werden lazy geladen -->
|
||||||
|
|
||||||
|
|
@ -631,7 +631,7 @@
|
||||||
|
|
||||||
|
|
||||||
<!-- Boot: Offline-Banner + SW-Registration (extrahiert für CSP) -->
|
<!-- Boot: Offline-Banner + SW-Registration (extrahiert für CSP) -->
|
||||||
<script src="/js/boot.js?v=1205"></script>
|
<script src="/js/boot.js?v=1206"></script>
|
||||||
|
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@
|
||||||
Router, State-Management, Navigation, Initialisierung.
|
Router, State-Management, Navigation, Initialisierung.
|
||||||
============================================================ */
|
============================================================ */
|
||||||
|
|
||||||
const APP_VER = '1205'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
|
const APP_VER = '1206'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
|
||||||
const APP_VERSION = '1.6.0'; // ← semantische Version, wird bei make release gesetzt
|
const APP_VERSION = '1.6.0'; // ← semantische Version, wird bei make release gesetzt
|
||||||
window.APP_VER = APP_VER; // global verfügbar für andere Module (z.B. offline-indicator)
|
window.APP_VER = APP_VER; // global verfügbar für andere Module (z.B. offline-indicator)
|
||||||
window.APP_VERSION = APP_VERSION;
|
window.APP_VERSION = APP_VERSION;
|
||||||
|
|
|
||||||
|
|
@ -13,8 +13,6 @@ window.Page_forum = (() => {
|
||||||
let _offset = 0;
|
let _offset = 0;
|
||||||
let _searchTimer = null;
|
let _searchTimer = null;
|
||||||
let _searching = false;
|
let _searching = false;
|
||||||
let _mapLoaded = false;
|
|
||||||
let _leafletLoaded = false;
|
|
||||||
let _map = null;
|
let _map = null;
|
||||||
let _clusterGroup = null;
|
let _clusterGroup = null;
|
||||||
let _activeSection = 'list'; // 'list' | 'map'
|
let _activeSection = 'list'; // 'list' | 'map'
|
||||||
|
|
@ -1237,15 +1235,11 @@ function _fmtDate(iso) {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
await _loadLeaflet();
|
|
||||||
const mapEl = document.getElementById('forum-map');
|
const mapEl = document.getElementById('forum-map');
|
||||||
if (!mapEl) return;
|
if (!mapEl) return;
|
||||||
|
|
||||||
_map = L.map(mapEl, { zoomControl: true }).setView([51.0, 10.0], 6);
|
// GL über die Facade (gleicher Style wie die zentrale Karte), Fallback Leaflet.
|
||||||
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
_map = await UI.map.create(mapEl, { center: [51.0, 10.0], zoom: 6, zoomControl: true, attributionControl: false });
|
||||||
attribution: '© OpenStreetMap',
|
|
||||||
maxZoom: 18,
|
|
||||||
}).addTo(_map);
|
|
||||||
|
|
||||||
_loadMembersOnMap();
|
_loadMembersOnMap();
|
||||||
}
|
}
|
||||||
|
|
@ -1253,37 +1247,20 @@ function _fmtDate(iso) {
|
||||||
async function _loadMembersOnMap() {
|
async function _loadMembersOnMap() {
|
||||||
if (!_map) return;
|
if (!_map) return;
|
||||||
try {
|
try {
|
||||||
// MarkerCluster laden falls nicht vorhanden
|
|
||||||
if (!window.L.markerClusterGroup) {
|
|
||||||
await Promise.all([
|
|
||||||
new Promise((res, rej) => {
|
|
||||||
if (document.querySelector('link[href*="MarkerCluster"]')) { res(); return; }
|
|
||||||
const l1 = document.createElement('link'); l1.rel='stylesheet'; l1.href='/css/MarkerCluster.css'; l1.onload=res; l1.onerror=rej; document.head.appendChild(l1);
|
|
||||||
}),
|
|
||||||
new Promise((res, rej) => {
|
|
||||||
const s = document.createElement('script'); s.src='/js/leaflet.markercluster.js'; s.onload=res; s.onerror=rej; document.head.appendChild(s);
|
|
||||||
}),
|
|
||||||
]);
|
|
||||||
}
|
|
||||||
|
|
||||||
const members = await API.forum.membersMap();
|
const members = await API.forum.membersMap();
|
||||||
|
|
||||||
// Alte Cluster-Gruppe sauber entfernen
|
// Alte Gruppe sauber entfernen
|
||||||
if (_clusterGroup) { _map.removeLayer(_clusterGroup); _clusterGroup = null; }
|
if (_clusterGroup) { try { _map.removeLayer(_clusterGroup); } catch (e) {} _clusterGroup = null; }
|
||||||
|
|
||||||
_clusterGroup = L.markerClusterGroup({ maxClusterRadius: 60 });
|
_clusterGroup = UI.map.clusterGroup({ maxClusterRadius: 60 });
|
||||||
members.forEach(m => {
|
members.forEach(m => {
|
||||||
const icon = L.divIcon({
|
const html = `<div style="width:32px;height:32px;border-radius:50%;
|
||||||
className: '',
|
|
||||||
html: `<div style="width:32px;height:32px;border-radius:50%;
|
|
||||||
background:var(--c-primary);color:#fff;font-size:13px;font-weight:700;
|
background:var(--c-primary);color:#fff;font-size:13px;font-weight:700;
|
||||||
display:flex;align-items:center;justify-content:center;
|
display:flex;align-items:center;justify-content:center;
|
||||||
box-shadow:0 2px 5px rgba(0,0,0,0.35);
|
box-shadow:0 2px 5px rgba(0,0,0,0.35);
|
||||||
border:2px solid rgba(255,255,255,0.8)">${UI.escape((m.vorname||'?')[0].toUpperCase())}</div>`,
|
border:2px solid rgba(255,255,255,0.8)">${UI.escape((m.vorname||'?')[0].toUpperCase())}</div>`;
|
||||||
iconSize: [32, 32], iconAnchor: [16, 16],
|
|
||||||
});
|
|
||||||
_clusterGroup.addLayer(
|
_clusterGroup.addLayer(
|
||||||
L.marker([m.lat, m.lon], { icon })
|
UI.map.svgMarker(m.lat, m.lon, html, { size: 32, anchorY: 16 })
|
||||||
.bindPopup(`<strong>${UI.escape(m.vorname || '?')}</strong>`)
|
.bindPopup(`<strong>${UI.escape(m.vorname || '?')}</strong>`)
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
@ -1293,30 +1270,6 @@ function _fmtDate(iso) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
async function _loadLeaflet() {
|
|
||||||
if (_leafletLoaded || window.L) { _leafletLoaded = true; return; }
|
|
||||||
|
|
||||||
// CSS
|
|
||||||
if (!document.querySelector('link[href*="leaflet.css"]')) {
|
|
||||||
const lCss = document.createElement('link');
|
|
||||||
lCss.rel = 'stylesheet';
|
|
||||||
lCss.href = '/css/leaflet.css';
|
|
||||||
document.head.appendChild(lCss);
|
|
||||||
}
|
|
||||||
|
|
||||||
// JS
|
|
||||||
await new Promise((resolve, reject) => {
|
|
||||||
if (window.L) { resolve(); return; }
|
|
||||||
const s = document.createElement('script');
|
|
||||||
s.src = '/js/leaflet.js';
|
|
||||||
s.onload = resolve;
|
|
||||||
s.onerror = reject;
|
|
||||||
document.head.appendChild(s);
|
|
||||||
});
|
|
||||||
|
|
||||||
_leafletLoaded = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
// ----------------------------------------------------------
|
// ----------------------------------------------------------
|
||||||
// Moderations-Panel
|
// Moderations-Panel
|
||||||
// ----------------------------------------------------------
|
// ----------------------------------------------------------
|
||||||
|
|
@ -1469,6 +1422,13 @@ function _fmtDate(iso) {
|
||||||
document.body.appendChild(lb);
|
document.body.appendChild(lb);
|
||||||
}
|
}
|
||||||
|
|
||||||
return { init, refresh, onDogChange, openNew, openThread: _openThread };
|
// Karte beim Verlassen freigeben (WebGL-Kontext-Leak vermeiden).
|
||||||
|
function destroy() {
|
||||||
|
try { _clusterGroup && _clusterGroup.remove && _clusterGroup.remove(); } catch (e) {}
|
||||||
|
try { _map && _map.remove && _map.remove(); } catch (e) {}
|
||||||
|
_map = null; _clusterGroup = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return { init, refresh, onDogChange, openNew, openThread: _openThread, destroy };
|
||||||
|
|
||||||
})();
|
})();
|
||||||
|
|
|
||||||
|
|
@ -1,469 +0,0 @@
|
||||||
/* ============================================================
|
|
||||||
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 _search = '';
|
|
||||||
let _userPos = null;
|
|
||||||
|
|
||||||
// ----------------------------------------------------------
|
|
||||||
// Typen-Konfiguration
|
|
||||||
// ----------------------------------------------------------
|
|
||||||
const TYPEN = {
|
|
||||||
restaurant: { icon: '<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#fork-knife"></use></svg>', label: 'Restaurant & Café', color: '#F97316' },
|
|
||||||
freilauf: { icon: '<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#dog"></use></svg>', label: 'Freilauffläche', color: '#22C55E' },
|
|
||||||
shop: { icon: '<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#shopping-cart"></use></svg>', label: 'Shop', color: '#3B82F6' },
|
|
||||||
kotbeutel: { icon: '<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#bag"></use></svg>', label: 'Kotbeutel-Station', color: '#84A98C' },
|
|
||||||
tierarzt: { icon: '<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#first-aid"></use></svg>', label: 'Tierarzt', color: '#EF4444' },
|
|
||||||
hundeschule: { icon: '<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#graduation-cap"></use></svg>', label: 'Hundeschule', color: '#8B5CF6' },
|
|
||||||
};
|
|
||||||
|
|
||||||
// _esc ersetzt durch UI.escape()
|
|
||||||
|
|
||||||
// ----------------------------------------------------------
|
|
||||||
// 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=""><svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#map-trifold"></use></svg> 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">
|
|
||||||
<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#plus"></use></svg> Ort hinzufügen
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Suche -->
|
|
||||||
<div class="diary-search-wrap" style="margin:var(--space-2) var(--space-3) 0" id="places-search-wrap">
|
|
||||||
<svg class="ph-icon diary-search-icon" aria-hidden="true"><use href="/icons/phosphor.svg#magnifying-glass"></use></svg>
|
|
||||||
<input type="search" class="diary-search-input" id="places-search"
|
|
||||||
placeholder="Orte durchsuchen…" autocomplete="off">
|
|
||||||
</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);
|
|
||||||
});
|
|
||||||
|
|
||||||
// Suche mit Debounce
|
|
||||||
let _searchTimer = null;
|
|
||||||
document.getElementById('places-search')?.addEventListener('input', e => {
|
|
||||||
clearTimeout(_searchTimer);
|
|
||||||
_searchTimer = setTimeout(() => {
|
|
||||||
_search = e.target.value.trim().toLowerCase();
|
|
||||||
_applyFilter();
|
|
||||||
}, 300);
|
|
||||||
});
|
|
||||||
|
|
||||||
UI.loadLeaflet().then(_initMap);
|
|
||||||
}
|
|
||||||
|
|
||||||
// ----------------------------------------------------------
|
|
||||||
// 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 = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M128,16a96,96,0,1,0,96,96A96.11,96.11,0,0,0,128,16Zm0,176a80,80,0,1,1,80-80A80.09,80.09,0,0,1,128,192Zm0-120a40,40,0,1,0,40,40A40,40,0,0,0,128,72Zm0,64a24,24,0,1,1,24-24A24,24,0,0,1,128,136Z"/></svg>';
|
|
||||||
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() {
|
|
||||||
let list = _activeTyp ? _data.filter(p => p.typ === _activeTyp) : _data;
|
|
||||||
if (_search) {
|
|
||||||
const q = _search;
|
|
||||||
list = list.filter(p =>
|
|
||||||
(p.name || '').toLowerCase().includes(q) ||
|
|
||||||
(p.adresse|| '').toLowerCase().includes(q) ||
|
|
||||||
(p.typ || '').toLowerCase().includes(q)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
return list;
|
|
||||||
}
|
|
||||||
|
|
||||||
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: '<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#map-pin"></use></svg>', color: '#6B7280' };
|
|
||||||
const marker = UI.leafletMarker({ lat: place.lat, lon: place.lon, color: t.color, icon: t.icon, size: 34 })
|
|
||||||
.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) {
|
|
||||||
const msg = _search
|
|
||||||
? `Keine Orte gefunden für „${UI.escape(_search)}".`
|
|
||||||
: (_activeTyp ? 'Keine Orte in dieser Kategorie.' : 'Noch keine Orte eingetragen.');
|
|
||||||
list.innerHTML = `
|
|
||||||
<div class="places-list-inner">
|
|
||||||
<p style="color:var(--c-text-secondary);text-align:center;padding:var(--space-6)">${msg}</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: '<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#map-pin"></use></svg>', label: p.typ, color: '#6B7280' };
|
|
||||||
const flags = [
|
|
||||||
p.hund_rein === true ? `${UI.icon('dog')} Hund rein` : null,
|
|
||||||
p.leine_pflicht === true ? `${UI.icon('tag')} Leinenpflicht` : null,
|
|
||||||
p.wasser_fuer_hunde === true ? `${UI.icon('drop')} 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">${UI.escape(p.name)}</div>
|
|
||||||
<div class="places-card-meta">
|
|
||||||
<span class="places-card-typ" style="color:${t.color}">${t.label}</span>
|
|
||||||
${p.adresse ? `· <span>${UI.escape(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">${UI.icon('arrow-right')}</div>
|
|
||||||
</div>`;
|
|
||||||
}
|
|
||||||
|
|
||||||
// ----------------------------------------------------------
|
|
||||||
// Detail-Modal
|
|
||||||
// ----------------------------------------------------------
|
|
||||||
function _openDetail(place) {
|
|
||||||
const t = TYPEN[place.typ] || { icon: '<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#map-pin"></use></svg>', label: place.typ, color: '#6B7280' };
|
|
||||||
const isOwn = _appState.user?.id === place.user_id;
|
|
||||||
|
|
||||||
const flags = [
|
|
||||||
place.hund_rein === true ? `${UI.icon('dog')} Hund erlaubt` : (place.hund_rein === false ? `${UI.icon('x')} Kein Hund` : null),
|
|
||||||
place.leine_pflicht === true ? `${UI.icon('tag')} Leinenpflicht` : (place.leine_pflicht === false ? `${UI.icon('check')} Leine optional` : null),
|
|
||||||
place.wasser_fuer_hunde === true ? `${UI.icon('drop')} 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">${UI.escape(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)">${UI.icon('map-pin')} ${UI.escape(place.adresse)}</p>` : ''}
|
|
||||||
${place.telefon ? `<p class="mb-2"><a href="tel:${UI.escape(place.telefon)}" class="text-primary">${UI.icon('phone')} ${UI.escape(place.telefon)}</a></p>` : ''}
|
|
||||||
${place.website ? `<p class="mb-2"><a href="${UI.escape(place.website)}" target="_blank" class="text-primary">${UI.icon('arrow-square-out')} ${UI.escape(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>` : ''}
|
|
||||||
<div id="place-rating-${place.id}"></div>
|
|
||||||
<p style="color:var(--c-text-muted);font-size:0.8rem;margin-top:var(--space-4)">
|
|
||||||
Eingetragen von ${UI.escape(place.user_name || 'Unbekannt')}
|
|
||||||
</p>
|
|
||||||
`;
|
|
||||||
|
|
||||||
const footer = isOwn ? `
|
|
||||||
<button type="button" class="btn btn-secondary w-full" id="place-detail-edit">Bearbeiten</button>
|
|
||||||
<button type="button" class="btn btn-ghost" style="width:100%;margin-top:var(--space-2)" id="place-detail-close">Schließen</button>
|
|
||||||
` : `
|
|
||||||
<button type="button" class="btn btn-primary flex-1" id="place-detail-close">Schließen</button>
|
|
||||||
`;
|
|
||||||
|
|
||||||
UI.modal.open({ title: `${t.icon} ${UI.escape(place.name)}`, body, footer });
|
|
||||||
|
|
||||||
UI.ratingStars({
|
|
||||||
containerId: `place-rating-${place.id}`,
|
|
||||||
targetType: 'place',
|
|
||||||
targetId: place.id,
|
|
||||||
isLoggedIn: !!_appState.user,
|
|
||||||
});
|
|
||||||
|
|
||||||
document.getElementById('place-detail-close')?.addEventListener('click', UI.modal.close);
|
|
||||||
|
|
||||||
document.getElementById('place-detail-edit')?.addEventListener('click', () => {
|
|
||||||
UI.modal.close();
|
|
||||||
_showForm(place);
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
// 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.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="${UI.escape(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 id="pf-location-picker"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label class="form-label">Adresse <span class="text-secondary">(optional)</span></label>
|
|
||||||
<input class="form-control" type="text" name="adresse"
|
|
||||||
value="${UI.escape(place?.adresse || '')}" placeholder="Musterstraße 1, 12345 Musterstadt">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label class="form-label">Website <span class="text-secondary">(optional)</span></label>
|
|
||||||
<input class="form-control" type="url" name="website"
|
|
||||||
value="${UI.escape(place?.website || '')}" placeholder="https://…">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label class="form-label">Telefon <span class="text-secondary">(optional)</span></label>
|
|
||||||
<input class="form-control" type="tel" name="telefon"
|
|
||||||
value="${UI.escape(place?.telefon || '')}" placeholder="+49 89 123456">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group flex-col-gap-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' : ''}>
|
|
||||||
<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#dog"></use></svg> 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' : ''}>
|
|
||||||
<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#tag"></use></svg> 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' : ''}>
|
|
||||||
<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#drop"></use></svg> Wasser für Hunde vorhanden
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</form>
|
|
||||||
`;
|
|
||||||
|
|
||||||
const footer = `
|
|
||||||
<div style="display:flex;flex-direction:column;gap:var(--space-2);width:100%">
|
|
||||||
<button type="submit" form="place-form" class="btn btn-primary w-full">
|
|
||||||
${isEdit ? 'Speichern' : 'Ort hinzufügen'}
|
|
||||||
</button>
|
|
||||||
<div class="flex-gap-2">
|
|
||||||
${isEdit ? `<button type="button" class="btn btn-danger" id="place-form-delete">Löschen</button>` : ''}
|
|
||||||
<button type="button" class="btn btn-secondary flex-1" id="place-form-cancel">Abbrechen</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
UI.modal.open({ title: isEdit ? `${UI.escape(place.name)} bearbeiten` : '<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#map-pin"></use></svg> Neuer Ort', body, footer });
|
|
||||||
|
|
||||||
document.getElementById('place-form-cancel')?.addEventListener('click', UI.modal.close);
|
|
||||||
|
|
||||||
document.getElementById('place-form-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.'); }
|
|
||||||
});
|
|
||||||
|
|
||||||
// Location-Picker initialisieren
|
|
||||||
const _picker = UI.locationPicker({ containerId: 'pf-location-picker' });
|
|
||||||
if (place?.lat && place?.lon) {
|
|
||||||
_picker.setValue(place.lat, place.lon, null);
|
|
||||||
}
|
|
||||||
|
|
||||||
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);
|
|
||||||
const loc = _picker.getValue();
|
|
||||||
|
|
||||||
if (!loc.lat || !loc.lon) {
|
|
||||||
UI.toast.warning('Bitte GPS-Position ermitteln.');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
await UI.asyncButton(btn, async () => {
|
|
||||||
const payload = {
|
|
||||||
name: fd.name?.trim(),
|
|
||||||
typ: fd.typ,
|
|
||||||
lat: loc.lat,
|
|
||||||
lon: loc.lon,
|
|
||||||
adresse: fd.adresse || null,
|
|
||||||
website: fd.website || null,
|
|
||||||
telefon: fd.telefon || 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 };
|
|
||||||
|
|
||||||
})();
|
|
||||||
|
|
@ -4,7 +4,7 @@
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<meta name="color-scheme" content="light dark">
|
<meta name="color-scheme" content="light dark">
|
||||||
<script src="/js/landing-init.js?v=1205"></script>
|
<script src="/js/landing-init.js?v=1206"></script>
|
||||||
<title>Ban Yaro — Die Hunde-App für Deutschland, Österreich & Schweiz</title>
|
<title>Ban Yaro — Die Hunde-App für Deutschland, Österreich & Schweiz</title>
|
||||||
<meta name="description" content="Ban Yaro: Die kostenlose All-in-One Hunde-App für DACH. Tagebuch, Giftköder-Alarm, Training mit KI, Forum, Wurfbörse, Stammbaum, Inzucht-Check — DSGVO-konform, offline-fähig, ohne App Store.">
|
<meta name="description" content="Ban Yaro: Die kostenlose All-in-One Hunde-App für DACH. Tagebuch, Giftköder-Alarm, Training mit KI, Forum, Wurfbörse, Stammbaum, Inzucht-Check — DSGVO-konform, offline-fähig, ohne App Store.">
|
||||||
<meta name="keywords" content="Hunde App, Hunde Community, Wurfbörse, Züchter, Welpen kaufen, Stammbaum Hund, Inzuchtkoeffizient, Hundezucht, Impfpass Hund, Giftköder Alarm, Gassi Community, Hundetraining App, Hunde Forum, Hunde KI, Hundefilm Datenbank, Welpen Marktplatz">
|
<meta name="keywords" content="Hunde App, Hunde Community, Wurfbörse, Züchter, Welpen kaufen, Stammbaum Hund, Inzuchtkoeffizient, Hundezucht, Impfpass Hund, Giftköder Alarm, Gassi Community, Hundetraining App, Hunde Forum, Hunde KI, Hundefilm Datenbank, Welpen Marktplatz">
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,7 @@
|
||||||
============================================================ */
|
============================================================ */
|
||||||
|
|
||||||
// ← EINZIGE Stelle für die Version — STATIC_ASSETS und CACHE_VERSION leiten sich ab
|
// ← EINZIGE Stelle für die Version — STATIC_ASSETS und CACHE_VERSION leiten sich ab
|
||||||
const VER = '1205';
|
const VER = '1206';
|
||||||
const CACHE_VERSION = `by-v${VER}`;
|
const CACHE_VERSION = `by-v${VER}`;
|
||||||
const CACHE_STATIC = `${CACHE_VERSION}-static`;
|
const CACHE_STATIC = `${CACHE_VERSION}-static`;
|
||||||
const CACHE_TILES = 'ban-yaro-tiles-v1'; // bleibt über SW-Updates erhalten
|
const CACHE_TILES = 'ban-yaro-tiles-v1'; // bleibt über SW-Updates erhalten
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue