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

81
backend/static/css/components.css
View file

@ -1219,3 +1219,84 @@ textarea.form-control {
color: var(--c-primary-dark);
font-weight: var(--weight-semibold);
}
/* ============================================================
TAGEBUCH — HUNDE-PICKER (Einstiegsseite bei mehreren Hunden)
============================================================ */
.diary-picker-wrap {
display: flex;
flex-direction: column;
align-items: center;
padding: var(--space-8) var(--space-4) var(--space-4);
gap: var(--space-5);
}
.diary-picker-hint {
font-size: var(--text-lg);
font-weight: var(--weight-semibold);
color: var(--c-text-secondary);
margin: 0;
}
.diary-picker-grid {
display: flex;
flex-wrap: wrap;
gap: var(--space-4);
justify-content: center;
}
.diary-picker-card {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-2);
padding: var(--space-4);
width: 140px;
background: var(--c-surface);
border: 2px solid var(--c-border);
border-radius: var(--radius-lg);
cursor: pointer;
transition: transform var(--transition-fast), box-shadow var(--transition-fast),
border-color var(--transition-fast);
touch-action: manipulation;
}
.diary-picker-card:active {
transform: scale(0.96);
}
.diary-picker-card--active {
border-color: var(--c-primary);
box-shadow: 0 0 0 3px var(--c-primary-subtle);
}
.diary-picker-av {
width: 88px;
height: 88px;
border-radius: 50%;
overflow: hidden;
background: var(--c-surface-2);
display: flex;
align-items: center;
justify-content: center;
border: 3px solid var(--c-border);
}
.diary-picker-card--active .diary-picker-av {
border-color: var(--c-primary);
}
.diary-picker-av img {
width: 100%;
height: 100%;
object-fit: cover;
}
.diary-picker-name {
font-weight: var(--weight-semibold);
font-size: var(--text-base);
color: var(--c-text);
text-align: center;
}
.diary-picker-rasse {
font-size: var(--text-xs);
color: var(--c-text-secondary);
text-align: center;
}

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

@ -394,7 +394,7 @@ const App = (() => {
// ÖFFENTLICHE API
// (andere Module können App.state, App.navigate etc. nutzen)
// ----------------------------------------------------------
return { init, navigate, state, renderDogSwitcher: _renderDogSwitcher };
return { init, navigate, state, setActiveDog, renderDogSwitcher: _renderDogSwitcher };
})();

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)">