591 lines
22 KiB
HTML
591 lines
22 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Bibliotheks-Ausleihen - {{ APP_VERSION }}{% endblock %}
|
|
|
|
{% block content %}
|
|
<style>
|
|
.library-admin-shell {
|
|
max-width: 1460px;
|
|
margin: 0 auto;
|
|
padding: 18px 20px 32px;
|
|
}
|
|
|
|
.library-admin-hero {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
align-items: flex-start;
|
|
margin-bottom: 18px;
|
|
padding: 20px 22px;
|
|
background: linear-gradient(135deg, #ffffff 0%, #f7f9fc 100%);
|
|
border: 1px solid #dbe4ee;
|
|
border-radius: 18px;
|
|
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
|
|
}
|
|
|
|
.library-admin-hero h1 {
|
|
margin: 0 0 6px 0;
|
|
font-size: 1.9rem;
|
|
}
|
|
|
|
.library-admin-hero p {
|
|
margin: 0;
|
|
color: #5b6472;
|
|
}
|
|
|
|
.hero-actions {
|
|
display: flex;
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.hero-actions .btn {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.summary-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
|
gap: 12px;
|
|
margin-bottom: 18px;
|
|
}
|
|
|
|
.summary-card {
|
|
background: #fff;
|
|
border: 1px solid #e2e8f0;
|
|
border-radius: 14px;
|
|
padding: 14px 16px;
|
|
box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
|
|
}
|
|
|
|
.summary-card .label {
|
|
display: block;
|
|
font-size: 0.85rem;
|
|
color: #6b7280;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.summary-card .value {
|
|
font-size: 1.6rem;
|
|
font-weight: 800;
|
|
color: #1f2937;
|
|
}
|
|
|
|
.filter-bar {
|
|
display: grid;
|
|
grid-template-columns: 1fr 220px 220px;
|
|
gap: 10px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.filter-bar input,
|
|
.filter-bar select {
|
|
width: 100%;
|
|
padding: 11px 14px;
|
|
border: 1px solid #d6dde6;
|
|
border-radius: 12px;
|
|
background: #fff;
|
|
}
|
|
|
|
.panel {
|
|
background: #fff;
|
|
border: 1px solid #e2e8f0;
|
|
border-radius: 18px;
|
|
padding: 18px;
|
|
box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
|
|
margin-bottom: 18px;
|
|
}
|
|
|
|
.panel h2 {
|
|
margin: 0 0 12px 0;
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.library-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
.library-table th,
|
|
.library-table td {
|
|
padding: 12px 10px;
|
|
border-bottom: 1px solid #edf2f7;
|
|
vertical-align: top;
|
|
text-align: left;
|
|
}
|
|
|
|
.library-table th {
|
|
font-size: 0.84rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
color: #64748b;
|
|
background: #f8fafc;
|
|
}
|
|
|
|
.library-table tr:hover td {
|
|
background: #fbfdff;
|
|
}
|
|
|
|
.mono {
|
|
font-family: monospace;
|
|
font-size: 0.92rem;
|
|
}
|
|
|
|
.badge-pill {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 4px 10px;
|
|
border-radius: 999px;
|
|
font-size: 0.78rem;
|
|
font-weight: 700;
|
|
line-height: 1;
|
|
}
|
|
|
|
.badge-active { background: #dbeafe; color: #1d4ed8; }
|
|
.badge-planned { background: #fef3c7; color: #b45309; }
|
|
.badge-completed { background: #dcfce7; color: #166534; }
|
|
.badge-open { background: #fee2e2; color: #991b1b; }
|
|
.badge-paid { background: #dcfce7; color: #166534; }
|
|
.badge-damaged { background: #fee2e2; color: #991b1b; }
|
|
|
|
.row-actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
}
|
|
|
|
.row-actions form {
|
|
margin: 0;
|
|
}
|
|
|
|
.row-actions .btn {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.muted {
|
|
color: #6b7280;
|
|
font-size: 0.92rem;
|
|
}
|
|
|
|
.empty-state {
|
|
padding: 28px 16px;
|
|
text-align: center;
|
|
color: #6b7280;
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.library-admin-hero {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.filter-bar {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.library-table {
|
|
display: block;
|
|
overflow-x: auto;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<div class="library-admin-shell">
|
|
<div class="library-admin-hero">
|
|
<div>
|
|
<h1>Bibliotheks-Ausleihen</h1>
|
|
<p>Nur Bibliotheksmedien. Hier kannst du offene Ausleihen abschließen, Rechnungen bezahlen und defekte Medien direkt zurücksetzen.</p>
|
|
</div>
|
|
<div class="hero-actions">
|
|
<a class="btn btn-secondary" href="{{ url_for('library_view') }}">Bibliothek öffnen</a>
|
|
<a class="btn btn-primary" href="{{ url_for('library_admin') }}">Bücher hochladen</a>
|
|
<a class="btn btn-outline-secondary" href="{{ url_for('admin_borrowings') }}">Alle Ausleihen</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="summary-grid">
|
|
<div class="summary-card">
|
|
<span class="label">Ausleihen</span>
|
|
<div class="value">{{ loan_entries|length }}</div>
|
|
</div>
|
|
<div class="summary-card">
|
|
<span class="label">Defekte Medien</span>
|
|
<div class="value">{{ damaged_items|length }}</div>
|
|
</div>
|
|
<div class="summary-card">
|
|
<span class="label">Direkt reparierbar</span>
|
|
<div class="value">{{ damaged_items|length }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="filter-bar">
|
|
<input id="library-search" type="text" placeholder="Nach Element, Benutzer, Ausweis oder Rechnung suchen...">
|
|
<select id="loan-status-filter">
|
|
<option value="">Alle Ausleihen</option>
|
|
<option value="active">Aktiv</option>
|
|
<option value="planned">Geplant</option>
|
|
<option value="completed">Abgeschlossen</option>
|
|
</select>
|
|
<select id="damage-filter">
|
|
<option value="all">Alle Einträge</option>
|
|
<option value="damage">Nur defekt</option>
|
|
<option value="clean">Nur ohne Schaden</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="panel">
|
|
<h2>Bibliotheks-Ausleihen</h2>
|
|
{% if loan_entries %}
|
|
<table class="library-table" id="loans-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Status</th>
|
|
<th>Element</th>
|
|
<th>Benutzer</th>
|
|
<th>Zeit</th>
|
|
<th>Rechnung</th>
|
|
<th>Schaden</th>
|
|
<th>Aktionen</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for e in loan_entries %}
|
|
<tr class="loan-row" data-borrow-id="{{ e.id }}" data-item-id="{{ e.item_id }}" data-item-name="{{ e.item_name }}" data-item-code="{{ e.item_code }}" data-item-cost="{{ e.item_cost_raw }}" data-user-name="{{ e.user }}" data-search="{{ (e.item_name ~ ' ' ~ e.item_code ~ ' ' ~ e.user ~ ' ' ~ e.invoice_number ~ ' ' ~ e.item_author ~ ' ' ~ e.item_isbn)|lower }}" data-status="{{ e.status }}" data-has-damage="{{ '1' if e.has_damage else '0' }}">
|
|
<td>
|
|
{% if e.status == 'active' %}
|
|
<span class="badge-pill badge-active">Aktiv</span>
|
|
{% elif e.status == 'planned' %}
|
|
<span class="badge-pill badge-planned">Geplant</span>
|
|
{% else %}
|
|
<span class="badge-pill badge-completed">Abgeschlossen</span>
|
|
{% endif %}
|
|
</td>
|
|
<td>
|
|
<div><strong>{{ e.item_name }}</strong></div>
|
|
<div class="muted">{{ e.item_author or '—' }}</div>
|
|
<div class="mono">{{ e.item_code or '—' }}</div>
|
|
<div style="margin-top:6px;">
|
|
<a class="btn btn-outline-secondary btn-sm" href="{{ url_for('library_item_invoices', item_id=e.item_id) }}">Rechnungen</a>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div>{{ e.user }}</div>
|
|
<div class="muted">{{ e.start }}{% if e.end %} bis {{ e.end }}{% endif %}</div>
|
|
</td>
|
|
<td>
|
|
<div>{{ e.period or '—' }}</div>
|
|
{% if e.notes %}<div class="muted">{{ e.notes }}</div>{% endif %}
|
|
</td>
|
|
<td>
|
|
{% if e.invoice_number %}
|
|
<div class="mono">{{ e.invoice_number }}</div>
|
|
<div class="muted">{{ e.invoice_amount }}</div>
|
|
<div style="margin-top:6px;">
|
|
<a class="btn btn-outline-primary btn-sm" href="{{ url_for('admin_view_invoice_pdf', borrow_id=e.id) }}" target="_blank" rel="noopener">PDF öffnen</a>
|
|
</div>
|
|
{% if e.invoice_paid %}
|
|
<span class="badge-pill badge-paid">Bezahlt</span>
|
|
{% if e.invoice_paid_at %}<div class="muted">am {{ e.invoice_paid_at }}</div>{% endif %}
|
|
{% else %}
|
|
<span class="badge-pill badge-open">Offen</span>
|
|
{% endif %}
|
|
{% else %}
|
|
<span class="muted">Keine Rechnung</span>
|
|
{% endif %}
|
|
</td>
|
|
<td>
|
|
{% if e.has_damage %}
|
|
<span class="badge-pill badge-damaged">{{ e.damage_count }} Schaden{% if e.damage_count != 1 %}s{% endif %}</span>
|
|
{% if e.damage_text %}<div class="muted" style="margin-top:6px;">{{ e.damage_text }}</div>{% endif %}
|
|
{% else %}
|
|
<span class="muted">Kein Schaden</span>
|
|
{% endif %}
|
|
</td>
|
|
<td>
|
|
<div class="row-actions">
|
|
{% if e.status == 'active' %}
|
|
<button type="button" class="btn btn-outline-danger btn-sm" onclick="openDamageReportPrompt(this)">Schaden melden</button>
|
|
{% endif %}
|
|
{% if e.invoice_number and ((not e.invoice_paid) or e.has_damage) %}
|
|
<form method="post" action="{{ url_for('admin_finalize_invoice_and_repair', borrow_id=e.id) }}" onsubmit="return confirm('Rechnung als bezahlt und Element als repariert markieren?');">
|
|
<button type="submit" class="btn btn-success btn-sm">
|
|
{% if not e.invoice_paid and e.has_damage %}
|
|
Bezahlt + repariert
|
|
{% elif not e.invoice_paid %}
|
|
Als bezahlt markieren
|
|
{% else %}
|
|
Als repariert markieren
|
|
{% endif %}
|
|
</button>
|
|
</form>
|
|
{% elif e.has_damage %}
|
|
<form method="post" action="{{ url_for('mark_damage_repaired', id=e.item_id) }}" onsubmit="return confirm('Medium als repariert markieren?');">
|
|
<button type="submit" class="btn btn-success btn-sm">Als repariert markieren</button>
|
|
</form>
|
|
{% endif %}
|
|
|
|
{% if e.status in ['active', 'planned'] %}
|
|
<form method="post" action="{{ url_for('admin_reset_borrowing', borrow_id=e.id) }}" onsubmit="return confirm('Ausleihe zurücksetzen?');">
|
|
<button type="submit" class="btn btn-warning btn-sm">Zurücksetzen</button>
|
|
</form>
|
|
{% endif %}
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
<div id="loans-empty" class="empty-state" style="display:none;">Keine passenden Bibliotheks-Ausleihen gefunden.</div>
|
|
{% else %}
|
|
<div class="empty-state">Keine Bibliotheks-Ausleihen gefunden.</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="panel">
|
|
<h2>Defekte Bibliotheksmedien ohne aktive Ausleihe</h2>
|
|
{% if damaged_items %}
|
|
<table class="library-table" id="damaged-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Element</th>
|
|
<th>Code</th>
|
|
<th>Schaden</th>
|
|
<th>Status</th>
|
|
<th>Aktion</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for item in damaged_items %}
|
|
<tr class="damaged-row" data-search="{{ (item.name ~ ' ' ~ item.code ~ ' ' ~ item.author ~ ' ' ~ item.isbn ~ ' ' ~ item.damage_text)|lower }}" data-status="damage" data-has-damage="1">
|
|
<td>
|
|
<div><strong>{{ item.name }}</strong></div>
|
|
<div class="muted">{{ item.author or '—' }}</div>
|
|
<div class="muted">{{ item.isbn or '—' }}</div>
|
|
</td>
|
|
<td class="mono">{{ item.code or '—' }}</td>
|
|
<td>
|
|
<span class="badge-pill badge-damaged">{{ item.damage_count }} Schaden{% if item.damage_count != 1 %}s{% endif %}</span>
|
|
{% if item.damage_text %}<div class="muted" style="margin-top:6px;">{{ item.damage_text }}</div>{% endif %}
|
|
</td>
|
|
<td>
|
|
{% if item.available %}
|
|
<span class="badge-pill badge-completed">Bereit zum Zurücksetzen</span>
|
|
{% else %}
|
|
<span class="badge-pill badge-open">Nicht verfügbar</span>
|
|
{% endif %}
|
|
{% if item.last_updated %}<div class="muted" style="margin-top:6px;">{{ item.last_updated }}</div>{% endif %}
|
|
</td>
|
|
<td>
|
|
<div class="row-actions" style="margin-bottom:8px;">
|
|
<a class="btn btn-outline-secondary btn-sm" href="{{ url_for('library_item_invoices', item_id=item.id) }}">Rechnungen</a>
|
|
</div>
|
|
<form method="post" action="{{ url_for('mark_damage_repaired', id=item.id) }}" onsubmit="return confirm('Dieses Medium als repariert und wieder verfügbar markieren?');">
|
|
<button type="submit" class="btn btn-success btn-sm">Als repariert markieren</button>
|
|
</form>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
<div id="damaged-empty" class="empty-state" style="display:none;">Keine passenden defekten Medien gefunden.</div>
|
|
{% else %}
|
|
<div class="empty-state">Keine defekten Bibliotheksmedien ohne aktive Ausleihe gefunden.</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<div id="damage-invoice-modal" style="display:none; position:fixed; inset:0; background:rgba(15,23,42,0.72); z-index:9999; padding:20px; overflow:auto;">
|
|
<div style="max-width:760px; margin:40px auto; background:#fff; border-radius:12px; padding:24px; box-shadow:0 20px 60px rgba(0,0,0,0.3);">
|
|
<div style="display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:18px;">
|
|
<div>
|
|
<h2 style="margin:0;">Rechnung erstellen</h2>
|
|
<p style="margin:6px 0 0; color:#666;">Die Rechnung nutzt das bestehende Rechnungssystem und kann direkt nach der Schadensmeldung erstellt werden.</p>
|
|
</div>
|
|
<button type="button" class="btn btn-secondary" onclick="closeDamageInvoiceModal()">Schließen</button>
|
|
</div>
|
|
|
|
<form id="damage-invoice-form" method="post" action="">
|
|
<div style="display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:16px; margin-bottom:16px;">
|
|
<div>
|
|
<label for="damage-invoice-item" style="display:block; font-weight:700; margin-bottom:6px;">Element</label>
|
|
<input id="damage-invoice-item" type="text" readonly style="width:100%; padding:10px; border:1px solid #ddd; border-radius:6px; background:#f8fafc;">
|
|
</div>
|
|
<div>
|
|
<label for="damage-invoice-borrower" style="display:block; font-weight:700; margin-bottom:6px;">Schüler</label>
|
|
<input id="damage-invoice-borrower" type="text" readonly style="width:100%; padding:10px; border:1px solid #ddd; border-radius:6px; background:#f8fafc;">
|
|
</div>
|
|
<div>
|
|
<label for="damage-invoice-code" style="display:block; font-weight:700; margin-bottom:6px;">Element-ID / Code</label>
|
|
<input id="damage-invoice-code" type="text" readonly style="width:100%; padding:10px; border:1px solid #ddd; border-radius:6px; background:#f8fafc;">
|
|
</div>
|
|
<div>
|
|
<label for="damage-invoice-amount" style="display:block; font-weight:700; margin-bottom:6px;">Preis</label>
|
|
<input id="damage-invoice-amount" name="invoice_amount" type="text" required style="width:100%; padding:10px; border:1px solid #ddd; border-radius:6px;" placeholder="z.B. 12,50">
|
|
</div>
|
|
</div>
|
|
|
|
<div style="margin-bottom:16px;">
|
|
<label for="damage-invoice-reason" style="display:block; font-weight:700; margin-bottom:6px;">Schadensbeschreibung</label>
|
|
<textarea id="damage-invoice-reason" name="damage_reason" rows="5" required style="width:100%; padding:10px; border:1px solid #ddd; border-radius:6px; resize:vertical;" placeholder="Beschreiben Sie kurz den Schaden oder die Zerstörung."></textarea>
|
|
</div>
|
|
|
|
<div style="display:flex; flex-wrap:wrap; gap:16px; align-items:center; margin-bottom:18px;">
|
|
<label style="display:flex; align-items:center; gap:8px;">
|
|
<input id="damage-invoice-destroyed" type="checkbox" name="mark_destroyed" checked>
|
|
Element als zerstört markieren
|
|
</label>
|
|
<label style="display:flex; align-items:center; gap:8px;">
|
|
<input id="damage-invoice-close" type="checkbox" name="close_borrowing" checked>
|
|
Ausleihe abschließen
|
|
</label>
|
|
</div>
|
|
|
|
<div style="display:flex; justify-content:flex-end; gap:10px;">
|
|
<button type="button" class="btn btn-secondary" onclick="closeDamageInvoiceModal()">Abbrechen</button>
|
|
<button type="submit" class="btn btn-danger">PDF-Rechnung erstellen</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
(function() {
|
|
const searchInput = document.getElementById('library-search');
|
|
const statusFilter = document.getElementById('loan-status-filter');
|
|
const damageFilter = document.getElementById('damage-filter');
|
|
const loanRows = Array.from(document.querySelectorAll('.loan-row'));
|
|
const damagedRows = Array.from(document.querySelectorAll('.damaged-row'));
|
|
const loansEmpty = document.getElementById('loans-empty');
|
|
const damagedEmpty = document.getElementById('damaged-empty');
|
|
const damageInvoiceModal = document.getElementById('damage-invoice-modal');
|
|
const damageInvoiceForm = document.getElementById('damage-invoice-form');
|
|
const damageInvoiceItem = document.getElementById('damage-invoice-item');
|
|
const damageInvoiceBorrower = document.getElementById('damage-invoice-borrower');
|
|
const damageInvoiceCode = document.getElementById('damage-invoice-code');
|
|
const damageInvoiceAmount = document.getElementById('damage-invoice-amount');
|
|
const damageInvoiceReason = document.getElementById('damage-invoice-reason');
|
|
|
|
function openDamageReportPrompt(button) {
|
|
const row = button.closest('.loan-row');
|
|
if (!row) {
|
|
return;
|
|
}
|
|
|
|
const itemId = row.dataset.itemId || '';
|
|
const itemName = row.dataset.itemName || 'Bibliotheksmedium';
|
|
const noteInput = prompt('Schadensmeldung für dieses Bibliotheksmedium:\nNotiz zum Schaden (optional):', '');
|
|
|
|
if (noteInput === null) {
|
|
return;
|
|
}
|
|
|
|
const description = noteInput.trim() || 'Schaden erneut gemeldet';
|
|
|
|
fetch(`/report_damage/${itemId}`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ description })
|
|
})
|
|
.then(response => response.json().then(data => ({ ok: response.ok, data })))
|
|
.then(({ ok, data }) => {
|
|
if (!ok || !data.success) {
|
|
throw new Error(data.message || 'Fehler beim Speichern der Schadensmeldung.');
|
|
}
|
|
|
|
if (confirm('Schaden gespeichert. Soll direkt eine Rechnung erstellt werden?')) {
|
|
openDamageInvoiceModal(row, description);
|
|
return;
|
|
}
|
|
|
|
window.location.reload();
|
|
})
|
|
.catch(error => {
|
|
alert(error.message || 'Fehler beim Speichern der Schadensmeldung.');
|
|
});
|
|
}
|
|
|
|
window.openDamageReportPrompt = openDamageReportPrompt;
|
|
|
|
function openDamageInvoiceModal(row, description) {
|
|
if (!damageInvoiceModal || !damageInvoiceForm) {
|
|
return;
|
|
}
|
|
|
|
const borrowId = row.dataset.borrowId || '';
|
|
const itemName = row.dataset.itemName || '';
|
|
const borrower = row.dataset.userName || '';
|
|
const itemCode = row.dataset.itemCode || '';
|
|
const itemCost = row.dataset.itemCost || '';
|
|
|
|
damageInvoiceForm.action = "{{ url_for('admin_create_invoice', borrow_id='__BORROW_ID__') }}".replace('__BORROW_ID__', borrowId);
|
|
damageInvoiceItem.value = itemName;
|
|
damageInvoiceBorrower.value = borrower;
|
|
damageInvoiceCode.value = itemCode;
|
|
damageInvoiceAmount.value = String(itemCost).replace(' EUR', '').trim();
|
|
damageInvoiceReason.value = description || `Schaden gemeldet für ${itemName}`;
|
|
damageInvoiceModal.style.display = 'block';
|
|
damageInvoiceAmount.focus();
|
|
}
|
|
|
|
window.openDamageInvoiceModal = openDamageInvoiceModal;
|
|
|
|
function closeDamageInvoiceModal() {
|
|
if (damageInvoiceModal) {
|
|
damageInvoiceModal.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
if (damageInvoiceModal) {
|
|
damageInvoiceModal.addEventListener('click', function(event) {
|
|
if (event.target === damageInvoiceModal) {
|
|
closeDamageInvoiceModal();
|
|
}
|
|
});
|
|
}
|
|
|
|
window.closeDamageInvoiceModal = closeDamageInvoiceModal;
|
|
|
|
function applyFilters() {
|
|
const search = (searchInput.value || '').trim().toLowerCase();
|
|
const status = statusFilter.value;
|
|
const damage = damageFilter.value;
|
|
|
|
let visibleLoans = 0;
|
|
loanRows.forEach(row => {
|
|
const haystack = row.dataset.search || '';
|
|
const rowStatus = row.dataset.status || '';
|
|
const hasDamage = row.dataset.hasDamage === '1';
|
|
const searchMatch = !search || haystack.includes(search);
|
|
const statusMatch = !status || rowStatus === status;
|
|
const damageMatch = damage === 'all' || (damage === 'damage' && hasDamage) || (damage === 'clean' && !hasDamage);
|
|
const show = searchMatch && statusMatch && damageMatch;
|
|
row.style.display = show ? '' : 'none';
|
|
if (show) visibleLoans++;
|
|
});
|
|
if (loansEmpty) loansEmpty.style.display = visibleLoans === 0 ? 'block' : 'none';
|
|
|
|
let visibleDamaged = 0;
|
|
damagedRows.forEach(row => {
|
|
const haystack = row.dataset.search || '';
|
|
const rowStatus = row.dataset.status || '';
|
|
const hasDamage = row.dataset.hasDamage === '1';
|
|
const searchMatch = !search || haystack.includes(search);
|
|
const statusMatch = !status || rowStatus === status || status === '';
|
|
const damageMatch = damage === 'all' || (damage === 'damage' && hasDamage) || (damage === 'clean' && !hasDamage);
|
|
const show = searchMatch && statusMatch && damageMatch;
|
|
row.style.display = show ? '' : 'none';
|
|
if (show) visibleDamaged++;
|
|
});
|
|
if (damagedEmpty) damagedEmpty.style.display = visibleDamaged === 0 ? 'block' : 'none';
|
|
}
|
|
|
|
searchInput.addEventListener('input', applyFilters);
|
|
statusFilter.addEventListener('change', applyFilters);
|
|
damageFilter.addEventListener('change', applyFilters);
|
|
applyFilters();
|
|
})();
|
|
</script>
|
|
{% endblock %}
|