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

Tagebuch: Hunde-Picker als Einstiegsseite bei mehreren Hunden

Browse source
This commit is contained in:
rene 2026-04-13 19:41:33 +02:00
parent 5ecd14a625
commit 56ab20a705
3 changed files with 139 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

66
backend/static/js/pages/diary.js
View file

@ -34,28 +34,29 @@ window.Page_diary = (() => {
}
// ----------------------------------------------------------
// REFRESH — erneuter Navigations-Aufruf
// REFRESH — erneuter Navigations-Aufruf (Tap auf Tab)
// ----------------------------------------------------------
async function refresh() {
if (!_appState.activeDog) return;
// Wenn vorher "kein Hund"-Zustand: #diary-list existiert nicht → voll neu rendern
if (!_container.querySelector('#diary-list')) {
await _render();
// Mehrere Hunde → Picker zeigen (User kann Hund wählen)
if (_appState.dogs.length > 1) {
_renderDogPicker();
return;
}
// Einzelner Hund → Diary direkt neu laden
_offset = 0;
_entries = [];
await _load();
_renderList();
await _renderDiary();
}
// ----------------------------------------------------------
// ON DOG CHANGE
// ON DOG CHANGE — vom Header-Switcher ausgelöst
// ----------------------------------------------------------
async function onDogChange(dog) {
_offset = 0;
_entries = [];
await _render();
// Direkt Diary laden — Hund wurde bereits extern gewählt
await _renderDiary();
}
// ----------------------------------------------------------
@ -66,7 +67,7 @@ window.Page_diary = (() => {
}
// ----------------------------------------------------------
// RENDER — Hauptstruktur
// RENDER — Einstieg: Picker bei mehreren Hunden, sonst direkt
// ----------------------------------------------------------
async function _render() {
if (!_appState.activeDog) {
@ -81,6 +82,53 @@ window.Page_diary = (() => {
return;
}
if (_appState.dogs.length > 1) {
_renderDogPicker();
} else {
await _renderDiary();
}
}
// ----------------------------------------------------------
// HUNDE-PICKER — Einstiegsseite bei mehreren Hunden
// ----------------------------------------------------------
function _renderDogPicker() {
const activeDogId = _appState.activeDog?.id;
const cards = _appState.dogs.map(dog => {
const isActive = dog.id === activeDogId;
const av = dog.foto_url
? `<img src="${_escape(dog.foto_url)}" alt="${_escape(dog.name)}">`
: `<span style="font-size:2.5rem">🐕</span>`;
return `
<div class="diary-picker-card${isActive ? ' diary-picker-card--active' : ''}"
data-dog-id="${dog.id}">
<div class="diary-picker-av">${av}</div>
<div class="diary-picker-name">${_escape(dog.name)}</div>
${dog.rasse ? `<div class="diary-picker-rasse">${_escape(dog.rasse)}</div>` : ''}
</div>`;
}).join('');
_container.innerHTML = `
<div class="diary-picker-wrap">
<p class="diary-picker-hint">Wessen Tagebuch?</p>
<div class="diary-picker-grid">${cards}</div>
</div>`;
_container.querySelectorAll('.diary-picker-card').forEach(el => {
el.addEventListener('click', async () => {
const id = parseInt(el.dataset.dogId);
App.setActiveDog(id);
// onDogChange() wird durch setActiveDog → _notifyDogChange() aufgerufen
// → lädt Diary direkt
});
});
}
// ----------------------------------------------------------
// DIARY-ANSICHT — Timeline mit Einträgen
// ----------------------------------------------------------
async function _renderDiary() {
_container.innerHTML = `
<div id="diary-list"></div>
<div id="diary-load-more" style="display:none; text-align:center; padding:var(--space-4)">