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.
63 lines
1.9 KiB
63 lines
1.9 KiB
<!-- =======================================================================
|
|
File: templates/components/progress_box.html
|
|
Purpose: Reusable progress overview (download + audio) for any book.
|
|
Notes:
|
|
- Expects the following variables from Flask:
|
|
book_idx: str
|
|
title: str
|
|
download_total: int
|
|
download_done: int
|
|
audio_total: int
|
|
audio_done: int
|
|
- Pure HTML; JS for live updates will be added later.
|
|
======================================================================= -->
|
|
|
|
<div class="progress-box">
|
|
<!-- Header -->
|
|
<div class="progress-header">
|
|
<h2>Progress</h2>
|
|
{% if title %}
|
|
<div class="progress-subtitle">{{ title }}</div>
|
|
{% endif %} {% if book_idx %}
|
|
<div class="progress-bookid">Book IDX: <span>{{ book_idx }}</span></div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- DOWNLOAD SECTION -->
|
|
<div class="progress-section">
|
|
<h3>Download Progress</h3>
|
|
|
|
<div class="progress-bar">
|
|
{% set pct = 0 %} {% if download_total > 0 %} {% set pct = (100 *
|
|
download_done / download_total) | round(1) %} {% endif %}
|
|
<div class="progress-bar-fill" style="width: {{ pct }}%;"></div>
|
|
</div>
|
|
|
|
<div class="progress-stats">
|
|
<span>{{ download_done }} / {{ download_total }}</span>
|
|
<span>{{ pct }}%</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- AUDIO SECTION -->
|
|
<div class="progress-section">
|
|
<h3>Audio Progress</h3>
|
|
|
|
<div class="progress-bar audio">
|
|
{% set pct2 = 0 %} {% if audio_total > 0 %} {% set pct2 = (100 *
|
|
audio_done / audio_total) | round(1) %} {% endif %}
|
|
<div
|
|
class="progress-bar-fill audio-fill"
|
|
style="width: {{ pct2 }}%;"
|
|
></div>
|
|
</div>
|
|
|
|
<div class="progress-stats">
|
|
<span>{{ audio_done }} / {{ audio_total }}</span>
|
|
<span>{{ pct2 }}%</span>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/static/js/progress.js"></script>
|
|
</div>
|