Correction of the table library view

Web/app.py

@@ -3203,6 +3203,8 @@ def home_admin():
         flash('Ihnen ist es nicht gestattet auf dieser Internetanwendung, die eben besuchte Adrrese zu nutzen, versuchen sie es erneut nach dem sie sich mit einem berechtigten Nutzer angemeldet haben!', 'error')
         return redirect(url_for('library_view'))
 
+    filter_names = it.get_filter_names()
+
     return render_template(
         'main_admin.html',
         username=session['username'],
@@ -3212,6 +3214,7 @@ def home_admin():
         student_default_borrow_days=cfg.STUDENT_DEFAULT_BORROW_DAYS,
         student_max_borrow_days=cfg.STUDENT_MAX_BORROW_DAYS,
         school_info=_get_school_info_for_export(),
+        filter_names=filter_names,
         open_item=request.args.get('open_item')
     )
 

Web/modules/database/items.py

@@ -911,9 +911,9 @@ def get_filter_names():
     if names_doc and 'names' in names_doc:
         return names_doc['names']
     return {
-        '1': 'Fach/Kategorie',
-        '2': 'System/Bereich',
-        '3': 'Typ/Art'
+        '1': 'Jahrgangsstufe',
+        '2': 'Fach',
+        '3': 'Schlagwort'
     }
 
 def set_filter_name(filter_num, name):

Web/templates/admin_school_settings.html

@@ -78,15 +78,15 @@
                     <div class="form-row">
                         <div class="form-group">
                             <label for="filter_name_1">Name Filter 1</label>
-                            <input type="text" id="filter_name_1" name="filter_name_1" value="{{ filter_names.get('1', 'Fach/Kategorie') }}" placeholder="z. B. Fach/Kategorie">
+                            <input type="text" id="filter_name_1" name="filter_name_1" value="{{ filter_names.get('1', 'Klassenstufe') }}" placeholder="z. B. Klassenstufe">
                         </div>
                         <div class="form-group">
                             <label for="filter_name_2">Name Filter 2</label>
-                            <input type="text" id="filter_name_2" name="filter_name_2" value="{{ filter_names.get('2', 'System/Bereich') }}" placeholder="z. B. System/Bereich">
+                            <input type="text" id="filter_name_2" name="filter_name_2" value="{{ filter_names.get('2', 'Fach') }}" placeholder="z. B. Fach">
                         </div>
                         <div class="form-group">
                             <label for="filter_name_3">Name Filter 3</label>
-                            <input type="text" id="filter_name_3" name="filter_name_3" value="{{ filter_names.get('3', 'Typ/Art') }}" placeholder="z. B. Typ/Art">
+                            <input type="text" id="filter_name_3" name="filter_name_3" value="{{ filter_names.get('3', 'Schlagwort') }}" placeholder="z. B. Schlagwort">
                         </div>
                     </div>
 

Web/templates/library_table.html

@@ -613,8 +613,200 @@
     </div>
 </div>
 <script src="https://cdn.jsdelivr.net/npm/@ericblade/quagga2/dist/quagga.js"></script>
-{% endblock %}
 <script>
+
+    // =========================================================================
+    // CUSTOM MODAL HELPERS (Replaces native browser alert, confirm & prompt)
+    // =========================================================================
+    function createModalOverlay() {
+        const overlay = document.createElement('div');
+        overlay.style.position = 'fixed';
+        overlay.style.top = '0';
+        overlay.style.left = '0';
+        overlay.style.width = '100vw';
+        overlay.style.height = '100vh';
+        overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.6)';
+        overlay.style.display = 'flex';
+        overlay.style.alignItems = 'center';
+        overlay.style.justifyContent = 'center';
+        overlay.style.zIndex = '999999';
+        return overlay;
+    }
+
+    function createModalBox() {
+        const box = document.createElement('div');
+        box.style.backgroundColor = '#fff';
+        box.style.padding = '24px';
+        box.style.borderRadius = '8px';
+        box.style.boxShadow = '0 10px 25px rgba(0,0,0,0.2)';
+        box.style.fontFamily = 'sans-serif';
+        box.style.minWidth = '320px';
+        box.style.maxWidth = '90%';
+        box.style.textAlign = 'left';
+        box.style.color = '#333';
+        return box;
+    }
+
+    function customAlert(message) {
+        return new Promise((resolve) => {
+            const overlay = createModalOverlay();
+            const box = createModalBox();
+
+            const text = document.createElement('p');
+            text.textContent = message;
+            text.style.marginBottom = '20px';
+            text.style.lineHeight = '1.5';
+            text.style.whiteSpace = 'pre-wrap';
+
+            const btnContainer = document.createElement('div');
+            btnContainer.style.display = 'flex';
+            btnContainer.style.justifyContent = 'flex-end';
+
+            const btn = document.createElement('button');
+            btn.textContent = 'OK';
+            btn.style.padding = '8px 16px';
+            btn.style.cursor = 'pointer';
+            btn.style.border = 'none';
+            btn.style.backgroundColor = '#007bff';
+            btn.style.color = '#fff';
+            btn.style.borderRadius = '4px';
+
+            btn.onclick = () => {
+                document.body.removeChild(overlay);
+                resolve();
+            };
+
+            btnContainer.appendChild(btn);
+            box.appendChild(text);
+            box.appendChild(btnContainer);
+            overlay.appendChild(box);
+            document.body.appendChild(overlay);
+            btn.focus();
+        });
+    }
+
+    function customConfirm(message) {
+        return new Promise((resolve) => {
+            const overlay = createModalOverlay();
+            const box = createModalBox();
+
+            const text = document.createElement('p');
+            text.textContent = message;
+            text.style.marginBottom = '20px';
+            text.style.lineHeight = '1.5';
+            text.style.whiteSpace = 'pre-wrap';
+
+            const btnContainer = document.createElement('div');
+            btnContainer.style.display = 'flex';
+            btnContainer.style.justifyContent = 'flex-end';
+            btnContainer.style.gap = '10px';
+
+            const cancelBtn = document.createElement('button');
+            cancelBtn.textContent = 'Abbrechen';
+            cancelBtn.style.padding = '8px 16px';
+            cancelBtn.style.cursor = 'pointer';
+            cancelBtn.style.border = '1px solid #ccc';
+            cancelBtn.style.backgroundColor = '#f8f9fa';
+            cancelBtn.style.color = '#333';
+            cancelBtn.style.borderRadius = '4px';
+
+            const okBtn = document.createElement('button');
+            okBtn.textContent = 'OK';
+            okBtn.style.padding = '8px 16px';
+            okBtn.style.cursor = 'pointer';
+            okBtn.style.border = 'none';
+            okBtn.style.backgroundColor = '#007bff';
+            okBtn.style.color = '#fff';
+            okBtn.style.borderRadius = '4px';
+
+            const closeAndResolve = (val) => {
+                document.body.removeChild(overlay);
+                resolve(val);
+            };
+
+            cancelBtn.onclick = () => closeAndResolve(false);
+            okBtn.onclick = () => closeAndResolve(true);
+
+            btnContainer.appendChild(cancelBtn);
+            btnContainer.appendChild(okBtn);
+            box.appendChild(text);
+            box.appendChild(btnContainer);
+            overlay.appendChild(box);
+            document.body.appendChild(overlay);
+            okBtn.focus();
+        });
+    }
+
+    function customPrompt(message, defaultValue = '') {
+        return new Promise((resolve) => {
+            const overlay = createModalOverlay();
+            const box = createModalBox();
+
+            const text = document.createElement('p');
+            text.textContent = message;
+            text.style.marginBottom = '15px';
+            text.style.lineHeight = '1.5';
+            text.style.whiteSpace = 'pre-wrap';
+
+            const input = document.createElement('input');
+            input.type = 'text';
+            input.value = defaultValue;
+            input.style.width = '100%';
+            input.style.marginBottom = '20px';
+            input.style.padding = '10px';
+            input.style.boxSizing = 'border-box';
+            input.style.border = '1px solid #ccc';
+            input.style.borderRadius = '4px';
+
+            const btnContainer = document.createElement('div');
+            btnContainer.style.display = 'flex';
+            btnContainer.style.justifyContent = 'flex-end';
+            btnContainer.style.gap = '10px';
+
+            const cancelBtn = document.createElement('button');
+            cancelBtn.textContent = 'Abbrechen';
+            cancelBtn.style.padding = '8px 16px';
+            cancelBtn.style.cursor = 'pointer';
+            cancelBtn.style.border = '1px solid #ccc';
+            cancelBtn.style.backgroundColor = '#f8f9fa';
+            cancelBtn.style.color = '#333';
+            cancelBtn.style.borderRadius = '4px';
+
+            const okBtn = document.createElement('button');
+            okBtn.textContent = 'OK';
+            okBtn.style.padding = '8px 16px';
+            okBtn.style.cursor = 'pointer';
+            okBtn.style.border = 'none';
+            okBtn.style.backgroundColor = '#007bff';
+            okBtn.style.color = '#fff';
+            okBtn.style.borderRadius = '4px';
+
+            const closeAndResolve = (val) => {
+                document.body.removeChild(overlay);
+                resolve(val);
+            };
+
+            cancelBtn.onclick = () => closeAndResolve(null);
+            okBtn.onclick = () => closeAndResolve(input.value);
+
+            input.onkeydown = (e) => {
+                if (e.key === 'Enter') closeAndResolve(input.value);
+                if (e.key === 'Escape') closeAndResolve(null);
+            };
+
+            btnContainer.appendChild(cancelBtn);
+            btnContainer.appendChild(okBtn);
+
+            box.appendChild(text);
+            box.appendChild(input);
+            box.appendChild(btnContainer);
+            overlay.appendChild(box);
+            document.body.appendChild(overlay);
+
+            input.focus();
+            input.select();
+        });
+    }
     // =========================================================================
     // 1. GLOBAL STATE DEFINITIONS
     // =========================================================================
@@ -1242,150 +1434,8 @@
     }
 
     // =========================================================================
-    // CUSTOM MODAL HELPERS (Replaces native alert/prompt)
+    // 4. UI INTERACTIONS & UTILITIES
     // =========================================================================
-    function createModalOverlay() {
-        const overlay = document.createElement('div');
-        overlay.style.position = 'fixed';
-        overlay.style.top = '0';
-        overlay.style.left = '0';
-        overlay.style.width = '100vw';
-        overlay.style.height = '100vh';
-        overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.6)';
-        overlay.style.display = 'flex';
-        overlay.style.alignItems = 'center';
-        overlay.style.justifyContent = 'center';
-        overlay.style.zIndex = '999999';
-        return overlay;
-    }
-
-    function createModalBox() {
-        const box = document.createElement('div');
-        box.style.backgroundColor = '#fff';
-        box.style.padding = '24px';
-        box.style.borderRadius = '8px';
-        box.style.boxShadow = '0 10px 25px rgba(0,0,0,0.2)';
-        box.style.fontFamily = 'sans-serif';
-        box.style.minWidth = '320px';
-        box.style.maxWidth = '90%';
-        box.style.textAlign = 'left';
-        box.style.color = '#333';
-        return box;
-    }
-
-    function customAlert(message) {
-        return new Promise((resolve) => {
-            const overlay = createModalOverlay();
-            const box = createModalBox();
-
-            const text = document.createElement('p');
-            text.textContent = message;
-            text.style.marginBottom = '20px';
-            text.style.lineHeight = '1.5';
-            text.style.whiteSpace = 'pre-wrap';
-
-            const btnContainer = document.createElement('div');
-            btnContainer.style.display = 'flex';
-            btnContainer.style.justifyContent = 'flex-end';
-
-            const btn = document.createElement('button');
-            btn.textContent = 'OK';
-            btn.style.padding = '8px 16px';
-            btn.style.cursor = 'pointer';
-            btn.style.border = 'none';
-            btn.style.backgroundColor = '#007bff';
-            btn.style.color = '#fff';
-            btn.style.borderRadius = '4px';
-
-            btn.onclick = () => {
-                document.body.removeChild(overlay);
-                resolve();
-            };
-
-            btnContainer.appendChild(btn);
-            box.appendChild(text);
-            box.appendChild(btnContainer);
-            overlay.appendChild(box);
-            document.body.appendChild(overlay);
-            btn.focus();
-        });
-    }
-
-    function customPrompt(message, defaultValue = '') {
-        return new Promise((resolve) => {
-            const overlay = createModalOverlay();
-            const box = createModalBox();
-
-            const text = document.createElement('p');
-            text.textContent = message;
-            text.style.marginBottom = '15px';
-            text.style.lineHeight = '1.5';
-            text.style.whiteSpace = 'pre-wrap';
-
-            const input = document.createElement('input');
-            input.type = 'text';
-            input.value = defaultValue;
-            input.style.width = '100%';
-            input.style.marginBottom = '20px';
-            input.style.padding = '10px';
-            input.style.boxSizing = 'border-box';
-            input.style.border = '1px solid #ccc';
-            input.style.borderRadius = '4px';
-
-            const btnContainer = document.createElement('div');
-            btnContainer.style.display = 'flex';
-            btnContainer.style.justifyContent = 'flex-end';
-            btnContainer.style.gap = '10px';
-
-            const cancelBtn = document.createElement('button');
-            cancelBtn.textContent = 'Abbrechen';
-            cancelBtn.style.padding = '8px 16px';
-            cancelBtn.style.cursor = 'pointer';
-            cancelBtn.style.border = '1px solid #ccc';
-            cancelBtn.style.backgroundColor = '#f8f9fa';
-            cancelBtn.style.color = '#333';
-            cancelBtn.style.borderRadius = '4px';
-
-            const okBtn = document.createElement('button');
-            okBtn.textContent = 'OK';
-            okBtn.style.padding = '8px 16px';
-            okBtn.style.cursor = 'pointer';
-            okBtn.style.border = 'none';
-            okBtn.style.backgroundColor = '#007bff';
-            okBtn.style.color = '#fff';
-            okBtn.style.borderRadius = '4px';
-
-            const closeAndResolve = (val) => {
-                document.body.removeChild(overlay);
-                resolve(val);
-            };
-
-            cancelBtn.onclick = () => closeAndResolve(null);
-            okBtn.onclick = () => closeAndResolve(input.value);
-
-            input.onkeydown = (e) => {
-                if (e.key === 'Enter') closeAndResolve(input.value);
-                if (e.key === 'Escape') closeAndResolve(null);
-            };
-
-            btnContainer.appendChild(cancelBtn);
-            btnContainer.appendChild(okBtn);
-
-            box.appendChild(text);
-            box.appendChild(input);
-            box.appendChild(btnContainer);
-            overlay.appendChild(box);
-            document.body.appendChild(overlay);
-
-            input.focus();
-            input.select();
-        });
-    }
-
-    // =========================================================================
-    // ORIGINAL SCRIPT (Updated to use custom modals)
-    // =========================================================================
-
     async function borrowItem(itemId) {
         const selectedItem = (libraryItems || []).find(item => item._id === itemId);
         if (selectedItem && selectedItem.LibraryDisplayStatus === 'damaged') {
@@ -1395,8 +1445,6 @@
 
         const defaultCardId = activeStudentCardId || '';
         const promptCardResult = await customPrompt('Bitte Bibliotheksausweis-ID eingeben:', defaultCardId);
-
-        // Return early if the user clicked "Cancel" (prompt returns null)
         if (promptCardResult === null) return;
 
         const cardId = promptCardResult.trim().toUpperCase();
@@ -1412,7 +1460,6 @@
         const durationInput = promptDurationResult.trim();
 
         const maxAvailable = Math.max(1, parseInt(selectedItem?.AvailableGroupedCount || selectedItem?.Quantity || 1, 10) || 1);
-
         const countPromptResult = await customPrompt(`Anzahl ausleihen? (Standard: 1, verfügbar: ${maxAvailable})`, '1');
         if (countPromptResult === null) return;
 
@@ -1432,7 +1479,7 @@
         const csrfField = document.createElement('input');
         csrfField.type = 'hidden';
         csrfField.name = 'csrf_token';
-        csrfField.value = '{{ csrf_token }}'; // Note: Template syntax remains intact
+        csrfField.value = '{{ csrf_token }}';
         form.appendChild(csrfField);
 
         const cardField = document.createElement('input');
@@ -1502,13 +1549,13 @@
         const labels = { 'book': 'Buch', 'cd': 'CD', 'dvd': 'DVD', 'other': 'Sonstige', 'schoolbook': 'Schulbuch' };
         return labels[type] || type;
     }
+
     function escapeHtml(text) {
         const div = document.createElement('div');
         div.textContent = text;
         return div.innerHTML;
     }
 
-
     function showItemDetail(itemId) {
         const detailContent = document.getElementById('detailContent');
         const detailModal = document.getElementById('detailModal');
@@ -1542,9 +1589,9 @@
                                 : `/uploads/${image}`;
 
                             return `
-                    <div class="item-image-wrapper" style="width: 100%; height: auto;">
-                        <video src="${videoSrc}" class="item-image ${index === 0 ? 'active-image' : ''}" id="modal-image-${index}" controls preload="metadata" style="width: 100%; height: auto; max-height: 300px;"></video>
-                    </div>`;
+                        <div class="item-image-wrapper" style="width: 100%; height: auto;">
+                            <video src="${videoSrc}" class="item-image ${index === 0 ? 'active-image' : ''}" id="modal-image-${index}" controls preload="metadata" style="width: 100%; height: auto; max-height: 300px;"></video>
+                        </div>`;
                         } else {
                             const imageSrc = thumbnailInfo && thumbnailInfo.has_preview
                                 ? thumbnailInfo.preview_url
@@ -1553,15 +1600,15 @@
                                     : `/uploads/${image}`);
 
                             return `
-                    <div class="item-image-wrapper">
-                        <img src="${imageSrc}"
-                             alt="Buchcover / Bild"
-                             class="item-image ${index === 0 ? 'active-image' : ''}"
-                             id="modal-image-${index}"
-                             loading="lazy"
-                             onload="console.log('Bild geladen:', '${imageSrc}')"
-                             onerror="console.error('FEHLER beim Laden des Bildes im DOM:', '${imageSrc}')">
-                    </div>`;
+                        <div class="item-image-wrapper">
+                            <img src="${imageSrc}"
+                                 alt="Buchcover / Bild"
+                                 class="item-image ${index === 0 ? 'active-image' : ''}"
+                                 id="modal-image-${index}"
+                                 loading="lazy"
+                                 onload="console.log('Bild geladen:', '${imageSrc}')"
+                                 onerror="console.error('FEHLER beim Laden des Bildes im DOM:', '${imageSrc}')">
+                        </div>`;
                         }
                     }).join('');
 
@@ -1746,3 +1793,4 @@
         window.location.href = `/item_edit/${itemId}`;
     }
 </script>
+{% endblock %}

Web/templates/main_admin.html

@@ -2343,7 +2343,7 @@ document.addEventListener('DOMContentLoaded', ()=>{
         <div class="filter-container">
             <div class="filter-group">
                 <div class="filter-header">
-                    <label>Unterrichtsfach:</label>
+                    <label>{{ filter_names.get('2', 'Fach') }}</label>
                     <button type="button" class="filter-toggle" onclick="toggleFilterDropdown('filter1-dropdown')">▼</button>
                     <button type="button" class="clear-filter" onclick="clearFilter(1)">Clear</button>
                 </div>
@@ -2357,7 +2357,7 @@ document.addEventListener('DOMContentLoaded', ()=>{
             
             <div class="filter-group">
                 <div class="filter-header">
-                    <label>Jahrgangsstufe:</label>
+                    <label>{{ filter_names.get('1', 'Klassenstufe') }}</label>
                     <button type="button" class="filter-toggle" onclick="toggleFilterDropdown('filter2-dropdown')">▼</button>
                     <button type="button" class="clear-filter" onclick="clearFilter(2)">Clear</button>
                 </div>
@@ -2371,7 +2371,7 @@ document.addEventListener('DOMContentLoaded', ()=>{
             
             <div class="filter-group">
                 <div class="filter-header">
-                    <label>Schlagwort:</label>
+                    <label>{{ filter_names.get('3', 'Schlagwort') }}</label>
                     <button type="button" class="filter-toggle" onclick="toggleFilterDropdown('filter3-dropdown')">▼</button>
                     <button type="button" class="clear-filter" onclick="clearFilter(3)">Clear</button>
                 </div>
@@ -2420,9 +2420,9 @@ document.addEventListener('DOMContentLoaded', ()=>{
         <div id="table-view-header" class="table-view-header" aria-hidden="true">
             <span>Name</span>
             <span>Ort</span>
-            <span>Unterrichtsfach</span>
-            <span>Jahrgangsstufe</span>
-            <span>Schlagwort</span>
+            <span>{{ filter_names.get('2', 'Fach') }}</span>
+            <span>{{ filter_names.get('1', 'Jahrgangsstufe') }}</span>
+            <span>{{ filter_names.get('3', 'Schlagwort') }}</span>
             <span>Barcode</span>
             <span>Anzahl</span>
         </div>