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

Social: 104 Übungen in 7 Kategorien + Übungsübersicht-Modal

Browse source 
Grundkommando(10) Tricks(18) Problemverhalten(12) Mental(8)
Körperpflege(7) Hundesport(6) Welpe-Basics(5) + erweitert auf 104 total
Modal zeigt alle Übungen mit Nutzungs-Counter, SW by-v350
This commit is contained in:
rene 2026-04-24 20:22:40 +02:00
parent 1cb0c2df77
commit 548210b908
3 changed files with 497 additions and 54 deletions
Download patch file Download diff file Expand all files Collapse all files

2
backend/static/js/app.js
View file

@ -3,7 +3,7 @@
Router, State-Management, Navigation, Initialisierung.
============================================================ */
const APP_VER = '336'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
const APP_VER = '337'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
const App = (() => {

72
backend/static/js/pages/social.js
View file

@ -247,10 +247,14 @@ window.Page_social = (() => {
</div>
<button id="sm-training-tip" class="btn btn-secondary"
style="width:100%;min-height:44px;font-size:var(--text-sm);
margin-bottom:8px;border:1.5px solid #10b981;color:#10b981">
margin-bottom:4px;border:1.5px solid #10b981;color:#10b981">
🎾 Trainingstipp generieren
<span style="font-size:10px;opacity:.7;margin-left:6px">
Sitz · Platz · Tricks · …</span>
<span style="font-size:10px;opacity:.7;margin-left:6px">104 Übungen</span>
</button>
<button id="sm-show-exercises" class="btn btn-secondary"
style="width:100%;min-height:36px;font-size:11px;
margin-bottom:8px;color:var(--c-text-muted)">
📋 Alle Übungen ansehen
</button>
<button id="sm-breed-day" class="btn btn-secondary"
style="width:100%;min-height:44px;font-size:var(--text-sm);
@ -411,6 +415,68 @@ window.Page_social = (() => {
el.querySelector('#sm-refresh').addEventListener('click', loadSuggestions);
loadSuggestions();
// Übungs-Übersicht
el.querySelector('#sm-show-exercises').addEventListener('click', async () => {
const exercises = await API.get('/social/exercises').catch(() => []);
const cats = [...new Set(exercises.map(e => e.kategorie))];
const modal = document.createElement('div');
modal.style.cssText = `position:fixed;inset:0;background:rgba(0,0,0,.75);
z-index:9999;overflow-y:auto;padding:16px`;
modal.innerHTML = `
<div style="max-width:500px;margin:0 auto">
<div style="display:flex;justify-content:space-between;align-items:center;
margin-bottom:12px">
<div style="color:#fff;font-weight:700">
🎾 ${exercises.length} Übungen</div>
<button id="sm-ex-close" style="background:none;border:none;color:#fff;
font-size:1.5em;cursor:pointer">✕</button>
</div>
${cats.map(cat => `
<div style="margin-bottom:16px">
<div style="color:#C4843A;font-weight:700;font-size:var(--text-sm);
margin-bottom:8px">${cat}</div>
${exercises.filter(e=>e.kategorie===cat).map(e => `
<div style="background:var(--c-surface);border-radius:8px;padding:10px;
margin-bottom:6px;display:flex;align-items:center;gap:10px">
<div style="flex:1;min-width:0">
<div style="font-size:var(--text-sm);font-weight:600;color:var(--c-text)">
${_esc(e.name)}</div>
<div style="font-size:10px;color:var(--c-text-muted)">
${_esc(e.schwierigkeit||'')} · ${_esc(e.alter_ab||'')} · ${_esc(e.dauer||'')}</div>
</div>
<div style="display:flex;align-items:center;gap:6px;flex-shrink:0">
${e.posts_count > 0 ? `<span style="font-size:10px;background:#10b981;
color:#fff;padding:1px 6px;border-radius:4px">✓ ${e.posts_count}x</span>` : ''}
<button class="btn btn-sm btn-primary sm-ex-use"
data-id="${e.exercise_id}" data-name="${_esc(e.name)}"
style="font-size:11px;padding:4px 10px;min-height:28px">
Nutzen</button>
</div>
</div>`).join('')}
</div>`).join('')}
<button id="sm-ex-close2" class="btn btn-secondary"
style="width:100%;margin-top:8px;color:#fff;
background:rgba(255,255,255,.1)">Schließen</button>
</div>`;
document.body.appendChild(modal);
['sm-ex-close','sm-ex-close2'].forEach(id =>
modal.querySelector(`#${id}`)?.addEventListener('click', () => modal.remove()));
modal.addEventListener('click', e => { if(e.target===modal) modal.remove(); });
modal.querySelectorAll('.sm-ex-use').forEach(btn => {
btn.addEventListener('click', () => {
// Trainingstipp für diese spezifische Übung generieren
modal.remove();
const res = el.querySelector('#sm-gen-result');
const trainBtn = el.querySelector('#sm-training-tip');
// Direkt generieren mit exercise filter via topic-Feld
el.querySelector('#sm-topic').value = btn.dataset.name;
trainBtn.scrollIntoView({behavior:'smooth', block:'center'});
const hint = el.querySelector('#sm-next-hint');
if (hint) { hint.style.display=''; hint.querySelector('strong').textContent = 'Trainingstipp generieren! 🎾'; }
});
});
});
// Trainingstipp
el.querySelector('#sm-training-tip').addEventListener('click', async () => {
const btn = el.querySelector('#sm-training-tip');