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

Create base template with navbar

Browse Source
This commit is contained in:
George Lacey 2021-05-10 18:54:47 +01:00
parent f067aa1a1c
commit df3d51e6ec
2 changed files with 82 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
borgweb/borg/templates/borg/base.html Normal file
View File

@ -0,0 +1,54 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
{% load static %}
{% load compress %}
{% compress css %}
<link type="text/x-scss" href="{% static 'theme.scss' %}" rel="stylesheet" media="screen">
{% endcompress %}
{% block script %}{% endblock %}
<style>{% block style %}{% endblock %}</style>
<title>{% block title %}Title{% endblock %}</title>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-secondary mb-2">
<div class="container-fluid">
<a class="navbar-brand" href="/">Home</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="/archives">Archives</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/errors">Errors</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
{% block body %}{% endblock %}
</body>
</html>

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

@ -1,61 +1,55 @@
<!DOCTYPE html> {% extends "borg/base.html" %}
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Borg Summary</title>
{% load static %} {% load static %}
{% load compress %}
{% compress css %}
<link type="text/x-scss" href="{% static 'theme.scss' %}" rel="stylesheet" media="screen">
{% endcompress %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<link rel="stylesheet" type="text/css" href="{% static 'css/index.css' %}"> {% block title %}Borg Summary{% endblock %}
{% block script %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
{{ hour_list|json_script:"hour_list" }} {{ hour_list|json_script:"hour_list" }}
<script src="{% static 'js/index.js' %}"></script> <script src="{% static 'js/index.js' %}"></script>
<style> {% endblock %}
div {
{% block style %}
.repo-container {
padding: 8px; padding: 8px;
margin: 4px; margin: 8px;
} }
dl { .att-label {
margin-top: 4px; margin-top: 4px;
margin-bottom: 4px; margin-bottom: 4px;
} }
</style> {% endblock %}
</head>
<body> {% block body %}
{% if repo_list %} {% if repo_list %}
<div class="grid mx-auto d-flex justify-content-center flex-wrap"> <div 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;" class="shadow rounded bg-primary overflow-hidden <div style="width: 600px;" class="repo-container shadow rounded bg-primary overflow-hidden
{% if not repo.archive_after_latest_error %}bg-danger{% endif %}"> {% if not repo.archive_after_latest_error %}bg-danger{% endif %}">
<div class="row me-1 overflow-hidden text-truncate"> <div class="row me-1 overflow-hidden text-truncate">
<h2 class="h2">{{ repo.label }} <h2 class="h2">{{ repo.label }}
<small class="text-muted"> {{ repo.location }}</small> <small class="text-muted"> {{ repo.location }}</small>
</h2> </h2>
</div> </div>
<dl class="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="col-8">{{ repo.last_backup }}</dd> <dd class="col-8">{{ repo.last_backup }}</dd>
</dl> </dl>
<dl class="row ps-3"> <dl class="att-label row ps-3">
<dt class="col-4">Hourly backups:</dt> <dt class="col-4">Hourly backups:</dt>
<dd class="col-8 text-truncate">{{ repo.hourly_archive_string }}</dd> <dd class="col-8 text-truncate">{{ repo.hourly_archive_string }}</dd>
</dl> </dl>
<dl class="row ps-3"> <dl class="att-label row ps-3">
<dt class="col-4">Size:</dt> <dt class="col-4">Size:</dt>
<dd class="col-8">{{ repo.size_string }}</dd> <dd class="col-8">{{ repo.size_string }}</dd>
</dl> </dl>
{% if repo.recent_errors|length > 0 %} {% if repo.recent_errors|length > 0 %}
<dl class="row"> <dl class="att-label row">
<dt class="col-12 h4">Recent errors:</dt> <dt class="col-12 h4">Recent errors:</dt>
</dl> </dl>
{% endif %} {% endif %}
<dl class="row ps-3"> <dl class="att-label row ps-3">
{% for error in repo.recent_errors %} {% for error in repo.recent_errors %}
<dt class="col-4">{{ error.time_ago }}</dt> <dt class="col-4">{{ error.time_ago }}</dt>
<dd class="col-8 text-truncate">{{ error.error }}</dd> <dd class="col-8 text-truncate">{{ error.error }}</dd>
@ -63,13 +57,12 @@
</dl> </dl>
</div> </div>
{% endfor %} {% endfor %}
<div style="width: 600px;" class="shadow rounded bg-primary overflow-hidden"> <div style="width: 600px;" class="repo-container shadow rounded bg-primary overflow-hidden">
<canvas id="backup_csize_hourly" width="400" height="200"></canvas> <canvas id="backup_csize_hourly" width="400" height="200"></canvas>
</div> </div>
{% else %} {% else %}
<p>No repos found.</p> <p>No repos found.</p>
{% endif %} {% endif %}
</div> </div>
</div> {% endblock %}
</body>
</html>