You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
65 lines
2.1 KiB
65 lines
2.1 KiB
<!-- =======================================================================
|
|
File: templates/components/book_list_item.html
|
|
Purpose:
|
|
Dashboard weergave van één boek in de lijst.
|
|
Variabelen komen binnen via:
|
|
|
|
→ Dus alle velden moeten via "book.<veld>" aangesproken worden.
|
|
======================================================================= -->
|
|
|
|
<div class="book-list-item" data-book-id="{{ book.book_id }}">
|
|
<!-- Left area: title + metadata -->
|
|
<div class="book-info">
|
|
<div class="book-title">{{ book.title }}</div>
|
|
|
|
<div class="book-meta">
|
|
<span class="meta-label">ID:</span> {{ book.book_id }} {% if
|
|
book.last_update %}
|
|
<span class="meta-separator">•</span>
|
|
<span class="meta-label">Updated:</span> {{ book.last_update }} {% endif
|
|
%}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Center area: Status -->
|
|
<div class="book-status">
|
|
<span class="status-badge status-{{ book.status|lower }}">
|
|
{{ book.status|capitalize }}
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Right area: progress mini-bars -->
|
|
<div class="book-progress-mini">
|
|
<!-- Download progress -->
|
|
<div class="progress-mini-row">
|
|
<span class="mini-label">DL:</span>
|
|
|
|
{% set pct_dl = 0 %} {% if book.download_total > 0 %} {% set pct_dl = (100
|
|
* book.download_done / book.download_total) | round(0) %} {% endif %}
|
|
|
|
<div class="progress-mini-bar">
|
|
<div class="fill" style="width: {{ pct_dl }}%;"></div>
|
|
</div>
|
|
<span class="mini-value">{{ pct_dl }}%</span>
|
|
</div>
|
|
|
|
<!-- Audio progress -->
|
|
<div class="progress-mini-row">
|
|
<span class="mini-label">AU:</span>
|
|
|
|
{% set pct_au = 0 %} {% if book.audio_total > 0 %} {% set pct_au = (100 *
|
|
book.audio_done / book.audio_total) | round(0) %} {% endif %}
|
|
|
|
<div class="progress-mini-bar audio">
|
|
<div class="fill audio-fill" style="width: {{ pct_au }}%;"></div>
|
|
</div>
|
|
<span class="mini-value">{{ pct_au }}%</span>
|
|
</div>
|
|
</div>
|
|
<div class="book-abort-area">
|
|
<button class="abort-btn" onclick="abortBook('{{ book.book_id }}')">
|
|
Abort
|
|
</button>
|
|
</div>
|
|
</div>
|