fix: Thumbs via api/photo.php mit Blob-URLs laden (JWT-kompatibel)

<img src> kann keine Authorization-Header schicken. Wir holen die
Bilder jetzt via fetch() mit Bearer-Token und setzen Blob-URLs in die
Thumbnails ein (mit Cache für wiederholte Abrufe). Vorher zeigte die
PWA leere Bild-Placeholder weil document.php eine Session verlangt.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
[deploy]

app.css

@@ -203,6 +203,15 @@ body {
     height: 100%;
     object-fit: cover;
 }
+.photo-grid .thumb-placeholder {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 24px;
+    opacity: 0.5;
+}
 
 /* ----- Toast ----- */
 #toast-container {

app.js

@@ -147,11 +147,13 @@ router.on('/orders/:id', async (args) => {
             <div class="detail-section" style="margin-top:16px;">
                 <h3>Hochgeladene Fotos (${photos.photos.length})</h3>
                 <div class="photo-grid" id="photo-grid">
-                    ${photos.photos.map(p => `<div class="thumb"><img loading="lazy" src="${getPhotoUrl(p.relpath)}"></div>`).join('')}
+                    ${photos.photos.map(p => `<div class="thumb" data-relpath="${escapeHtml(p.relpath)}"><div class="thumb-placeholder">⏳</div></div>`).join('')}
                 </div>
             </div>
         `;
 
+        loadThumbs();
+
         const camInput = document.getElementById('camera-input');
         const galInput = document.getElementById('gallery-input');
         document.getElementById('btn-take-photo').onclick = () => camInput.click();
@@ -165,7 +167,8 @@ router.on('/orders/:id', async (args) => {
             try {
                 const np = await api.listOrderPhotos(args.id);
                 document.getElementById('photo-grid').innerHTML =
-                    np.photos.map(p => `<div class="thumb"><img loading="lazy" src="${getPhotoUrl(p.relpath)}"></div>`).join('');
+                    np.photos.map(p => `<div class="thumb" data-relpath="${escapeHtml(p.relpath)}"><div class="thumb-placeholder">⏳</div></div>`).join('');
+                loadThumbs();
             } catch (e) {}
         }
         camInput.addEventListener('change', () => handleFiles(camInput.files));
@@ -211,11 +214,28 @@ async function resizeImage(file, maxSide) {
     });
 }
 
-function getPhotoUrl(relpath) {
+/**
-    // Wir haben keinen direkten "Read-Photo"-Endpoint im Bericht-Modul,
+ * Lädt alle sichtbaren Thumbnails im aktuellen Photo-Grid.
-    // nutzen stattdessen page_image.php der Anhänge — funktioniert nur via document.php
+ * Nutzt /api/photo.php mit JWT (Header kann <img src> nicht schicken,
-    // Vereinfacht: Dolibarr's document.php mit modulepart=ecm
+ * deshalb Blob-URLs).
-    return window.location.origin + '/document.php?modulepart=commande&file=' + encodeURIComponent(relpath.replace(/^commande\//, ''));
+ */
+async function loadThumbs() {
+    const thumbs = document.querySelectorAll('.photo-grid .thumb[data-relpath]');
+    for (const t of thumbs) {
+        const rel = t.dataset.relpath;
+        try {
+            // Erst Thumbnail versuchen (_small), bei Misserfolg das Original
+            let url = await api.getPhotoBlobUrl(rel, 'small');
+            if (!url) url = await api.getPhotoBlobUrl(rel);
+            if (url) {
+                t.innerHTML = '<img loading="lazy" src="' + url + '">';
+            } else {
+                t.innerHTML = '<div class="thumb-placeholder">❌</div>';
+            }
+        } catch (e) {
+            t.innerHTML = '<div class="thumb-placeholder">❌</div>';
+        }
+    }
 }
 
 router.on('/reports', async () => {

lib/api.js

@@ -84,9 +84,39 @@
         return request('/reports.php?id=' + id);
     }
 
+    /**
+     * Lädt eine Bild-Datei von der API als Blob-URL (inkl. JWT).
+     * Wird benötigt weil <img src> keine Authorization-Header mitschickt.
+     */
+    const blobUrlCache = new Map();
+    async function getPhotoBlobUrl(relpath, size) {
+        const key = (size || 'full') + '|' + relpath;
+        if (blobUrlCache.has(key)) return blobUrlCache.get(key);
+
+        const t = await getToken();
+        if (!t) return null;
+        const params = new URLSearchParams({ relpath });
+        if (size) params.set('size', size);
+
+        const r = await fetch(API_BASE + '/photo.php?' + params.toString(), {
+            headers: { Authorization: 'Bearer ' + t },
+        });
+        if (!r.ok) return null;
+        const blob = await r.blob();
+        const url = URL.createObjectURL(blob);
+        blobUrlCache.set(key, url);
+        return url;
+    }
+
+    function clearPhotoCache() {
+        for (const url of blobUrlCache.values()) URL.revokeObjectURL(url);
+        blobUrlCache.clear();
+    }
+
     window.api = {
         getToken, setToken, clearToken,
         login, logout,
         listOrders, getOrder, listOrderPhotos, uploadOrderPhoto, getReport,
+        getPhotoBlobUrl, clearPhotoCache,
     };
 })();