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

Refactor: UI.loadLeaflet, leafletMarker, escape, emptyState, locationPicker zentralisiert

Browse source 
- Task 1: UI.loadLeaflet() in ui.js (mit Cluster-Option), lokale _loadLeaflet() in
  diary/walks/routes/places/poison/events.js entfernt
- Task 2: UI.escape() ersetzt lokale _esc()/_escape() in allen 5 Seiten-Modulen
- Task 3: UI.emptyState() ersetzt lokale _emptyState() in diary/routes/events.js
- Task 4: _fmtDate/_fmtDateShort in walks/poison bewusst behalten (anderes Format),
  Kommentare ergänzt
- Task 5: UI.locationPicker() eingebaut in places/poison/events (ersetzt manuelle
  GPS-Input-Blöcke)
- Task 6: UI.leafletMarker() factory in ui.js, Kreis-divIcon-Blöcke in walks/places/
  poison ersetzt; events.js behält Diamant-Marker (andere Form)
- SW by-v207, APP_VER 175
This commit is contained in:
rene 2026-04-18 14:34:35 +02:00
parent 066b722c5e
commit e98ce0d232
9 changed files with 761 additions and 471 deletions
Download patch file Download diff file Expand all files Collapse all files

119
backend/static/js/pages/places.js
View file

@ -11,7 +11,6 @@ window.Page_places = (() => {
let _markers = [];
let _data = [];
let _activeTyp = null; // null = alle
let _leafletLoaded = false;
let _userPos = null;
// ----------------------------------------------------------
@ -26,9 +25,7 @@ window.Page_places = (() => {
hundeschule: { icon: '<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#graduation-cap"></use></svg>', label: 'Hundeschule', color: '#8B5CF6' },
};
function _esc(s) {
return String(s || '').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
}
// _esc ersetzt durch UI.escape()
// ----------------------------------------------------------
// INIT
@ -98,25 +95,7 @@ window.Page_places = (() => {
_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;
UI.loadLeaflet().then(_initMap);
}
// ----------------------------------------------------------
@ -191,20 +170,8 @@ window.Page_places = (() => {
_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 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 })
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);
@ -253,10 +220,10 @@ window.Page_places = (() => {
<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-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>${_esc(p.adresse)}</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>
@ -281,16 +248,17 @@ window.Page_places = (() => {
<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="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')} ${_esc(place.adresse)}</p>` : ''}
${place.telefon ? `<p style="margin-bottom:var(--space-2)"><a href="tel:${_esc(place.telefon)}" style="color:var(--c-primary)">${UI.icon('phone')} ${_esc(place.telefon)}</a></p>` : ''}
${place.website ? `<p style="margin-bottom:var(--space-2)"><a href="${_esc(place.website)}" target="_blank" style="color:var(--c-primary)">${UI.icon('arrow-square-out')} ${_esc(place.website)}</a></p>` : ''}
${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 style="margin-bottom:var(--space-2)"><a href="tel:${UI.escape(place.telefon)}" style="color:var(--c-primary)">${UI.icon('phone')} ${UI.escape(place.telefon)}</a></p>` : ''}
${place.website ? `<p style="margin-bottom:var(--space-2)"><a href="${UI.escape(place.website)}" target="_blank" style="color:var(--c-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 ${_esc(place.user_name || 'Unbekannt')}
Eingetragen von ${UI.escape(place.user_name || 'Unbekannt')}
</p>
`;
@ -301,7 +269,14 @@ window.Page_places = (() => {
<button type="button" class="btn btn-primary flex-1" id="place-detail-close">Schließen</button>
`;
UI.modal.open({ title: `${t.icon} ${_esc(place.name)}`, body, footer });
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);
@ -331,7 +306,7 @@ window.Page_places = (() => {
<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>
value="${UI.escape(place?.name || '')}" placeholder="z. B. Café Hund & Herrchen" required>
</div>
<div class="form-group">
@ -341,38 +316,25 @@ window.Page_places = (() => {
<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"><svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#map-pin"></use></svg></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 id="pf-location-picker"></div>
</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">
value="${UI.escape(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://…">
value="${UI.escape(place?.website || '')}" placeholder="https://…">
</div>
<div class="form-group">
<label class="form-label">Telefon <span style="color:var(--c-text-secondary)">(optional)</span></label>
<input class="form-control" type="tel" name="telefon"
value="${_esc(place?.telefon || '')}" placeholder="+49 89 123456">
value="${UI.escape(place?.telefon || '')}" placeholder="+49 89 123456">
</div>
<div class="form-group" style="display:flex;flex-direction:column;gap:var(--space-2)">
@ -406,7 +368,7 @@ window.Page_places = (() => {
</div>
`;
UI.modal.open({ title: isEdit ? `${_esc(place.name)} bearbeiten` : '<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#map-pin"></use></svg> Neuer Ort', body, footer });
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);
@ -425,30 +387,19 @@ window.Page_places = (() => {
} catch (err) { UI.toast.error(err.message || 'Fehler.'); }
});
// 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);
});
// 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 (!fd.lat || !fd.lon) {
if (!loc.lat || !loc.lon) {
UI.toast.warning('Bitte GPS-Position ermitteln.');
return;
}
@ -457,8 +408,8 @@ window.Page_places = (() => {
const payload = {
name: fd.name?.trim(),
typ: fd.typ,
lat: parseFloat(fd.lat),
lon: parseFloat(fd.lon),
lat: loc.lat,
lon: loc.lon,
adresse: fd.adresse || null,
website: fd.website || null,
telefon: fd.telefon || null,