From 883ea17267d0973c414193e4f6930cb538c9f250 Mon Sep 17 00:00:00 2001
From: Eduard Wisch <data@data-it-solution.de>
Date: Wed, 8 Apr 2026 23:30:07 +0200
Subject: [PATCH] fix: PDF/sonstige Dateien aus Foto-Grid filtern
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Das Auftrags-Anhang-Verzeichnis enthält nicht nur Bilder sondern auch
das Auftrags-PDF. Das wurde von photo.php korrekt als application/pdf
ausgeliefert, aber die PWA zeigte einen roten Placeholder.

Fix: listOrderPhotos-Result vor dem Rendern nach mime-Type filtern.
Bilder kommen in die photo-grid, PDFs/andere Dokumente in eine
separate 'Weitere Dokumente'-Sektion darunter.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
[deploy]
---
 app.js | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/app.js b/app.js
index 9358a48..d3f9d6c 100644
--- a/app.js
+++ b/app.js
@@ -124,6 +124,10 @@ router.on('/orders/:id', async (args) => {
         const photos = await api.listOrderPhotos(args.id).catch(() => ({ photos: [] }));
         title(data.order.ref);
 
+        // Nur Bilder in der Foto-Grid zeigen; alles andere (PDFs etc.) unten auflisten
+        const imagePhotos = photos.photos.filter(p => (p.mime || '').startsWith('image/'));
+        const otherDocs = photos.photos.filter(p => !(p.mime || '').startsWith('image/'));
+
         main().innerHTML = `
             <div class="detail-section">
                 <h3>Kunde</h3>
@@ -145,11 +149,16 @@ router.on('/orders/:id', async (args) => {
             <input type="file" id="gallery-input" class="hidden-input" accept="image/*" multiple>
 
             <div class="detail-section" style="margin-top:16px;">
-                <h3>Hochgeladene Fotos (${photos.photos.length})</h3>
+                <h3>Hochgeladene Fotos (${imagePhotos.length})</h3>
                 <div class="photo-grid" id="photo-grid">
-                    ${photos.photos.map(p => `<div class="thumb" data-relpath="${escapeHtml(p.relpath)}"><div class="thumb-placeholder">⏳</div></div>`).join('')}
+                    ${imagePhotos.map(p => `<div class="thumb" data-relpath="${escapeHtml(p.relpath)}"><div class="thumb-placeholder">⏳</div></div>`).join('')}
                 </div>
             </div>
+            ${otherDocs.length ? `
+            <div class="detail-section">
+                <h3>Weitere Dokumente (${otherDocs.length})</h3>
+                ${otherDocs.map(p => `<p>📄 ${escapeHtml(p.filename)}</p>`).join('')}
+            </div>` : ''}
         `;
 
         loadThumbs();
@@ -166,8 +175,9 @@ router.on('/orders/:id', async (args) => {
             // Reload Photo-Liste
             try {
                 const np = await api.listOrderPhotos(args.id);
+                const imgs = np.photos.filter(p => (p.mime || '').startsWith('image/'));
                 document.getElementById('photo-grid').innerHTML =
-                    np.photos.map(p => `<div class="thumb" data-relpath="${escapeHtml(p.relpath)}"><div class="thumb-placeholder">⏳</div></div>`).join('');
+                    imgs.map(p => `<div class="thumb" data-relpath="${escapeHtml(p.relpath)}"><div class="thumb-placeholder">⏳</div></div>`).join('');
                 loadThumbs();
             } catch (e) {}
         }