Load repo containers before javascript

This commit is contained in:
George Lacey 2022-04-08 10:07:29 +01:00
parent bbcc71ad3d
commit c0cd3b0cc3
3 changed files with 69 additions and 27 deletions

View File

@ -1,11 +1,11 @@
function inflateRepo(repo_json, label, template_id, container_id) {
const template_copy = $(template_id).clone();
$(template_copy).find(".repo-label").html(label);
$(template_copy).find(".repo-location").html(repo_json.location);
$(template_copy).find(".repo-latest-backup").html(repo_json.latest_backup);
$(template_copy).find(".repo-size").html(repo_json.size);
$(template_copy).find(".repo-recent-errors").html(repo_json.recent_errors);
$(template_copy).find(".repo-size-graph").prop("id", `repo-${label}-size-graph`);
const repoLabel = `#repo-${label}`
$(container_id).find(repoLabel).find(".repo-latest-backup").html(repo_json.latest_backup);
$(container_id).find(repoLabel).find(".repo-size").html(repo_json.size);
$(container_id).find(repoLabel).find(".repo-recent-errors").html(repo_json.recent_errors);
$(container_id).find(repoLabel).removeClass("bg-primary");
let bg_class = "bg-primary";
if (repo_json.error) {
@ -13,9 +13,7 @@ function inflateRepo(repo_json, label, template_id, container_id) {
} else if (repo_json.warning) {
bg_class = "bg-warning";
}
$(template_copy).addClass(bg_class);
$(container_id).append(template_copy);
$(container_id).find(repoLabel).addClass(bg_class);
}

View File

@ -26,18 +26,57 @@
{% endblock %}
{% block body %}
<div id="repo-container" class="grid mx-auto d-flex justify-content-center flex-wrap">
{% if repo_list %}
<div id="repo-container" class="grid mx-auto d-flex justify-content-center flex-wrap">
{% for repo in repo_list %}
<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">
<h2 class="h2"><span class="repo-label">{{ repo.label }}</span>
<small class="repo-location text-muted">{{ repo.location }}</small>
</h2>
</div>
<dl class="att-label row ps-3">
<dt class="col-4">Latest backup:</dt>
<dd class="repo-latest-backup col-8"></dd>
</dl>
<dl class="att-label row ps-3">
<dt class="col-4">Size:</dt>
<dd class="repo-size col-8"></dd>
</dl>
<dl class="att-label row ps-3">
<dt class="col-4">Recent errors:</dt>
<dd class="repo-recent-errors col-8"></dd>
</dl>
<canvas id="repo-{{ repo.label }}-size-graph" width="400" height="200"></canvas>
</dl>
</div>
{% 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>#}
{# <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>#}
{% else %}
<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>
{% endif %}
</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 %}

View File

@ -3,7 +3,12 @@ from ..models import Repo
def index(request):
return render(request, 'borg/index.html', {})
repo_list = Repo.objects.all()
context = {
'repo_list': repo_list,
}
return render(request, 'borg/index.html', context)
def repo(request, repo_label: str):