1222 lines
42 KiB
HTML
1222 lines
42 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}📚 Bibliothek - Tabellenansicht - {{ APP_VERSION }}{% endblock %}
|
|
|
|
{% block content %}
|
|
<style>
|
|
/* 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;
|
|
}
|
|
|
|
/* 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 is_admin 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, Autor, 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)" readonly>
|
|
<button id="resetCardBtn" class="button" type="button">Ausweis löschen</button>
|
|
<button id="toggleScannerBtn" class="button" type="button">Scanner starten</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">
|
|
<div id="libraryQrReader" class="library-scan-reader">
|
|
<video id="libraryQrReaderVideo" playsinline style="width: 100%; border-radius: 8px;"></video>
|
|
<canvas id="libraryQrReaderCanvas" style="display: none;"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="filterPanel" class="library-filter-panel">
|
|
<div class="filter-row">
|
|
<div class="filter-item">
|
|
<label for="filterAuthor">Autor/Künstler:</label>
|
|
<input type="text" id="filterAuthor" placeholder="z.B. Goethe">
|
|
</div>
|
|
<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="schulbuch">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>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Items Table -->
|
|
<div id="tableContainer">
|
|
<table class="library-items-table">
|
|
<thead>
|
|
<tr>
|
|
<th style="width: 24%;">Titel</th>
|
|
<th style="width: 14%;">Autor/Künstler</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>
|
|
|
|
<!-- Detail Modal -->
|
|
<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://unpkg.com/@zxing/library@latest/umd/index.min.js"></script>
|
|
<script src="/static/js/scanner.js"></script>
|
|
<script>
|
|
// State
|
|
let libraryItems = [];
|
|
let filteredItems = [];
|
|
let visibleItems = [];
|
|
let currentSearchTerm = '';
|
|
let activeFilters = {
|
|
author: '',
|
|
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;
|
|
let scannerInstance = null;
|
|
let scannerRunning = false;
|
|
let activeStudentCardId = '';
|
|
let lastScanValue = '';
|
|
let lastScanAt = 0;
|
|
const canEditLibraryItems = (document.getElementById('libraryTableContainer')?.dataset.canEdit === '1');
|
|
|
|
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();
|
|
}
|
|
|
|
// Load items progressively: first page immediately, rest in background
|
|
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);
|
|
|
|
// Keep the current view reactive while avoiding a full rerender burst.
|
|
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 author = activeFilters.author;
|
|
const isbn = activeFilters.isbn;
|
|
const type = activeFilters.type;
|
|
const status = activeFilters.status;
|
|
|
|
return items.filter(item => {
|
|
const authorMatch = !author || (item.Autor || item.Author || '').toLowerCase().includes(author);
|
|
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 authorMatch && isbnMatch && typeMatch && statusMatch;
|
|
});
|
|
}
|
|
|
|
function applySearch(items) {
|
|
if (!currentSearchTerm) return items;
|
|
return items.filter(item =>
|
|
(item.Name || '').toLowerCase().includes(currentSearchTerm) ||
|
|
(item.Autor || item.Author || '').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();
|
|
}
|
|
|
|
// Display current view with incremental rendering
|
|
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.Autor || item.Author || '-')}</td>
|
|
<td>${escapeHtml(item.ISBN || item.Code_4 || item.Code4 || '-')}</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;
|
|
}
|
|
}
|
|
|
|
// Confirm and call library item delete endpoint
|
|
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);
|
|
}
|
|
|
|
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 {
|
|
// Server redirected to HTML (flash messages). Reload to show state.
|
|
location.reload();
|
|
}
|
|
} catch (e) {
|
|
console.error('Delete failed', e);
|
|
alert('Fehler beim Löschen des Elements.');
|
|
} finally {
|
|
document.body.style.cursor = '';
|
|
}
|
|
}
|
|
|
|
// Filter toggle
|
|
document.getElementById('filterToggleBtn').addEventListener('click', () => {
|
|
filterPanelOpen = !filterPanelOpen;
|
|
const panel = document.getElementById('filterPanel');
|
|
const btn = document.getElementById('filterToggleBtn');
|
|
panel.classList.toggle('open');
|
|
btn.classList.toggle('active');
|
|
});
|
|
|
|
// Apply filters
|
|
document.getElementById('applyFilterBtn').addEventListener('click', () => {
|
|
activeFilters.author = document.getElementById('filterAuthor').value.toLowerCase();
|
|
activeFilters.isbn = document.getElementById('filterISBN').value.toLowerCase();
|
|
activeFilters.type = document.getElementById('filterType').value;
|
|
activeFilters.status = document.getElementById('filterStatus').value;
|
|
applyFiltersAndSearch(true);
|
|
});
|
|
|
|
// Clear filters
|
|
document.getElementById('clearFilterBtn').addEventListener('click', () => {
|
|
document.getElementById('filterAuthor').value = '';
|
|
document.getElementById('filterISBN').value = '';
|
|
document.getElementById('filterType').value = '';
|
|
document.getElementById('filterStatus').value = '';
|
|
activeFilters = { author: '', isbn: '', type: '', status: '' };
|
|
applyFiltersAndSearch(true);
|
|
});
|
|
|
|
// Search input
|
|
document.getElementById('librarySearch').addEventListener('input', (e) => {
|
|
currentSearchTerm = (e.target.value || '').toLowerCase();
|
|
applyFiltersAndSearch(true);
|
|
});
|
|
|
|
document.getElementById('loadMoreBtn').addEventListener('click', () => {
|
|
renderedCount = Math.min(renderedCount + RENDER_BATCH_COUNT, visibleItems.length);
|
|
renderItems();
|
|
});
|
|
|
|
// Helper functions
|
|
function getItemTypeLabel(type) {
|
|
const labels = { 'book': 'Buch', 'cd': 'CD', 'dvd': 'DVD', 'other': 'Sonstige' };
|
|
return labels[type] || type;
|
|
}
|
|
|
|
function escapeHtml(text) {
|
|
const div = document.createElement('div');
|
|
div.textContent = text;
|
|
return div.innerHTML;
|
|
}
|
|
|
|
function showItemDetail(itemId) {
|
|
// Load and show detail modal
|
|
fetch(`/api/item_detail/${itemId}`)
|
|
.then(r => r.text())
|
|
.then(html => {
|
|
document.getElementById('detailContent').innerHTML = html;
|
|
document.getElementById('detailModal').style.display = 'flex';
|
|
})
|
|
.catch(err => console.error('Error loading detail:', err));
|
|
}
|
|
|
|
function closeDetailModal() {
|
|
document.getElementById('detailModal').style.display = 'none';
|
|
}
|
|
|
|
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 setActiveStudentCard(cardId) {
|
|
activeStudentCardId = (cardId || '').trim().toUpperCase();
|
|
const input = document.getElementById('activeStudentCard');
|
|
if (input) {
|
|
input.value = activeStudentCardId;
|
|
}
|
|
}
|
|
|
|
function normalizeScannedCode(code) {
|
|
return (code || '').trim();
|
|
}
|
|
|
|
async function processQuickToggleScan(scannedCode) {
|
|
if (!activeStudentCardId) {
|
|
setActiveStudentCard(scannedCode);
|
|
setScanStatus(`Ausweis gesetzt: ${activeStudentCardId}`, 'ok');
|
|
return;
|
|
}
|
|
|
|
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');
|
|
} else if (result.action === 'returned') {
|
|
setScanStatus(`Zurückgegeben: ${result.item_name}`, 'ok');
|
|
} else {
|
|
setScanStatus(result.message || 'Aktion durchgeführt.', 'ok');
|
|
}
|
|
|
|
await loadLibraryItems();
|
|
} catch (err) {
|
|
console.error('Quick scan action failed:', err);
|
|
setScanStatus('Fehler beim Verarbeiten des Scans.', 'error');
|
|
}
|
|
}
|
|
|
|
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);
|
|
}
|
|
|
|
function handleScanError() {
|
|
// Intentionally silent to avoid UI spam while camera searches codes.
|
|
}
|
|
|
|
async function ensureScannerLibraryLoaded() {
|
|
// HybridScanner is loaded globally via script tag
|
|
return typeof HybridScanner !== 'undefined';
|
|
}
|
|
|
|
async function startScanner() {
|
|
if (scannerRunning) return;
|
|
|
|
const scannerLoaded = await ensureScannerLibraryLoaded();
|
|
if (!scannerLoaded) {
|
|
setScanStatus('Scanner-Bibliothek konnte nicht geladen werden.', 'error');
|
|
return;
|
|
}
|
|
|
|
const readerWrap = document.getElementById('scanReaderWrap');
|
|
const toggleBtn = document.getElementById('toggleScannerBtn');
|
|
readerWrap.style.display = 'block';
|
|
|
|
try {
|
|
scannerInstance = scannerInstance || new HybridScanner({
|
|
videoId: 'libraryQrReaderVideo',
|
|
canvasId: 'libraryQrReaderCanvas',
|
|
formats: ['QR_CODE', 'EAN_13', 'EAN_8', 'CODE_128', 'CODE_39', 'UPC_A', 'UPC_E', 'ITF', 'CODABAR'],
|
|
fps: 10,
|
|
facingMode: 'environment',
|
|
onSuccess: handleScanSuccess,
|
|
onError: handleScanError
|
|
});
|
|
|
|
scannerInstance.start();
|
|
scannerRunning = true;
|
|
toggleBtn.textContent = 'Scanner stoppen';
|
|
setScanStatus('Scanner aktiv. Jetzt Code scannen.', 'warn');
|
|
} catch (err) {
|
|
console.error('Scanner start failed:', err);
|
|
readerWrap.style.display = 'none';
|
|
const detail = (err && (err.message || err.name)) ? ` (${err.message || err.name})` : '';
|
|
setScanStatus(`Scanner konnte nicht gestartet werden${detail}`, 'error');
|
|
}
|
|
}
|
|
|
|
async function stopScanner() {
|
|
if (!scannerRunning || !scannerInstance) return;
|
|
const readerWrap = document.getElementById('scanReaderWrap');
|
|
const toggleBtn = document.getElementById('toggleScannerBtn');
|
|
try {
|
|
scannerInstance.stop();
|
|
} catch (err) {
|
|
console.error('Scanner stop failed:', err);
|
|
}
|
|
scannerRunning = false;
|
|
scannerInstance = null;
|
|
readerWrap.style.display = 'none';
|
|
toggleBtn.textContent = 'Scanner starten';
|
|
setScanStatus('Scanner gestoppt.', 'warn');
|
|
}
|
|
|
|
function wireScannerUi() {
|
|
const toggleBtn = document.getElementById('toggleScannerBtn');
|
|
const resetBtn = document.getElementById('resetCardBtn');
|
|
const modeSelect = document.getElementById('scanModeSelect');
|
|
|
|
if (toggleBtn) {
|
|
toggleBtn.addEventListener('click', async () => {
|
|
if (scannerRunning) {
|
|
await stopScanner();
|
|
} else {
|
|
await startScanner();
|
|
}
|
|
});
|
|
}
|
|
|
|
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('Modus aktiv: Nur Ausweis erfassen.', 'warn');
|
|
} else {
|
|
setScanStatus('Schnellmodus aktiv: jetzt Mediencode scannen.', 'warn');
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
function getLibraryItemById(itemId) {
|
|
return libraryItems.find(i => String(i._id) === String(itemId));
|
|
}
|
|
|
|
function openEditLibraryItem(itemId) {
|
|
const item = getLibraryItemById(itemId);
|
|
if (!item) {
|
|
alert('Element nicht gefunden.');
|
|
return;
|
|
}
|
|
|
|
const modal = document.getElementById('editLibraryModal');
|
|
document.getElementById('editLibraryItemId').value = item._id || '';
|
|
document.getElementById('editLibraryName').value = item.Name || '';
|
|
document.getElementById('editLibraryAuthor').value = item.Autor || item.Author || '';
|
|
document.getElementById('editLibraryDescription').value = item.Beschreibung || '';
|
|
document.getElementById('editLibraryLocation').value = item.Ort || '';
|
|
document.getElementById('editLibraryIsbn').value = item.ISBN || '';
|
|
document.getElementById('editLibraryCode4').value = item.Code_4 || '';
|
|
document.getElementById('editLibraryType').value = (item.ItemType || 'book');
|
|
modal.style.display = 'flex';
|
|
}
|
|
|
|
function closeEditLibraryModal() {
|
|
const modal = document.getElementById('editLibraryModal');
|
|
modal.style.display = 'none';
|
|
}
|
|
|
|
async function submitEditLibraryItem(event) {
|
|
event.preventDefault();
|
|
const itemId = document.getElementById('editLibraryItemId').value;
|
|
const payload = {
|
|
name: document.getElementById('editLibraryName').value,
|
|
autor: document.getElementById('editLibraryAuthor').value,
|
|
beschreibung: document.getElementById('editLibraryDescription').value,
|
|
ort: document.getElementById('editLibraryLocation').value,
|
|
isbn: document.getElementById('editLibraryIsbn').value,
|
|
code_4: document.getElementById('editLibraryCode4').value,
|
|
item_type: document.getElementById('editLibraryType').value
|
|
};
|
|
|
|
try {
|
|
const response = await fetch(`/api/library_item/${itemId}/update`, {
|
|
method: 'POST',
|
|
headers: {'Content-Type': 'application/json'},
|
|
body: JSON.stringify(payload)
|
|
});
|
|
const result = await response.json();
|
|
if (!response.ok || !result.ok) {
|
|
alert(result.message || 'Bearbeiten fehlgeschlagen.');
|
|
return;
|
|
}
|
|
closeEditLibraryModal();
|
|
await loadLibraryItems();
|
|
setScanStatus('Bibliotheksmedium aktualisiert.', 'ok');
|
|
} catch (err) {
|
|
console.error('Library edit failed:', err);
|
|
alert('Fehler beim Bearbeiten des Bibliotheksmediums.');
|
|
}
|
|
}
|
|
|
|
// Load on page init
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
loadLibraryItems();
|
|
wireScannerUi();
|
|
const editForm = document.getElementById('editLibraryForm');
|
|
if (editForm) {
|
|
editForm.addEventListener('submit', submitEditLibraryItem);
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<div id="editLibraryModal" class="modal" style="display:none;">
|
|
<div class="modal-content" style="max-width: 760px;">
|
|
<span class="close" onclick="closeEditLibraryModal()">×</span>
|
|
<h3 style="margin-top:0;">Bibliotheksmedium bearbeiten</h3>
|
|
<form id="editLibraryForm">
|
|
<input type="hidden" id="editLibraryItemId">
|
|
<div class="edit-grid">
|
|
<div class="full">
|
|
<label for="editLibraryName">Titel</label>
|
|
<input id="editLibraryName" required>
|
|
</div>
|
|
<div>
|
|
<label for="editLibraryAuthor">Autor/Künstler</label>
|
|
<input id="editLibraryAuthor">
|
|
</div>
|
|
<div>
|
|
<label for="editLibraryType">Medientyp</label>
|
|
<select id="editLibraryType">
|
|
<option value="book">Buch</option>
|
|
<option value="schulbuch">Schulbuch</option>
|
|
<option value="cd">CD</option>
|
|
<option value="dvd">DVD</option>
|
|
<option value="media">Sonstige Medien</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label for="editLibraryIsbn">ISBN</label>
|
|
<input id="editLibraryIsbn" placeholder="optional ISBN-10/13">
|
|
</div>
|
|
<div>
|
|
<label for="editLibraryCode4">Code</label>
|
|
<input id="editLibraryCode4" placeholder="optional Mediencode">
|
|
</div>
|
|
<div class="full">
|
|
<label for="editLibraryLocation">Ort</label>
|
|
<input id="editLibraryLocation" required>
|
|
</div>
|
|
<div class="full">
|
|
<label for="editLibraryDescription">Beschreibung</label>
|
|
<textarea id="editLibraryDescription" rows="4" required></textarea>
|
|
</div>
|
|
</div>
|
|
<div class="edit-actions">
|
|
<button type="submit" class="button" style="background:#0ea5e9;color:#fff;">Speichern</button>
|
|
<button type="button" class="button" onclick="closeEditLibraryModal()">Abbrechen</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|