From 91b13b44142bf2565e308ba3bd68988554591bd6 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Fri, 27 Feb 2026 21:00:33 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Micro-UX=20and=20acce?=
 =?UTF-8?q?ssibility=20improvements=20for=20list=20views?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This change enhances the shared list template to provide a more delightful and accessible experience:
- Modernized search bar layout using DaisyUI 'join' component.
- Added a "Clear Search" button for quick query reset.
- Implemented a "No results found" empty state row for better feedback.
- Added full keyboard support for table sorting (Tab, Enter/Space).
- Added ARIA attributes (role="button", aria-sort, aria-label) to table headers.
- Normalized line endings to LF for the shared template.

Co-authored-by: Woschj <81321922+Woschj@users.noreply.github.com>
---
 app/templates/shared/list_base.html | 813 +++++++++++++++-------------
 1 file changed, 435 insertions(+), 378 deletions(-)

diff --git a/app/templates/shared/list_base.html b/app/templates/shared/list_base.html
index c89a7b4..9ca6a5e 100755
--- a/app/templates/shared/list_base.html
+++ b/app/templates/shared/list_base.html
@@ -1,382 +1,439 @@
-{% extends "base.html" %}
-
-{% block content %}
-<div class="space-y-4">
-    <!-- Suchleiste und Filter -->
-    <div class="card bg-base-100 shadow-lg card-compact">
-        <div class="card-body">
-            <!-- Suchleiste und Aktionen -->
-            <div class="flex flex-col md:flex-row gap-4 items-center">
-                <div class="form-control flex-1">
+{% extends "base.html" %}
+
+{% block content %}
+<div class="space-y-4">
+    <!-- Suchleiste und Filter -->
+    <div class="card bg-base-100 shadow-lg card-compact">
+        <div class="card-body">
+            <!-- Suchleiste und Aktionen -->
+            <div class="flex flex-col md:flex-row gap-4 items-center">
+                <div class="form-control flex-1">
                     <label for="searchInput" class="sr-only">Suchen</label>
-                    <div class="input-group">
-                        <input type="text" 
-                               placeholder="Suchen..." 
-                               class="input input-bordered w-full" 
+                    <div class="join w-full">
+                        <input type="text"
+                               placeholder="Suchen..."
+                               class="input input-bordered w-full join-item"
                                id="searchInput"
                                aria-label="Suchen">
-                        <button type="button" class="btn btn-square" aria-label="Suche ausführen">
-                            <i class="fas fa-search"></i>
-                        </button>
-                    </div>
-                </div>
-
-                <!-- Aktionen -->
-                {% block actions %}{% endblock %}
-            </div>
-
-            <!-- Filter -->
-            <div class="flex flex-wrap gap-3 mt-4">
-                {% block filters %}{% endblock %}
-            </div>
-        </div>
-    </div>
-
-    <!-- Datentabelle -->
-    <div class="card bg-base-100 shadow-lg">
-        <div class="card-body p-0">
-            <div class="table-container">
-                <table class="table table-zebra w-full">
-                    <thead>
-                        <tr>
-                            {% block table_headers %}{% endblock %}
-                        </tr>
-                    </thead>
-                    <tbody>
-                        {% block table_rows %}{% endblock %}
-                    </tbody>
-                </table>
-            </div>
-        </div>
-    </div>
-
-    <!-- Kontext-Hilfe (optional) -->
-    {% if help_title or help_items %}
-    <div class="card bg-base-100 shadow-lg">
-        <div class="card-body">
-            <h3 class="card-title text-lg">
-                <i class="fas fa-question-circle text-primary mr-2"></i>
-                {{ help_title or 'Hilfe' }}
-            </h3>
-            {% if help_text %}
-            <p class="text-sm opacity-75 mb-2">{{ help_text }}</p>
-            {% endif %}
-            {% if help_items %}
-            <ul class="list-disc list-inside text-sm space-y-1">
-                {% for item in help_items %}
-                <li>{{ item }}</li>
-                {% endfor %}
-            </ul>
-            {% endif %}
-        </div>
-    </div>
-    {% endif %}
-</div>
-
-<!-- Scripts -->
-<script nonce="{{ csp_nonce }}">
-// Basis-Suchfunktion
-document.addEventListener('DOMContentLoaded', function() {
-    const searchInput = document.getElementById('searchInput');
-    if (searchInput) {
-        searchInput.addEventListener('input', function(e) {
-            const searchTerm = e.target.value.toLowerCase();
-            document.querySelectorAll('.data-row').forEach(row => {
-                const searchableContent = row.textContent.toLowerCase();
-                row.style.display = searchableContent.includes(searchTerm) ? '' : 'none';
-            });
-        });
-    }
-
-    // Sortier-Funktionalität
-    let currentSort = { column: null, direction: 'asc' };
-
-    // Füge Sortier-Icons zu den Tabellen-Headers hinzu
-    document.querySelectorAll('th').forEach(th => {
-        if (!th.classList.contains('no-sort')) {
-            const wrapper = document.createElement('div');
-            wrapper.className = 'flex items-center gap-2 cursor-pointer select-none';
-            wrapper.innerHTML = `
-                ${th.innerHTML}
-                <span class="sort-icons opacity-50">
-                    <i class="fas fa-sort"></i>
-                </span>
-            `;
-            th.innerHTML = '';
-            th.appendChild(wrapper);
-
-            wrapper.addEventListener('click', () => {
-                const column = Array.from(th.parentElement.children).indexOf(th);
-                sortTable(column, th);
-            });
-        }
-    });
-
-    function sortTable(column, th) {
-        const table = th.closest('table');
-        const tbody = table.querySelector('tbody');
-        const rows = Array.from(tbody.querySelectorAll('tr'));
-        
-        // Update Sort-Direction
-        if (currentSort.column === column) {
-            currentSort.direction = currentSort.direction === 'asc' ? 'desc' : 'asc';
-        } else {
-            currentSort.column = column;
-            currentSort.direction = 'asc';
-        }
-
-        // Update Sort-Icons
-        table.querySelectorAll('.sort-icons').forEach(icon => {
-            icon.innerHTML = '<i class="fas fa-sort"></i>';
-        });
-        
-        const currentIcon = th.querySelector('.sort-icons');
-        if (currentSort.direction === 'asc') {
-            currentIcon.innerHTML = '<i class="fas fa-sort-up"></i>';
-        } else {
-            currentIcon.innerHTML = '<i class="fas fa-sort-down"></i>';
-        }
-
-        // Sortiere die Zeilen
-        rows.sort((a, b) => {
-            const aValue = a.children[column]?.textContent || '';
-            const bValue = b.children[column]?.textContent || '';
-            
-            if (currentSort.direction === 'asc') {
-                return aValue.localeCompare(bValue);
-            } else {
-                return bValue.localeCompare(aValue);
-            }
-        });
-
-        // Entferne und füge sortierte Zeilen wieder hinzu
-        rows.forEach(row => tbody.appendChild(row));
-    }
-
-    // Tool-spezifische Funktionen
-    {% if request.endpoint == 'tools.index' %}
-    console.log('=== TOOLS PAGE SCRIPT LOADED ===');
-
-    // Filter-Funktionalität
-    function initializeFilters() {
-        console.log('Initializing filters...');
-        const categoryFilter = document.getElementById('categoryFilter');
-        const locationFilter = document.getElementById('locationFilter');
-        const statusFilter = document.getElementById('statusFilter');
-
-        function applyFilters() {
-            const category = categoryFilter.value;
-            const location = locationFilter.value;
-            const status = statusFilter.value;
-
-            document.querySelectorAll('.data-row').forEach(row => {
-                const matchesCategory = !category || row.dataset.category === category;
-                const matchesLocation = !location || row.dataset.location === location;
-                const matchesStatus = !status || row.dataset.status === status;
-
-                row.style.display = matchesCategory && matchesLocation && matchesStatus ? '' : 'none';
-            });
-        }
-
-        categoryFilter.addEventListener('change', applyFilters);
-        locationFilter.addEventListener('change', applyFilters);
-        statusFilter.addEventListener('change', applyFilters);
-        console.log('Filters initialized');
-    }
-
-    // Medien-Vorschau für Werkzeuge laden
-    function loadToolPreviews() {
-        console.log('=== LOADING TOOL PREVIEWS ===');
-        
-        const toolPreviews = document.querySelectorAll('.tool-media-preview');
-        console.log(`Found ${toolPreviews.length} tool previews`);
-        
-        toolPreviews.forEach((preview, index) => {
-            const barcode = preview.dataset.barcode;
-            const savedPreviewImage = preview.dataset.previewImage;
-            
-            console.log(`[${index}] Loading preview for tool ${barcode}, saved preview: ${savedPreviewImage}`);
-            
-            if (barcode) {
-                const url = `/media/tools/${barcode}/list`;
-                console.log(`[${index}] Fetching from: ${url}`);
-                
-                fetch(url)
-                    .then(response => {
-                        console.log(`[${index}] Response status:`, response.status);
-                        return response.json();
-                    })
-                    .then(data => {
-                        console.log(`[${index}] Media data:`, data);
-                        
-                        if (data.success && data.media_list && data.media_list.length > 0) {
-                            // Suche nach dem gespeicherten Preview-Bild oder verwende das erste
-                            let previewImage = data.media_list[0];
-                            
-                            // Wenn ein gespeichertes Preview-Bild existiert, verwende es
-                            if (savedPreviewImage && savedPreviewImage !== '') {
-                                const savedImage = data.media_list.find(img => img.filename === savedPreviewImage);
-                                if (savedImage) {
-                                    console.log(`[${index}] Found saved preview image:`, savedImage);
-                                    previewImage = savedImage;
-                                } else {
-                                    console.log(`[${index}] Saved preview image not found in media list`);
-                                }
-                            }
-                            
-                            console.log(`[${index}] Using preview image:`, previewImage);
-                            console.log(`[${index}] Image URL:`, previewImage.url);
-                            
-                            // Test: Zeige das Bild direkt an
-                            const imgHtml = `<img src="${previewImage.url}" alt="Werkzeug Vorschau" class="w-12 h-12 object-cover rounded-lg">`;
-                            console.log(`[${index}] Setting HTML:`, imgHtml);
-                            
-                            preview.innerHTML = imgHtml;
-                            
-                            // Zusätzlicher Test: Prüfe ob das Bild geladen wurde
-                            setTimeout(() => {
-                                const img = preview.querySelector('img');
-                                if (img) {
-                                    console.log(`[${index}] Image element found, src:`, img.src);
-                                    img.onload = () => console.log(`[${index}] Image loaded successfully`);
-                                    img.onerror = () => console.log(`[${index}] Image failed to load`);
-                                } else {
-                                    console.log(`[${index}] No image element found after setting HTML`);
-                                }
-                            }, 100);
-                            
-                        } else {
-                            console.log(`[${index}] No media found for tool ${barcode}`);
-                        }
-                    })
-                    .catch(error => {
-                        console.error(`[${index}] Fehler beim Laden der Medien-Vorschau:`, error);
-                    });
-            } else {
-                console.log(`[${index}] No barcode found`);
-            }
-        });
-    }
-
-    // Sofortige Ausführung für Tools
-    console.log('Running tools page script immediately');
-    initializeFilters();
-    loadToolPreviews();
-    {% endif %}
-
-    // Verbrauchsgüter-spezifische Funktionen
-    {% if request.endpoint == 'consumables.index' %}
-    console.log('=== CONSUMABLES PAGE SCRIPT LOADED ===');
-
-    // Filter-Funktionalität
-    function initializeFilters() {
-        console.log('Initializing filters...');
-        const categoryFilter = document.getElementById('categoryFilter');
-        const locationFilter = document.getElementById('locationFilter');
-        const stockFilter = document.getElementById('stockFilter');
-
-        function applyFilters() {
-            const category = categoryFilter.value;
-            const location = locationFilter.value;
-            const stock = stockFilter.value;
-
-            document.querySelectorAll('.data-row').forEach(row => {
-                const matchesCategory = !category || row.dataset.category === category;
-                const matchesLocation = !location || row.dataset.location === location;
-                const matchesStock = !stock || row.dataset.stock === stock;
-
-                row.style.display = matchesCategory && matchesLocation && matchesStock ? '' : 'none';
-            });
-        }
-
-        categoryFilter.addEventListener('change', applyFilters);
-        locationFilter.addEventListener('change', applyFilters);
-        stockFilter.addEventListener('change', applyFilters);
-        console.log('Filters initialized');
-    }
-
-    // Medien-Vorschau für Verbrauchsgüter laden
-    function loadConsumablePreviews() {
-        console.log('=== LOADING CONSUMABLE PREVIEWS ===');
-        
-        const consumablePreviews = document.querySelectorAll('.consumable-media-preview');
-        console.log(`Found ${consumablePreviews.length} consumable previews`);
-        
-        consumablePreviews.forEach((preview, index) => {
-            const barcode = preview.dataset.barcode;
-            const savedPreviewImage = preview.dataset.previewImage;
-            
-            console.log(`[${index}] Loading preview for consumable ${barcode}, saved preview: ${savedPreviewImage}`);
-            
-            if (barcode) {
-                const url = `/media/consumables/${barcode}/list`;
-                console.log(`[${index}] Fetching from: ${url}`);
-                
-                fetch(url)
-                    .then(response => {
-                        console.log(`[${index}] Response status:`, response.status);
-                        return response.json();
-                    })
-                    .then(data => {
-                        console.log(`[${index}] Media data:`, data);
-                        
-                        if (data.success && data.media_list && data.media_list.length > 0) {
-                            // Suche nach dem gespeicherten Preview-Bild oder verwende das erste
-                            let previewImage = data.media_list[0];
-                            
-                            // Wenn ein gespeichertes Preview-Bild existiert, verwende es
-                            if (savedPreviewImage && savedPreviewImage !== '') {
-                                const savedImage = data.media_list.find(img => img.filename === savedPreviewImage);
-                                if (savedImage) {
-                                    console.log(`[${index}] Found saved preview image:`, savedImage);
-                                    previewImage = savedImage;
-                                } else {
-                                    console.log(`[${index}] Saved preview image not found in media list`);
-                                }
-                            }
-                            
-                            console.log(`[${index}] Using preview image:`, previewImage);
-                            console.log(`[${index}] Image URL:`, previewImage.url);
-                            
-                            // Test: Zeige das Bild direkt an
-                            const imgHtml = `<img src="${previewImage.url}" alt="Verbrauchsgut Vorschau" class="w-12 h-12 object-cover rounded-lg">`;
-                            console.log(`[${index}] Setting HTML:`, imgHtml);
-                            
-                            preview.innerHTML = imgHtml;
-                            
-                            // Zusätzlicher Test: Prüfe ob das Bild geladen wurde
-                            setTimeout(() => {
-                                const img = preview.querySelector('img');
-                                if (img) {
-                                    console.log(`[${index}] Image element found, src:`, img.src);
-                                    img.onload = () => console.log(`[${index}] Image loaded successfully`);
-                                    img.onerror = () => console.log(`[${index}] Image failed to load`);
-                                } else {
-                                    console.log(`[${index}] No image element found after setting HTML`);
-                                }
-                            }, 100);
-                            
-                        } else {
-                            console.log(`[${index}] No media found for consumable ${barcode}`);
-                        }
-                    })
-                    .catch(error => {
-                        console.error(`[${index}] Fehler beim Laden der Medien-Vorschau:`, error);
-                    });
-            } else {
-                console.log(`[${index}] No barcode found`);
-            }
-        });
-    }
-
-    // Sofortige Ausführung für Verbrauchsgüter
-    console.log('Running consumables page script immediately');
-    initializeFilters();
-    loadConsumablePreviews();
-    {% endif %}
-});
-</script>
-
-<!-- Delete Script -->
-<script src="{{ url_for('static', filename='js/delete.js') }}"></script>
+                        <button type="button"
+                                id="clearSearch"
+                                class="btn btn-square join-item"
+                                style="display: none;"
+                                aria-label="Suche löschen"
+                                title="Suche löschen">
+                            <i class="fas fa-times"></i>
+                        </button>
+                        <button type="button" class="btn btn-square join-item" aria-label="Suche ausführen">
+                            <i class="fas fa-search"></i>
+                        </button>
+                    </div>
+                </div>
+
+                <!-- Aktionen -->
+                {% block actions %}{% endblock %}
+            </div>
+
+            <!-- Filter -->
+            <div class="flex flex-wrap gap-3 mt-4">
+                {% block filters %}{% endblock %}
+            </div>
+        </div>
+    </div>
+
+    <!-- Datentabelle -->
+    <div class="card bg-base-100 shadow-lg">
+        <div class="card-body p-0">
+            <div class="table-container">
+                <table class="table table-zebra w-full">
+                    <thead>
+                        <tr>
+                            {% block table_headers %}{% endblock %}
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {% block table_rows %}{% endblock %}
+                        <tr id="noResultsRow" style="display: none;">
+                            <td colspan="100" class="text-center py-8 text-base-content/50">
+                                <div class="flex flex-col items-center gap-2">
+                                    <i class="fas fa-search fa-2x opacity-20"></i>
+                                    <span>Keine Ergebnisse für Ihre Suche gefunden.</span>
+                                </div>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+
+    <!-- Kontext-Hilfe (optional) -->
+    {% if help_title or help_items %}
+    <div class="card bg-base-100 shadow-lg">
+        <div class="card-body">
+            <h3 class="card-title text-lg">
+                <i class="fas fa-question-circle text-primary mr-2"></i>
+                {{ help_title or 'Hilfe' }}
+            </h3>
+            {% if help_text %}
+            <p class="text-sm opacity-75 mb-2">{{ help_text }}</p>
+            {% endif %}
+            {% if help_items %}
+            <ul class="list-disc list-inside text-sm space-y-1">
+                {% for item in help_items %}
+                <li>{{ item }}</li>
+                {% endfor %}
+            </ul>
+            {% endif %}
+        </div>
+    </div>
+    {% endif %}
+</div>
+
+<!-- Scripts -->
+<script nonce="{{ csp_nonce }}">
+// Basis-Suchfunktion
+document.addEventListener('DOMContentLoaded', function() {
+    const searchInput = document.getElementById('searchInput');
+    const clearSearch = document.getElementById('clearSearch');
+    const noResultsRow = document.getElementById('noResultsRow');
+
+    if (searchInput) {
+        searchInput.addEventListener('input', function(e) {
+            const searchTerm = e.target.value.toLowerCase();
+            const rows = document.querySelectorAll('.data-row');
+            let hasVisibleRows = false;
+
+            rows.forEach(row => {
+                const searchableContent = row.textContent.toLowerCase();
+                const isVisible = searchableContent.includes(searchTerm);
+                row.style.display = isVisible ? '' : 'none';
+                if (isVisible) hasVisibleRows = true;
+            });
+
+            // "No results" Zeile anzeigen/ausblenden
+            if (noResultsRow) {
+                noResultsRow.style.display = (searchTerm !== '' && !hasVisibleRows) ? 'table-row' : 'none';
+            }
+
+            // Clear-Button anzeigen/ausblenden
+            if (clearSearch) {
+                clearSearch.style.display = searchTerm !== '' ? '' : 'none';
+            }
+        });
+    }
+
+    if (clearSearch && searchInput) {
+        clearSearch.addEventListener('click', function() {
+            searchInput.value = '';
+            searchInput.dispatchEvent(new Event('input'));
+            searchInput.focus();
+        });
+    }
+
+    // Sortier-Funktionalität
+    let currentSort = { column: null, direction: 'asc' };
+
+    // Füge Sortier-Icons zu den Tabellen-Headers hinzu
+    document.querySelectorAll('th').forEach(th => {
+        if (!th.classList.contains('no-sort')) {
+            const wrapper = document.createElement('div');
+            wrapper.className = 'flex items-center gap-2 cursor-pointer select-none focus:outline-none focus:ring-2 focus:ring-primary/50 rounded px-1 -mx-1';
+            wrapper.setAttribute('role', 'button');
+            wrapper.setAttribute('tabindex', '0');
+            const colName = th.textContent.trim();
+            wrapper.setAttribute('aria-label', `Sortieren nach ${colName}`);
+
+            wrapper.innerHTML = `
+                ${th.innerHTML}
+                <span class="sort-icons opacity-50">
+                    <i class="fas fa-sort"></i>
+                </span>
+            `;
+            th.innerHTML = '';
+            th.appendChild(wrapper);
+
+            const triggerSort = () => {
+                const column = Array.from(th.parentElement.children).indexOf(th);
+                sortTable(column, th);
+            };
+
+            wrapper.addEventListener('click', triggerSort);
+            wrapper.addEventListener('keydown', (e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    triggerSort();
+                }
+            });
+        }
+    });
+
+    function sortTable(column, th) {
+        const table = th.closest('table');
+        const tbody = table.querySelector('tbody');
+        const rows = Array.from(tbody.querySelectorAll('tr'));
+
+        // Update Sort-Direction
+        if (currentSort.column === column) {
+            currentSort.direction = currentSort.direction === 'asc' ? 'desc' : 'asc';
+        } else {
+            currentSort.column = column;
+            currentSort.direction = 'asc';
+        }
+
+        // Update Sort-Icons
+        table.querySelectorAll('.sort-icons').forEach(icon => {
+            icon.innerHTML = '<i class="fas fa-sort"></i>';
+        });
+
+        const currentIcon = th.querySelector('.sort-icons');
+        if (currentSort.direction === 'asc') {
+            currentIcon.innerHTML = '<i class="fas fa-sort-up"></i>';
+            th.setAttribute('aria-sort', 'ascending');
+        } else {
+            currentIcon.innerHTML = '<i class="fas fa-sort-down"></i>';
+            th.setAttribute('aria-sort', 'descending');
+        }
+
+        // Sortiere die Zeilen
+        rows.sort((a, b) => {
+            const aValue = a.children[column]?.textContent || '';
+            const bValue = b.children[column]?.textContent || '';
+
+            if (currentSort.direction === 'asc') {
+                return aValue.localeCompare(bValue);
+            } else {
+                return bValue.localeCompare(aValue);
+            }
+        });
+
+        // Entferne und füge sortierte Zeilen wieder hinzu
+        rows.forEach(row => tbody.appendChild(row));
+    }
+
+    // Tool-spezifische Funktionen
+    {% if request.endpoint == 'tools.index' %}
+    console.log('=== TOOLS PAGE SCRIPT LOADED ===');
+
+    // Filter-Funktionalität
+    function initializeFilters() {
+        console.log('Initializing filters...');
+        const categoryFilter = document.getElementById('categoryFilter');
+        const locationFilter = document.getElementById('locationFilter');
+        const statusFilter = document.getElementById('statusFilter');
+
+        function applyFilters() {
+            const category = categoryFilter.value;
+            const location = locationFilter.value;
+            const status = statusFilter.value;
+
+            document.querySelectorAll('.data-row').forEach(row => {
+                const matchesCategory = !category || row.dataset.category === category;
+                const matchesLocation = !location || row.dataset.location === location;
+                const matchesStatus = !status || row.dataset.status === status;
+
+                row.style.display = matchesCategory && matchesLocation && matchesStatus ? '' : 'none';
+            });
+        }
+
+        categoryFilter.addEventListener('change', applyFilters);
+        locationFilter.addEventListener('change', applyFilters);
+        statusFilter.addEventListener('change', applyFilters);
+        console.log('Filters initialized');
+    }
+
+    // Medien-Vorschau für Werkzeuge laden
+    function loadToolPreviews() {
+        console.log('=== LOADING TOOL PREVIEWS ===');
+
+        const toolPreviews = document.querySelectorAll('.tool-media-preview');
+        console.log(`Found ${toolPreviews.length} tool previews`);
+
+        toolPreviews.forEach((preview, index) => {
+            const barcode = preview.dataset.barcode;
+            const savedPreviewImage = preview.dataset.previewImage;
+
+            console.log(`[${index}] Loading preview for tool ${barcode}, saved preview: ${savedPreviewImage}`);
+
+            if (barcode) {
+                const url = `/media/tools/${barcode}/list`;
+                console.log(`[${index}] Fetching from: ${url}`);
+
+                fetch(url)
+                    .then(response => {
+                        console.log(`[${index}] Response status:`, response.status);
+                        return response.json();
+                    })
+                    .then(data => {
+                        console.log(`[${index}] Media data:`, data);
+
+                        if (data.success && data.media_list && data.media_list.length > 0) {
+                            // Suche nach dem gespeicherten Preview-Bild oder verwende das erste
+                            let previewImage = data.media_list[0];
+
+                            // Wenn ein gespeichertes Preview-Bild existiert, verwende es
+                            if (savedPreviewImage && savedPreviewImage !== '') {
+                                const savedImage = data.media_list.find(img => img.filename === savedPreviewImage);
+                                if (savedImage) {
+                                    console.log(`[${index}] Found saved preview image:`, savedImage);
+                                    previewImage = savedImage;
+                                } else {
+                                    console.log(`[${index}] Saved preview image not found in media list`);
+                                }
+                            }
+
+                            console.log(`[${index}] Using preview image:`, previewImage);
+                            console.log(`[${index}] Image URL:`, previewImage.url);
+
+                            // Test: Zeige das Bild direkt an
+                            const imgHtml = `<img src="${previewImage.url}" alt="Werkzeug Vorschau" class="w-12 h-12 object-cover rounded-lg">`;
+                            console.log(`[${index}] Setting HTML:`, imgHtml);
+
+                            preview.innerHTML = imgHtml;
+
+                            // Zusätzlicher Test: Prüfe ob das Bild geladen wurde
+                            setTimeout(() => {
+                                const img = preview.querySelector('img');
+                                if (img) {
+                                    console.log(`[${index}] Image element found, src:`, img.src);
+                                    img.onload = () => console.log(`[${index}] Image loaded successfully`);
+                                    img.onerror = () => console.log(`[${index}] Image failed to load`);
+                                } else {
+                                    console.log(`[${index}] No image element found after setting HTML`);
+                                }
+                            }, 100);
+
+                        } else {
+                            console.log(`[${index}] No media found for tool ${barcode}`);
+                        }
+                    })
+                    .catch(error => {
+                        console.error(`[${index}] Fehler beim Laden der Medien-Vorschau:`, error);
+                    });
+            } else {
+                console.log(`[${index}] No barcode found`);
+            }
+        });
+    }
+
+    // Sofortige Ausführung für Tools
+    console.log('Running tools page script immediately');
+    initializeFilters();
+    loadToolPreviews();
+    {% endif %}
+
+    // Verbrauchsgüter-spezifische Funktionen
+    {% if request.endpoint == 'consumables.index' %}
+    console.log('=== CONSUMABLES PAGE SCRIPT LOADED ===');
+
+    // Filter-Funktionalität
+    function initializeFilters() {
+        console.log('Initializing filters...');
+        const categoryFilter = document.getElementById('categoryFilter');
+        const locationFilter = document.getElementById('locationFilter');
+        const stockFilter = document.getElementById('stockFilter');
+
+        function applyFilters() {
+            const category = categoryFilter.value;
+            const location = locationFilter.value;
+            const stock = stockFilter.value;
+
+            document.querySelectorAll('.data-row').forEach(row => {
+                const matchesCategory = !category || row.dataset.category === category;
+                const matchesLocation = !location || row.dataset.location === location;
+                const matchesStock = !stock || row.dataset.stock === stock;
+
+                row.style.display = matchesCategory && matchesLocation && matchesStock ? '' : 'none';
+            });
+        }
+
+        categoryFilter.addEventListener('change', applyFilters);
+        locationFilter.addEventListener('change', applyFilters);
+        stockFilter.addEventListener('change', applyFilters);
+        console.log('Filters initialized');
+    }
+
+    // Medien-Vorschau für Verbrauchsgüter laden
+    function loadConsumablePreviews() {
+        console.log('=== LOADING CONSUMABLE PREVIEWS ===');
+
+        const consumablePreviews = document.querySelectorAll('.consumable-media-preview');
+        console.log(`Found ${consumablePreviews.length} consumable previews`);
+
+        consumablePreviews.forEach((preview, index) => {
+            const barcode = preview.dataset.barcode;
+            const savedPreviewImage = preview.dataset.previewImage;
+
+            console.log(`[${index}] Loading preview for consumable ${barcode}, saved preview: ${savedPreviewImage}`);
+
+            if (barcode) {
+                const url = `/media/consumables/${barcode}/list`;
+                console.log(`[${index}] Fetching from: ${url}`);
+
+                fetch(url)
+                    .then(response => {
+                        console.log(`[${index}] Response status:`, response.status);
+                        return response.json();
+                    })
+                    .then(data => {
+                        console.log(`[${index}] Media data:`, data);
+
+                        if (data.success && data.media_list && data.media_list.length > 0) {
+                            // Suche nach dem gespeicherten Preview-Bild oder verwende das erste
+                            let previewImage = data.media_list[0];
+
+                            // Wenn ein gespeichertes Preview-Bild existiert, verwende es
+                            if (savedPreviewImage && savedPreviewImage !== '') {
+                                const savedImage = data.media_list.find(img => img.filename === savedPreviewImage);
+                                if (savedImage) {
+                                    console.log(`[${index}] Found saved preview image:`, savedImage);
+                                    previewImage = savedImage;
+                                } else {
+                                    console.log(`[${index}] Saved preview image not found in media list`);
+                                }
+                            }
+
+                            console.log(`[${index}] Using preview image:`, previewImage);
+                            console.log(`[${index}] Image URL:`, previewImage.url);
+
+                            // Test: Zeige das Bild direkt an
+                            const imgHtml = `<img src="${previewImage.url}" alt="Verbrauchsgut Vorschau" class="w-12 h-12 object-cover rounded-lg">`;
+                            console.log(`[${index}] Setting HTML:`, imgHtml);
+
+                            preview.innerHTML = imgHtml;
+
+                            // Zusätzlicher Test: Prüfe ob das Bild geladen wurde
+                            setTimeout(() => {
+                                const img = preview.querySelector('img');
+                                if (img) {
+                                    console.log(`[${index}] Image element found, src:`, img.src);
+                                    img.onload = () => console.log(`[${index}] Image loaded successfully`);
+                                    img.onerror = () => console.log(`[${index}] Image failed to load`);
+                                } else {
+                                    console.log(`[${index}] No image element found after setting HTML`);
+                                }
+                            }, 100);
+
+                        } else {
+                            console.log(`[${index}] No media found for consumable ${barcode}`);
+                        }
+                    })
+                    .catch(error => {
+                        console.error(`[${index}] Fehler beim Laden der Medien-Vorschau:`, error);
+                    });
+            } else {
+                console.log(`[${index}] No barcode found`);
+            }
+        });
+    }
+
+    // Sofortige Ausführung für Verbrauchsgüter
+    console.log('Running consumables page script immediately');
+    initializeFilters();
+    loadConsumablePreviews();
+    {% endif %}
+});
+</script>
+
+<!-- Delete Script -->
+<script src="{{ url_for('static', filename='js/delete.js') }}"></script>
 {% endblock %} 
\ No newline at end of file