Gesundheit: Hunde-Picker als Einstiegsseite bei mehreren Hunden

backend/static/js/pages/health.js

@@ -31,17 +31,17 @@ window.Page_health = (() => {
 
   async function refresh() {
     if (!_appState.activeDog) return;
-    if (!_container.querySelector('#health-tabs')) {
+    if (_appState.dogs.length > 1) {
-      await _render();
+      _renderDogPicker();
       return;
     }
-    await _loadAll();
+    _data = {};
-    _renderTab();
+    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">