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

Gesundheit: Hunde-Picker als Einstiegsseite bei mehreren Hunden

Browse source
This commit is contained in:
rene 2026-04-13 19:48:09 +02:00
parent 1352c2f54f
commit ba8ac85f0b
1 changed files with 50 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

56
backend/static/js/pages/health.js
View file

@ -31,17 +31,17 @@ window.Page_health = (() => {
async function refresh() {
if (!_appState.activeDog) return;
if (!_container.querySelector('#health-tabs')) {
await _render();
if (_appState.dogs.length > 1) {
_renderDogPicker();
return;
}
await _loadAll();
_renderTab();
_data = {};
await _renderHealth();
}
async function onDogChange() {
_data = {};
await _render();
await _renderHealth();
}
function openNew() {
@ -49,7 +49,7 @@ window.Page_health = (() => {
}
// ----------------------------------------------------------
// RENDER — Hauptstruktur
// RENDER — Einstieg: Picker bei mehreren Hunden, sonst direkt
// ----------------------------------------------------------
async function _render() {
if (!_appState.activeDog) {
@ -62,6 +62,50 @@ window.Page_health = (() => {
return;
}
if (_appState.dogs.length > 1) {
_renderDogPicker();
} else {
await _renderHealth();
}
}
// ----------------------------------------------------------
// HUNDE-PICKER
// ----------------------------------------------------------
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="${_esc(dog.foto_url)}" alt="${_esc(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">${_esc(dog.name)}</div>
${dog.rasse ? `<div class="diary-picker-rasse">${_esc(dog.rasse)}</div>` : ''}
</div>`;
}).join('');
_container.innerHTML = `
<div class="diary-picker-wrap">
<p class="diary-picker-hint">Wessen Gesundheitsakte?</p>
<div class="diary-picker-grid">${cards}</div>
</div>`;
_container.querySelectorAll('.diary-picker-card').forEach(el => {
el.addEventListener('click', () => {
App.setActiveDog(parseInt(el.dataset.dogId));
});
});
}
// ----------------------------------------------------------
// HEALTH-ANSICHT — Tabs mit Einträgen
// ----------------------------------------------------------
async function _renderHealth() {
_container.innerHTML = `
<div class="health-header">
<button class="btn btn-secondary btn-sm" id="health-ki-btn">