1534 lines
72 KiB
JavaScript
1534 lines
72 KiB
JavaScript
/* ============================================================
|
|
BAN YARO — Drei Welten Navigation
|
|
JETZT | HUND | WELT — horizontales Swipe-System
|
|
============================================================ */
|
|
|
|
window.Worlds = (() => {
|
|
|
|
let _state = null;
|
|
let _cur = 1; // 0=JETZT 1=HUND 2=WELT
|
|
let _visible = false;
|
|
let _map = null;
|
|
let _weltInited = false;
|
|
let _lastUserId = undefined;
|
|
let _dogs = []; // gecachte Hundesliste
|
|
let _dogIdx = 0; // aktuell angezeigter Hund
|
|
let _hasBgPhoto = false; // Hintergrund-Foto vorhanden?
|
|
let _setupDone = false; // Swipe/Button-Listener nur einmal registrieren
|
|
|
|
// Touch-Tracking
|
|
const _t = { x:0, y:0, active:false, vert:null, moved:0 };
|
|
|
|
// ── OFFLINE-CACHE (localStorage) ────────────────────────────
|
|
// Letzten bekannten Zustand speichern → sofort zeigen, dann updaten
|
|
|
|
function _wSave(key, data) {
|
|
try { localStorage.setItem('w3_' + key, JSON.stringify({ ts: Date.now(), data })); } catch {}
|
|
}
|
|
function _wLoad(key) {
|
|
try {
|
|
const p = JSON.parse(localStorage.getItem('w3_' + key) || 'null');
|
|
return p ? { data: p.data, ageMin: Math.round((Date.now() - p.ts) / 60000) } : null;
|
|
} catch { return null; }
|
|
}
|
|
// API-Aufruf mit Cache-Fallback: sofort Cache, dann Netz
|
|
async function _cachedGet(cacheKey, path) {
|
|
const cached = _wLoad(cacheKey);
|
|
let fresh = null;
|
|
try {
|
|
fresh = await API.get(path);
|
|
_wSave(cacheKey, fresh);
|
|
} catch {}
|
|
return { data: fresh ?? cached?.data ?? null, fromCache: !fresh, ageMin: fresh ? 0 : (cached?.ageMin ?? null) };
|
|
}
|
|
|
|
// ── PUBLIC ──────────────────────────────────────────────────
|
|
|
|
async function init(appState) {
|
|
_state = appState;
|
|
_lastUserId = undefined; // Neurender erzwingen
|
|
_cur = 1;
|
|
if (!_setupDone) {
|
|
_setupDone = true;
|
|
_setupSwipe();
|
|
_setupButtons();
|
|
_showSwipeHints();
|
|
}
|
|
_goTo(_cur, false);
|
|
show();
|
|
}
|
|
|
|
function _showSwipeHints() {
|
|
if (localStorage.getItem('worlds_swipe_seen')) return;
|
|
localStorage.setItem('worlds_swipe_seen', '1');
|
|
const ov = document.getElementById('worlds-overlay');
|
|
if (!ov) return;
|
|
const hint = document.createElement('div');
|
|
hint.style.cssText = [
|
|
'position:absolute;inset:0;pointer-events:none;z-index:55',
|
|
'display:flex;align-items:center;justify-content:space-between',
|
|
'padding:0 8px;transition:opacity 1s ease',
|
|
].join(';');
|
|
const arrowStyle = `
|
|
display:flex;flex-direction:column;align-items:center;gap:4px;
|
|
background:rgba(0,0,0,0.42);backdrop-filter:blur(10px);
|
|
-webkit-backdrop-filter:blur(10px);
|
|
border:1px solid rgba(255,255,255,0.18);border-radius:14px;
|
|
padding:10px 10px;animation:worlds-pulse 1.2s ease infinite alternate;
|
|
`;
|
|
hint.innerHTML = `
|
|
<style>
|
|
@keyframes worlds-pulse {
|
|
from { opacity:0.75; transform:translateX(0); }
|
|
to { opacity:1; transform:translateX(-3px); }
|
|
}
|
|
.wsh-right { animation-name:worlds-pulse-r !important; }
|
|
@keyframes worlds-pulse-r {
|
|
from { opacity:0.75; transform:translateX(0); }
|
|
to { opacity:1; transform:translateX(3px); }
|
|
}
|
|
</style>
|
|
<div style="${arrowStyle}">
|
|
<svg style="width:20px;height:20px;color:white" viewBox="0 0 256 256">
|
|
<path fill="currentColor" d="M165.66 202.34a8 8 0 0 1-11.32 11.32l-80-80a8 8 0 0 1 0-11.32l80-80a8 8 0 0 1 11.32 11.32L91.31 128Z"/>
|
|
</svg>
|
|
<span style="font-size:8px;font-weight:800;letter-spacing:.12em;color:rgba(255,255,255,0.7);text-transform:uppercase">JETZT</span>
|
|
</div>
|
|
<div class="wsh-right" style="${arrowStyle}">
|
|
<svg style="width:20px;height:20px;color:white" viewBox="0 0 256 256">
|
|
<path fill="currentColor" d="M90.34 53.66a8 8 0 0 1 11.32-11.32l80 80a8 8 0 0 1 0 11.32l-80 80a8 8 0 0 1-11.32-11.32L164.69 128Z"/>
|
|
</svg>
|
|
<span style="font-size:8px;font-weight:800;letter-spacing:.12em;color:rgba(255,255,255,0.7);text-transform:uppercase">WELT</span>
|
|
</div>
|
|
`;
|
|
ov.appendChild(hint);
|
|
setTimeout(() => { hint.style.opacity = '0'; }, 2800);
|
|
setTimeout(() => hint.remove(), 3900);
|
|
}
|
|
|
|
function show(worldIdx) {
|
|
const ov = document.getElementById('worlds-overlay');
|
|
if (!ov) return;
|
|
ov.style.display = 'block';
|
|
requestAnimationFrame(() => ov.classList.add('worlds-visible'));
|
|
_visible = true;
|
|
document.getElementById('app-header')?.classList.add('worlds-hidden');
|
|
document.getElementById('bottom-nav')?.classList.add('worlds-hidden');
|
|
document.getElementById('worlds-back')?.classList.remove('worlds-back-visible');
|
|
if (worldIdx != null) _goTo(worldIdx, false);
|
|
if (_cur === 2 && !_weltInited) { _weltInited = true; _renderWelt(); }
|
|
|
|
// Nach Login/Logout: Config aus DB laden, dann rendern
|
|
const currentUserId = _state?.user?.id ?? null;
|
|
if (currentUserId !== _lastUserId) {
|
|
_lastUserId = currentUserId;
|
|
if (currentUserId) {
|
|
_loadConfigFromServer().then(() => { _renderJetzt(); _renderHund(); });
|
|
} else {
|
|
_cfgCache = null;
|
|
_renderJetzt();
|
|
_renderHund();
|
|
}
|
|
}
|
|
}
|
|
|
|
function hide() {
|
|
const ov = document.getElementById('worlds-overlay');
|
|
if (!ov) return;
|
|
ov.classList.remove('worlds-visible');
|
|
ov.style.display = 'none';
|
|
_visible = false;
|
|
document.getElementById('app-header')?.classList.remove('worlds-hidden');
|
|
document.getElementById('bottom-nav')?.classList.remove('worlds-hidden');
|
|
document.getElementById('worlds-back')?.classList.add('worlds-back-visible');
|
|
}
|
|
|
|
function navigateTo(pageId) {
|
|
hide();
|
|
if (window.App?.navigate) window.App.navigate(pageId);
|
|
}
|
|
|
|
// ── SWIPE ────────────────────────────────────────────────────
|
|
|
|
function _setupSwipe() {
|
|
const track = document.getElementById('worlds-track');
|
|
if (!track) return;
|
|
|
|
track.addEventListener('touchstart', e => {
|
|
_t.x = e.touches[0].clientX;
|
|
_t.y = e.touches[0].clientY;
|
|
_t.active = true; _t.vert = null; _t.moved = 0;
|
|
track.style.transition = 'none';
|
|
}, { passive: true });
|
|
|
|
track.addEventListener('touchmove', e => {
|
|
if (!_t.active) return;
|
|
const dx = e.touches[0].clientX - _t.x;
|
|
const dy = e.touches[0].clientY - _t.y;
|
|
if (_t.vert === null) _t.vert = Math.abs(dy) > Math.abs(dx) + 4;
|
|
if (_t.vert) return;
|
|
e.preventDefault();
|
|
// Nicht über erste/letzte Seite hinausziehen
|
|
const cdx = _cur === 0 ? Math.min(0, dx) : _cur === 2 ? Math.max(0, dx) : dx;
|
|
_t.moved = cdx;
|
|
const base = -_cur * (100 / 3);
|
|
track.style.transform = `translateX(calc(${base}% + ${cdx}px))`;
|
|
}, { passive: false });
|
|
|
|
track.addEventListener('touchend', () => {
|
|
if (!_t.active || _t.vert) { _t.active = false; return; }
|
|
_t.active = false;
|
|
let next = _cur;
|
|
if (_t.moved < -55 && _cur < 2) next = _cur + 1;
|
|
else if (_t.moved > 55 && _cur > 0) next = _cur - 1;
|
|
_goTo(next, true);
|
|
if (next === 2 && !_weltInited) { _weltInited = true; _renderWelt(); }
|
|
});
|
|
|
|
// Mausrad-Navigation (Desktop)
|
|
let _wheelCooldown = false;
|
|
track.addEventListener('wheel', e => {
|
|
e.preventDefault();
|
|
if (_wheelCooldown) return;
|
|
const next = e.deltaX > 30 || e.deltaY > 30 ? Math.min(2, _cur + 1)
|
|
: e.deltaX < -30 || e.deltaY < -30 ? Math.max(0, _cur - 1)
|
|
: _cur;
|
|
if (next === _cur) return;
|
|
_wheelCooldown = true;
|
|
setTimeout(() => { _wheelCooldown = false; }, 500);
|
|
_goTo(next, true);
|
|
if (next === 2 && !_weltInited) { _weltInited = true; _renderWelt(); }
|
|
}, { passive: false });
|
|
}
|
|
|
|
function _goTo(idx, animated) {
|
|
_cur = Math.max(0, Math.min(2, idx));
|
|
const track = document.getElementById('worlds-track');
|
|
if (!track) return;
|
|
track.style.transition = animated
|
|
? 'transform 0.32s cubic-bezier(0.25, 0.46, 0.45, 0.94)'
|
|
: 'none';
|
|
track.style.transform = `translateX(${-_cur * (100 / 3)}%)`;
|
|
_updateDots();
|
|
_updateFab();
|
|
// Karte neu rendern nachdem Transition abgeschlossen
|
|
if (_cur === 2 && _map) {
|
|
setTimeout(() => _map.invalidateSize(), animated ? 380 : 50);
|
|
}
|
|
}
|
|
|
|
function _updateDots() {
|
|
document.querySelectorAll('.wdot').forEach((d, i) => d.classList.toggle('active', i === _cur));
|
|
document.querySelectorAll('.wlabel').forEach((l, i) => l.classList.toggle('active', i === _cur));
|
|
}
|
|
|
|
function _fabOptions() {
|
|
const worldNames = ['jetzt', 'hund', 'welt'];
|
|
const chips = _chipsForWorld(worldNames[_cur]);
|
|
const opts = [];
|
|
for (const chip of chips) {
|
|
if (chip.fab) for (const o of chip.fab) { if (opts.length < 6) opts.push(o); }
|
|
}
|
|
return opts;
|
|
}
|
|
|
|
function _updateFab() {
|
|
const fab = document.getElementById('worlds-fab');
|
|
if (!fab) return;
|
|
const opts = _fabOptions();
|
|
if (!opts.length) { fab.style.display = 'none'; return; }
|
|
fab.style.display = '';
|
|
fab.querySelector('use')?.setAttribute('href', `/icons/phosphor.svg#paw-print`);
|
|
fab.title = 'Schnellaktion';
|
|
}
|
|
|
|
function _setupButtons() {
|
|
document.getElementById('worlds-fab')?.addEventListener('click', _openFab);
|
|
document.getElementById('worlds-back')?.addEventListener('click', () => {
|
|
if (_state?.user) show();
|
|
else if (window.App) window.App.navigate('welcome');
|
|
});
|
|
document.querySelectorAll('.wdot').forEach((dot, i) => {
|
|
dot.style.pointerEvents = 'auto';
|
|
dot.addEventListener('click', () => {
|
|
_goTo(i, true);
|
|
if (i === 2 && !_weltInited) { _weltInited = true; _renderWelt(); }
|
|
});
|
|
});
|
|
document.querySelectorAll('.wlabel').forEach((lbl, i) => {
|
|
lbl.style.pointerEvents = 'auto';
|
|
lbl.style.cursor = 'pointer';
|
|
lbl.addEventListener('click', () => {
|
|
_goTo(i, true);
|
|
if (i === 2 && !_weltInited) { _weltInited = true; _renderWelt(); }
|
|
});
|
|
});
|
|
}
|
|
|
|
function _openFab() {
|
|
const options = _fabOptions();
|
|
|
|
const meldenPages = new Set(['poison','lost','recalls','map']);
|
|
const meldenCount = options.filter(o => meldenPages.has(o.page)).length;
|
|
const title = meldenCount > options.length / 2 ? 'Was möchtest du melden?' : 'Was möchtest du eintragen?';
|
|
|
|
const ov = document.createElement('div');
|
|
ov.id = 'fab-overlay';
|
|
ov.className = 'w3-sheet-overlay';
|
|
ov.innerHTML = `
|
|
<div id="fab-backdrop" class="w3-backdrop"></div>
|
|
<div class="w3-sheet-panel">
|
|
<div class="w3-sheet-header">
|
|
<div class="w3-sheet-title">${options.length ? title : 'Schnellzugriff'}</div>
|
|
<button id="fab-close" class="w3-close-btn">
|
|
<svg class="ph-icon" style="width:14px;height:14px"><use href="/icons/phosphor.svg#x"></use></svg>
|
|
</button>
|
|
</div>
|
|
<div style="display:flex;flex-direction:column;gap:10px">
|
|
${options.map(o => `
|
|
<button class="fab-option w3-fab-option" data-page="${o.page}" data-action="${o.action || ''}">
|
|
<div class="w3-icon-dot" style="background:${o.color}18">
|
|
<svg class="ph-icon" style="width:1.2rem;height:1.2rem;color:${o.color}">
|
|
<use href="/icons/phosphor.svg#${o.icon}"></use>
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<div style="font-size:var(--text-sm);font-weight:700">${o.label}</div>
|
|
<div style="font-size:var(--text-xs);color:var(--c-text-secondary);margin-top:2px">${o.sub}</div>
|
|
</div>
|
|
</button>
|
|
`).join('')}
|
|
</div>
|
|
<button id="fab-all-btn" class="w3-all-btn" style="margin-top:${options.length ? '14px' : '0'}">
|
|
<svg class="ph-icon" style="width:16px;height:16px"><use href="/icons/phosphor.svg#squares-four"></use></svg>
|
|
Weitere Funktionen
|
|
</button>
|
|
</div>
|
|
`;
|
|
|
|
document.body.appendChild(ov);
|
|
|
|
const _close = () => ov.remove();
|
|
ov.querySelector('#fab-backdrop').addEventListener('click', _close);
|
|
ov.querySelector('#fab-close').addEventListener('click', _close);
|
|
ov.querySelector('#fab-all-btn').addEventListener('click', () => { _close(); _openAllChips(); });
|
|
ov.querySelectorAll('.fab-option').forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
_close();
|
|
const page = btn.dataset.page;
|
|
const action = btn.dataset.action;
|
|
if (action === 'quickGassi') {
|
|
_openQuickGassi();
|
|
return;
|
|
}
|
|
navigateTo(page);
|
|
if (action === 'openNew') {
|
|
setTimeout(() => window.App?.callModule?.(page, 'openNew'), 400);
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
function _openAllChips() {
|
|
const worldNames = ['jetzt', 'hund', 'welt'];
|
|
const worldLabels = { jetzt: 'JETZT', hund: 'HUND', welt: 'WELT' };
|
|
|
|
// Alle Seiten die aktuell in irgendeiner Welt konfiguriert sind
|
|
const cfg = _getConfig();
|
|
const configured = new Set(worldNames.flatMap(w => cfg[w] || []));
|
|
|
|
const sections = worldNames.map(w => {
|
|
const chips = (_DEFAULT_CONFIG[w] || []).map(_chipMeta)
|
|
.filter(c => c && _chipAllowed(c) && !configured.has(c.page));
|
|
if (!chips.length) return '';
|
|
return `
|
|
<div style="margin-bottom:20px">
|
|
<div class="w3-section-label">${worldLabels[w]}</div>
|
|
<div style="display:grid;grid-template-columns:repeat(4,1fr);gap:8px">
|
|
${chips.map(c => `
|
|
<button class="all-chip-btn w3-chip-btn" data-page="${c.page}">
|
|
<svg class="ph-icon" style="width:1.4rem;height:1.4rem;color:var(--c-primary)">
|
|
<use href="/icons/phosphor.svg#${c.icon}"></use>
|
|
</svg>
|
|
<span class="w3-chip-label">${c.label}</span>
|
|
</button>
|
|
`).join('')}
|
|
</div>
|
|
</div>
|
|
`;
|
|
}).join('');
|
|
|
|
const ov = document.createElement('div');
|
|
ov.id = 'fab-overlay';
|
|
ov.className = 'w3-sheet-overlay';
|
|
ov.innerHTML = `
|
|
<div id="fab-backdrop" class="w3-backdrop"></div>
|
|
<div class="w3-sheet-panel w3-sheet-panel--scroll">
|
|
<div class="w3-sheet-header w3-sheet-header--mb20">
|
|
<div class="w3-sheet-title">Ausgeblendete Funktionen</div>
|
|
<button id="fab-close" class="w3-close-btn">
|
|
<svg class="ph-icon" style="width:14px;height:14px"><use href="/icons/phosphor.svg#x"></use></svg>
|
|
</button>
|
|
</div>
|
|
${sections || `<div style="text-align:center;padding:24px 0;color:var(--c-text-secondary);font-size:var(--text-sm)">
|
|
Alle Funktionen sind bereits in deinen Welten sichtbar.
|
|
</div>`}
|
|
</div>
|
|
`;
|
|
|
|
document.body.appendChild(ov);
|
|
|
|
const _close = () => ov.remove();
|
|
ov.querySelector('#fab-backdrop').addEventListener('click', _close);
|
|
ov.querySelector('#fab-close').addEventListener('click', _close);
|
|
ov.querySelectorAll('.all-chip-btn').forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
_close();
|
|
navigateTo(btn.dataset.page);
|
|
});
|
|
});
|
|
}
|
|
|
|
// ── SCHNELL-GASSI ─────────────────────────────────────────────
|
|
|
|
async function _openQuickGassi() {
|
|
const dog = _dogs[_dogIdx] || null;
|
|
if (!dog) {
|
|
UI.toast?.error('Kein Hund gefunden. Bitte zuerst ein Profil anlegen.');
|
|
navigateTo('dog-profile');
|
|
return;
|
|
}
|
|
|
|
// Wetter aus Cache holen (kein Wait nötig)
|
|
let weatherData = null;
|
|
try {
|
|
const wc = _wLoad('weather');
|
|
if (wc?.data) weatherData = wc.data;
|
|
} catch {}
|
|
|
|
let selectedMin = 30;
|
|
const durations = [15, 30, 45, 60];
|
|
|
|
const ov = document.createElement('div');
|
|
ov.id = 'quick-gassi-overlay';
|
|
ov.className = 'w3-sheet-overlay';
|
|
ov.style.zIndex = '400';
|
|
|
|
const weatherLine = weatherData
|
|
? `<div style="font-size:var(--text-xs);color:var(--c-text-secondary);margin-top:6px">
|
|
🌡 ${Math.round(weatherData.temp_c)}° · ${_esc(weatherData.desc?.split(' ')[0] || '')}
|
|
</div>` : '';
|
|
|
|
ov.innerHTML = `
|
|
<div id="qg-backdrop" class="w3-backdrop" style="background:rgba(0,0,0,0.6);backdrop-filter:blur(3px)"></div>
|
|
<div class="w3-sheet-panel" style="padding:24px 16px calc(env(safe-area-inset-bottom,16px) + 20px)">
|
|
<div class="w3-sheet-header w3-sheet-header--mb20">
|
|
<div>
|
|
<div class="w3-sheet-title">🐾 Schnell-Gassi</div>
|
|
<div style="font-size:var(--text-xs);color:var(--c-text-secondary);margin-top:2px">
|
|
${_esc(dog.name)} · ohne GPS
|
|
</div>
|
|
${weatherLine}
|
|
</div>
|
|
<button id="qg-close" class="w3-close-btn--lg">
|
|
<svg class="ph-icon" style="width:16px;height:16px"><use href="/icons/phosphor.svg#x"></use></svg>
|
|
</button>
|
|
</div>
|
|
|
|
<div style="font-size:var(--text-sm);font-weight:600;margin-bottom:10px">Dauer</div>
|
|
<div style="display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:24px">
|
|
${durations.map(d => `
|
|
<button class="qg-dur w3-dur-btn${d === selectedMin ? ' active' : ''}" data-min="${d}">
|
|
${d} min
|
|
</button>
|
|
`).join('')}
|
|
</div>
|
|
|
|
<button id="qg-submit" class="w3-submit-btn">
|
|
<svg class="ph-icon" style="width:1.2rem;height:1.2rem"><use href="/icons/phosphor.svg#check"></use></svg>
|
|
Eintragen
|
|
</button>
|
|
</div>
|
|
`;
|
|
|
|
document.body.appendChild(ov);
|
|
|
|
const _close = () => ov.remove();
|
|
ov.querySelector('#qg-backdrop').addEventListener('click', _close);
|
|
ov.querySelector('#qg-close').addEventListener('click', _close);
|
|
|
|
// Dauer-Toggle
|
|
ov.querySelectorAll('.qg-dur').forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
selectedMin = parseInt(btn.dataset.min);
|
|
ov.querySelectorAll('.qg-dur').forEach(b => {
|
|
b.classList.toggle('active', parseInt(b.dataset.min) === selectedMin);
|
|
});
|
|
});
|
|
});
|
|
|
|
// Eintragen
|
|
ov.querySelector('#qg-submit').addEventListener('click', async () => {
|
|
const submitBtn = ov.querySelector('#qg-submit');
|
|
submitBtn.disabled = true;
|
|
submitBtn.textContent = 'Wird eingetragen…';
|
|
|
|
try {
|
|
// Kein Tagebucheintrag — nur Streak pingen
|
|
await API.post(`/streak/${dog.id}/ping`);
|
|
_close();
|
|
UI.toast?.success(`Gassi eingetragen! ${selectedMin} min 🐾`);
|
|
// Streak-Cache invalidieren
|
|
try { localStorage.removeItem('w3_streak_' + dog.id); } catch {}
|
|
// JETZT-Welt neu rendern für aktuellen Streak
|
|
setTimeout(() => _renderJetzt(), 300);
|
|
} catch (err) {
|
|
submitBtn.disabled = false;
|
|
submitBtn.innerHTML = '<svg class="ph-icon" style="width:1.2rem;height:1.2rem"><use href="/icons/phosphor.svg#check"></use></svg> Eintragen';
|
|
UI.toast?.error('Fehler beim Eintragen. Bitte erneut versuchen.');
|
|
}
|
|
});
|
|
}
|
|
|
|
// ── CHIP-KONFIGURATION ──────────────────────────────────────
|
|
// Alle verfügbaren Chips mit Metadaten
|
|
|
|
const _ALL_CHIPS = [
|
|
{ icon:'note-pencil', label:'Notizblock', page:'notes', pro: true,
|
|
fab:[{ icon:'note-pencil', color:'#10B981', label:'Neue Notiz', sub:'Schnellnotiz erstellen', page:'notes', action:'openNew' }] },
|
|
{ icon:'currency-eur', label:'Ausgaben', page:'expenses',
|
|
fab:[{ icon:'currency-eur', color:'#3B82F6', label:'Ausgabe eintragen', sub:'Einmalig oder Dauerauftrag', page:'expenses', action:'openNew' }] },
|
|
{ icon:'first-aid', label:'Erste Hilfe', page:'erste-hilfe' },
|
|
{ icon:'handshake', label:'Playdate', page:'playdate', pro: true,
|
|
fab:[{ icon:'handshake', color:'#F59E0B', label:'Playdate anfragen', sub:'Treffen mit anderen Hunden', page:'playdate', action:'openNew' }] },
|
|
{ icon:'chat-circle-dots', label:'Nachrichten', page:'chat', pro: true },
|
|
{ icon:'sun', label:'Wetter', page:'wetter' },
|
|
|
|
{ icon:'book-open', label:'Tagebuch', page:'diary',
|
|
fab:[{ icon:'book-open', color:'#8B5CF6', label:'Tagebucheintrag', sub:'Erlebnis, Foto oder Notiz', page:'diary', action:'openNew' }] },
|
|
{ icon:'heartbeat', label:'Gesundheit', page:'health',
|
|
fab:[{ icon:'heartbeat', color:'#EF4444', label:'Tierarztbesuch', sub:'Befund oder Impfung eintragen', page:'health' },
|
|
{ icon:'wave-sine', color:'#06B6D4', label:'Gewicht messen', sub:'Aktuelles Gewicht eintragen', page:'health' }] },
|
|
{ icon:'target', label:'Übungen', page:'uebungen',
|
|
fab:[{ icon:'target', color:'#F59E0B', label:'Training aufzeichnen', sub:'Übung absolviert', page:'uebungen' }] },
|
|
{ icon:'list-checks', label:'Trainingspläne', page:'trainingsplaene',
|
|
fab:[{ icon:'list-checks', color:'#10B981', label:'Plan erstellen', sub:'Neuen Trainingsplan anlegen', page:'trainingsplaene', action:'openNew' }] },
|
|
{ icon:'heart', label:'Adoption', page:'adoption',
|
|
fab:[{ icon:'heart', color:'#EF4444', label:'Hund anbieten', sub:'Zur Adoption freigeben', page:'adoption', action:'openNew' }] },
|
|
{ icon:'house-line', label:'Sitting', page:'sitting',
|
|
fab:[{ icon:'house-line', color:'#8B5CF6', label:'Sitter anfragen', sub:'Betreuung buchen', page:'sitting', action:'openNew' }] },
|
|
{ icon:'books', label:'Wiki', page:'wiki' },
|
|
{ icon:'scales', label:'Wurfbörse', page:'wurfboerse' },
|
|
{ icon:'map-trifold', label:'Karte', page:'map',
|
|
fab:[{ icon:'map-pin', color:'#10B981', label:'Ort vorschlagen', sub:'Neuen POI auf der Karte', page:'map' }] },
|
|
{ icon:'push-pin', label:'Forum', page:'forum',
|
|
fab:[{ icon:'push-pin', color:'#8B5CF6', label:'Forum-Beitrag', sub:'Thema oder Frage erstellen', page:'forum', action:'openNew' }] },
|
|
{ icon:'users', label:'Freunde', page:'friends', pro: true,
|
|
fab:[{ icon:'users', color:'#3B82F6', label:'Freund einladen', sub:'Per Link einladen', page:'friends', action:'openNew' }] },
|
|
{ icon:'paw-print', label:'Gassi', page:'walks', pro: true,
|
|
fab:[{ icon:'paw-print', color:'#F59E0B', label:'Gassirunde', sub:'Neue Runde starten', page:'walks', action:'openNew' },
|
|
{ icon:'paw-print', color:'#10B981', label:'Schnell-Gassi', sub:'Kurze Runde ohne GPS eintragen', page:'walks', action:'quickGassi' }] },
|
|
{ icon:'skull', label:'Giftköder', page:'poison',
|
|
fab:[{ icon:'skull', color:'#EF4444', label:'Giftköder melden', sub:'Warnung für andere Hundebesitzer', page:'poison' }] },
|
|
{ icon:'warning-circle', label:'Rückrufe', page:'recalls',
|
|
fab:[{ icon:'warning-circle', color:'#EF4444', label:'Rückruf melden', sub:'Produkt oder Futter', page:'recalls', action:'openNew' }] },
|
|
{ icon:'dog', label:'Verlorene', page:'lost',
|
|
fab:[{ icon:'dog', color:'#3B82F6', label:'Verlorenen melden', sub:'Hilf beim Wiederfinden', page:'lost' }] },
|
|
{ icon:'path', label:'Routen', page:'routes',
|
|
fab:[{ icon:'path', color:'#10B981', label:'Route aufzeichnen', sub:'GPS-Tracking starten', page:'routes', action:'openNew' }] },
|
|
{ icon:'calendar-dots', label:'Events', page:'events',
|
|
fab:[{ icon:'calendar-dots', color:'#06B6D4', label:'Event erstellen', sub:'Veranstaltung ankündigen', page:'events', action:'openNew' }] },
|
|
{ icon:'sparkle', label:'Jobs', page:'jobs' },
|
|
{ icon:'book-open', label:'Knigge', page:'knigge' },
|
|
{ icon:'film-slate', label:'Filme', page:'movies' },
|
|
{ icon:'tree-structure', label:'Zuchtkartei', page:'zuchthunde', role:'breeder',
|
|
fab:[{ icon:'tree-structure', color:'#8B5CF6', label:'Zuchthund eintragen', sub:'Neuen Hund anlegen', page:'zuchthunde', action:'openNew' }] },
|
|
{ icon:'notebook', label:'Wurfverw.', page:'litters', role:'breeder',
|
|
fab:[{ icon:'notebook', color:'#10B981', label:'Wurf anlegen', sub:'Neuen Wurf eintragen', page:'litters', action:'openNew' }] },
|
|
{ icon:'sparkle', label:'Social', page:'social', role:'social',
|
|
fab:[{ icon:'sparkle', color:'#EC4899', label:'Social-Post', sub:'Beitrag erstellen', page:'social', action:'openNew' }] },
|
|
{ icon:'shield-check', label:'Moderation', page:'moderation', role:'mod' },
|
|
{ icon:'gear', label:'Admin', page:'admin', role:'admin' },
|
|
// ── NEUE FEATURES ────────────────────────────────────────────
|
|
{ icon:'fork-knife', label:'Ernährung', page:'ernaehrung', pro: true,
|
|
fab:[{ icon:'fork-knife', color:'#F97316', label:'Futter-Tagebuch', sub:'Mahlzeit oder Futtercheck', page:'ernaehrung' }] },
|
|
{ icon:'airplane', label:'Reise', page:'reise', pro: true },
|
|
{ icon:'smiley', label:'Persönlichkeit', page:'personality' },
|
|
];
|
|
|
|
const _DEFAULT_CONFIG = {
|
|
jetzt: ['notes','expenses','erste-hilfe','playdate','chat','wetter','social','moderation','admin'],
|
|
hund: ['diary','health','uebungen','trainingsplaene','adoption','sitting','wiki','wurfboerse',
|
|
'litters','zuchthunde','ernaehrung','personality'],
|
|
welt: ['map','forum','friends','walks','poison','recalls','lost','routes','events',
|
|
'jobs','knigge','movies','reise'],
|
|
};
|
|
|
|
// _cfgCache: wird beim Init aus DB geladen, Fallback localStorage → Default
|
|
let _cfgCache = null;
|
|
|
|
async function _loadConfigFromServer() {
|
|
try {
|
|
const res = await API.get('/profile/world-config');
|
|
if (res?.config) {
|
|
_cfgCache = res.config;
|
|
try { localStorage.setItem('world_chips', JSON.stringify(_cfgCache)); } catch {}
|
|
return;
|
|
}
|
|
// Noch nichts in DB: lokale Config hochladen (einmalige Migration)
|
|
const local = (() => { try { return JSON.parse(localStorage.getItem('world_chips') || 'null'); } catch { return null; } })();
|
|
if (local) {
|
|
_cfgCache = local;
|
|
API.put('/profile/world-config', { config: local }).catch(() => {});
|
|
return;
|
|
}
|
|
} catch {}
|
|
// Fallback: localStorage → Default
|
|
try { _cfgCache = JSON.parse(localStorage.getItem('world_chips') || 'null') || _DEFAULT_CONFIG; }
|
|
catch { _cfgCache = _DEFAULT_CONFIG; }
|
|
}
|
|
|
|
function _getConfig() {
|
|
return _cfgCache || _DEFAULT_CONFIG;
|
|
}
|
|
|
|
function _saveConfig(cfg) {
|
|
_cfgCache = cfg;
|
|
try { localStorage.setItem('world_chips', JSON.stringify(cfg)); } catch {}
|
|
if (_state?.user) {
|
|
API.put('/profile/world-config', { config: cfg }).catch(() => {});
|
|
}
|
|
}
|
|
function _chipMeta(page) {
|
|
return _ALL_CHIPS.find(c => c.page === page) || null;
|
|
}
|
|
function _chipAllowed(chip) {
|
|
const u = _state?.user;
|
|
const tier = u?.subscription_tier || 'standard';
|
|
const isTest = tier.endsWith('_test');
|
|
|
|
// Pro-Chips: komplett ausblenden wenn kein Zugriff
|
|
if (chip.pro) {
|
|
if (!u) return false;
|
|
if (isTest) return ['pro_test','breeder_test'].includes(tier);
|
|
if (u.rolle === 'admin' || u.rolle === 'moderator') return true;
|
|
if (u.is_moderator || u.is_social_media) return true;
|
|
return ['pro','breeder'].includes(tier);
|
|
}
|
|
|
|
// Role-Checks (hart — komplett ausblenden)
|
|
if (!chip?.role) return true;
|
|
if (chip.role === 'breeder') {
|
|
if (isTest) return tier === 'breeder_test';
|
|
return u?.rolle === 'breeder' || u?.rolle === 'admin';
|
|
}
|
|
if (chip.role === 'social') return u?.is_social_media || u?.rolle === 'admin';
|
|
if (chip.role === 'mod') return u?.rolle === 'admin' || u?.rolle === 'moderator' || u?.is_moderator;
|
|
if (chip.role === 'admin') return u?.rolle === 'admin';
|
|
return true;
|
|
}
|
|
|
|
// Gibt true zurück wenn User vollen Pro-Zugriff hat
|
|
function _hasProAccess() {
|
|
const u = _state?.user;
|
|
if (!u) return false;
|
|
const tier = u.subscription_tier || 'standard';
|
|
if (tier.endsWith('_test')) return ['pro_test','breeder_test'].includes(tier);
|
|
if (u.rolle === 'admin' || u.rolle === 'moderator') return true;
|
|
if (u.is_moderator || u.is_social_media) return true;
|
|
return ['pro','breeder'].includes(tier);
|
|
}
|
|
|
|
function _chipsForWorld(world) {
|
|
const pages = _getConfig()[world] || _DEFAULT_CONFIG[world];
|
|
// Alle Chips filtern — _chipAllowed entscheidet ob angezeigt
|
|
const chips = pages.map(_chipMeta).filter(c => c && _chipAllowed(c));
|
|
// Sicherheitsnetz: Rolle-gebundene Chips aus Default einfügen wenn berechtigt
|
|
// (aber noch nicht in persönlicher Config) — _chipAllowed() entscheidet für alle
|
|
const alreadyIn = new Set(chips.map(c => c.page));
|
|
for (const page of (_DEFAULT_CONFIG[world] || [])) {
|
|
if (alreadyIn.has(page)) continue;
|
|
const meta = _chipMeta(page);
|
|
if (!meta?.role) continue; // nur role-gebundene Chips
|
|
if (_chipAllowed(meta)) { chips.push(meta); alreadyIn.add(page); }
|
|
}
|
|
return chips;
|
|
}
|
|
|
|
// ── KONFIGURATIONS-MODAL ─────────────────────────────────────
|
|
|
|
function _openConfigModal() {
|
|
let cfg = JSON.parse(JSON.stringify(_getConfig())); // deep copy
|
|
let _drag = null; // { page, fromWorld, ghost }
|
|
|
|
const worldColors = { jetzt:'rgba(196,132,58,0.6)', hund:'rgba(196,132,58,0.8)', welt:'rgba(99,130,220,0.6)' };
|
|
const worldLabels = { jetzt:'JETZT', hund:'HUND', welt:'WELT', pool:'Nicht verwendet' };
|
|
const allAssigned = () => new Set([...cfg.jetzt, ...cfg.hund, ...cfg.welt]);
|
|
const poolChips = () => _ALL_CHIPS.filter(c => _chipAllowed(c) && !allAssigned().has(c.page) && !c.pinned);
|
|
|
|
const bottomNav = document.getElementById('bottom-nav');
|
|
if (bottomNav) bottomNav.style.display = 'none';
|
|
|
|
const ov = document.createElement('div');
|
|
ov.id = 'wc-overlay';
|
|
ov.style.cssText = 'position:fixed;inset:0;z-index:500;display:flex;flex-direction:column;justify-content:flex-end';
|
|
document.body.appendChild(ov);
|
|
|
|
const _removeDragListeners = () => {
|
|
document.removeEventListener('touchmove', _onDragMove);
|
|
document.removeEventListener('touchend', _onDragEnd);
|
|
document.removeEventListener('touchcancel', _onDragEnd);
|
|
};
|
|
const _cancelDrag = () => {
|
|
if (!_drag) return;
|
|
_removeDragListeners();
|
|
_drag.ghost?.remove();
|
|
if (_drag.chipEl) _drag.chipEl.style.opacity = '';
|
|
ov.querySelectorAll('.wc-zone').forEach(z => z.style.borderColor = 'transparent');
|
|
_drag = null;
|
|
};
|
|
|
|
const _closeModal = () => {
|
|
_cancelDrag(); // laufenden Drag abbrechen
|
|
ov.remove();
|
|
if (bottomNav) bottomNav.style.removeProperty('display');
|
|
};
|
|
|
|
function _render() {
|
|
ov.innerHTML = `
|
|
<div id="wc-bg" style="position:absolute;inset:0;background:rgba(0,0,0,0.7);backdrop-filter:blur(4px)"></div>
|
|
<div id="wc-sheet" style="position:relative;z-index:1;background:rgba(18,22,32,0.97);border-radius:24px 24px 0 0;
|
|
max-height:92vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
|
|
padding:0 0 calc(env(safe-area-inset-bottom,16px)+16px)">
|
|
<!-- Header -->
|
|
<div style="display:flex;align-items:center;justify-content:space-between;
|
|
padding:20px 20px 16px;position:sticky;top:0;background:rgba(18,22,32,0.97);
|
|
border-bottom:1px solid rgba(255,255,255,0.1);z-index:2">
|
|
<button id="wc-cancel" style="background:none;border:none;color:rgba(255,255,255,0.5);
|
|
cursor:pointer;font-size:var(--text-sm);padding:8px">Abbrechen</button>
|
|
<div style="font-size:var(--text-base);font-weight:700;color:white">Welten einrichten</div>
|
|
<button id="wc-save" style="background:var(--c-primary);color:white;border:none;
|
|
border-radius:999px;padding:7px 16px;cursor:pointer;font-weight:700;
|
|
font-size:var(--text-sm)">Fertig</button>
|
|
</div>
|
|
<!-- Hinweis + Reset -->
|
|
<div style="padding:10px 20px 6px;display:flex;align-items:center;justify-content:space-between;gap:12px">
|
|
<div style="font-size:var(--text-xs);color:rgba(255,255,255,0.4);flex:1">
|
|
Lang drücken & ziehen zum Verschieben. ✕ zum Entfernen.
|
|
</div>
|
|
<button id="wc-reset" style="background:none;border:1px solid rgba(255,255,255,0.2);
|
|
color:rgba(255,255,255,0.5);border-radius:999px;padding:5px 12px;
|
|
cursor:pointer;font-size:11px;white-space:nowrap;flex-shrink:0">
|
|
Zurücksetzen
|
|
</button>
|
|
</div>
|
|
${['jetzt','hund','welt','pool'].map(w => {
|
|
const chips = w === 'pool' ? poolChips() : (cfg[w] || []).map(_chipMeta).filter(c => c && _chipAllowed(c));
|
|
const col = worldColors[w] || 'var(--c-border)';
|
|
return `
|
|
<div style="padding:12px 14px 6px">
|
|
<div style="font-size:10px;font-weight:800;letter-spacing:.1em;color:rgba(255,255,255,0.5);
|
|
margin-bottom:8px;display:flex;align-items:center;gap:8px">
|
|
<span style="display:inline-block;width:12px;height:12px;border-radius:50%;
|
|
background:${col}"></span>
|
|
${worldLabels[w]}
|
|
${w !== 'pool' ? `<span style="opacity:.5">(${chips.length})</span>` : ''}
|
|
</div>
|
|
<div class="wc-zone" data-zone="${w}"
|
|
style="display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:80px;gap:8px;
|
|
min-height:${w==='pool'&&chips.length===0?'40px':'auto'};
|
|
border:2px dashed transparent;border-radius:16px;padding:4px;
|
|
transition:border-color .2s">
|
|
${chips.map(c => `
|
|
<div class="wc-chip" data-page="${c.page}" data-zone="${w}"
|
|
style="background:rgba(38,46,62,0.95);border:1.5px solid ${col};
|
|
border-radius:16px;padding:10px 4px 8px;height:80px;box-sizing:border-box;
|
|
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
|
|
cursor:grab;position:relative;min-width:0;overflow:hidden;
|
|
user-select:none;-webkit-tap-highlight-color:transparent;touch-action:none">
|
|
${!c.pinned ? `
|
|
<button class="wc-remove" data-page="${c.page}" data-zone="${w}"
|
|
style="position:absolute;top:-10px;right:-10px;width:30px;height:30px;
|
|
border-radius:50%;background:#EF4444;border:3px solid rgba(18,22,32,0.95);
|
|
cursor:pointer;display:flex;align-items:center;justify-content:center;
|
|
z-index:2;box-shadow:0 2px 8px rgba(0,0,0,0.7)">
|
|
<svg class="ph-icon" style="width:17px;height:17px;color:white;stroke:white;stroke-width:1.5">
|
|
<use href="/icons/phosphor.svg#x"></use>
|
|
</svg>
|
|
</button>` : `
|
|
<div style="position:absolute;top:-4px;right:-4px;width:14px;height:14px;
|
|
border-radius:50%;background:rgba(196,132,58,0.9);
|
|
display:flex;align-items:center;justify-content:center"
|
|
title="Immer sichtbar">
|
|
<svg class="ph-icon" style="width:8px;height:8px;color:white">
|
|
<use href="/icons/phosphor.svg#lock-simple"></use>
|
|
</svg>
|
|
</div>`}
|
|
<svg class="ph-icon" style="width:1.4rem;height:1.4rem;color:white;flex-shrink:0">
|
|
<use href="/icons/phosphor.svg#${c.icon}"></use>
|
|
</svg>
|
|
<span style="font-size:9px;font-weight:600;color:rgba(255,255,255,0.9);
|
|
line-height:1.2;text-align:center;width:100%;
|
|
overflow:hidden;display:-webkit-box;
|
|
-webkit-line-clamp:2;-webkit-box-orient:vertical;
|
|
padding:0 2px">${c.label.replace('\n','<br>')}</span>
|
|
</div>
|
|
`).join('')}
|
|
${chips.length === 0 ? `<div style="grid-column:1/-1;text-align:center;
|
|
font-size:var(--text-xs);color:rgba(255,255,255,0.35);padding:12px">
|
|
${w==='pool'?'Alle Chips sind zugeordnet':'Leer — ziehe Chips hierher'}
|
|
</div>` : ''}
|
|
</div>
|
|
</div>
|
|
`;
|
|
}).join('')}
|
|
</div>
|
|
`;
|
|
_bindEvents();
|
|
}
|
|
|
|
function _bindEvents() {
|
|
ov.querySelector('#wc-bg')?.addEventListener('click', _closeModal);
|
|
ov.querySelector('#wc-cancel')?.addEventListener('click', _closeModal);
|
|
ov.querySelector('#wc-reset')?.addEventListener('click', () => {
|
|
cfg = JSON.parse(JSON.stringify(_DEFAULT_CONFIG));
|
|
_render();
|
|
});
|
|
ov.querySelector('#wc-save')?.addEventListener('click', () => {
|
|
_saveConfig(cfg);
|
|
_closeModal();
|
|
_renderJetzt(); _renderHund(); _renderWelt();
|
|
});
|
|
|
|
// Remove-Buttons
|
|
ov.querySelectorAll('.wc-remove').forEach(btn => {
|
|
btn.addEventListener('click', e => {
|
|
e.stopPropagation();
|
|
const page = btn.dataset.page, zone = btn.dataset.zone;
|
|
const meta = _chipMeta(page);
|
|
if (meta?.pinned) return; // gepinnte Chips können nicht entfernt werden
|
|
if (zone !== 'pool') cfg[zone] = cfg[zone].filter(p => p !== page);
|
|
_render();
|
|
});
|
|
});
|
|
|
|
// Touch-Drag
|
|
ov.querySelectorAll('.wc-chip').forEach(chip => {
|
|
chip.addEventListener('touchstart', e => _onDragStart(e, chip), { passive: true });
|
|
});
|
|
document.addEventListener('touchmove', _onDragMove, { passive: false });
|
|
document.addEventListener('touchend', _onDragEnd);
|
|
}
|
|
|
|
function _onDragStart(e, chipEl) {
|
|
if (_drag) _cancelDrag();
|
|
const touch = e.touches[0];
|
|
// Drag erst nach Bewegungs-Threshold aktivieren (verhindert Scroll-Konflikte)
|
|
_drag = {
|
|
page: chipEl.dataset.page, zone: chipEl.dataset.zone,
|
|
chipEl, ghost: null, dropZone: null, active: false,
|
|
startX: touch.clientX, startY: touch.clientY, ox: 0, oy: 0,
|
|
};
|
|
document.addEventListener('touchmove', _onDragMove, { passive: false });
|
|
document.addEventListener('touchend', _onDragEnd);
|
|
document.addEventListener('touchcancel', _onDragEnd);
|
|
}
|
|
|
|
function _activateDrag(touch) {
|
|
const rect = _drag.chipEl.getBoundingClientRect();
|
|
_drag.ox = _drag.startX - rect.left;
|
|
_drag.oy = _drag.startY - rect.top;
|
|
_drag.active = true;
|
|
const ghost = _drag.chipEl.cloneNode(true);
|
|
ghost.querySelectorAll('button').forEach(b => b.style.display = 'none');
|
|
ghost.style.position = 'fixed';
|
|
ghost.style.zIndex = '9999';
|
|
ghost.style.opacity = '0.9';
|
|
ghost.style.pointerEvents= 'none';
|
|
ghost.style.transform = 'scale(1.08) rotate(-2deg)';
|
|
ghost.style.width = rect.width + 'px';
|
|
ghost.style.height = rect.height + 'px';
|
|
ghost.style.left = (touch.clientX - _drag.ox) + 'px';
|
|
ghost.style.top = (touch.clientY - _drag.oy) + 'px';
|
|
ghost.style.transition = 'none';
|
|
ghost.style.boxShadow = '0 8px 24px rgba(0,0,0,0.5)';
|
|
document.body.appendChild(ghost);
|
|
_drag.ghost = ghost;
|
|
_drag.chipEl.style.opacity = '0.2';
|
|
}
|
|
|
|
function _onDragMove(e) {
|
|
if (!_drag) return;
|
|
const touch = e.touches[0];
|
|
|
|
if (!_drag.active) {
|
|
const dx = Math.abs(touch.clientX - _drag.startX);
|
|
const dy = Math.abs(touch.clientY - _drag.startY);
|
|
if (dx < 8 && dy < 8) return; // Threshold noch nicht erreicht
|
|
_activateDrag(touch);
|
|
}
|
|
|
|
e.preventDefault(); // Scroll erst NACH Threshold blockieren
|
|
_drag.ghost.style.left = (touch.clientX - _drag.ox) + 'px';
|
|
_drag.ghost.style.top = (touch.clientY - _drag.oy) + 'px';
|
|
|
|
let foundZone = null;
|
|
ov.querySelectorAll('.wc-zone').forEach(z => {
|
|
const r = z.getBoundingClientRect();
|
|
const over = touch.clientX >= r.left && touch.clientX <= r.right
|
|
&& touch.clientY >= r.top && touch.clientY <= r.bottom;
|
|
z.style.borderColor = over ? (worldColors[z.dataset.zone] || 'rgba(196,132,58,0.8)') : 'transparent';
|
|
if (over) foundZone = z.dataset.zone;
|
|
});
|
|
_drag.dropZone = foundZone;
|
|
}
|
|
|
|
function _onDragEnd() {
|
|
if (!_drag) return;
|
|
_removeDragListeners();
|
|
|
|
const { ghost, chipEl, dropZone, page, zone: fromZone, active } = _drag;
|
|
_drag = null;
|
|
ov.querySelectorAll('.wc-zone').forEach(z => z.style.borderColor = 'transparent');
|
|
ghost?.remove();
|
|
if (chipEl) chipEl.style.opacity = '';
|
|
|
|
if (!active) return; // nur Tap, kein Drag — nichts verschieben
|
|
|
|
const meta = _chipMeta(page);
|
|
if (dropZone && dropZone !== fromZone && !(meta?.pinned && dropZone === 'pool')) {
|
|
if (fromZone !== 'pool') cfg[fromZone] = cfg[fromZone].filter(p => p !== page);
|
|
if (dropZone !== 'pool' && !cfg[dropZone].includes(page)) cfg[dropZone].push(page);
|
|
_render();
|
|
}
|
|
}
|
|
|
|
_render();
|
|
}
|
|
|
|
// ── PANORAMA HINTERGRUNDBILD ─────────────────────────────────
|
|
|
|
async function _loadDailyImage(dog) {
|
|
if (!dog) return null;
|
|
const todayKey = 'bg3_' + new Date().toISOString().slice(0, 10);
|
|
const cached = _wLoad(todayKey);
|
|
if (cached?.data) return cached.data;
|
|
try {
|
|
const dash = await API.dogs.welcomeDashboard(dog.id);
|
|
const url = dash?.random_photo?.url || dog.foto_url || null;
|
|
if (url) _wSave(todayKey, url);
|
|
return url;
|
|
} catch { return dog.foto_url || null; }
|
|
}
|
|
|
|
function _applyBgImage(url) {
|
|
const track = document.getElementById('worlds-track');
|
|
if (!track) return;
|
|
if (url) {
|
|
const toLoad = new Image();
|
|
toLoad.onload = () => {
|
|
_hasBgPhoto = true;
|
|
track.style.backgroundImage = `url('${url}')`;
|
|
track.style.backgroundSize = '100% auto';
|
|
track.style.backgroundPosition = '0 40%';
|
|
track.style.backgroundRepeat = 'no-repeat';
|
|
document.getElementById('wh-photo-hint')?.remove();
|
|
};
|
|
toLoad.onerror = () => _applyBgImage(null);
|
|
toLoad.src = url;
|
|
} else {
|
|
_hasBgPhoto = false;
|
|
track.style.backgroundImage = 'linear-gradient(160deg,#1a1f35 0%,#16213e 33%,#1a2535 67%,#0f1921 100%)';
|
|
track.style.backgroundSize = '100% 100%';
|
|
}
|
|
}
|
|
|
|
// ── CHIP-HELPER ──────────────────────────────────────────────
|
|
|
|
function _chip(icon, label, page, locked = false) {
|
|
const style = locked ? 'opacity:0.25;cursor:default;' : '';
|
|
return `
|
|
<div class="world-chip" ${locked ? '' : `data-wnav="${page}"`} style="${style}">
|
|
<svg class="ph-icon" style="width:1.4rem;height:1.4rem">
|
|
<use href="/icons/phosphor.svg#${icon}"></use>
|
|
</svg>
|
|
<span class="world-chip-label">${label}</span>
|
|
</div>`;
|
|
}
|
|
|
|
// ── JETZT WORLD ──────────────────────────────────────────────
|
|
|
|
async function _renderJetzt() {
|
|
const el = document.getElementById('wj-content');
|
|
if (!el) return;
|
|
|
|
const user = _state?.user;
|
|
el.innerHTML = _skeleton(3);
|
|
|
|
const [weatherRes, dogsRes, alertsRes, achRes] = await Promise.allSettled([
|
|
_getCachedWeather(),
|
|
user ? _cachedGet('dogs', '/dogs') : Promise.resolve({ data: [], fromCache: false, ageMin: 0 }),
|
|
user ? _getNearbyAlerts() : Promise.resolve([]),
|
|
user ? _cachedGet('achievements_me', '/achievements/me') : Promise.resolve({ data: null }),
|
|
]);
|
|
|
|
const weatherObj = weatherRes.value || { data: null, fromCache: false, ageMin: 0 };
|
|
const dogsObj = dogsRes.value || { data: [], fromCache: false, ageMin: 0 };
|
|
const w = weatherObj.data;
|
|
const dogList = dogsObj.data || [];
|
|
const dog = dogList[0] || null;
|
|
const alertList = alertsRes.value || [];
|
|
const totalKm = achRes.value?.data?.stats?.total_km ?? null;
|
|
const isOffline = weatherObj.fromCache && dogsObj.fromCache;
|
|
const staleMin = Math.max(weatherObj.ageMin || 0, dogsObj.ageMin || 0);
|
|
|
|
// Panorama-Bild setzen (nur wenn noch kein Bild vorhanden)
|
|
const track = document.getElementById('worlds-track');
|
|
if (dog && !track?.style.backgroundImage?.startsWith('url')) {
|
|
_loadDailyImage(dog).then(_applyBgImage);
|
|
} else if (!dog) { _applyBgImage(null); }
|
|
|
|
const hour = new Date().getHours();
|
|
const greet = hour < 5 ? 'Gute Nacht' : hour < 12 ? 'Guten Morgen' : hour < 18 ? 'Hallo' : 'Guten Abend';
|
|
const firstName = user?.name?.split(' ')[0] || '';
|
|
const dayStr = new Date().toLocaleDateString('de-DE', { weekday:'long', day:'numeric', month:'long' });
|
|
const stale = isOffline && staleMin > 5
|
|
? `<span style="font-size:9px;opacity:0.5;margin-left:6px">· Offline</span>` : '';
|
|
|
|
// Gassi-Score aus Wetterdaten berechnen
|
|
function _calcGassiScore(wd) {
|
|
if (!wd) return null;
|
|
let s = 10;
|
|
const t = wd.temp_c ?? 20, p = wd.precip_prob ?? 0, wind = wd.wind_kmh ?? 0;
|
|
if (t > 30) s -= 3; else if (t > 25) s -= 1; else if (t < 0) s -= 3; else if (t < 5) s -= 1;
|
|
if (p > 70) s -= 3; else if (p > 40) s -= 2; else if (p > 20) s -= 1;
|
|
if (wind > 60) s -= 2; else if (wind > 40) s -= 1;
|
|
if (wd.thunderstorm) s -= 3;
|
|
return Math.max(1, Math.min(10, s));
|
|
}
|
|
const gassiScore = _calcGassiScore(w);
|
|
const gassiColor = gassiScore >= 8 ? '#10B981' : gassiScore >= 5 ? '#F59E0B' : '#EF4444';
|
|
const weatherEmoji = !w ? '🌤️'
|
|
: w.thunderstorm ? '⛈️'
|
|
: (w.precip_prob ?? 0) > 70 ? '🌧️'
|
|
: (w.precip_prob ?? 0) > 30 ? '🌦️'
|
|
: (w.temp_c ?? 20) > 28 ? '☀️🔥'
|
|
: (w.temp_c ?? 20) < 2 ? '🌨️'
|
|
: '☀️';
|
|
|
|
// Alert-Reminder
|
|
const alertHtml = alertList.slice(0,1).map(a => `
|
|
<div class="world-reminder" data-wnav="${a.page}" style="border-color:rgba(239,68,68,0.5)">
|
|
<svg class="ph-icon" style="width:1.1rem;height:1.1rem;color:#EF4444">
|
|
<use href="/icons/phosphor.svg#${a.icon}"></use>
|
|
</svg>
|
|
<span style="font-size:var(--text-xs);font-weight:700;color:#FCA5A5">${_esc(a.title)}</span>
|
|
</div>`).join('');
|
|
|
|
// Feature Chips aus Config
|
|
const features = user
|
|
? _chipsForWorld('jetzt')
|
|
: [
|
|
{ icon:'sun', label:'Wetter', page:'wetter' },
|
|
{ icon:'first-aid',label:'Erste Hilfe', page:'erste-hilfe' },
|
|
{ icon:'gear', label:'Anmelden', page:'settings' },
|
|
];
|
|
|
|
// User-Avatar für JETZT Info-Card
|
|
const uFoto = _state?.user?.avatar_url;
|
|
const uInitial = firstName ? firstName.charAt(0).toUpperCase() : '?';
|
|
const userAvatarHtml = `
|
|
<div data-wnav="settings" style="flex-shrink:0;cursor:pointer"
|
|
title="Mein Profil">
|
|
${uFoto
|
|
? `<img src="${_esc(uFoto)}" style="width:40px;height:40px;border-radius:50%;
|
|
object-fit:cover;border:2px solid rgba(255,255,255,0.35);display:block">`
|
|
: `<div style="width:40px;height:40px;border-radius:50%;background:var(--c-primary);
|
|
display:flex;align-items:center;justify-content:center;
|
|
font-size:var(--text-base);font-weight:800;color:white;
|
|
border:2px solid rgba(255,255,255,0.35)">${uInitial}</div>`}
|
|
</div>`;
|
|
|
|
el.innerHTML = `
|
|
<div class="world-top">
|
|
<div class="world-info-card">
|
|
<div style="display:flex;align-items:center;gap:12px">
|
|
<div style="flex:1;min-width:0">
|
|
<div class="world-info-title">
|
|
${_esc(greet)}${firstName ? `, <span style="color:var(--c-primary)">${_esc(firstName)}</span>` : ''}${stale}
|
|
</div>
|
|
<div class="world-info-sub">${_esc(dayStr)}</div>
|
|
</div>
|
|
${user ? userAvatarHtml : ''}
|
|
</div>
|
|
</div>
|
|
${alertHtml}
|
|
${user && dog ? `
|
|
<div class="wj-chip-row">
|
|
<div class="wj-chip" data-wnav="wetter">
|
|
<div style="display:flex;align-items:center;gap:6px;width:100%">
|
|
<span style="font-size:1.4rem;line-height:1;flex-shrink:0">${weatherEmoji}</span>
|
|
<div style="flex:1;min-width:0">
|
|
<div style="font-size:9px;color:rgba(255,255,255,0.55);font-weight:600;letter-spacing:.05em;text-transform:uppercase">Gassi-Score</div>
|
|
<div style="display:flex;align-items:baseline;gap:3px;margin-top:1px">
|
|
<span style="font-size:1.25rem;font-weight:800;color:${gassiColor};line-height:1">${gassiScore ?? '—'}</span>
|
|
${gassiScore ? `<span style="font-size:var(--text-xs);color:rgba(255,255,255,0.4);font-weight:600">/10</span>` : ''}
|
|
</div>
|
|
${w ? `<span style="font-size:9px;color:rgba(255,255,255,0.75);font-weight:500;margin-top:1px;white-space:nowrap">${Math.round(w.temp_c ?? 0)}° · ${w.precip_prob ?? 0}% Regen</span>` : ''}
|
|
</div>
|
|
</div>
|
|
</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>
|
|
${totalKm != null ? `<span style="font-size:9px;color:rgba(255,255,255,0.4);margin-top:1px">∑ ${totalKm} km</span>` : ''}
|
|
</div>
|
|
<div class="wj-chip" id="wj-exercise-chip">
|
|
<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>
|
|
<div class="world-bottom">
|
|
<div class="world-section-label">Deine Bereiche</div>
|
|
<div class="world-chips-grid">
|
|
${features.map(f => _chip(f.icon, f.label, f.page)).join('')}
|
|
</div>
|
|
<div class="world-footer-links">
|
|
<span data-wnav="impressum">Impressum</span>
|
|
</div>
|
|
</div>
|
|
`;
|
|
el.querySelectorAll('[data-wnav]').forEach(e => e.addEventListener('click', () => navigateTo(e.dataset.wnav)));
|
|
|
|
if (user && dog) {
|
|
_loadJetztExercise(dog);
|
|
_loadJetztRoute();
|
|
}
|
|
}
|
|
|
|
async function _loadJetztExercise(dog) {
|
|
const valEl = document.getElementById('wj-exercise-val');
|
|
if (!valEl) return;
|
|
try {
|
|
const res = await _cachedGet(`dash_${dog.id}`, `/dogs/${dog.id}/welcome-dashboard`);
|
|
const ex = res.data?.daily_exercise;
|
|
valEl.textContent = ex?.name || '—';
|
|
// Chip-Klick mit exercise_id/name damit übungen.js direkt dorthin scrollt
|
|
const chip = document.getElementById('wj-exercise-chip');
|
|
if (chip) {
|
|
chip.style.cursor = 'pointer';
|
|
chip.onclick = () => {
|
|
hide();
|
|
if (window.App) window.App.navigate('uebungen', true,
|
|
ex ? { exercise_id: ex.exercise_id || '', name: ex.name || '' } : {}
|
|
);
|
|
};
|
|
}
|
|
} catch { valEl.textContent = '—'; }
|
|
}
|
|
|
|
async function _loadJetztRoute() {
|
|
const valEl = document.getElementById('wj-route-val');
|
|
if (!valEl) return;
|
|
|
|
// Tages-Cache (gleicher Key wie welcome.js)
|
|
const today = new Date().toISOString().slice(0, 10);
|
|
const cacheKey = 'by_daily_route_' + today;
|
|
const cached = localStorage.getItem(cacheKey);
|
|
if (cached) {
|
|
try { _applyJetztRoute(valEl, JSON.parse(cached)); return; } catch {}
|
|
}
|
|
|
|
let loc;
|
|
try { loc = await API.getLocation({ timeout: 5000, maximumAge: 300000 }); }
|
|
catch { valEl.textContent = 'Standort nötig'; return; }
|
|
|
|
const dayIdx = Math.floor(Date.now() / 86400000);
|
|
const km = [2, 4, 6][dayIdx % 3];
|
|
const seed = dayIdx % 5;
|
|
try {
|
|
const result = await API.post('/routes/suggest', { lat: loc.lat, lon: loc.lon, distance_km: km, seed });
|
|
if (!result?.gps_track?.length) { valEl.textContent = 'Keine Route gefunden'; return; }
|
|
localStorage.setItem(cacheKey, JSON.stringify(result));
|
|
// alte Einträge aufräumen
|
|
Object.keys(localStorage)
|
|
.filter(k => k.startsWith('by_daily_route_') && k !== cacheKey)
|
|
.forEach(k => localStorage.removeItem(k));
|
|
_applyJetztRoute(valEl, result);
|
|
} catch { valEl.textContent = 'Route nicht verfügbar'; }
|
|
}
|
|
|
|
function _applyJetztRoute(valEl, result) {
|
|
const durStr = result.dauer_min < 60
|
|
? `${result.dauer_min} min`
|
|
: `${Math.floor(result.dauer_min / 60)}h ${result.dauer_min % 60 > 0 ? ' ' + (result.dauer_min % 60) + 'min' : ''}`;
|
|
valEl.textContent = `${result.distanz_km} km · ${durStr}`;
|
|
}
|
|
|
|
// ── HUND WORLD ───────────────────────────────────────────────
|
|
|
|
async function _renderHund() {
|
|
const el = document.getElementById('wh-content');
|
|
if (!el) return;
|
|
const user = _state?.user;
|
|
|
|
if (!user) {
|
|
el.innerHTML = `
|
|
<div class="world-info-card" style="text-align:center">
|
|
<div style="font-size:4rem;margin-bottom:12px">🐾</div>
|
|
<div class="world-info-title">Dein Hund wartet</div>
|
|
<div class="world-info-sub" style="margin-bottom:20px">Melde dich an um loszulegen</div>
|
|
<button class="btn btn-primary" onclick="Worlds.navigateTo('settings')">Anmelden</button>
|
|
</div>`;
|
|
return;
|
|
}
|
|
|
|
el.innerHTML = _skeleton(4);
|
|
const dogsRes = await _cachedGet('dogs', '/dogs');
|
|
const dogs = dogsRes.data || [];
|
|
|
|
if (!dogs.length) {
|
|
const features = [
|
|
{ icon:'book-open', color:'#8B5CF6', title:'Tagebuch', sub:'Fotos & Erlebnisse' },
|
|
{ icon:'heartbeat', color:'#EF4444', title:'Gesundheit', sub:'Impfungen & Gewicht' },
|
|
{ icon:'target', color:'#F59E0B', title:'Training', sub:'104 Übungen' },
|
|
{ icon:'books', color:'#10B981', title:'Wiki', sub:'Alle Rassen' },
|
|
{ icon:'paw-print', color:'#3B82F6', title:'Gassi', sub:'Routen & GPS' },
|
|
{ icon:'currency-eur',color:'#06B6D4',title:'Ausgaben', sub:'Budget im Blick' },
|
|
];
|
|
el.innerHTML = `
|
|
<div class="world-top">
|
|
<div class="world-info-card" style="text-align:center">
|
|
<div style="font-size:3.2rem;margin-bottom:10px">🐶</div>
|
|
<div class="world-info-title">Dein Hund wartet!</div>
|
|
<div class="world-info-sub" style="margin-bottom:16px">
|
|
Lege ein Profil an und schalte alle Features frei
|
|
</div>
|
|
<button class="btn btn-primary" style="width:100%" onclick="Worlds.navigateTo('dog-profile')">
|
|
Hund anlegen
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="world-bottom">
|
|
<div class="world-section-label">Was dich erwartet</div>
|
|
<div class="world-chips-grid">
|
|
${features.map(f => `
|
|
<div class="world-chip" style="opacity:0.7;cursor:default">
|
|
<svg class="ph-icon" style="width:1.4rem;height:1.4rem;color:${f.color}">
|
|
<use href="/icons/phosphor.svg#${f.icon}"></use>
|
|
</svg>
|
|
<span class="world-chip-label">${f.title}</span>
|
|
</div>
|
|
`).join('')}
|
|
</div>
|
|
</div>`;
|
|
el.querySelectorAll('[data-wnav]').forEach(e => e.addEventListener('click', () => navigateTo(e.dataset.wnav)));
|
|
return;
|
|
}
|
|
|
|
// Hunde global cachen für schnelles Cycling
|
|
_dogs = dogs;
|
|
if (_dogIdx >= _dogs.length) _dogIdx = 0;
|
|
const dog = _dogs[_dogIdx];
|
|
|
|
// Geburtstag prüfen (heute oder morgen → Feature sichtbar)
|
|
function _birthdayState(geb) {
|
|
if (!geb) return null;
|
|
const today = new Date();
|
|
const tomorrow = new Date(today); tomorrow.setDate(today.getDate() + 1);
|
|
const mm = String(today.getMonth() + 1).padStart(2, '0');
|
|
const dd = String(today.getDate()).padStart(2, '0');
|
|
const mt = String(tomorrow.getMonth() + 1).padStart(2, '0');
|
|
const dt = String(tomorrow.getDate()).padStart(2, '0');
|
|
const mmdd = geb.slice(5); // 'MM-DD'
|
|
if (mmdd === `${mm}-${dd}`) return 'today';
|
|
if (mmdd === `${mt}-${dt}`) return 'tomorrow';
|
|
return null;
|
|
}
|
|
const bday = _birthdayState(dog.geburtstag);
|
|
const bdayYear = dog.geburtstag ? new Date().getFullYear() - parseInt(dog.geburtstag.slice(0, 4)) : null;
|
|
|
|
const [streakRes, diaryRes] = await Promise.allSettled([
|
|
_cachedGet(`streak_${dog.id}`, `/streak/${dog.id}`),
|
|
_cachedGet(`diary_${dog.id}`, `/dogs/${dog.id}/diary?limit=1`),
|
|
]);
|
|
const streak = streakRes.value?.data ?? streakRes.value;
|
|
const diaryData = diaryRes.value?.data ?? diaryRes.value;
|
|
const lastEntry = diaryData?.entries?.[0] || diaryData?.[0] || null;
|
|
|
|
const ageStr = dog.alter_jahre ? _fmtAlter(dog.alter_jahre) : '';
|
|
const stats = [dog.rasse, ageStr, dog.gewicht_kg ? dog.gewicht_kg + ' kg' : null].filter(Boolean).join(' · ');
|
|
const otherDogs = _dogs.filter((_, i) => i !== _dogIdx);
|
|
const chips = _chipsForWorld('hund');
|
|
|
|
// Avatar des aktuellen Hundes (links, → Hundeprofil)
|
|
const dogAvatarHtml = dog.foto_url
|
|
? `<img src="${_esc(dog.foto_url)}" style="width:44px;height:44px;border-radius:50%;
|
|
object-fit:cover;border:2px solid rgba(255,255,255,0.35);
|
|
cursor:pointer;flex-shrink:0" id="wh-avatar">`
|
|
: `<div id="wh-avatar" style="width:44px;height:44px;border-radius:50%;background:var(--c-primary);
|
|
display:flex;align-items:center;justify-content:center;
|
|
font-size:1.3rem;flex-shrink:0;cursor:pointer;
|
|
border:2px solid rgba(255,255,255,0.25)">🐶</div>`;
|
|
|
|
// Andere Hunde-Avatare (rechts, überlagernd, → Hund wechseln)
|
|
const otherAvatarsHtml = otherDogs.length > 0 ? `
|
|
<div style="display:flex;align-items:center;flex-shrink:0">
|
|
${otherDogs.slice(0, 4).map((d, i) => {
|
|
const targetIdx = _dogs.indexOf(d);
|
|
return `
|
|
<div class="wh-other-dog" data-idx="${targetIdx}"
|
|
style="width:30px;height:30px;border-radius:50%;overflow:hidden;
|
|
border:2px solid rgba(255,255,255,0.4);
|
|
margin-left:${i > 0 ? '-10px' : '0'};
|
|
cursor:pointer;position:relative;z-index:${10 - i}">
|
|
${d.foto_url
|
|
? `<img src="${_esc(d.foto_url)}" style="width:100%;height:100%;object-fit:cover">`
|
|
: `<div style="width:100%;height:100%;background:rgba(100,70,40,0.85);
|
|
display:flex;align-items:center;justify-content:center;
|
|
font-size:10px;font-weight:700;color:white">
|
|
${_esc(d.name?.charAt(0)?.toUpperCase() || '?')}
|
|
</div>`}
|
|
</div>`;
|
|
}).join('')}
|
|
</div>` : '';
|
|
|
|
el.innerHTML = `
|
|
<div class="world-top">
|
|
<div class="world-info-card">
|
|
<div style="display:grid;grid-template-columns:1fr auto 1fr;align-items:center">
|
|
<div style="justify-self:start">${dogAvatarHtml}</div>
|
|
<div id="wh-cycle-btn" style="text-align:center;
|
|
cursor:${_dogs.length > 1 ? 'pointer' : 'default'};padding:0 8px">
|
|
<div class="world-info-title">${_esc(dog.name)}</div>
|
|
${stats ? `<div class="world-info-sub">${_esc(stats)}</div>` : ''}
|
|
</div>
|
|
<div style="justify-self:end;display:flex;align-items:center">${otherAvatarsHtml}</div>
|
|
</div>
|
|
</div>
|
|
${bday ? `
|
|
<style>
|
|
@keyframes bday-pop {
|
|
0% { transform: scale(0.7) rotate(-8deg); opacity:0; }
|
|
60% { transform: scale(1.15) rotate(4deg); }
|
|
100% { transform: scale(1) rotate(0deg); opacity:1; }
|
|
}
|
|
@keyframes bday-fw1 { 0%,100%{transform:translateY(0) scale(1);opacity:1} 50%{transform:translateY(-8px) scale(1.3);opacity:0.7} }
|
|
@keyframes bday-fw2 { 0%,100%{transform:translateY(0) scale(1);opacity:1} 50%{transform:translateY(-12px) scale(1.4);opacity:0.6} }
|
|
@keyframes bday-fw3 { 0%,100%{transform:translateY(0) scale(1);opacity:1} 50%{transform:translateY(-6px) scale(1.2);opacity:0.8} }
|
|
.bday-pop { animation: bday-pop .5s cubic-bezier(.34,1.56,.64,1) both; }
|
|
.bday-fw1 { display:inline-block; animation: bday-fw1 1.4s ease-in-out infinite; }
|
|
.bday-fw2 { display:inline-block; animation: bday-fw2 1.1s ease-in-out infinite .2s; }
|
|
.bday-fw3 { display:inline-block; animation: bday-fw3 1.6s ease-in-out infinite .4s; }
|
|
</style>
|
|
<div class="world-reminder bday-pop" style="flex-direction:column;align-items:center;
|
|
text-align:center;gap:6px;padding:14px 16px;
|
|
background:rgba(0,0,0,0.42);border-color:rgba(196,132,58,0.6)">
|
|
<div style="display:flex;gap:6px;font-size:1.5rem;line-height:1">
|
|
<span class="bday-fw1">🎆</span>
|
|
<span style="font-size:2rem">${bday === 'today' ? '🎂' : '🎁'}</span>
|
|
<span class="bday-fw2">🎇</span>
|
|
</div>
|
|
<div style="font-weight:800;font-size:var(--text-sm);color:#fff;letter-spacing:0.01em">
|
|
${bday === 'today'
|
|
? `Alles Gute zum ${bdayYear}. Geburtstag, ${_esc(dog.name)}!`
|
|
: `Morgen hat ${_esc(dog.name)} Geburtstag! 🥳`}
|
|
</div>
|
|
<div style="display:flex;gap:4px;font-size:1.1rem">
|
|
<span class="bday-fw3">🎉</span><span class="bday-fw1">✨</span><span class="bday-fw2">🎊</span><span class="bday-fw3">✨</span><span class="bday-fw1">🎉</span>
|
|
</div>
|
|
${bdayYear ? `<div style="font-size:10px;color:rgba(255,255,255,0.55)">
|
|
${bday === 'today' ? `${bdayYear} Jahr${bdayYear !== 1 ? 'e' : ''} gemeinsam 🐾` : `Wird ${bdayYear} Jahr${bdayYear !== 1 ? 'e' : ''} alt`}
|
|
</div>` : ''}
|
|
</div>` : ''}
|
|
</div>
|
|
<div class="world-bottom">
|
|
${!_hasBgPhoto ? `
|
|
<div id="wh-photo-hint" data-wnav="diary"
|
|
style="background:rgba(0,0,0,0.32);backdrop-filter:blur(12px);
|
|
-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.12);
|
|
border-radius:16px;padding:11px 14px;display:flex;align-items:center;
|
|
gap:10px;cursor:pointer;color:white;flex-shrink:0">
|
|
<svg class="ph-icon" style="width:1.1rem;height:1.1rem;color:rgba(196,132,58,0.9);flex-shrink:0">
|
|
<use href="/icons/phosphor.svg#camera"></use>
|
|
</svg>
|
|
<div>
|
|
<div style="font-size:var(--text-xs);font-weight:700;color:rgba(255,255,255,0.85)">
|
|
Hintergrund-Foto hinzufügen
|
|
</div>
|
|
<div style="font-size:10px;color:rgba(255,255,255,0.45);margin-top:1px">
|
|
Tagebuchfotos erscheinen hier als Panorama
|
|
</div>
|
|
</div>
|
|
</div>
|
|
` : ''}
|
|
<div class="world-section-label">Alles über ${_esc(dog.name)}</div>
|
|
<div class="world-chips-grid">
|
|
${chips.map(c => _chip(c.icon, c.label, c.page)).join('')}
|
|
</div>
|
|
<div class="world-footer-links">
|
|
<span data-wnav="gruender">Die 100 Gründer</span>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
// Avatar → Hundeprofil
|
|
el.querySelector('#wh-avatar')?.addEventListener('click', () => navigateTo('dog-profile'));
|
|
// Chips
|
|
el.querySelectorAll('[data-wnav]').forEach(e => e.addEventListener('click', () => navigateTo(e.dataset.wnav)));
|
|
// Name → nächster Hund
|
|
if (_dogs.length > 1) {
|
|
el.querySelector('#wh-cycle-btn')?.addEventListener('click', () => {
|
|
_dogIdx = (_dogIdx + 1) % _dogs.length;
|
|
_renderHund();
|
|
});
|
|
}
|
|
// Andere Hund-Avatare → zu diesem Hund wechseln
|
|
el.querySelectorAll('.wh-other-dog').forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
const idx = parseInt(btn.dataset.idx);
|
|
if (!isNaN(idx) && idx !== _dogIdx) { _dogIdx = idx; _renderHund(); }
|
|
});
|
|
});
|
|
}
|
|
|
|
// ── WELT WORLD ───────────────────────────────────────────────
|
|
|
|
const _QUOTES = [
|
|
{ t:'Ein Hund ist die einzige Kreatur, die dich mehr liebt als sich selbst.', a:'Josh Billings' },
|
|
{ t:'Hunde haben Besitzer. Katzen haben Personal.', a:'Unbekannt' },
|
|
{ t:'Bis man einen Hund geliebt hat, ist ein Teil der Seele unerwacht.', a:'Anatole France' },
|
|
{ t:'Hunde sind nicht unser ganzes Leben — aber sie machen unser Leben ganz.', a:'Roger Caras' },
|
|
{ t:'Der Hund hat nur einen Fehler: Er vertraut dem Menschen zu sehr.', a:'Unbekannt' },
|
|
{ t:'Ein treuer Hund ist besser als ein unzuverlässiger Mensch.', a:'Deutsches Sprichwort' },
|
|
{ t:'Wer einen Hund hat, gibt nie allein zu Tisch.', a:'Unbekannt' },
|
|
{ t:'Die reinste Form der Freude ist die Freude eines Hundes.', a:'Milan Kundera' },
|
|
{ t:'Hunde lachen nicht mit dem Mund, sondern mit dem Schwanz.', a:'Max Eastman' },
|
|
{ t:'Ein Haus ohne Hund ist ein leeres Haus.', a:'Unbekannt' },
|
|
{ t:'Wenn du verstehen willst, was Liebe ist, beobachte einen Hund.', a:'Unbekannt' },
|
|
{ t:'Der Hund fragt nicht warum. Er fragt nur: wann gehen wir?', a:'Unbekannt' },
|
|
{ t:'Hunde riechen nicht schlecht. Sie riechen nur anders als wir denken.', a:'Unbekannt' },
|
|
{ t:'In einer Welt voller Unsicherheiten ist der Hund das Verlässlichste.', a:'Unbekannt' },
|
|
{ t:'Ein Spaziergang mit einem Hund ist nie wirklich ein Umweg.', a:'Unbekannt' },
|
|
{ t:'Hunde bringen das Beste im Menschen hervor.', a:'Unbekannt' },
|
|
{ t:'Wer mit Hunden liegt, steht mit Flöhen auf — und mit einem Lächeln.', a:'Unbekannt' },
|
|
{ t:'Ein Hund weiß, wann du traurig bist. Er weiß nicht warum. Aber er ist da.', a:'Unbekannt' },
|
|
{ t:'Das Geheimnis eines Hundes: Er beurteilt dich nie.', a:'Unbekannt' },
|
|
{ t:'Der Hund ist Gattung: Mensch.', a:'Charles M. Schulz' },
|
|
{ t:'Hunde haben viel zu sagen. Wir haben verlernt zuzuhören.', a:'Unbekannt' },
|
|
{ t:'Ein guter Hund macht aus einem schlechten Tag einen erträglichen.', a:'Unbekannt' },
|
|
{ t:'Der Hund ist der philosophischste aller Haustiere.', a:'George Graham Vest' },
|
|
{ t:'Wer einen Hund hat, braucht keinen Therapeuten.', a:'Unbekannt' },
|
|
{ t:'Hunde lieben bedingungslos. Das ist ihr größtes Geschenk.', a:'Unbekannt' },
|
|
{ t:'Der schönste Empfang ist der eines Hundes an der Tür.', a:'Unbekannt' },
|
|
{ t:'Ein Hund ändert dein Leben. Meistens zum Besseren.', a:'Unbekannt' },
|
|
{ t:'Hunde altern in Würde. Menschen könnten von ihnen lernen.', a:'Unbekannt' },
|
|
{ t:'Kein Psychiater der Welt kann so gut zuhören wie ein Hund.', a:'Unbekannt' },
|
|
{ t:'Wo Hunde sind, da ist das Zuhause.', a:'Unbekannt' },
|
|
{ t:'Der Hund hat keinen Begriff von Vergangenheit oder Zukunft. Er lebt.', a:'Milan Kundera' },
|
|
];
|
|
|
|
function _renderWelt() {
|
|
const el = document.getElementById('ww-content');
|
|
if (!el) return;
|
|
const user = _state?.user;
|
|
const isMod = user?.rolle === 'admin' || user?.rolle === 'moderator' || user?.is_moderator;
|
|
const isAdmin = user?.rolle === 'admin';
|
|
const isSocial = user?.is_social_media || isAdmin;
|
|
|
|
// Tagesbasierter Spruch
|
|
const day = Math.floor(Date.now() / 86400000);
|
|
const quote = _QUOTES[day % _QUOTES.length];
|
|
|
|
const chips = _chipsForWorld('welt');
|
|
|
|
el.innerHTML = `
|
|
<div class="world-top">
|
|
<div class="world-info-card">
|
|
<div style="font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
|
|
color:rgba(255,255,255,0.45);margin-bottom:10px">Gedanke des Tages</div>
|
|
<div style="font-size:var(--text-sm);color:white;line-height:1.55;font-style:italic">
|
|
»${_esc(quote.t)}«
|
|
</div>
|
|
<div style="font-size:10px;color:rgba(255,255,255,0.45);margin-top:8px;text-align:right">
|
|
— ${_esc(quote.a)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="world-bottom">
|
|
<div class="world-section-label">Die Welt da draußen</div>
|
|
<div class="world-chips-grid">
|
|
${chips.map(c => _chip(c.icon, c.label, c.page)).join('')}
|
|
</div>
|
|
<div class="world-footer-links">
|
|
<span data-wnav="datenschutz">Datenschutz</span>
|
|
</div>
|
|
</div>
|
|
`;
|
|
el.querySelectorAll('[data-wnav]').forEach(e => e.addEventListener('click', () => navigateTo(e.dataset.wnav)));
|
|
}
|
|
|
|
// ── HELPERS ──────────────────────────────────────────────────
|
|
|
|
async function _getCachedWeather() {
|
|
const cached = _wLoad('weather');
|
|
let fresh = null, pos = null;
|
|
try {
|
|
pos = await API.getLocation({ timeout: 5000, maximumAge: 600_000 });
|
|
fresh = await API.weather.get(pos.lat, pos.lon);
|
|
_wSave('weather', fresh);
|
|
} catch {}
|
|
const data = fresh ?? cached?.data ?? null;
|
|
return { data, fromCache: !fresh, ageMin: fresh ? 0 : (cached?.ageMin ?? null) };
|
|
}
|
|
|
|
async function _getWeather() {
|
|
const r = await _getCachedWeather();
|
|
return r.data;
|
|
}
|
|
|
|
async function _getNearbyAlerts() {
|
|
const out = [];
|
|
try {
|
|
const pos = await API.getLocation({ timeout: 4000, maximumAge: 600_000 });
|
|
const [p, l] = await Promise.allSettled([
|
|
API.get(`/poison/nearby?lat=${pos.lat}&lon=${pos.lon}&radius=5`).catch(() => []),
|
|
API.get(`/lost/nearby?lat=${pos.lat}&lon=${pos.lon}&radius=5`).catch(() => []),
|
|
]);
|
|
if (p.value?.length) out.push({ icon:'skull', color:'#EF4444', title:'Giftköder in der Nähe', sub:`${p.value.length} Meldung${p.value.length>1?'en':''}`, page:'poison' });
|
|
if (l.value?.length) out.push({ icon:'dog', color:'#3B82F6', title:'Verlorener Hund', sub:`${l.value.length} Meldung${l.value.length>1?'en':''}`, page:'lost' });
|
|
} catch {}
|
|
return out;
|
|
}
|
|
|
|
function _skeleton(n) {
|
|
return Array.from({length: n}, (_, i) => `
|
|
<div style="height:${i===0?80:60}px;background:var(--c-border);border-radius:12px;margin:0 16px 10px;opacity:${0.7 - i*0.1};animation:pulse 1.5s ease-in-out infinite"></div>
|
|
`).join('');
|
|
}
|
|
|
|
function _fmtDate(d) {
|
|
if (!d) return '';
|
|
try { return new Date(d).toLocaleDateString('de-DE', { day:'numeric', month:'short' }); }
|
|
catch { return d; }
|
|
}
|
|
|
|
function _fmtAlter(j) {
|
|
if (!j) return '';
|
|
if (j < 1) return `${Math.round(j * 12)} Monate`;
|
|
return j < 2 ? '1 Jahr' : `${Math.round(j)} Jahre`;
|
|
}
|
|
|
|
function _esc(s) {
|
|
if (s == null) return '';
|
|
return String(s).replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>').replace(/"/g,'"');
|
|
}
|
|
|
|
return { init, show, hide, navigateTo, openConfig: _openConfigModal, get _visible() { return _visible; } };
|
|
|
|
})();
|