Introduction of the images to the detailed view to the library_table.html

Web/templates/library_table.html

@@ -52,9 +52,10 @@
 
     /* The Scrollable Content Area */
     #detailContent {
-        overflow-y: auto; /* Adds scrollbar only if needed */
-        padding-right: 10px; /* Prevents text from rubbing against the scrollbar */
+        overflow-y: auto;
+        padding-right: 10px;
     }
+
     /* Library table-only view styles */
     .library-table-container {
         max-width: 1400px;
@@ -276,6 +277,7 @@
         border-bottom: 1px solid #eee;
         color: #555;
         font-size: 0.95em;
+        vertical-align: middle;
     }
 
     .library-items-table tbody tr:hover {
@@ -500,14 +502,14 @@
 
     <!-- Search and Filter Toggle -->
     <div class="library-search-bar">
-        <input 
-            type="text" 
-            id="librarySearch" 
-            class="library-search-input" 
+        <input
+            type="text"
+            id="librarySearch"
+            class="library-search-input"
             placeholder="Nach Titel, ISBN suchen..."
         >
-        <button 
-            id="filterToggleBtn" 
+        <button
+            id="filterToggleBtn"
             class="library-filter-toggle-btn"
             aria-label="Filter öffnen/schließen"
         >
@@ -598,12 +600,12 @@
         <table class="library-items-table">
             <thead>
                 <tr>
-                    <th style="width: 24%;">Titel</th>
+                    <th style="width: 32%;">Titel</th>
                     <th style="width: 12%;">ISBN/Code</th>
                     <th style="width: 8%;">Typ</th>
                     <th style="width: 8%;">Anzahl</th>
-                    <th style="width: 12%;">Status</th>
-                    <th style="width: 22%;">Aktionen</th>
+                    <th style="width: 14%;">Status</th>
+                    <th style="width: 26%;">Aktionen</th>
                 </tr>
             </thead>
             <tbody id="itemsTableBody">
@@ -656,11 +658,11 @@
     const RENDER_BATCH_COUNT = 120;
     let renderedCount = INITIAL_RENDER_COUNT;
     let filterPanelOpen = false;
-    
+
     // Scanner Related State Variables
     let scannerInstance = null;
-    let scannerRunning = false; 
-    let activeScannerCallback = null; 
+    let scannerRunning = false;
+    let activeScannerCallback = null;
     let activeStudentCardId = '';
     let lastScanValue = '';
     let lastScanAt = 0;
@@ -674,9 +676,14 @@
         seriesGroupId: '',
         groupMembers: []
     };
-    
+
     const canEditLibraryItems = (document.getElementById('libraryTableContainer')?.dataset.canEdit === '1');
 
+    function isVideoFile(filename) {
+        if (!filename) return false;
+        return /\.(mp4|webm|ogg|mov)$/i.test(filename);
+    }
+
     // =========================================================================
     // 2. DATA LOADING & FILTERING ENGINE
     // =========================================================================
@@ -705,7 +712,7 @@
             }
         } catch (error) {
             console.error('Error loading library items:', error);
-            document.getElementById('itemsTableBody').innerHTML = '<tr><td colspan="7" style="text-align:center; color:#999;">Fehler beim Laden der Bibliothekselemente.</td></tr>';
+            document.getElementById('itemsTableBody').innerHTML = '<tr><td colspan="8" style="text-align:center; color:#999;">Fehler beim Laden der Bibliothekselemente.</td></tr>';
         } finally {
             pagingState.loading = false;
         }
@@ -797,6 +804,7 @@
             const statusText = statusKey === 'damaged' ? 'Defekt/Zerstört' : (statusKey === 'borrowed' ? 'Ausgeliehen' : 'Verfügbar');
             const actionLabel = statusKey === 'available' ? 'Ausleihen' : (statusKey === 'borrowed' ? 'Reservieren' : 'Nicht ausleihbar');
             const actionDisabled = statusKey === 'damaged' ? 'disabled' : '';
+
             return `
         <tr>
             <td class="table-title">${escapeHtml(item.Name || 'Untitled')}</td>
@@ -877,33 +885,33 @@
     function startScanner(targetCallback) {
         const readerWrap = document.getElementById('scanReaderWrap');
         const toggleBtn = document.getElementById('toggleScannerBtn');
-        
+
         activeScannerCallback = targetCallback;
 
         if (readerWrap) readerWrap.style.display = 'block';
         setScanStatus('Initializing camera...', 'warn');
-    
+
         Quagga.init({
             inputStream: {
                 name: "Live",
                 type: "LiveStream",
-                target: document.querySelector('#library-scanner-container'), 
+                target: document.querySelector('#library-scanner-container'),
                 constraints: {
                     width: 640,
                     height: 480,
-                    facingMode: "environment" 
+                    facingMode: "environment"
                 },
             },
             decoder: {
                 readers: [
-                    "code_128_reader", 
-                    "ean_reader", 
-                    "code_39_reader", 
-                    "upc_reader", 
-                    "codabar_reader", 
+                    "code_128_reader",
+                    "ean_reader",
+                    "code_39_reader",
+                    "upc_reader",
+                    "codabar_reader",
                     "i2of5_reader"
                 ]
-            } 
+            }
         }, function(err) {
             if (err) {
                 console.error('Scanner start failed:', err);
@@ -912,41 +920,41 @@
                 setScanStatus(`Scanner konnte nicht gestartet werden${detail}`, 'error');
                 return;
             }
-        
+
             Quagga.start();
             scannerRunning = true;
-            
+
             if (!targetCallback && toggleBtn) {
                 toggleBtn.textContent = 'Scanner stoppen';
             }
             setScanStatus('Scanner aktiv. Jetzt Code scannen.', 'warn');
         });
     }
-    
+
     function stopScanner() {
         if (!scannerRunning) return;
-        
+
         const readerWrap = document.getElementById('scanReaderWrap');
         const toggleBtn = document.getElementById('toggleScannerBtn');
-    
+
         Quagga.stop();
         scannerRunning = false;
-        activeScannerCallback = null; 
-    
+        activeScannerCallback = null;
+
         if (readerWrap) readerWrap.style.display = 'none';
         if (toggleBtn) toggleBtn.textContent = 'Scanner starten';
         setScanStatus('Scanner gestoppt.', 'warn');
     }
-    
+
     Quagga.onDetected(function(data) {
         if (!data || !data.codeResult || !data.codeResult.code) return;
-        
+
         const barcode = String(data.codeResult.code || '').trim();
         console.log("Barcode detected:", barcode);
-    
+
         const currentCallback = activeScannerCallback;
         stopScanner();
-    
+
         const returnOnly = (document.getElementById('returnOnlyToggle') || {}).checked;
         if (returnOnly) {
             // direct return flow
@@ -1008,21 +1016,21 @@
     function handleScanSuccess(decodedText) {
         const scannedCode = normalizeScannedCode(decodedText);
         if (!scannedCode) return;
-    
+
         const now = Date.now();
         if (scannedCode === lastScanValue && (now - lastScanAt) < 1500) {
             return;
         }
         lastScanValue = scannedCode;
         lastScanAt = now;
-    
+
         const mode = (document.getElementById('scanModeSelect') || {}).value || 'card_only';
         if (mode === 'card_only') {
             setActiveStudentCard(scannedCode);
             setScanStatus(`Ausweis gesetzt: ${activeStudentCardId}`, 'ok');
             return;
         }
-    
+
         processQuickToggleScan(scannedCode);
     }
 
@@ -1250,10 +1258,50 @@
         const detailModal = document.getElementById('detailModal');
 
         // 1. Show the loading state immediately
-        detailContent.innerHTML = '<p>Loading details...</p>';
+        detailContent.innerHTML = '<p>Lade Details...</p>';
         detailModal.style.display = 'flex';
 
-        // 2. Fetch the data
+        // 2. Generate Image/Video Gallery Client-Side
+        const item = libraryItems.find(i => i._id === itemId);
+        let mediaHtml = '';
+
+        if (item && item.Images && item.Images.length > 0) {
+            const imagesHtml = item.Images.map((image, index) => {
+                const imageSrc = image.startsWith('/uploads/') || image.startsWith('http') ?
+                                image :
+                                `{{ url_for('uploaded_file', filename='') }}${image}`;
+
+                const thumbnailInfo = item.ThumbnailInfo && item.ThumbnailInfo[index];
+                const isVideo = isVideoFile(image);
+
+                if (isVideo) {
+                    const videoSrc = thumbnailInfo && thumbnailInfo.has_thumbnail
+                        ? thumbnailInfo.thumbnail_url
+                        : imageSrc;
+
+                    if (thumbnailInfo && thumbnailInfo.has_thumbnail) {
+                        return `<div class="video-container" style="position: relative; width: 120px; height: 120px; display: inline-block; margin-right: 15px; margin-bottom: 15px;">
+                                <img src="${videoSrc}" alt="${escapeHtml(item.Name || '')}" class="item-image" style="width: 100%; height: 100%; object-fit: cover; border-radius: 8px; border: 1px solid #ddd;">
+                                <div class="video-preview-overlay" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; background: rgba(0,0,0,0.6); border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; font-size: 16px;">
+                                    ▶
+                                </div>
+                                </div>`;
+                    } else {
+                         return `<div style="width: 120px; height: 120px; background: #333; color: #fff; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; margin-right: 15px; margin-bottom: 15px;">VIDEO</div>`;
+                    }
+                } else {
+                    const imageSrcFinal = thumbnailInfo && thumbnailInfo.has_thumbnail
+                        ? thumbnailInfo.thumbnail_url
+                        : imageSrc;
+
+                    return `<img src="${imageSrcFinal}" alt="${escapeHtml(item.Name || '')}" class="item-image" style="width: 120px; height: 120px; object-fit: cover; border-radius: 8px; border: 1px solid #ddd; margin-right: 15px; margin-bottom: 15px;">`;
+                }
+            }).join('');
+
+            mediaHtml = `<div class="detail-gallery-container" style="margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid #eee; display: flex; flex-wrap: wrap;">${imagesHtml}</div>`;
+        }
+
+        // 3. Fetch the data
         fetch(`/api/item_detail/${itemId}`)
             .then(response => {
                 if (!response.ok) {
@@ -1262,8 +1310,8 @@
                 return response.text();
             })
             .then(html => {
-                // 3. Clean the HTML and display it
-                detailContent.innerHTML = DOMPurify.sanitize(html);
+                // 4. Clean the HTML and display it, injecting the media gallery before the fetched content
+                detailContent.innerHTML = mediaHtml + DOMPurify.sanitize(html);
             })
             .catch(err => {
                 console.error('Error loading detail:', err);