From 5c178f812b56758374a103c95268037f0510a267 Mon Sep 17 00:00:00 2001
From: rene <mail@motocamp.de>
Date: Mon, 13 Apr 2026 20:38:30 +0200
Subject: [PATCH] Feat: Praxis-Auswahl bei Impfung/Entwurmung/Medikament +
 Dokumente funktional
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Praxis-Dropdown als wiederverwendbare Funktion _praxisSelectField()
- Impfung, Entwurmung, Medikament: Praxis auswählbar statt Freitext
- Impfpass-Karte: zeigt Praxisname mit 🏥 Icon
- Dokumente: Öffnen-Button direkt auf der Karte (stopPropagation),
  Bild-Vorschau 64px, "Noch keine Datei" wenn kein Upload
- SW-Cache → by-v15
---
 backend/static/js/pages/health.js | 65 +++++++++++++++++++++----------
 backend/static/sw.js              |  2 +-
 2 files changed, 45 insertions(+), 22 deletions(-)

diff --git a/backend/static/js/pages/health.js b/backend/static/js/pages/health.js
index 6408d9f..094ffa9 100644
--- a/backend/static/js/pages/health.js
+++ b/backend/static/js/pages/health.js
@@ -207,7 +207,9 @@ window.Page_health = (() => {
     });
 
     const items = entries.map(e => {
-      const ampel = _impfAmpel(e.naechstes);
+      const ampel  = _impfAmpel(e.naechstes);
+      const praxis = _praxen.find(p => p.id === e.tierarzt_id);
+      const vetName = praxis?.name || e.tierarzt_name || '';
       return `
         <div class="health-card" data-id="${e.id}" data-action="open-entry">
           <div class="health-card-ampel ampel-${ampel.color}" title="${ampel.label}"></div>
@@ -215,9 +217,9 @@ window.Page_health = (() => {
             <div class="health-card-title">${_esc(e.bezeichnung)}</div>
             <div class="health-card-meta">
               ${UI.time.format(e.datum + 'T00:00:00')}
-              ${e.tierarzt_name ? ` · ${_esc(e.tierarzt_name)}` : ''}
               ${e.charge_nr ? ` · Ch.-Nr: ${_esc(e.charge_nr)}` : ''}
             </div>
+            ${vetName ? `<div style="font-size:var(--text-sm);color:var(--c-text-secondary);margin-top:var(--space-1)">🏥 ${_esc(vetName)}</div>` : ''}
             ${e.naechstes ? `<div class="health-card-next ampel-text-${ampel.color}">
               Nächste Impfung: ${UI.time.format(e.naechstes + 'T00:00:00')} ${ampel.icon}
             </div>` : ''}
@@ -481,22 +483,31 @@ window.Page_health = (() => {
       icon: '📄', title: 'Noch keine Dokumente', text: 'Lade Impfpässe, Befunde und mehr hoch.', action: addBtn
     });
 
-    const items = entries.map(e => `
-      <div class="health-card" data-id="${e.id}" data-action="open-entry">
-        <div class="health-card-body" style="display:flex;gap:var(--space-3);align-items:center">
-          ${e.datei_url
-            ? (e.datei_typ === 'pdf'
-                ? `<div class="health-doc-icon">📄</div>`
-                : `<img src="${e.datei_url}" class="health-doc-thumb" alt="Dokument">`)
-            : `<div class="health-doc-icon">📎</div>`}
-          <div>
+    const items = entries.map(e => {
+      const isPdf   = e.datei_typ === 'pdf';
+      const hasFile = !!e.datei_url;
+      return `
+        <div class="health-card" data-id="${e.id}" data-action="open-entry">
+          ${hasFile && !isPdf
+            ? `<img src="${e.datei_url}" class="health-doc-thumb" alt="Vorschau"
+                    style="width:64px;height:64px;object-fit:cover;border-radius:var(--radius-md);flex-shrink:0">`
+            : `<div style="width:48px;height:48px;display:flex;align-items:center;justify-content:center;
+                           font-size:2rem;flex-shrink:0">${isPdf ? '📄' : '📎'}</div>`}
+          <div class="health-card-body">
             <div class="health-card-title">${_esc(e.bezeichnung)}</div>
             <div class="health-card-meta">${UI.time.format(e.datum + 'T00:00:00')}</div>
             ${e.notiz ? `<div class="health-card-note">${_esc(e.notiz)}</div>` : ''}
+            ${hasFile
+              ? `<a href="${e.datei_url}" target="_blank" rel="noopener"
+                    class="btn btn-secondary btn-sm" style="margin-top:var(--space-2);display:inline-flex"
+                    onclick="event.stopPropagation()">
+                   ${isPdf ? '📄 PDF öffnen' : '🖼️ Bild öffnen'}
+                 </a>`
+              : `<span style="font-size:var(--text-xs);color:var(--c-text-muted)">Noch keine Datei hochgeladen</span>`}
           </div>
         </div>
-      </div>
-    `).join('');
+      `;
+    }).join('');
 
     return `<div class="health-list">${items}</div>
             <div style="text-align:center;padding:var(--space-4)">${addBtn}</div>`;
@@ -728,6 +739,23 @@ window.Page_health = (() => {
     return ph[typ] || '';
   }
 
+  // Wiederverwendbares Praxis-Dropdown für alle Formulare
+  function _praxisSelectField(entry) {
+    const aktivePraxen = _praxen.filter(p => p.aktiv);
+    if (!aktivePraxen.length) return '';
+    return `
+      <div class="form-group">
+        <label class="form-label">Behandelnde Praxis</label>
+        <select class="form-control" name="tierarzt_id">
+          <option value="">– optional –</option>
+          ${aktivePraxen.map(p => `
+            <option value="${p.id}" ${entry?.tierarzt_id === p.id ? 'selected' : ''}>
+              ${_esc(p.name)}${p.ort ? ` · ${_esc(p.ort)}` : ''}
+            </option>`).join('')}
+        </select>
+      </div>`;
+  }
+
   function _extraFormFields(entry, typ) {
     switch (typ) {
       case 'impfung': return `
@@ -735,10 +763,7 @@ window.Page_health = (() => {
           <label class="form-label">Nächste Impfung (optional)</label>
           <input class="form-control" type="date" name="naechstes" value="${entry?.naechstes || ''}">
         </div>
-        <div class="form-group">
-          <label class="form-label">Tierarzt</label>
-          <input class="form-control" type="text" name="tierarzt_name" value="${_esc(entry?.tierarzt_name || '')}">
-        </div>
+        ${_praxisSelectField(entry)}
         <div class="form-group">
           <label class="form-label">Chargen-Nr.</label>
           <input class="form-control" type="text" name="charge_nr" value="${_esc(entry?.charge_nr || '')}">
@@ -749,10 +774,7 @@ window.Page_health = (() => {
           <label class="form-label">Nächste Behandlung (optional)</label>
           <input class="form-control" type="date" name="naechstes" value="${entry?.naechstes || ''}">
         </div>
-        <div class="form-group">
-          <label class="form-label">Tierarzt</label>
-          <input class="form-control" type="text" name="tierarzt_name" value="${_esc(entry?.tierarzt_name || '')}">
-        </div>
+        ${_praxisSelectField(entry)}
       `;
       case 'tierarzt': {
         const aktivePraxen = _praxen.filter(p => p.aktiv);
@@ -818,6 +840,7 @@ window.Page_health = (() => {
           <label class="form-label">Gabe bis (optional)</label>
           <input class="form-control" type="date" name="bis_datum" value="${entry?.bis_datum || ''}">
         </div>
+        ${_praxisSelectField(entry)}
         <div class="form-group">
           <label class="form-label" style="display:flex;align-items:center;gap:var(--space-2);cursor:pointer">
             <input type="checkbox" name="aktiv" ${entry?.aktiv !== 0 ? 'checked' : ''}>
diff --git a/backend/static/sw.js b/backend/static/sw.js
index cbc4199..62304ca 100644
--- a/backend/static/sw.js
+++ b/backend/static/sw.js
@@ -3,7 +3,7 @@
    Offline-Cache + Push Notifications
    ============================================================ */
 
-const CACHE_VERSION = 'by-v14';
+const CACHE_VERSION = 'by-v15';
 const CACHE_STATIC  = `${CACHE_VERSION}-static`;
 
 // Diese Dateien werden beim Install gecacht (App Shell)