1572 lines
57 KiB
HTML
1572 lines
57 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}📚 Bibliothek - Tabellenansicht - {{ APP_VERSION }}{% endblock %}
|
|
|
|
{% block content %}
|
|
<style>
|
|
/* The Dark Background Overlay */
|
|
.modal {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background-color: rgba(0, 0, 0, 0.6);
|
|
/* Display is managed by JS (none/flex) */
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 1000;
|
|
}
|
|
|
|
/* The White Modal Box */
|
|
.modal-content {
|
|
background-color: #fff;
|
|
padding: 20px;
|
|
width: 80%;
|
|
max-width: 600px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
|
|
|
|
/* Flexbox allows the header to stay fixed while the body scrolls */
|
|
display: flex;
|
|
flex-direction: column;
|
|
max-height: 85vh;
|
|
}
|
|
|
|
/* The Close Button */
|
|
.close {
|
|
align-self: flex-end;
|
|
color: #aaa;
|
|
font-size: 28px;
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
line-height: 1;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.close:hover,
|
|
.close:focus {
|
|
color: #000;
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* The Scrollable Content Area */
|
|
#detailContent {
|
|
overflow-y: auto; /* Adds scrollbar only if needed */
|
|
padding-right: 10px; /* Prevents text from rubbing against the scrollbar */
|
|
}
|
|
/* Library table-only view styles */
|
|
.library-table-container {
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
}
|
|
|
|
.library-header {
|
|
margin-bottom: 25px;
|
|
}
|
|
|
|
.library-header h1 {
|
|
margin: 0 0 5px 0;
|
|
font-size: 2em;
|
|
color: var(--ui-text);
|
|
}
|
|
|
|
.library-header p {
|
|
margin: 0;
|
|
color: #666;
|
|
font-size: 0.95em;
|
|
}
|
|
|
|
/* Library search bar */
|
|
.library-search-bar {
|
|
margin-bottom: 20px;
|
|
display: flex;
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
}
|
|
|
|
.library-search-input {
|
|
flex: 1;
|
|
min-width: 250px;
|
|
padding: 12px 16px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 6px;
|
|
font-size: 16px;
|
|
background: white;
|
|
}
|
|
|
|
/* Scanner panel */
|
|
.library-scan-panel {
|
|
background: var(--ui-surface);
|
|
border: 1px solid #d9dde4;
|
|
border-radius: 8px;
|
|
padding: 14px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.library-scan-controls {
|
|
display: grid;
|
|
grid-template-columns: 220px minmax(220px, 1fr) auto auto;
|
|
gap: 10px;
|
|
align-items: center;
|
|
}
|
|
|
|
.library-scan-controls select,
|
|
.library-scan-controls input {
|
|
padding: 10px 12px;
|
|
border: 1px solid #d0d7e2;
|
|
border-radius: 6px;
|
|
font-size: 14px;
|
|
background: var(--ui-surface);
|
|
}
|
|
|
|
.library-scan-status {
|
|
margin-top: 10px;
|
|
font-size: 0.92em;
|
|
color: #4b5563;
|
|
}
|
|
|
|
.library-scan-status.ok {
|
|
color: #1f7a38;
|
|
}
|
|
|
|
.library-scan-status.warn {
|
|
color: #9a6700;
|
|
}
|
|
|
|
.library-scan-status.error {
|
|
color: #b42318;
|
|
}
|
|
|
|
.library-scan-reader-wrap {
|
|
display: none;
|
|
margin-top: 12px;
|
|
border: 1px solid #d9dde4;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
background: var(--ui-surface);
|
|
max-width: 460px;
|
|
}
|
|
|
|
.library-scan-reader {
|
|
width: 100%;
|
|
min-height: 280px;
|
|
}
|
|
|
|
.library-filter-toggle-btn {
|
|
padding: 10px 16px;
|
|
background: #f0f2f5;
|
|
border: 1px solid #ddd;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
font-weight: 500;
|
|
color: var(--ui-text);
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.library-filter-toggle-btn:hover {
|
|
background: #e4e6eb;
|
|
border-color: #999;
|
|
}
|
|
|
|
.library-filter-toggle-btn.active {
|
|
background: #e0e7ff;
|
|
border-color: #4f46e5;
|
|
color: #4f46e5;
|
|
}
|
|
|
|
/* Filter panel */
|
|
.library-filter-panel {
|
|
display: none;
|
|
background: white;
|
|
border: 1px solid #ddd;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
margin-bottom: 20px;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
|
}
|
|
|
|
.library-filter-panel.open {
|
|
display: block;
|
|
}
|
|
|
|
.filter-row {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 15px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.filter-row:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.filter-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.filter-item label {
|
|
font-weight: 600;
|
|
font-size: 0.9em;
|
|
color: var(--ui-text);
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.filter-item input,
|
|
.filter-item select {
|
|
padding: 8px 12px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
font-size: 14px;
|
|
background: white;
|
|
}
|
|
|
|
.filter-item input:focus,
|
|
.filter-item select:focus {
|
|
outline: none;
|
|
border-color: #4f46e5;
|
|
box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.1);
|
|
}
|
|
|
|
.filter-buttons {
|
|
display: flex;
|
|
gap: 10px;
|
|
margin-top: 15px;
|
|
border-top: 1px solid #eee;
|
|
padding-top: 15px;
|
|
}
|
|
|
|
.filter-buttons .button {
|
|
flex: 1;
|
|
padding: 8px 16px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
/* Library table */
|
|
.library-items-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
background: white;
|
|
border: 1px solid #ddd;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
|
|
}
|
|
|
|
.library-items-table thead {
|
|
background: var(--ui-surface-soft);
|
|
border-bottom: 2px solid #ddd;
|
|
}
|
|
|
|
.library-items-table th {
|
|
padding: 14px 16px;
|
|
text-align: left;
|
|
font-weight: 600;
|
|
color: var(--ui-text);
|
|
font-size: 0.9em;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.library-items-table td {
|
|
padding: 12px 16px;
|
|
border-bottom: 1px solid #eee;
|
|
color: #555;
|
|
font-size: 0.95em;
|
|
}
|
|
|
|
.library-items-table tbody tr:hover {
|
|
background: var(--ui-surface-soft);
|
|
}
|
|
|
|
.library-items-table tbody tr:last-child td {
|
|
border-bottom: none;
|
|
}
|
|
|
|
/* Table cells */
|
|
.table-title {
|
|
font-weight: 600;
|
|
color: var(--ui-text);
|
|
}
|
|
|
|
.table-status {
|
|
display: inline-block;
|
|
padding: 4px 12px;
|
|
border-radius: 20px;
|
|
font-size: 0.85em;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.status-available {
|
|
background: #e8f5e9;
|
|
color: #2e7d32;
|
|
}
|
|
|
|
.status-borrowed {
|
|
background: #fff3e0;
|
|
color: #e65100;
|
|
}
|
|
|
|
.status-damaged {
|
|
background: #fee2e2;
|
|
color: #991b1b;
|
|
}
|
|
|
|
/* Actions */
|
|
.table-actions {
|
|
display: flex;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.table-actions .button {
|
|
padding: 6px 12px;
|
|
font-size: 0.85em;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Empty state */
|
|
.library-empty-state {
|
|
text-align: center;
|
|
padding: 60px 20px;
|
|
color: #999;
|
|
}
|
|
|
|
.library-empty-state h3 {
|
|
font-size: 1.3em;
|
|
margin-bottom: 10px;
|
|
color: #666;
|
|
}
|
|
|
|
.library-load-row {
|
|
margin-top: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.library-load-hint {
|
|
font-size: 0.9em;
|
|
color: #6b7280;
|
|
}
|
|
|
|
/* Small confirmation popup (toast) */
|
|
.small-popup {
|
|
position: fixed;
|
|
bottom: 24px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background: rgba(17, 24, 39, 0.96);
|
|
color: #fff;
|
|
padding: 12px 16px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 6px 24px rgba(2,6,23,0.6);
|
|
z-index: 2000;
|
|
display: flex;
|
|
gap: 10px;
|
|
align-items: center;
|
|
max-width: 90%;
|
|
font-size: 0.95em;
|
|
}
|
|
.small-popup.ok { background: rgba(16,185,129,0.95); color: #032; }
|
|
.small-popup.error { background: rgba(239,68,68,0.95); color: #210; }
|
|
.small-popup .close-x { margin-left: 8px; cursor: pointer; font-weight: 700; }
|
|
|
|
/* Modal styles */
|
|
.modal {
|
|
display: none;
|
|
position: fixed;
|
|
z-index: 1000;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 20px;
|
|
}
|
|
|
|
.modal-content {
|
|
background-color: var(--ui-surface);
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
max-width: 900px;
|
|
max-height: 90vh;
|
|
overflow-y: auto;
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
|
|
position: relative;
|
|
}
|
|
|
|
.edit-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 12px;
|
|
}
|
|
|
|
.edit-grid .full {
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
.edit-grid label {
|
|
font-weight: 600;
|
|
font-size: 0.9em;
|
|
margin-bottom: 4px;
|
|
display: block;
|
|
}
|
|
|
|
.edit-grid input,
|
|
.edit-grid textarea,
|
|
.edit-grid select {
|
|
width: 100%;
|
|
padding: 8px 10px;
|
|
border: 1px solid #d0d7e2;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.edit-actions {
|
|
display: flex;
|
|
gap: 10px;
|
|
margin-top: 14px;
|
|
}
|
|
|
|
.close {
|
|
position: absolute;
|
|
right: 20px;
|
|
top: 10px;
|
|
font-size: 28px;
|
|
font-weight: bold;
|
|
color: #999;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.close:hover {
|
|
color: var(--ui-text);
|
|
}
|
|
|
|
/* Mobile responsive */
|
|
@media (max-width: 768px) {
|
|
.library-table-container {
|
|
padding: 10px;
|
|
}
|
|
|
|
.library-search-bar {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.library-search-input {
|
|
width: 100%;
|
|
}
|
|
|
|
.library-items-table {
|
|
font-size: 0.85em;
|
|
}
|
|
|
|
.library-items-table th,
|
|
.library-items-table td {
|
|
padding: 8px 10px;
|
|
}
|
|
|
|
.table-actions .button {
|
|
padding: 4px 8px;
|
|
font-size: 0.75em;
|
|
}
|
|
|
|
.filter-row {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.library-scan-controls {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.library-scan-reader-wrap {
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<div class="library-table-container" id="libraryTableContainer" data-can-edit="{{ 1 if current_permissions.actions.get('can_edit', False) else 0 }}">
|
|
<!-- Header -->
|
|
<div class="library-header">
|
|
<h1>📚 Bibliothek</h1>
|
|
<p>Bücher, CDs, DVDs und weitere Medien</p>
|
|
</div>
|
|
|
|
<!-- Search and Filter Toggle -->
|
|
<div class="library-search-bar">
|
|
<input
|
|
type="text"
|
|
id="librarySearch"
|
|
class="library-search-input"
|
|
placeholder="Nach Titel, ISBN suchen..."
|
|
>
|
|
<button
|
|
id="filterToggleBtn"
|
|
class="library-filter-toggle-btn"
|
|
aria-label="Filter öffnen/schließen"
|
|
>
|
|
🔍 Filter
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Customizable Filter Panel -->
|
|
|
|
<!-- Student card / quick scan workflow -->
|
|
<div class="library-scan-panel">
|
|
<div class="library-scan-controls">
|
|
<select id="scanModeSelect" aria-label="Scan-Modus">
|
|
<option value="card_only">Nur Ausweis erfassen</option>
|
|
<option value="quick_toggle">Schnellmodus: Ausweis + Mediencode</option>
|
|
</select>
|
|
<input type="text" id="activeStudentCard" placeholder="Aktiver Ausweis (gescannt)" >
|
|
<input type="text" id="manualItemCode" placeholder="Manueller Mediencode (optional)" style="min-width:180px;">
|
|
<button id="resetCardBtn" class="button" type="button">Ausweis löschen</button>
|
|
<button id="toggleScannerBtn" class="button" type="button">Scanner starten</button>
|
|
<label style="display:flex; align-items:center; gap:8px; margin-left:6px;">
|
|
<input type="checkbox" id="keyboardScannerToggle">
|
|
<span style="font-size:0.9em;">Physischer Scanner</span>
|
|
</label>
|
|
<label style="display:flex; align-items:center; gap:8px; margin-left:6px;">
|
|
<input type="checkbox" id="returnOnlyToggle">
|
|
<span style="font-size:0.9em;">Nur Rückgabe (nur Mediencode)</span>
|
|
</label>
|
|
<button id="manualReturnBtn" class="button" type="button" style="margin-left:6px; background:#10b981;color:white;">Rückgabe per Code</button>
|
|
</div>
|
|
<div id="scanStatus" class="library-scan-status">
|
|
Hinweis: Im Schnellmodus zuerst den Schülerausweis scannen, danach den Buch-/Mediencode.
|
|
</div>
|
|
<div id="scanReaderWrap" class="library-scan-reader-wrap" style="display: none;">
|
|
<div id="libraryQrReader" class="library-scan-reader">
|
|
<div id="library-scanner-container"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="filterPanel" class="library-filter-panel">
|
|
<div class="filter-row">
|
|
<div class="filter-item">
|
|
<label for="filterISBN">ISBN:</label>
|
|
<input type="text" id="filterISBN" placeholder="z.B. 978-3...">
|
|
</div>
|
|
<div class="filter-item">
|
|
<label for="filterType">Medientyp:</label>
|
|
<select id="filterType">
|
|
<option value="">-- Alle Typen --</option>
|
|
<option value="book">Buch</option>
|
|
<option value="schoolbook">Schulbuch</option>
|
|
<option value="cd">CD</option>
|
|
<option value="dvd">DVD</option>
|
|
<option value="other">Sonstige</option>
|
|
</select>
|
|
</div>
|
|
<div class="filter-item">
|
|
<label for="filterStatus">Status:</label>
|
|
<select id="filterStatus">
|
|
<option value="">-- Alle Status --</option>
|
|
<option value="available">Verfügbar</option>
|
|
<option value="borrowed">Ausgeliehen</option>
|
|
<option value="damaged">Defekt/Zerstört</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="filter-buttons">
|
|
<button id="applyFilterBtn" class="button" style="background: #4f46e5; color: white;">Filter anwenden</button>
|
|
<button id="clearFilterBtn" class="button" style="background: #f0f2f5; color: var(--ui-text);">Zurücksetzen</button>
|
|
<div style="flex-grow: 1;"></div>
|
|
<button class="button" style="background: #10b981; color: white; display: flex; align-items: center; gap: 0.5rem;" onclick="window.location.href='/library/export/schulbuecher'">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="8" y1="13" x2="16" y2="13"></line><line x1="8" y1="17" x2="16" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
|
|
Schulbücher Excel
|
|
</button>
|
|
<button class="button" style="background: #10b981; color: white; display: flex; align-items: center; gap: 0.5rem;" onclick="window.location.href='/library/export/all_borrowed'">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="8" y1="13" x2="16" y2="13"></line><line x1="8" y1="17" x2="16" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
|
|
Alle ausgeliehen Excel
|
|
</button>
|
|
<button class="button" style="background: #10b981; color: white; display: flex; align-items: center; gap: 0.5rem;" onclick="window.location.href='/library/export/all_books'">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="8" y1="13" x2="16" y2="13"></line><line x1="8" y1="17" x2="16" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
|
|
Alle Bücher Excel
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Items Table -->
|
|
<div id="tableContainer">
|
|
<table class="library-items-table">
|
|
<thead>
|
|
<tr>
|
|
<th style="width: 24%;">Titel</th>
|
|
<th style="width: 12%;">ISBN/Code</th>
|
|
<th style="width: 8%;">Typ</th>
|
|
<th style="width: 8%;">Anzahl</th>
|
|
<th style="width: 12%;">Status</th>
|
|
<th style="width: 22%;">Aktionen</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="itemsTableBody">
|
|
<!-- Items will be loaded here -->
|
|
</tbody>
|
|
</table>
|
|
<div id="loadMoreRow" class="library-load-row" style="display:none;">
|
|
<span id="loadInfo" class="library-load-hint"></span>
|
|
<button id="loadMoreBtn" class="button" type="button">Mehr laden</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Empty state -->
|
|
<div id="emptyState" class="library-empty-state" style="display: none;">
|
|
<h3>📭 Keine Bücher gefunden</h3>
|
|
<p>Versuchen Sie, die Filter anzupassen oder suchen Sie nach anderen Begriffen.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/3.0.6/purify.min.js"></script>
|
|
|
|
<div id="detailModal" class="modal" style="display: none;">
|
|
<div class="modal-content">
|
|
<span class="close" onclick="closeDetailModal()">×</span>
|
|
<div id="detailContent"></div>
|
|
</div>
|
|
</div>
|
|
<script src="https://cdn.jsdelivr.net/npm/@ericblade/quagga2/dist/quagga.js"></script>
|
|
<script>
|
|
// =========================================================================
|
|
// 1. GLOBAL STATE DEFINITIONS
|
|
// =========================================================================
|
|
let libraryItems = [];
|
|
let filteredItems = [];
|
|
let visibleItems = [];
|
|
let currentSearchTerm = '';
|
|
let activeFilters = {
|
|
isbn: '',
|
|
type: '',
|
|
status: ''
|
|
};
|
|
let pagingState = {
|
|
offset: 0,
|
|
total: 0,
|
|
hasMore: true,
|
|
loading: false
|
|
};
|
|
const API_PAGE_SIZE = 120;
|
|
const INITIAL_RENDER_COUNT = 120;
|
|
const RENDER_BATCH_COUNT = 120;
|
|
let renderedCount = INITIAL_RENDER_COUNT;
|
|
let filterPanelOpen = false;
|
|
|
|
// Scanner Related State Variables
|
|
let scannerInstance = null;
|
|
let scannerRunning = false;
|
|
let activeScannerCallback = null;
|
|
let activeStudentCardId = '';
|
|
let lastScanValue = '';
|
|
let lastScanAt = 0;
|
|
// Keyboard-scanner support (physical scanners that act as keyboard wedges)
|
|
let keyboardScannerEnabled = false;
|
|
let keyboardScanBuffer = '';
|
|
let keyboardLastKeyAt = 0;
|
|
const KEYBOARD_SCAN_INTERCHAR_MS = 100; // max time between keystrokes to consider them one scan
|
|
let editLibraryState = {
|
|
itemId: '',
|
|
seriesGroupId: '',
|
|
groupMembers: []
|
|
};
|
|
|
|
const canEditLibraryItems = (document.getElementById('libraryTableContainer')?.dataset.canEdit === '1');
|
|
|
|
// =========================================================================
|
|
// 2. DATA LOADING & FILTERING ENGINE
|
|
// =========================================================================
|
|
async function fetchLibraryPage(offset, limit) {
|
|
const response = await fetch(`/api/library_items?offset=${offset}&limit=${limit}`);
|
|
if (!response.ok) {
|
|
throw new Error('Failed to load library items');
|
|
}
|
|
return response.json();
|
|
}
|
|
|
|
async function loadLibraryItems() {
|
|
if (pagingState.loading) return;
|
|
pagingState.loading = true;
|
|
try {
|
|
const firstPage = await fetchLibraryPage(0, API_PAGE_SIZE);
|
|
libraryItems = firstPage.items || [];
|
|
pagingState.offset = (firstPage.offset || 0) + (firstPage.count || libraryItems.length);
|
|
pagingState.total = firstPage.total || libraryItems.length;
|
|
pagingState.hasMore = Boolean(firstPage.has_more);
|
|
|
|
applyFiltersAndSearch(true);
|
|
|
|
if (pagingState.hasMore) {
|
|
loadRemainingLibraryItemsInBackground();
|
|
}
|
|
} catch (error) {
|
|
console.error('Error loading library items:', error);
|
|
document.getElementById('itemsTableBody').innerHTML = '<tr><td colspan="7" style="text-align:center; color:#999;">Fehler beim Laden der Bibliothekselemente.</td></tr>';
|
|
} finally {
|
|
pagingState.loading = false;
|
|
}
|
|
}
|
|
|
|
async function loadRemainingLibraryItemsInBackground() {
|
|
while (pagingState.hasMore) {
|
|
try {
|
|
const page = await fetchLibraryPage(pagingState.offset, API_PAGE_SIZE);
|
|
const nextItems = page.items || [];
|
|
if (nextItems.length === 0) {
|
|
pagingState.hasMore = false;
|
|
break;
|
|
}
|
|
|
|
libraryItems = libraryItems.concat(nextItems);
|
|
pagingState.offset = (page.offset || pagingState.offset) + (page.count || nextItems.length);
|
|
pagingState.total = page.total || pagingState.total;
|
|
pagingState.hasMore = Boolean(page.has_more);
|
|
|
|
applyFiltersAndSearch(false);
|
|
|
|
if ('requestIdleCallback' in window) {
|
|
await new Promise(resolve => requestIdleCallback(() => resolve(), { timeout: 250 }));
|
|
} else {
|
|
await new Promise(resolve => setTimeout(resolve, 0));
|
|
}
|
|
} catch (error) {
|
|
console.error('Error loading additional library items:', error);
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
function filterItems(items) {
|
|
const isbn = activeFilters.isbn;
|
|
const type = activeFilters.type;
|
|
const status = activeFilters.status;
|
|
|
|
return items.filter(item => {
|
|
const isbnMatch = !isbn || (item.ISBN || item.Code_4 || item.Code4 || '').toLowerCase().includes(isbn);
|
|
const typeMatch = !type || (item.ItemType || 'book') === type;
|
|
const statusKey = item.LibraryDisplayStatus || (item.Verfuegbar === false ? 'borrowed' : 'available');
|
|
const statusMatch = !status || statusKey === status;
|
|
return isbnMatch && typeMatch && statusMatch;
|
|
});
|
|
}
|
|
|
|
function applySearch(items) {
|
|
if (!currentSearchTerm) return items;
|
|
return items.filter(item =>
|
|
(item.Name || '').toLowerCase().includes(currentSearchTerm) ||
|
|
(item.ISBN || item.Code_4 || item.Code4 || '').toLowerCase().includes(currentSearchTerm)
|
|
);
|
|
}
|
|
|
|
function applyFiltersAndSearch(resetRenderCount) {
|
|
const filteredByPanel = filterItems(libraryItems);
|
|
filteredItems = applySearch(filteredByPanel);
|
|
if (resetRenderCount) {
|
|
renderedCount = Math.min(INITIAL_RENDER_COUNT, filteredItems.length);
|
|
} else {
|
|
renderedCount = Math.min(Math.max(renderedCount, INITIAL_RENDER_COUNT), filteredItems.length || INITIAL_RENDER_COUNT);
|
|
}
|
|
visibleItems = filteredItems;
|
|
renderItems();
|
|
}
|
|
|
|
function renderItems() {
|
|
const tbody = document.getElementById('itemsTableBody');
|
|
const emptyState = document.getElementById('emptyState');
|
|
const loadMoreRow = document.getElementById('loadMoreRow');
|
|
const loadInfo = document.getElementById('loadInfo');
|
|
const loadMoreBtn = document.getElementById('loadMoreBtn');
|
|
|
|
if (visibleItems.length === 0) {
|
|
tbody.innerHTML = '';
|
|
emptyState.style.display = 'block';
|
|
loadMoreRow.style.display = 'none';
|
|
return;
|
|
}
|
|
|
|
emptyState.style.display = 'none';
|
|
const rowsToRender = visibleItems.slice(0, renderedCount);
|
|
|
|
tbody.innerHTML = rowsToRender.map(item => {
|
|
const statusKey = item.LibraryDisplayStatus || (item.Verfuegbar === false ? 'borrowed' : 'available');
|
|
const statusClass = statusKey === 'damaged' ? 'status-damaged' : (statusKey === 'borrowed' ? 'status-borrowed' : 'status-available');
|
|
const statusText = statusKey === 'damaged' ? 'Defekt/Zerstört' : (statusKey === 'borrowed' ? 'Ausgeliehen' : 'Verfügbar');
|
|
const actionLabel = statusKey === 'available' ? 'Ausleihen' : (statusKey === 'borrowed' ? 'Reservieren' : 'Nicht ausleihbar');
|
|
const actionDisabled = statusKey === 'damaged' ? 'disabled' : '';
|
|
return `
|
|
<tr>
|
|
<td class="table-title">${escapeHtml(item.Name || 'Untitled')}</td>
|
|
<td>${escapeHtml(item.ISBN || '-')}</td>
|
|
<td>${getItemTypeLabel(item.ItemType || 'book')}</td>
|
|
<td style="font-weight:600; text-align:center;">${item.Quantity || item.GroupedDisplayCount || 1}</td>
|
|
<td>
|
|
<span class="table-status ${statusClass}">
|
|
${statusText}
|
|
</span>
|
|
</td>
|
|
<td class="table-actions">
|
|
<button class="button" onclick="showItemDetail('${item._id}')">Details</button>
|
|
<button class="button" style="background: #28a745; color: white;" onclick="borrowItem('${item._id}')" ${actionDisabled}>
|
|
${actionLabel}
|
|
</button>
|
|
${canEditLibraryItems ? `<button class="button" style="background:#0ea5e9;color:#fff;" onclick="openEditLibraryItem('${item._id}')">Bearbeiten</button>` : ''}
|
|
${canEditLibraryItems ? `<button class="button" style="background:#dc2626;color:#fff; margin-left:6px;" onclick="confirmDeleteLibraryItem('${item._id}')">Löschen</button>` : ''}
|
|
</td>
|
|
</tr>`;
|
|
}).join('');
|
|
|
|
const canLoadMoreRows = renderedCount < visibleItems.length;
|
|
if (canLoadMoreRows) {
|
|
loadMoreRow.style.display = 'flex';
|
|
loadMoreBtn.style.display = 'inline-block';
|
|
loadInfo.textContent = `${renderedCount} von ${visibleItems.length} angezeigt`;
|
|
} else {
|
|
const backgroundHint = pagingState.hasMore ? `Lade weitere Medien im Hintergrund (${libraryItems.length}/${pagingState.total || '?'})...` : `${visibleItems.length} Treffer`;
|
|
loadMoreRow.style.display = 'flex';
|
|
loadMoreBtn.style.display = 'none';
|
|
loadInfo.textContent = backgroundHint;
|
|
}
|
|
}
|
|
|
|
async function deleteLibraryItem(itemId) {
|
|
if (!itemId) return;
|
|
document.body.style.cursor = 'wait';
|
|
try {
|
|
const resp = await fetch(`/delete_library_item/${itemId}`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'X-CSRFToken': '{{ csrf_token }}',
|
|
'X-CSRF-Token': '{{ csrf_token }}'
|
|
},
|
|
credentials: 'same-origin'
|
|
});
|
|
|
|
const ct = resp.headers.get('Content-Type') || '';
|
|
if (ct.includes('application/json')) {
|
|
const j = await resp.json();
|
|
if (!resp.ok || j.ok === false) {
|
|
alert(j.message || 'Fehler beim Löschen');
|
|
} else {
|
|
alert(j.message || 'Gelöscht');
|
|
}
|
|
loadLibraryItems();
|
|
} else {
|
|
location.reload();
|
|
}
|
|
} catch (e) {
|
|
console.error('Delete failed', e);
|
|
alert('Fehler beim Löschen des Elements.');
|
|
} finally {
|
|
document.body.style.cursor = '';
|
|
}
|
|
}
|
|
|
|
function confirmDeleteLibraryItem(itemId) {
|
|
if (!itemId) return;
|
|
if (!confirm('Dieses Bibliotheksmedium revisionssicher löschen? Diese Aktion deaktiviert alle zugehörigen Exemplare und archiviert Medien.')) return;
|
|
deleteLibraryItem(itemId);
|
|
}
|
|
|
|
// =========================================================================
|
|
// 3. CORE SCANNER ROUTING ENGINE (QUAGGA2)
|
|
// =========================================================================
|
|
function startScanner(targetCallback) {
|
|
const readerWrap = document.getElementById('scanReaderWrap');
|
|
const toggleBtn = document.getElementById('toggleScannerBtn');
|
|
|
|
activeScannerCallback = targetCallback;
|
|
|
|
if (readerWrap) readerWrap.style.display = 'block';
|
|
setScanStatus('Initializing camera...', 'warn');
|
|
|
|
Quagga.init({
|
|
inputStream: {
|
|
name: "Live",
|
|
type: "LiveStream",
|
|
target: document.querySelector('#library-scanner-container'),
|
|
constraints: {
|
|
width: 640,
|
|
height: 480,
|
|
facingMode: "environment"
|
|
},
|
|
},
|
|
decoder: {
|
|
readers: [
|
|
"code_128_reader",
|
|
"ean_reader",
|
|
"code_39_reader",
|
|
"upc_reader",
|
|
"codabar_reader",
|
|
"i2of5_reader"
|
|
]
|
|
}
|
|
}, function(err) {
|
|
if (err) {
|
|
console.error('Scanner start failed:', err);
|
|
if (readerWrap) readerWrap.style.display = 'none';
|
|
const detail = (err && (err.message || err.name)) ? ` (${err.message || err.name})` : '';
|
|
setScanStatus(`Scanner konnte nicht gestartet werden${detail}`, 'error');
|
|
return;
|
|
}
|
|
|
|
Quagga.start();
|
|
scannerRunning = true;
|
|
|
|
if (!targetCallback && toggleBtn) {
|
|
toggleBtn.textContent = 'Scanner stoppen';
|
|
}
|
|
setScanStatus('Scanner aktiv. Jetzt Code scannen.', 'warn');
|
|
});
|
|
}
|
|
|
|
function stopScanner() {
|
|
if (!scannerRunning) return;
|
|
|
|
const readerWrap = document.getElementById('scanReaderWrap');
|
|
const toggleBtn = document.getElementById('toggleScannerBtn');
|
|
|
|
Quagga.stop();
|
|
scannerRunning = false;
|
|
activeScannerCallback = null;
|
|
|
|
if (readerWrap) readerWrap.style.display = 'none';
|
|
if (toggleBtn) toggleBtn.textContent = 'Scanner starten';
|
|
setScanStatus('Scanner gestoppt.', 'warn');
|
|
}
|
|
|
|
Quagga.onDetected(function(data) {
|
|
if (!data || !data.codeResult || !data.codeResult.code) return;
|
|
|
|
const barcode = String(data.codeResult.code || '').trim();
|
|
console.log("Barcode detected:", barcode);
|
|
|
|
const currentCallback = activeScannerCallback;
|
|
stopScanner();
|
|
|
|
const returnOnly = (document.getElementById('returnOnlyToggle') || {}).checked;
|
|
if (returnOnly) {
|
|
// direct return flow
|
|
returnByCode(barcode);
|
|
return;
|
|
}
|
|
|
|
if (typeof currentCallback === "function") {
|
|
currentCallback(barcode);
|
|
} else {
|
|
handleScanSuccess(barcode);
|
|
}
|
|
});
|
|
|
|
// =========================================================================
|
|
// Keyboard scanner handling (physical scanners that send chars then Enter)
|
|
// =========================================================================
|
|
function keyboardScanKeydownHandler(e) {
|
|
// Only active when explicitly enabled
|
|
if (!keyboardScannerEnabled) return;
|
|
|
|
// Ignore if focus is in an input/textarea/contenteditable to avoid interfering with typing
|
|
const active = document.activeElement;
|
|
if (active && (active.tagName === 'INPUT' || active.tagName === 'TEXTAREA' || active.isContentEditable)) return;
|
|
|
|
const now = Date.now();
|
|
|
|
// If Enter/Return pressed -> finalize buffer
|
|
if (e.key === 'Enter') {
|
|
const code = keyboardScanBuffer.trim();
|
|
keyboardScanBuffer = '';
|
|
keyboardLastKeyAt = 0;
|
|
if (!code) return;
|
|
// If return-only mode is active, attempt direct return
|
|
const returnOnly = (document.getElementById('returnOnlyToggle') || {}).checked;
|
|
if (returnOnly) {
|
|
returnByCode(code);
|
|
return;
|
|
}
|
|
|
|
// Process exactly like a camera scan
|
|
handleScanSuccess(code);
|
|
return;
|
|
}
|
|
|
|
// Only accept common printable characters; ignore modifier keys
|
|
if (e.key.length === 1) {
|
|
// If time gap too big, start new buffer
|
|
if (keyboardLastKeyAt && (now - keyboardLastKeyAt) > KEYBOARD_SCAN_INTERCHAR_MS) {
|
|
keyboardScanBuffer = '';
|
|
}
|
|
keyboardScanBuffer += e.key;
|
|
keyboardLastKeyAt = now;
|
|
// Prevent default so scanner input doesn't accidentally move focus or trigger shortcuts
|
|
e.preventDefault();
|
|
}
|
|
}
|
|
|
|
function handleScanSuccess(decodedText) {
|
|
const scannedCode = normalizeScannedCode(decodedText);
|
|
if (!scannedCode) return;
|
|
|
|
const now = Date.now();
|
|
if (scannedCode === lastScanValue && (now - lastScanAt) < 1500) {
|
|
return;
|
|
}
|
|
lastScanValue = scannedCode;
|
|
lastScanAt = now;
|
|
|
|
const mode = (document.getElementById('scanModeSelect') || {}).value || 'card_only';
|
|
if (mode === 'card_only') {
|
|
setActiveStudentCard(scannedCode);
|
|
setScanStatus(`Ausweis gesetzt: ${activeStudentCardId}`, 'ok');
|
|
return;
|
|
}
|
|
|
|
processQuickToggleScan(scannedCode);
|
|
}
|
|
|
|
async function processQuickToggleScan(scannedCode) {
|
|
// 1. Prüfen, ob "Nur Rückgabe"-Modus aktiv ist
|
|
const returnOnly = (document.getElementById('returnOnlyToggle') || {}).checked;
|
|
if (returnOnly) {
|
|
await returnByCode(scannedCode);
|
|
return;
|
|
}
|
|
|
|
// 2. Wenn kein Ausweis gesetzt ist, wird der Code als Ausweis interpretiert
|
|
if (!activeStudentCardId) {
|
|
setActiveStudentCard(scannedCode);
|
|
setScanStatus(`Ausweis gesetzt: ${activeStudentCardId}`, 'ok');
|
|
return;
|
|
}
|
|
|
|
// 3. Ausleihe/Rückgabe verarbeiten (wenn Ausweis vorhanden)
|
|
try {
|
|
setScanStatus('Verarbeite Mediencode...', 'warn');
|
|
const response = await fetch('/api/library_scan_action', {
|
|
method: 'POST',
|
|
headers: {'Content-Type': 'application/json'},
|
|
body: JSON.stringify({
|
|
student_card_id: activeStudentCardId,
|
|
item_code: scannedCode
|
|
})
|
|
});
|
|
|
|
const result = await response.json();
|
|
if (!response.ok || !result.ok) {
|
|
setScanStatus(result.message || 'Scan-Aktion fehlgeschlagen.', 'error');
|
|
return;
|
|
}
|
|
|
|
if (result.action === 'borrowed') {
|
|
setScanStatus(`Ausgeliehen: ${result.item_name}`, 'ok');
|
|
showSmallConfirm(`Ausgeliehen: ${result.item_name}`, 'ok');
|
|
} else if (result.action === 'returned') {
|
|
setScanStatus(`Zurückgegeben: ${result.item_name}`, 'ok');
|
|
showSmallConfirm(`Zurückgegeben: ${result.item_name}`, 'ok');
|
|
} else {
|
|
setScanStatus(result.message || 'Aktion durchgeführt.', 'ok');
|
|
showSmallConfirm(result.message || 'Aktion durchgeführt.', 'ok');
|
|
}
|
|
|
|
await loadLibraryItems();
|
|
} catch (err) {
|
|
console.error('Quick scan action failed:', err);
|
|
setScanStatus('Fehler beim Verarbeiten des Scans.', 'error');
|
|
}
|
|
}
|
|
|
|
async function returnByCode(code) {
|
|
if (!code) return;
|
|
setScanStatus('Verarbeite Rückgabe...', 'warn');
|
|
try {
|
|
const resp = await fetch('/api/library_return_by_code', {
|
|
method: 'POST',
|
|
headers: {'Content-Type': 'application/json'},
|
|
body: JSON.stringify({ item_code: code })
|
|
});
|
|
const result = await resp.json();
|
|
if (!resp.ok || !result.ok) {
|
|
setScanStatus(result.message || 'Rückgabe fehlgeschlagen.', 'error');
|
|
showSmallConfirm(result.message || 'Rückgabe fehlgeschlagen.', 'error');
|
|
return false;
|
|
}
|
|
setScanStatus(result.message || `Zurückgegeben: ${result.item_name || ''}`, 'ok');
|
|
showSmallConfirm(result.message || `Zurückgegeben: ${result.item_name || ''}`, 'ok');
|
|
await loadLibraryItems();
|
|
return true;
|
|
} catch (err) {
|
|
console.error('Return by code failed:', err);
|
|
setScanStatus('Fehler bei Rückgabe.', 'error');
|
|
showSmallConfirm('Fehler bei Rückgabe.', 'error');
|
|
return false;
|
|
}
|
|
}
|
|
|
|
function scanIntoEditCode() {
|
|
const scanReaderWrap = document.getElementById('scanReaderWrap');
|
|
const editCodeInput = document.getElementById('edit-code4');
|
|
const scanEditBtn = document.getElementById('scan-edit-code-btn');
|
|
if (!scanReaderWrap || !editCodeInput || !scanEditBtn) {
|
|
return;
|
|
}
|
|
|
|
if (scannerRunning && scanReaderWrap.style.display !== 'none') {
|
|
stopScanner();
|
|
scanEditBtn.textContent = 'Barcode scannen';
|
|
return;
|
|
}
|
|
|
|
scanEditBtn.textContent = 'Scanner schließen';
|
|
|
|
startScanner(function(decodedText) {
|
|
editCodeInput.value = decodedText;
|
|
if(typeof validateCodeField === "function") {
|
|
validateCodeField(editCodeInput, document.getElementById('edit-item-id')?.value || null);
|
|
}
|
|
scanEditBtn.textContent = 'Barcode scannen';
|
|
});
|
|
}
|
|
|
|
// =========================================================================
|
|
// 4. UI INTERACTIONS & UTILITIES
|
|
// =========================================================================
|
|
function borrowItem(itemId) {
|
|
const selectedItem = (libraryItems || []).find(item => item._id === itemId);
|
|
if (selectedItem && selectedItem.LibraryDisplayStatus === 'damaged') {
|
|
alert('Dieses Medium ist als defekt/zerstört markiert und kann nicht ausgeliehen werden.');
|
|
return;
|
|
}
|
|
|
|
const defaultCardId = activeStudentCardId || '';
|
|
const cardId = (window.prompt('Bitte Schülerausweis-ID eingeben:', defaultCardId) || '').trim().toUpperCase();
|
|
if (!cardId) {
|
|
alert('Ausleihe abgebrochen: Für Bibliotheksmedien ist eine gültige Schülerausweis-ID erforderlich.');
|
|
return;
|
|
}
|
|
|
|
setActiveStudentCard(cardId);
|
|
|
|
const durationInput = (window.prompt('Ausleihdauer in Tagen (optional):') || '').trim();
|
|
const maxAvailable = Math.max(1, parseInt(selectedItem?.AvailableGroupedCount || selectedItem?.Quantity || 1, 10) || 1);
|
|
const countPrompt = (window.prompt(`Anzahl ausleihen? (Standard: 1, verfügbar: ${maxAvailable})`, '1') || '').trim();
|
|
let borrowCount = parseInt(countPrompt || '1', 10);
|
|
if (!Number.isFinite(borrowCount) || borrowCount < 1) {
|
|
borrowCount = 1;
|
|
}
|
|
if (borrowCount > maxAvailable) {
|
|
alert(`Es sind nur ${maxAvailable} Exemplar(e) verfügbar.`);
|
|
return;
|
|
}
|
|
|
|
const form = document.createElement('form');
|
|
form.method = 'POST';
|
|
form.action = `/ausleihen/${itemId}`;
|
|
|
|
const csrfField = document.createElement('input');
|
|
csrfField.type = 'hidden';
|
|
csrfField.name = 'csrf_token';
|
|
csrfField.value = '{{ csrf_token }}';
|
|
form.appendChild(csrfField);
|
|
|
|
const cardField = document.createElement('input');
|
|
cardField.type = 'hidden';
|
|
cardField.name = 'borrower_card_id';
|
|
cardField.value = cardId;
|
|
form.appendChild(cardField);
|
|
|
|
const returnTargetField = document.createElement('input');
|
|
returnTargetField.type = 'hidden';
|
|
returnTargetField.name = 'return_to';
|
|
returnTargetField.value = 'library';
|
|
form.appendChild(returnTargetField);
|
|
|
|
if (durationInput) {
|
|
const durationField = document.createElement('input');
|
|
durationField.type = 'hidden';
|
|
durationField.name = 'borrow_duration_days';
|
|
durationField.value = durationInput;
|
|
form.appendChild(durationField);
|
|
}
|
|
|
|
const countField = document.createElement('input');
|
|
countField.type = 'hidden';
|
|
countField.name = 'exemplare_count';
|
|
countField.value = String(borrowCount || 1);
|
|
form.appendChild(countField);
|
|
|
|
document.body.appendChild(form);
|
|
form.submit();
|
|
}
|
|
|
|
function setScanStatus(message, kind = '') {
|
|
const el = document.getElementById('scanStatus');
|
|
if (!el) return;
|
|
el.textContent = message;
|
|
el.classList.remove('ok', 'warn', 'error');
|
|
if (kind) el.classList.add(kind);
|
|
}
|
|
|
|
function showSmallConfirm(message, kind='ok') {
|
|
// Append the small helper text in German
|
|
const helper = 'Sie können fortfahren. Dies ist nur eine kleine Benachrichtigung.';
|
|
const el = document.createElement('div');
|
|
el.className = `small-popup ${kind === 'error' ? 'error' : 'ok'}`;
|
|
el.innerHTML = `<div>${escapeHtml(String(message || ''))}</div><div style="opacity:0.9; margin-left:8px; font-size:0.85em;">${helper}</div><div class="close-x">×</div>`;
|
|
document.body.appendChild(el);
|
|
// close handler
|
|
el.querySelector('.close-x').addEventListener('click', () => {
|
|
if (el && el.parentNode) el.parentNode.removeChild(el);
|
|
});
|
|
// auto remove after 3 seconds
|
|
setTimeout(() => { try { if (el && el.parentNode) el.parentNode.removeChild(el); } catch(e){} }, 3000);
|
|
}
|
|
|
|
function setActiveStudentCard(cardId) {
|
|
activeStudentCardId = (cardId || '').trim().toUpperCase();
|
|
const input = document.getElementById('activeStudentCard');
|
|
if (input) input.value = activeStudentCardId;
|
|
}
|
|
|
|
function normalizeScannedCode(code) {
|
|
return (code || '').trim();
|
|
}
|
|
|
|
function getItemTypeLabel(type) {
|
|
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;
|
|
}
|
|
|
|
// Opens the modal and fetches the data
|
|
function showItemDetail(itemId) {
|
|
const detailContent = document.getElementById('detailContent');
|
|
const detailModal = document.getElementById('detailModal');
|
|
|
|
// 1. Show the loading state immediately
|
|
detailContent.innerHTML = '<p>Loading details...</p>';
|
|
detailModal.style.display = 'flex';
|
|
|
|
// 2. Fetch the data
|
|
fetch(`/api/item_detail/${itemId}`)
|
|
.then(response => {
|
|
if (!response.ok) {
|
|
throw new Error(`HTTP error! status: ${response.status}`);
|
|
}
|
|
return response.text();
|
|
})
|
|
.then(html => {
|
|
// 3. Clean the HTML and display it
|
|
detailContent.innerHTML = DOMPurify.sanitize(html);
|
|
})
|
|
.catch(err => {
|
|
console.error('Error loading detail:', err);
|
|
detailContent.innerHTML = '<p>Sorry, we could not load the item details. Please try again later.</p>';
|
|
});
|
|
}
|
|
|
|
// Closes the modal via the 'x' button
|
|
function closeDetailModal() {
|
|
document.getElementById('detailModal').style.display = 'none';
|
|
}
|
|
|
|
// Closes the modal if the user clicks the dark background overlay
|
|
window.onclick = function(event) {
|
|
const modal = document.getElementById('detailModal');
|
|
// If the click happened directly on the dark overlay (not the white box)
|
|
if (event.target === modal) {
|
|
closeDetailModal();
|
|
}
|
|
};
|
|
|
|
// =========================================================================
|
|
// 5. EVENT LISTENERS INITIALIZATION & ON-LOAD INITIALIZER
|
|
// =========================================================================
|
|
function wireScannerUi() {
|
|
const toggleBtn = document.getElementById('toggleScannerBtn');
|
|
const resetBtn = document.getElementById('resetCardBtn');
|
|
const modeSelect = document.getElementById('scanModeSelect');
|
|
const keyboardToggle = document.getElementById('keyboardScannerToggle');
|
|
|
|
if (toggleBtn) {
|
|
toggleBtn.addEventListener('click', async () => {
|
|
if (scannerRunning) {
|
|
await stopScanner();
|
|
} else {
|
|
await startScanner(null);
|
|
}
|
|
});
|
|
}
|
|
|
|
if (resetBtn) {
|
|
resetBtn.addEventListener('click', () => {
|
|
setActiveStudentCard('');
|
|
setScanStatus('Ausweis zurückgesetzt. Bitte neu scannen.', 'warn');
|
|
});
|
|
}
|
|
|
|
if (modeSelect) {
|
|
modeSelect.addEventListener('change', () => {
|
|
if (modeSelect.value === 'quick_toggle' && !activeStudentCardId) {
|
|
setScanStatus('Schnellmodus: zuerst Schülerausweis scannen.', 'warn');
|
|
} else if (modeSelect.value === 'card_only') {
|
|
setScanStatus('Nur Ausweis-Modus aktiv.', 'warn');
|
|
}
|
|
});
|
|
}
|
|
|
|
if (keyboardToggle) {
|
|
keyboardToggle.addEventListener('change', () => {
|
|
keyboardScannerEnabled = !!keyboardToggle.checked;
|
|
if (keyboardScannerEnabled) {
|
|
document.addEventListener('keydown', keyboardScanKeydownHandler);
|
|
setScanStatus('Physischer Scanner aktiv (Schnellmodus empfohlen).', 'ok');
|
|
} else {
|
|
document.removeEventListener('keydown', keyboardScanKeydownHandler);
|
|
setScanStatus('Physischer Scanner deaktiviert.', 'warn');
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
// Run when DOM structure is entirely ready
|
|
document.addEventListener('DOMContentLoaded', async () => {
|
|
wireScannerUi(); // Setup scanner control buttons
|
|
loadLibraryItems(); // Fetch your database items right away!
|
|
|
|
// Safely connect standard Filters and Search inputs inside DOMContentLoaded
|
|
const filterToggleBtn = document.getElementById('filterToggleBtn');
|
|
if (filterToggleBtn) {
|
|
filterToggleBtn.addEventListener('click', () => {
|
|
filterPanelOpen = !filterPanelOpen;
|
|
document.getElementById('filterPanel').classList.toggle('open');
|
|
filterToggleBtn.classList.toggle('active');
|
|
});
|
|
}
|
|
|
|
const applyFilterBtn = document.getElementById('applyFilterBtn');
|
|
if (applyFilterBtn) {
|
|
applyFilterBtn.addEventListener('click', () => {
|
|
activeFilters.isbn = document.getElementById('filterISBN').value.toLowerCase();
|
|
activeFilters.type = document.getElementById('filterType').value;
|
|
activeFilters.status = document.getElementById('filterStatus').value;
|
|
applyFiltersAndSearch(true);
|
|
});
|
|
}
|
|
|
|
const clearFilterBtn = document.getElementById('clearFilterBtn');
|
|
if (clearFilterBtn) {
|
|
clearFilterBtn.addEventListener('click', () => {
|
|
document.getElementById('filterISBN').value = '';
|
|
document.getElementById('filterType').value = '';
|
|
document.getElementById('filterStatus').value = '';
|
|
activeFilters = {isbn: '', type: '', status: ''};
|
|
applyFiltersAndSearch(true);
|
|
});
|
|
}
|
|
|
|
const librarySearch = document.getElementById('librarySearch');
|
|
if (librarySearch) {
|
|
librarySearch.addEventListener('input', (e) => {
|
|
currentSearchTerm = (e.target.value || '').toLowerCase();
|
|
applyFiltersAndSearch(true);
|
|
});
|
|
}
|
|
|
|
const loadMoreBtn = document.getElementById('loadMoreBtn');
|
|
if (loadMoreBtn) {
|
|
loadMoreBtn.addEventListener('click', () => {
|
|
renderedCount = Math.min(renderedCount + RENDER_BATCH_COUNT, visibleItems.length);
|
|
renderItems();
|
|
});
|
|
}
|
|
|
|
const manualReturnBtn = document.getElementById('manualReturnBtn');
|
|
const manualItemCode = document.getElementById('manualItemCode');
|
|
if (manualReturnBtn && manualItemCode) {
|
|
manualReturnBtn.addEventListener('click', async () => {
|
|
const code = (manualItemCode.value || '').trim();
|
|
if (!code) {
|
|
alert('Bitte einen Mediencode eingeben.');
|
|
return;
|
|
}
|
|
await returnByCode(code);
|
|
});
|
|
}
|
|
|
|
const editForm = document.getElementById('editLibraryForm');
|
|
if (editForm) {
|
|
editForm.addEventListener('submit', async function (e) {
|
|
e.preventDefault();
|
|
|
|
const itemId = document.getElementById('editLibraryItemId').value;
|
|
const currentItem = libraryItems.find(i => i._id === itemId);
|
|
if (!currentItem) return;
|
|
|
|
const codeInputs = Array.from(document.querySelectorAll('#editLibraryCodesContainer input[data-item-id]'));
|
|
|
|
// Daten aus dem Formular sammeln
|
|
const sharedPayload = {
|
|
name: document.getElementById('editLibraryName').value,
|
|
item_type: document.getElementById('editLibraryType').value,
|
|
isbn: document.getElementById('editLibraryIsbn').value,
|
|
ort: document.getElementById('editLibraryLocation').value,
|
|
beschreibung: document.getElementById('editLibraryDescription').value,
|
|
ansch_jahr: currentItem.Anschaffungsjahr || '',
|
|
ansch_kost: currentItem.Anschaffungskosten || '',
|
|
reservierbar: currentItem.Reservierbar !== false,
|
|
};
|
|
|
|
const codeByItemId = new Map(codeInputs.map(input => [input.dataset.itemId, (input.value || '').trim()]));
|
|
const groupMembers = editLibraryState.groupMembers.length > 0 ? editLibraryState.groupMembers : [currentItem];
|
|
const isGroupedEdit = Boolean(currentItem.SeriesGroupId) && groupMembers.length > 1;
|
|
|
|
// API-Aufruf
|
|
try {
|
|
if (isGroupedEdit) {
|
|
const payload = {
|
|
series_group_id: currentItem.SeriesGroupId,
|
|
...sharedPayload,
|
|
items: groupMembers.map(member => ({
|
|
id: member._id,
|
|
code_4: codeByItemId.get(member._id) || ''
|
|
}))
|
|
};
|
|
|
|
const response = await fetch('/update_group', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRFToken': '{{ csrf_token }}',
|
|
'X-CSRF-Token': '{{ csrf_token }}'
|
|
},
|
|
body: JSON.stringify(payload)
|
|
});
|
|
|
|
const result = await response.json();
|
|
if (response.ok && result.success) {
|
|
alert(result.message || 'Gruppe erfolgreich aktualisiert!');
|
|
closeEditLibraryModal();
|
|
pagingState.loading = false;
|
|
await loadLibraryItems();
|
|
} else {
|
|
alert(result.message || 'Fehler beim Speichern der Gruppenänderungen.');
|
|
}
|
|
} else {
|
|
const primaryCodeInput = codeInputs[0];
|
|
const payload = {
|
|
name: sharedPayload.name,
|
|
item_type: sharedPayload.item_type,
|
|
isbn: sharedPayload.isbn,
|
|
code_4: primaryCodeInput ? primaryCodeInput.value.trim() : (currentItem.Code_4 || currentItem.Code4 || '').trim(),
|
|
ort: sharedPayload.ort,
|
|
beschreibung: sharedPayload.beschreibung
|
|
};
|
|
|
|
const response = await fetch(`/api/library_item/${itemId}/update`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRFToken': '{{ csrf_token }}',
|
|
'X-CSRF-Token': '{{ csrf_token }}'
|
|
},
|
|
body: JSON.stringify(payload)
|
|
});
|
|
|
|
const result = await response.json();
|
|
if (response.ok && result.ok) {
|
|
alert(result.message || 'Medium erfolgreich aktualisiert!');
|
|
closeEditLibraryModal();
|
|
pagingState.loading = false;
|
|
await loadLibraryItems();
|
|
} else {
|
|
alert(result.message || 'Fehler beim Speichern der Änderungen.');
|
|
}
|
|
}
|
|
} catch (error) {
|
|
console.error('Update failed:', error);
|
|
alert('Netzwerkfehler beim Aktualisieren des Mediums.');
|
|
}
|
|
});
|
|
}
|
|
});
|
|
|
|
async function fetchLibraryGroupMembers(seriesGroupId) {
|
|
if (!seriesGroupId) return [];
|
|
try {
|
|
const response = await fetch(`/api/library_group/${encodeURIComponent(seriesGroupId)}`);
|
|
if (!response.ok) {
|
|
throw new Error(`HTTP ${response.status}`);
|
|
}
|
|
|
|
const payload = await response.json();
|
|
return Array.isArray(payload.items) ? payload.items : [];
|
|
} catch (error) {
|
|
console.warn('Falling back to loaded library items for group editing:', error);
|
|
return (libraryItems || []).filter(item => item.SeriesGroupId === seriesGroupId);
|
|
}
|
|
}
|
|
|
|
function renderLibraryGroupCodeFields(groupMembers, currentItemId) {
|
|
const codesContainer = document.getElementById('editLibraryCodesContainer');
|
|
const groupWarning = document.getElementById('editLibraryGroupWarning');
|
|
const groupCount = document.getElementById('editLibraryGroupCount');
|
|
const groupHint = document.getElementById('editLibraryGroupHint');
|
|
|
|
if (!codesContainer) return;
|
|
|
|
const items = Array.isArray(groupMembers) ? groupMembers.slice() : [];
|
|
items.sort((a, b) => (a.SeriesPosition || 0) - (b.SeriesPosition || 0) || String(a.Name || '').localeCompare(String(b.Name || '')));
|
|
|
|
editLibraryState.groupMembers = items;
|
|
|
|
if (groupWarning) {
|
|
groupWarning.style.display = items.length > 1 ? 'block' : 'none';
|
|
}
|
|
if (groupCount) {
|
|
const totalCount = items.length || 1;
|
|
const declaredCount = items[0]?.SeriesCount || totalCount;
|
|
groupCount.textContent = `${totalCount} / ${declaredCount}`;
|
|
}
|
|
if (groupHint) {
|
|
groupHint.textContent = items.length > 1
|
|
? 'Jeder Code gehört zu einem eigenen Exemplar. Änderungen werden für alle Codes gespeichert.'
|
|
: 'Einzelnes Exemplar. Der Code wird direkt gespeichert.';
|
|
}
|
|
|
|
if (!items.length) {
|
|
codesContainer.innerHTML = '<div style="padding:10px 0; color:#6b7280;">Keine Codes geladen.</div>';
|
|
return;
|
|
}
|
|
|
|
codesContainer.innerHTML = items.map((member, index) => {
|
|
const codeValue = member.Code_4 || member.Code4 || '';
|
|
const labelParts = [];
|
|
if (member.SeriesPosition !== undefined && member.SeriesPosition !== null) {
|
|
labelParts.push(`Exemplar ${member.SeriesPosition}`);
|
|
} else {
|
|
labelParts.push(`Exemplar ${index + 1}`);
|
|
}
|
|
if (member._id === currentItemId) {
|
|
labelParts.push('aktuelles Medium');
|
|
}
|
|
return `
|
|
<div style="display:flex; flex-direction:column; gap:6px; margin-bottom:10px;">
|
|
<label for="editLibraryCode-${member._id}" style="font-weight:600; font-size:0.9em; color:var(--ui-text);">${escapeHtml(labelParts.join(' · '))}</label>
|
|
<input id="editLibraryCode-${member._id}" data-item-id="${escapeHtml(member._id)}" value="${escapeHtml(codeValue)}" placeholder="Mediencode" style="width:100%; padding:8px 10px; border:1px solid #d0d7e2; border-radius:6px;">
|
|
</div>
|
|
`;
|
|
}).join('');
|
|
}
|
|
|
|
function openEditLibraryItem(itemId) {
|
|
window.location.href = `/item_edit/${itemId}`;
|
|
}
|
|
</script>
|
|
{% endblock %} |