1398 lines
51 KiB
HTML
1398 lines
51 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, 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" 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="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: 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://cdn.jsdelivr.net/npm/@ericblade/quagga2/dist/quagga.js"></script>
|
|
<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;
|
|
|
|
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 || 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;
|
|
}
|
|
}
|
|
|
|
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();
|
|
|
|
if (typeof currentCallback === "function") {
|
|
currentCallback(barcode);
|
|
} else {
|
|
handleScanSuccess(barcode);
|
|
}
|
|
});
|
|
|
|
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) {
|
|
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 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 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' };
|
|
return labels[type] || type;
|
|
}
|
|
|
|
function escapeHtml(text) {
|
|
const div = document.createElement('div');
|
|
div.textContent = text;
|
|
return div.innerHTML;
|
|
}
|
|
|
|
function showItemDetail(itemId) {
|
|
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';
|
|
}
|
|
|
|
// =========================================================================
|
|
// 5. EVENT LISTENERS INITIALIZATION & ON-LOAD INITIALIZER
|
|
// =========================================================================
|
|
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(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');
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
// Run when DOM structure is entirely ready
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
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();
|
|
});
|
|
}
|
|
|
|
// Edit Modal Form processing
|
|
const editForm = document.getElementById('editLibraryForm');
|
|
if (editForm) {
|
|
editForm.addEventListener('submit', async function(e) {
|
|
e.preventDefault();
|
|
|
|
const itemId = document.getElementById('editLibraryItemId').value;
|
|
|
|
const updatedData = {
|
|
name: document.getElementById('editLibraryName').value,
|
|
item_type: document.getElementById('editLibraryType').value,
|
|
isbn: document.getElementById('editLibraryIsbn').value,
|
|
code_4: document.getElementById('editLibraryCode4').value,
|
|
ort: document.getElementById('editLibraryLocation').value,
|
|
beschreibung: document.getElementById('editLibraryDescription').value
|
|
};
|
|
|
|
try {
|
|
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(updatedData)
|
|
});
|
|
|
|
const result = await response.json();
|
|
|
|
if (response.ok && result.ok) {
|
|
alert(result.message || 'Medium erfolgreich aktualisiert!');
|
|
closeEditLibraryModal();
|
|
|
|
pagingState.loading = false;
|
|
loadLibraryItems();
|
|
} else {
|
|
alert(result.message || 'Fehler beim Speichern der Änderungen.');
|
|
}
|
|
} catch (error) {
|
|
console.error('Update failed:', error);
|
|
alert('Netzwerkfehler beim Aktualisieren des Mediums.');
|
|
}
|
|
});
|
|
}
|
|
});
|
|
|
|
function openEditLibraryItem(itemId) {
|
|
const item = libraryItems.find(i => i._id === itemId);
|
|
|
|
if (!item) {
|
|
alert('Fehler: Das Medium konnte nicht gefunden werden.');
|
|
return;
|
|
}
|
|
|
|
// 1. Felder befüllen
|
|
document.getElementById('editLibraryItemId').value = item._id || '';
|
|
document.getElementById('editLibraryName').value = item.Name || '';
|
|
document.getElementById('editLibraryType').value = item.ItemType || 'book';
|
|
document.getElementById('editLibraryIsbn').value = item.ISBN || '';
|
|
document.getElementById('editLibraryCode4').value = item.Code_4 || item.Code4 || '';
|
|
document.getElementById('editLibraryLocation').value = item.Ort || '';
|
|
document.getElementById('editLibraryDescription').value = item.Beschreibung || '';
|
|
|
|
// 2. Gruppen-Logik (Codes anzeigen)
|
|
const warningDiv = document.getElementById('editLibraryGroupWarning');
|
|
const codesContainer = document.getElementById('editLibraryAllCodes');
|
|
|
|
if (item.SeriesGroupId) {
|
|
const groupMembers = libraryItems
|
|
.filter(i => i.SeriesGroupId === item.SeriesGroupId)
|
|
.sort((a, b) => (a.SeriesPosition || 0) - (b.SeriesPosition || 0));
|
|
|
|
// Codes als komma-separierte Liste
|
|
const codeList = groupMembers
|
|
.map(member => member.Code_4 || "N/A")
|
|
.join(', ');
|
|
|
|
document.getElementById('editLibraryGroupCount').textContent = groupMembers.length;
|
|
codesContainer.textContent = codeList;
|
|
|
|
warningDiv.style.display = 'block';
|
|
} else {
|
|
warningDiv.style.display = 'none';
|
|
}
|
|
|
|
document.getElementById('editLibraryModal').style.display = 'flex';
|
|
}
|
|
|
|
function closeEditLibraryModal() {
|
|
document.getElementById('editLibraryModal').style.display = 'none';
|
|
}
|
|
|
|
/**
|
|
* Event-Listener für das Formular (Initialisierung)
|
|
*/
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
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;
|
|
|
|
// 1. Payload für die /update_group Route zusammenstellen
|
|
// Wir sammeln alle Gruppenmitglieder, um die individuellen Codes zu senden
|
|
const groupMembers = libraryItems.filter(i => i.SeriesGroupId === currentItem.SeriesGroupId);
|
|
const individualItems = groupMembers.map(member => {
|
|
return {
|
|
id: member._id,
|
|
// Wenn es das aktive Item ist, nimm den neuen Wert aus dem Input
|
|
code_4: (member._id === itemId) ? document.getElementById('editLibraryCode4').value : member.Code_4
|
|
};
|
|
});
|
|
|
|
const payload = {
|
|
series_group_id: currentItem.SeriesGroupId,
|
|
name: document.getElementById('editLibraryName').value,
|
|
ort: document.getElementById('editLibraryLocation').value,
|
|
beschreibung: document.getElementById('editLibraryDescription').value,
|
|
isbn: document.getElementById('editLibraryIsbn').value,
|
|
item_type: document.getElementById('editLibraryType').value,
|
|
items: individualItems
|
|
};
|
|
|
|
// 2. Request an Backend
|
|
try {
|
|
const response = await fetch('/update_group', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(payload)
|
|
});
|
|
|
|
const result = await response.json();
|
|
|
|
if (result.success) {
|
|
// 3. UI-Synchronisierung (lokal im Browser)
|
|
libraryItems.forEach(item => {
|
|
if (item.SeriesGroupId === currentItem.SeriesGroupId) {
|
|
item.Name = payload.name;
|
|
item.Ort = payload.ort;
|
|
item.Beschreibung = payload.beschreibung;
|
|
item.ISBN = payload.isbn;
|
|
item.ItemType = payload.item_type;
|
|
|
|
// Nur den Code des aktiven Items lokal updaten
|
|
if (item._id === itemId) item.Code_4 = document.getElementById('editLibraryCode4').value;
|
|
}
|
|
});
|
|
|
|
closeEditLibraryModal();
|
|
// Falls du eine Funktion zum Neuzeichnen der Tabelle hast, rufe sie hier auf:
|
|
// renderTable();
|
|
alert("Erfolgreich synchronisiert.");
|
|
} else {
|
|
alert('Fehler: ' + result.message);
|
|
}
|
|
} catch (error) {
|
|
console.error('Fetch error:', error);
|
|
alert('Netzwerkfehler beim Speichern.');
|
|
}
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<div id="editLibraryModal" class="modal" style="display:none;">
|
|
<div class="modal-content" style="max-width: 760px; padding: 25px; border-radius: 8px;">
|
|
<span class="close" onclick="closeEditLibraryModal()" style="cursor: pointer; float: right; font-size: 24px;">×</span>
|
|
<h3 style="margin-top:0;">Bibliotheksmedium bearbeiten</h3>
|
|
|
|
<!-- Bereich für Gruppen-Informationen (Hier konsolidiert!) -->
|
|
<div id="editLibraryGroupWarning" style="display:none; background-color: #fff; padding: 15px; border-radius: 6px; margin-bottom: 20px; border: 1px solid #0ea5e9;">
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; border-bottom: 1px solid #eee; padding-bottom: 10px;">
|
|
<strong style="color: #0ea5e9;">Gruppen-Range (Total: <span id="editLibraryGroupCount"></span>)</strong>
|
|
</div>
|
|
|
|
<p style="margin: 5px 0; font-size: 12px; color: #555;">
|
|
Alle aufgeführten Codes gehören zu diesem Datensatz:
|
|
</p>
|
|
|
|
<!-- Hier werden die Codes per JS eingefügt -->
|
|
<div id="editLibraryAllCodes" style="display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px;"></div>
|
|
|
|
<div style="margin-top: 15px; font-size: 11px; background: #e0f2fe; padding: 8px; border-radius: 4px;">
|
|
<strong>Hinweis:</strong> Änderungen an Titel/Ort/Beschreibung werden auf <strong>alle</strong> Exemplare der Range übertragen.
|
|
</div>
|
|
</div>
|
|
|
|
<form id="editLibraryForm">
|
|
<input type="hidden" id="editLibraryItemId">
|
|
<div class="edit-grid">
|
|
<div class="full">
|
|
<label for="editLibraryName">Titel</label>
|
|
<input id="editLibraryName" required style="width: 100%;">
|
|
</div>
|
|
<div>
|
|
<label for="editLibraryType">Medientyp</label>
|
|
<select id="editLibraryType" style="width: 100%;">
|
|
<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" style="width: 100%;">
|
|
</div>
|
|
<div>
|
|
<label for="editLibraryCode4">Code</label>
|
|
<input id="editLibraryCode4" placeholder="optional Mediencode" style="width: 100%;">
|
|
</div>
|
|
<div class="full">
|
|
<label for="editLibraryLocation">Ort</label>
|
|
<input id="editLibraryLocation" required style="width: 100%;">
|
|
</div>
|
|
<div class="full">
|
|
<label for="editLibraryDescription">Beschreibung</label>
|
|
<textarea id="editLibraryDescription" rows="4" required style="width: 100%;"></textarea>
|
|
</div>
|
|
</div>
|
|
<div class="edit-actions" style="margin-top:20px;">
|
|
<button type="submit" class="button" style="background:#0ea5e9;color:#fff;">Speichern & Synchronisieren</button>
|
|
<button type="button" class="button" onclick="closeEditLibraryModal()">Abbrechen</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<div id="editLibraryGroupWarning" style="display:none; background-color: #fff; padding: 15px; border-radius: 6px; margin-bottom: 20px; border: 1px solid #0ea5e9;">
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; border-bottom: 1px solid #eee; padding-bottom: 10px;">
|
|
<strong style="color: #0ea5e9;">Gruppen-Range (Total: <span id="editLibraryGroupCount"></span>)</strong>
|
|
</div>
|
|
|
|
<p style="margin: 5px 0; font-size: 12px; color: #555;">
|
|
Alle Codes in dieser Gruppe:
|
|
</p>
|
|
|
|
<!-- Hier wird die Liste als Komma-Text eingefügt -->
|
|
<div id="editLibraryAllCodes" style="font-family: monospace; font-size: 14px; font-weight: bold; color: #333; margin-top: 5px;"></div>
|
|
|
|
<div style="margin-top: 15px; font-size: 11px; background: #e0f2fe; padding: 8px; border-radius: 4px;">
|
|
<strong>Hinweis:</strong> Änderungen an Titel/Ort/Beschreibung werden auf <strong>alle</strong> Exemplare der Range übertragen.
|
|
</div>
|
|
</div>
|
|
{% endblock %} |