Feature: JETZT-Welt — Streak+Gassirunde+Übung als kompakte 3er-Chip-Zeile, SW by-v650

This commit is contained in:
rene 2026-05-03 11:07:27 +02:00
parent 87d3006aa7
commit a84df71383
5 changed files with 71 additions and 43 deletions

View file

@ -647,25 +647,18 @@ window.Worlds = (() => {
? `${Math.round(w.temp_c)}° ${_esc(w.desc?.split(' ')[0] || '')} · ${Math.round(w.wind_kmh || 0)} km/h · ${w.precip_prob || 0}% Regen`
: '';
// Streak-Reminder
let streakHtml = '';
// Streak für 3er-Chip-Zeile
let streakVal = '—', streakCol = 'rgba(255,255,255,0.4)';
if (user && dog) {
try {
const sr = await _cachedGet(`streak_${dog.id}`, `/streak/${dog.id}`);
const s = sr.data;
const streak = s?.current_streak || 0;
const trainedToday = s?.last_training_date === new Date().toISOString().slice(0,10);
const col = trainedToday ? 'rgba(16,185,129,0.8)' : (streak > 0 ? 'rgba(245,158,11,0.8)' : 'rgba(255,255,255,0.4)');
const label = streak > 0
? (trainedToday ? `${streak} Tage Streak` : `🔥 ${streak} Tage — heute noch trainieren!`)
: (trainedToday ? '✓ Heute trainiert' : 'Noch kein Training heute');
streakHtml = `
<div class="world-reminder" data-wnav="uebungen">
<svg class="ph-icon" style="width:1.1rem;height:1.1rem;color:${col}">
<use href="/icons/phosphor.svg#target"></use>
</svg>
<span style="font-size:var(--text-xs);font-weight:700;color:white">${label}</span>
</div>`;
streakCol = trainedToday ? '#10B981' : (streak > 0 ? '#F59E0B' : 'rgba(255,255,255,0.4)');
streakVal = streak > 0
? (trainedToday ? `${streak} Tage` : `🔥 ${streak} Tage`)
: (trainedToday ? '✓ Heute' : 'Heute starten');
} catch {}
}
@ -716,32 +709,25 @@ window.Worlds = (() => {
</div>
</div>
${alertHtml}
${streakHtml}
${user && dog ? `
<div id="wj-suggestions" style="display:flex;flex-direction:column;gap:8px">
<div class="world-reminder" id="wj-route-chip" data-wnav="routes">
<svg class="ph-icon" style="width:1.1rem;height:1.1rem;color:var(--c-primary)">
<use href="/icons/phosphor.svg#path"></use></svg>
<div style="flex:1;min-width:0">
<div style="font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
color:rgba(255,255,255,0.45);line-height:1">Gassirunde</div>
<div id="wj-route-val" style="font-size:var(--text-xs);font-weight:700;color:white;margin-top:3px;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis">Berechne</div>
</div>
<svg class="ph-icon" style="width:.9rem;height:.9rem;color:rgba(255,255,255,0.35);flex-shrink:0">
<use href="/icons/phosphor.svg#arrow-right"></use></svg>
</div>
<div class="world-reminder" id="wj-exercise-chip" data-wnav="uebungen">
<svg class="ph-icon" style="width:1.1rem;height:1.1rem;color:var(--c-primary)">
<div class="wj-chip-row">
<div class="wj-chip" data-wnav="uebungen">
<svg class="ph-icon" style="width:1.2rem;height:1.2rem;color:${streakCol}">
<use href="/icons/phosphor.svg#target"></use></svg>
<div style="flex:1;min-width:0">
<div style="font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
color:rgba(255,255,255,0.45);line-height:1">Übung des Tages</div>
<div id="wj-exercise-val" style="font-size:var(--text-xs);font-weight:700;color:white;margin-top:3px;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis">Lade</div>
</div>
<svg class="ph-icon" style="width:.9rem;height:.9rem;color:rgba(255,255,255,0.35);flex-shrink:0">
<use href="/icons/phosphor.svg#arrow-right"></use></svg>
<span class="wj-chip-label">Streak</span>
<span class="wj-chip-val">${streakVal}</span>
</div>
<div class="wj-chip" data-wnav="routes">
<svg class="ph-icon" style="width:1.2rem;height:1.2rem;color:var(--c-primary)">
<use href="/icons/phosphor.svg#path"></use></svg>
<span class="wj-chip-label">Gassirunde</span>
<span class="wj-chip-val" id="wj-route-val"></span>
</div>
<div class="wj-chip" data-wnav="uebungen">
<svg class="ph-icon" style="width:1.2rem;height:1.2rem;color:var(--c-primary)">
<use href="/icons/phosphor.svg#barbell"></use></svg>
<span class="wj-chip-label">Übung</span>
<span class="wj-chip-val" id="wj-exercise-val"></span>
</div>
</div>` : ''}
</div>