From b77352a1429d7e7798ebf5e5f3212c7fbfec24a6 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sat, 28 Feb 2026 21:17:00 +0000
Subject: [PATCH] Refactor list view for better UX and accessibility

- Fix mismatched HTML tag for QuickScan trigger (div -> button)
- Add "Clear Search" button to search bar
- Add "No results" feedback row to tables
- Implement unified filtering logic for all dropdown filters
- Enhance sorting accessibility with keyboard support and ARIA labels
- Normalize line endings in modified templates to LF

Co-authored-by: Woschj <81321922+Woschj@users.noreply.github.com>
---
 app/templates/base.html             |   2 +-
 app/templates/shared/list_base.html | 774 ++++++++++++++--------------
 2 files changed, 397 insertions(+), 379 deletions(-)

diff --git a/app/templates/base.html b/app/templates/base.html
index d35052c..886fbd7 100755
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -235,7 +235,7 @@
         <!-- Vertikales Seitenmenü -->
         <div class="fixed left-0 top-0 h-full w-[260px] flex flex-col pt-0 pb-4 z-[90] transition-all duration-300 group sidebar-permanent">
             <!-- QuickScan-Trigger -->
-            <div id="quickScanTrigger" role="button" tabindex="0" aria-label="QuickScan öffnen" onkeydown="if(event.key==='Enter' || event.key===' ') { event.preventDefault(); this.click(); }" data-role="{{ current_user.role }}" title="{% if not current_user.is_authenticated %}Quick Scan (nicht verfügbar für nicht eingeloggte Benutzer){% elif current_user.role == 'teilnehmer' %}Quick Scan (nicht verfügbar für Teilnehmer){% else %}Quick Scan öffnen{% endif %}">
+            <button id="quickScanTrigger" type="button" aria-label="QuickScan öffnen" data-role="{{ current_user.role }}" title="{% if not current_user.is_authenticated %}Quick Scan (nicht verfügbar für nicht eingeloggte Benutzer){% elif current_user.role == 'teilnehmer' %}Quick Scan (nicht verfügbar für Teilnehmer){% else %}Quick Scan öffnen{% endif %}">
                 <div class="w-full h-full overflow-hidden transition-all duration-300 flex items-center justify-center group
                     {% if not current_user.is_authenticated or current_user.role == 'teilnehmer' %}opacity-50 cursor-not-allowed{% else %}cursor-pointer{% endif %}">
                     <img src="/static/images/scandy-logo.png" alt="Scandy Logo" class="w-10 h-10 object-contain transition-transform duration-300 group-hover:scale-110">
diff --git a/app/templates/shared/list_base.html b/app/templates/shared/list_base.html
index c89a7b4..19d086d 100755
--- a/app/templates/shared/list_base.html
+++ b/app/templates/shared/list_base.html
@@ -1,382 +1,400 @@
-{% 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 relative">
+                        <input type="text"
+                               placeholder="Suchen..."
+                               class="input input-bordered join-item w-full focus:ring-2 focus:ring-primary/20"
                                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 id="clearSearch" type="button" class="btn btn-ghost btn-sm absolute right-14 top-1/2 -translate-y-1/2 z-10" style="display: none;" aria-label="Suche löschen">
+                            <i class="fas fa-times text-base-content/50"></i>
+                        </button>
+                        <button type="button" class="btn btn-primary join-item px-6" aria-label="Suche ausführen">
+                            <i class="fas fa-search text-white"></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-12 text-base-content/50">
+                                <div class="flex flex-col items-center gap-2">
+                                    <i class="fas fa-search text-4xl mb-2 opacity-20"></i>
+                                    <p class="font-medium text-lg text-base-content">Keine Ergebnisse gefunden</p>
+                                    <p class="text-sm">Passen Sie Ihre Suchanfrage oder Filter an.</p>
+                                </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 und Unified Filtering
+document.addEventListener('DOMContentLoaded', function() {
+    const searchInput = document.getElementById('searchInput');
+    const clearSearchBtn = document.getElementById('clearSearch');
+    const noResultsRow = document.getElementById('noResultsRow');
+    const dataRows = document.querySelectorAll('.data-row');
+
+    function updateFilters() {
+        const searchTerm = searchInput ? searchInput.value.toLowerCase() : '';
+
+        // Clear Button Sichtbarkeit
+        if (clearSearchBtn) {
+            clearSearchBtn.style.display = searchTerm ? '' : 'none';
+        }
+
+        // Sammle alle aktiven Filter (Kategorie, Standort, Status, etc.)
+        const activeFilters = Array.from(document.querySelectorAll('select[id$="Filter"]'))
+            .map(select => ({
+                id: select.id.replace('Filter', ''),
+                value: select.value
+            }))
+            .filter(f => f.value);
+
+        let visibleCount = 0;
+
+        dataRows.forEach(row => {
+            const text = row.textContent.toLowerCase();
+            const matchesSearch = !searchTerm || text.includes(searchTerm);
+
+            const matchesFilters = activeFilters.every(filter => {
+                const rowValue = row.dataset[filter.id];
+                return !filter.value || rowValue === filter.value;
+            });
+
+            const isVisible = matchesSearch && matchesFilters;
+            row.style.display = isVisible ? '' : 'none';
+            if (isVisible) visibleCount++;
+        });
+
+        // No Results Row
+        if (noResultsRow) {
+            noResultsRow.style.display = (visibleCount === 0 && dataRows.length > 0) ? '' : 'none';
+        }
+    }
+
+    if (searchInput) {
+        searchInput.addEventListener('input', updateFilters);
+    }
+
+    if (clearSearchBtn) {
+        clearSearchBtn.addEventListener('click', () => {
+            searchInput.value = '';
+            searchInput.focus();
+            updateFilters();
+        });
+    }
+
+    // Event-Listener für alle Filter-Selects
+    document.querySelectorAll('select[id$="Filter"]').forEach(select => {
+        select.addEventListener('change', updateFilters);
+    });
+
+    // 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 headerText = th.textContent.trim();
+            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 p-1 -m-1 transition-all';
+            wrapper.setAttribute('role', 'button');
+            wrapper.setAttribute('tabindex', '0');
+            wrapper.setAttribute('aria-label', `Sortieren nach ${headerText}`);
+
+            wrapper.innerHTML = `
+                ${th.innerHTML}
+                <span class="sort-icons opacity-50">
+                    <i class="fas fa-sort" aria-hidden="true"></i>
+                </span>
+            `;
+            th.innerHTML = '';
+            th.appendChild(wrapper);
+
+            const handleSort = () => {
+                const column = Array.from(th.parentElement.children).indexOf(th);
+                sortTable(column, th);
+            };
+
+            wrapper.addEventListener('click', handleSort);
+            wrapper.addEventListener('keydown', (e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    handleSort();
+                }
+            });
+        }
+    });
+
+    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 ===');
+
+    // 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');
+    loadToolPreviews();
+    {% endif %}
+
+    // Verbrauchsgüter-spezifische Funktionen
+    {% if request.endpoint == 'consumables.index' %}
+    console.log('=== CONSUMABLES PAGE SCRIPT LOADED ===');
+
+    // 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');
+    loadConsumablePreviews();
+    {% endif %}
+});
+</script>
+
+<!-- Delete Script -->
+<script src="{{ url_for('static', filename='js/delete.js') }}"></script>
 {% endblock %} 
\ No newline at end of file