CMS/cmsmanage
2
0
Fork 0
Code Issues 8 Pull Requests 3 Actions Projects 1 Releases Activity

doorcontrol: Improve responsiveness of form controls and table in reports

Browse Source
This commit is contained in:
Adam Goldsmith 2023-12-06 21:34:25 -05:00
parent e03b9e3c70
commit 017aea4b3e
1 changed files with 57 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
doorcontrol/templates/doorcontrol/access_report.dj.html
View File

@ -2,7 +2,7 @@
{% block title %}{{ selected_report }} | Door Controls | CMS{% endblock %} {% block title %}{{ selected_report }} | Door Controls | CMS{% endblock %}
{% block content %} {% block content %}
<div class="d-flex flex-column align-items-center"> <div class="vstack align-items-center">
<ul class="nav nav-tabs"> <ul class="nav nav-tabs">
{% for report_name, report_url in report_types %} {% for report_name, report_url in report_types %}
<li class="nav-item"> <li class="nav-item">
@ -11,52 +11,66 @@
</li> </li>
{% endfor %} {% endfor %}
</ul> </ul>
<form method="get" class="form-floating m-2 d-flex align-items-center"> <form method="get" class="container">
<div class="form-floating mx-2"> <div class="row align-items-center">
<input type="date" <div class="col gy-1">
class="form-control" <div class="form-floating">
id="startDate" <input type="date"
name="timestamp__gte" class="form-control"
value="{{ timestamp__gte|date:'Y-m-d' }}"> id="startDate"
<label for="startDate">Start Date</label> name="timestamp__gte"
value="{{ timestamp__gte|date:'Y-m-d' }}">
<label for="startDate">Start Date</label>
</div>
</div>
<div class="col gy-1">
<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-md gy-1">
<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-6 col-md-auto gy-1">
<button type="submit" class="btn btn-primary w-100">Submit</button>
</div>
<div class="col-6 col-md-auto gy-1">
<a href="?" class="btn btn-warning w-100">Reset</a>
</div>
</div> </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> </form>
<table class="table table-striped table-hover mb-2 w-auto"> <div class="table-responsive mw-100">
<thead> <table class="table table-striped table-hover mb-2 w-auto">
<tr> <thead>
{% for column in object_list.0.keys %}<th>{{ column|title }}</th>{% endfor %}
</tr>
</thead>
<tbody>
{% for object in object_list %}
<tr> <tr>
{% for field in object.values %}<td>{{ field }}</td>{% endfor %} {% for column in object_list.0.keys %}<th>{{ column|title }}</th>{% endfor %}
</tr> </tr>
{% endfor %} </thead>
</tbody> <tbody>
</table> {% for object in object_list %}
<tr>
{% for field in object.values %}<td>{{ field }}</td>{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
</div>
<nav aria-label="Page navigation"> <nav aria-label="Page navigation">
<div class="text-center mb-2">Showing {{ page_obj.object_list|length }} of {{ paginator.count }} results.</div> <div class="text-center mb-2">Showing {{ page_obj.object_list|length }} of {{ paginator.count }} results.</div>
<ul class="pagination justify-content-center"> <ul class="pagination justify-content-center">