doorcontrol: Improve styling on report pages
This commit is contained in:
parent
1d9102d372
commit
05037b74fc
@ -2,90 +2,82 @@
|
|||||||
|
|
||||||
{% block title %}{{ selected_report }} | Door Controls | CMS{% endblock %}
|
{% block title %}{{ selected_report }} | Door Controls | CMS{% endblock %}
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<ul class="nav nav-tabs">
|
<div class="d-flex flex-column align-items-center">
|
||||||
{% for report_name, report_url in report_types %}
|
<ul class="nav nav-tabs">
|
||||||
<li class="nav-item">
|
{% for report_name, report_url in report_types %}
|
||||||
<a class="nav-link{% if report_name == selected_report %} active{% endif %}"
|
<li class="nav-item">
|
||||||
href="{{ report_url }}?{{ query_params }}">{{ report_name }}</a>
|
<a class="nav-link{% if report_name == selected_report %} active{% endif %}"
|
||||||
</li>
|
href="{{ report_url }}?{{ query_params }}">{{ report_name }}</a>
|
||||||
{% endfor %}
|
|
||||||
</ul>
|
|
||||||
<form method="get" class="form-floating">
|
|
||||||
<div class="row align-items-center row-cols-md-auto g-2 mb-2 mt-2">
|
|
||||||
<div class="col-12">
|
|
||||||
<div class="form-floating">
|
|
||||||
<input type="date"
|
|
||||||
class="form-control"
|
|
||||||
id="startDate"
|
|
||||||
name="timestamp__gte"
|
|
||||||
value="{{ timestamp__gte|date:'Y-m-d' }}">
|
|
||||||
<label for="startDate">Start Date</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-12">
|
|
||||||
<div class="form-floating">
|
|
||||||
<input type="date"
|
|
||||||
class="form-control"
|
|
||||||
id="endDate"
|
|
||||||
name="timestamp__lte"
|
|
||||||
value="{{ timestamp__lte|date:'Y-m-d' }}">
|
|
||||||
<label for="endDate">End Date</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-12 col-md-2">
|
|
||||||
<div class="form-floating">
|
|
||||||
<input type="number"
|
|
||||||
class="form-control"
|
|
||||||
id="itemsPerPage"
|
|
||||||
name="items_per_page"
|
|
||||||
value="{{ items_per_page }}"
|
|
||||||
min="10"
|
|
||||||
max="200"
|
|
||||||
step="10"
|
|
||||||
required>
|
|
||||||
<label for="itemsPerPage">Items Per Page</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-12">
|
|
||||||
<button type="submit" class="btn btn-primary">Submit</button>
|
|
||||||
<a href="?" class="btn btn-warning">Reset</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
<table class="table table-bordered table-striped table-hover mb-2">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
{% for column in object_list.0.keys %}<th>{{ column|title }}</th>{% endfor %}
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
{% for object in object_list %}
|
|
||||||
<tr>
|
|
||||||
{% for field in object.values %}<td>{{ field }}</td>{% endfor %}
|
|
||||||
</tr>
|
|
||||||
{% endfor %}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
<nav aria-label="Page navigation">
|
|
||||||
<div class="text-center mb-2">Showing {{ page_obj.object_list|length }} of {{ paginator.count }} results.</div>
|
|
||||||
<ul class="pagination justify-content-center">
|
|
||||||
{% if page_obj.has_previous %}
|
|
||||||
<li class="page-item">
|
|
||||||
<a class="page-link"
|
|
||||||
href="?{{ query_params }}&page={{ page_obj.previous_page_number }}">Previous</a>
|
|
||||||
</li>
|
|
||||||
{% endif %}
|
|
||||||
{% for page_num in paginator_range %}
|
|
||||||
<li class="page-item {% if page_num == page_obj.number %} active {% elif page_num == paginator.ELLIPSIS %} disabled {% endif %}">
|
|
||||||
<a class="page-link" href="?{{ query_params }}&page={{ page_num }}">{{ page_num }}</a>
|
|
||||||
</li>
|
</li>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
{% if page_obj.has_next %}
|
|
||||||
<li class="page-item">
|
|
||||||
<a class="page-link"
|
|
||||||
href="?{{ query_params }}&page={{ page_obj.next_page_number }}">Next</a>
|
|
||||||
</li>
|
|
||||||
{% endif %}
|
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
<form method="get" class="form-floating m-2 d-flex align-items-center">
|
||||||
|
<div class="form-floating mx-2">
|
||||||
|
<input type="date"
|
||||||
|
class="form-control"
|
||||||
|
id="startDate"
|
||||||
|
name="timestamp__gte"
|
||||||
|
value="{{ timestamp__gte|date:'Y-m-d' }}">
|
||||||
|
<label for="startDate">Start Date</label>
|
||||||
|
</div>
|
||||||
|
<div class="form-floating mx-2">
|
||||||
|
<input type="date"
|
||||||
|
class="form-control"
|
||||||
|
id="endDate"
|
||||||
|
name="timestamp__lte"
|
||||||
|
value="{{ timestamp__lte|date:'Y-m-d' }}">
|
||||||
|
<label for="endDate">End Date</label>
|
||||||
|
</div>
|
||||||
|
<div class="form-floating mx-1">
|
||||||
|
<input type="number"
|
||||||
|
class="form-control"
|
||||||
|
id="itemsPerPage"
|
||||||
|
name="items_per_page"
|
||||||
|
value="{{ items_per_page }}"
|
||||||
|
min="10"
|
||||||
|
max="200"
|
||||||
|
step="10"
|
||||||
|
required>
|
||||||
|
<label for="itemsPerPage">Items Per Page</label>
|
||||||
|
</div>
|
||||||
|
<button type="submit" class="btn btn-primary mx-2">Submit</button>
|
||||||
|
<a href="?" class="btn btn-warning mx-1">Reset</a>
|
||||||
|
</form>
|
||||||
|
<table class="table table-striped table-hover mb-2 w-auto">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
{% for column in object_list.0.keys %}<th>{{ column|title }}</th>{% endfor %}
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{% for object in object_list %}
|
||||||
|
<tr>
|
||||||
|
{% for field in object.values %}<td>{{ field }}</td>{% endfor %}
|
||||||
|
</tr>
|
||||||
|
{% endfor %}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
<nav aria-label="Page navigation">
|
||||||
|
<div class="text-center mb-2">Showing {{ page_obj.object_list|length }} of {{ paginator.count }} results.</div>
|
||||||
|
<ul class="pagination justify-content-center">
|
||||||
|
{% if page_obj.has_previous %}
|
||||||
|
<li class="page-item">
|
||||||
|
<a class="page-link"
|
||||||
|
href="?{{ query_params }}&page={{ page_obj.previous_page_number }}">Previous</a>
|
||||||
|
</li>
|
||||||
|
{% endif %}
|
||||||
|
{% for page_num in paginator_range %}
|
||||||
|
<li class="page-item {% if page_num == page_obj.number %} active {% elif page_num == paginator.ELLIPSIS %} disabled {% endif %}">
|
||||||
|
<a class="page-link" href="?{{ query_params }}&page={{ page_num }}">{{ page_num }}</a>
|
||||||
|
</li>
|
||||||
|
{% endfor %}
|
||||||
|
{% if page_obj.has_next %}
|
||||||
|
<li class="page-item">
|
||||||
|
<a class="page-link"
|
||||||
|
href="?{{ query_params }}&page={{ page_obj.next_page_number }}">Next</a>
|
||||||
|
</li>
|
||||||
|
{% endif %}
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user