Feature: Generische Seiten-Hilfe (UI.pageInfo), POI Multi-Select, Tagessprüche-DB (SW by-v654)
- UI.pageInfo(): generische Hilfe-Funktion — erstes Öffnen zeigt Info-Banner, danach ? Button oben rechts; CSS-Klassen pinfo-* - Übungen-Seite nutzt UI.pageInfo() als erstes Beispiel - Karte POI: Mehrfachauswahl (außer Giftköder), Kombi-Typen entfernt, type als comma-separated im Backend - daily_quotes Tabelle in DB (346 Einträge via import_quotes.py importiert) - GET /widget/quote — deterministischer Tagesspruch (wechselt täglich)
This commit is contained in:
parent
1fdba57365
commit
9103c7950f
12 changed files with 623 additions and 38 deletions
|
|
@ -838,19 +838,17 @@ window.Page_map = (() => {
|
|||
_tempMarker = null;
|
||||
}
|
||||
|
||||
// Einzelne Basis-Typen — Mehrfachauswahl möglich (außer giftkoeder = exklusiv)
|
||||
const PIN_TYPES = [
|
||||
{ type: 'giftkoeder', icon: '<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#skull"></use></svg>', label: 'Giftköder', color: '#DC2626' },
|
||||
{ type: 'waste_basket', icon: '<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#trash"></use></svg>', label: 'Mülleimer', color: '#6B7280' },
|
||||
{ type: 'kotbeutel', icon: '<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#bag"></use></svg>', label: 'Kotbeutel', color: '#84A98C' },
|
||||
{ type: 'kotbeutel_abfall', icon: '<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#bag"></use></svg>', label: 'Kotbeutel + Mülleimer', color: '#5a8a6a' },
|
||||
{ type: 'bank', icon: '<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#park"></use></svg>', label: 'Sitzbank', color: '#92400E' },
|
||||
{ type: 'bank_kotbeutel', icon: '<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#park"></use></svg>', label: 'Bank + Kotbeutel', color: '#7a6030' },
|
||||
{ type: 'bank_kotbeutel_abfall', icon: '<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#park"></use></svg>', label: 'Bank + Kotbeutel + Mülleimer', color: '#4a5a2a' },
|
||||
{ type: 'drinking_water', icon: '<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#drop"></use></svg>', label: 'Wasserstelle', color: '#0EA5E9' },
|
||||
{ type: 'dog_park', icon: '<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#leaf"></use></svg>', label: 'Hundewiese', color: '#15803D' },
|
||||
{ type: 'parkplatz', icon: '<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#car"></use></svg>', label: 'Parkplatz', color: '#2563EB' },
|
||||
{ type: 'treffpunkt', icon: '<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#handshake"></use></svg>', label: 'Treffpunkt', color: '#7C3AED' },
|
||||
{ type: 'sonstiges', icon: '<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#push-pin"></use></svg>', label: 'Sonstiges', color: '#F59E0B' },
|
||||
{ type: 'giftkoeder', icon: '<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#skull"></use></svg>', label: 'Giftköder', color: '#DC2626', exclusive: true },
|
||||
{ type: 'waste_basket', icon: '<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#trash"></use></svg>', label: 'Mülleimer', color: '#6B7280' },
|
||||
{ type: 'kotbeutel', icon: '<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#bag"></use></svg>', label: 'Kotbeutel', color: '#84A98C' },
|
||||
{ type: 'bank', icon: '<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#park"></use></svg>', label: 'Sitzbank', color: '#92400E' },
|
||||
{ type: 'drinking_water',icon: '<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#drop"></use></svg>', label: 'Wasserstelle',color: '#0EA5E9' },
|
||||
{ type: 'dog_park', icon: '<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#leaf"></use></svg>', label: 'Hundewiese', color: '#15803D' },
|
||||
{ type: 'parkplatz', icon: '<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#car"></use></svg>', label: 'Parkplatz', color: '#2563EB' },
|
||||
{ type: 'treffpunkt', icon: '<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#handshake"></use></svg>', label: 'Treffpunkt', color: '#7C3AED' },
|
||||
{ type: 'sonstiges', icon: '<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#push-pin"></use></svg>', label: 'Sonstiges', color: '#F59E0B' },
|
||||
];
|
||||
|
||||
function _confirmPlacement(latlng) {
|
||||
|
|
@ -859,18 +857,18 @@ window.Page_map = (() => {
|
|||
radius: 10, color: '#F59E0B', fillColor: '#F59E0B', fillOpacity: 0.6,
|
||||
}).addTo(_map);
|
||||
|
||||
let _selectedType = 'giftkoeder';
|
||||
let _selectedTypes = new Set(['giftkoeder']);
|
||||
|
||||
UI.modal.open({
|
||||
title: '<svg class="ph-icon" aria-hidden="true"><use href="/icons/phosphor.svg#push-pin"></use></svg> Marker setzen',
|
||||
body: `
|
||||
<form id="poi-form" class="flex flex-col gap-3">
|
||||
<div>
|
||||
<label class="form-label">Typ auswählen</label>
|
||||
<label class="form-label">Typ auswählen <span style="font-size:var(--text-xs);color:var(--c-text-muted);font-weight:normal">(Mehrfachauswahl möglich)</span></label>
|
||||
<div class="poi-type-grid">
|
||||
${PIN_TYPES.map(p => `
|
||||
<button type="button" class="poi-type-btn${p.type === 'giftkoeder' ? ' selected' : ''}"
|
||||
data-type="${p.type}" style="--pt-color:${p.color}">
|
||||
data-type="${p.type}" data-excl="${p.exclusive ? '1' : ''}" style="--pt-color:${p.color}">
|
||||
<span class="poi-type-icon">${p.icon}</span>
|
||||
<span class="poi-type-label">${p.label}</span>
|
||||
</button>
|
||||
|
|
@ -896,9 +894,21 @@ window.Page_map = (() => {
|
|||
document.querySelector('.poi-type-grid')?.addEventListener('click', e => {
|
||||
const btn = e.target.closest('.poi-type-btn');
|
||||
if (!btn) return;
|
||||
document.querySelectorAll('.poi-type-btn').forEach(b => b.classList.remove('selected'));
|
||||
btn.classList.add('selected');
|
||||
_selectedType = btn.dataset.type;
|
||||
const t = btn.dataset.type;
|
||||
if (btn.dataset.excl) {
|
||||
_selectedTypes = new Set([t]);
|
||||
document.querySelectorAll('.poi-type-btn').forEach(b => b.classList.toggle('selected', b.dataset.type === t));
|
||||
} else {
|
||||
if (_selectedTypes.has('giftkoeder')) {
|
||||
_selectedTypes.delete('giftkoeder');
|
||||
document.querySelector('[data-excl="1"]')?.classList.remove('selected');
|
||||
}
|
||||
if (_selectedTypes.has(t)) {
|
||||
if (_selectedTypes.size > 1) { _selectedTypes.delete(t); btn.classList.remove('selected'); }
|
||||
} else {
|
||||
_selectedTypes.add(t); btn.classList.add('selected');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById('poi-cancel')?.addEventListener('click', () => {
|
||||
|
|
@ -909,8 +919,9 @@ window.Page_map = (() => {
|
|||
document.getElementById('poi-save')?.addEventListener('click', async () => {
|
||||
const name = document.getElementById('poi-name').value.trim() || null;
|
||||
const notiz = document.getElementById('poi-notiz').value.trim() || null;
|
||||
const type = [..._selectedTypes].join(',');
|
||||
UI.modal.close();
|
||||
await _saveUserPoi({ type: _selectedType, lat: latlng.lat, lon: latlng.lng, name, notiz });
|
||||
await _saveUserPoi({ type, lat: latlng.lat, lon: latlng.lng, name, notiz });
|
||||
_exitPlacementMode();
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -476,6 +476,18 @@ window.Page_uebungen = (() => {
|
|||
if (_VALID_TABS.has(mapped)) _activeTab = mapped;
|
||||
}
|
||||
_render();
|
||||
UI.pageInfo(_container, {
|
||||
pageId: 'uebungen',
|
||||
title: 'Übungsbibliothek',
|
||||
icon: 'graduation-cap',
|
||||
intro: 'Hier findest du alle Übungen für deinen Hund — von Grundkommandos bis zu Tricks und Problemverhalten. Du kannst deinen Trainingsfortschritt für jede Übung festhalten.',
|
||||
steps: [
|
||||
{ icon: 'list-checks', title: 'Stand erfassen', text: 'Klicke auf "Stand erfassen" um schnell für alle Übungen einzutragen, was euer aktueller Stand ist.' },
|
||||
{ icon: 'flag', title: 'Übung üben', text: 'Tippe auf eine Übung, um die Anleitung zu lesen. Mit den Fortschritts-Icons (Flagge → Trophäe) trackst du, wie weit ihr seid.' },
|
||||
{ icon: 'star', title: 'KI-Trainer', text: 'Im Tab "KI-Trainer" analysiert unsere KI deinen Trainingsstand und gibt personalisierte Empfehlungen.' },
|
||||
],
|
||||
tip: 'Regelmäßiges Training stärkt die Bindung — auch 5 Minuten täglich machen einen großen Unterschied!',
|
||||
});
|
||||
|
||||
// Übungen aus DB laden (parallel mit Progress)
|
||||
if (!_exercisesLoaded) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue