george/borg-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add loading spinners

Browse Source
This commit is contained in:
George Lacey 2022-04-08 10:13:49 +01:00
parent c0cd3b0cc3
commit 8ef54ee81b
1 changed files with 14 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
borgweb/borg/templates/borg/index.html
View File

@ -29,7 +29,8 @@
{% if repo_list %} {% if repo_list %}
<div id="repo-container" class="grid mx-auto d-flex justify-content-center flex-wrap"> <div id="repo-container" class="grid mx-auto d-flex justify-content-center flex-wrap">
{% for repo in repo_list %} {% for repo in repo_list %}
<div style="width: 600px;" id="repo-{{ repo.label }}" class="repo-container shadow rounded overflow-hidden bg-primary"> <div style="width: 600px;" id="repo-{{ repo.label }}"
class="repo-container shadow rounded overflow-hidden bg-primary">
<div class="row me-1 overflow-hidden text-truncate"> <div class="row me-1 overflow-hidden text-truncate">
<h2 class="h2"><span class="repo-label">{{ repo.label }}</span> <h2 class="h2"><span class="repo-label">{{ repo.label }}</span>
<small class="repo-location text-muted">{{ repo.location }}</small> <small class="repo-location text-muted">{{ repo.location }}</small>
@ -37,26 +38,29 @@
</div> </div>
<dl class="att-label row ps-3"> <dl class="att-label row ps-3">
<dt class="col-4">Latest backup:</dt> <dt class="col-4">Latest backup:</dt>
<dd class="repo-latest-backup col-8"></dd> <dd class="repo-latest-backup col-8">
<div class="spinner-border" role="status">
</div>
</dd>
</dl> </dl>
<dl class="att-label row ps-3"> <dl class="att-label row ps-3">
<dt class="col-4">Size:</dt> <dt class="col-4">Size:</dt>
<dd class="repo-size col-8"></dd> <dd class="repo-size col-8">
<div class="spinner-border" role="status">
</div>
</dd>
</dl> </dl>
<dl class="att-label row ps-3"> <dl class="att-label row ps-3">
<dt class="col-4">Recent errors:</dt> <dt class="col-4">Recent errors:</dt>
<dd class="repo-recent-errors col-8"></dd> <dd class="repo-recent-errors col-8">
<div class="spinner-border" role="status">
</div>
</dd>
</dl> </dl>
<canvas id="repo-{{ repo.label }}-size-graph" width="400" height="200"></canvas> <canvas id="repo-{{ repo.label }}-size-graph" width="400" height="200"></canvas>
</dl> </dl>
</div> </div>
{% endfor %} {% endfor %}
{# <div style="width: 600px;" class="repo-container shadow rounded bg-info overflow-hidden">#}
{# <canvas id="daily_backup_size" width="400" height="200"></canvas>#}
{# </div>#}
{# <div style="width: 600px;" class="repo-container shadow rounded bg-info overflow-hidden">#}
{# <canvas id="monthly_backup_size" width="400" height="200"></canvas>#}
{# </div>#}
{% else %} {% else %}
<div style="width: 600px;" class="repo-container shadow rounded bg-primary overflow-hidden"> <div style="width: 600px;" class="repo-container shadow rounded bg-primary overflow-hidden">
<div style="width: 600px;" class="repo-container bg-primary overflow-hidden"> <div style="width: 600px;" class="repo-container bg-primary overflow-hidden">
@ -65,18 +69,5 @@
</div> </div>
{% endif %} {% endif %}
</div> </div>
{#<div id="repo-container" class="grid mx-auto d-flex justify-content-center flex-wrap">#}
{# <div style="width: 600px;" class="repo-container shadow rounded bg-info overflow-hidden">#}
{# <canvas id="daily_backup_size" width="400" height="200"></canvas>#}
{# </div>#}
{# <div style="width: 600px;" class="repo-container shadow rounded bg-info overflow-hidden">#}
{# <canvas id="monthly_backup_size" width="400" height="200"></canvas>#}
{# </div>#}
{# <div style="width: 600px;" class="repo-container shadow rounded bg-primary overflow-hidden">#}
{# <div style="width: 600px;" class="repo-container bg-primary overflow-hidden">#}
{# <h2 class="h2">No repositories found</h2>#}
{# </div>#}
{# </div>#}
{#</div>#}
{% endblock %} {% endblock %}