base_list.html
99 lines
| 3.0 KiB
| text/html
|
HtmlDjangoLexer
|
r138 | {% extends "base.html" %} | ||
r338 | {% load bootstrap4 %} | |||
|
r138 | {% load static %} | ||
{% load main_tags %} | ||||
{% block extra-head %} | ||||
<link href="{% static 'css/bootstrap-datetimepicker.min.css' %}" media="screen" rel="stylesheet"> | ||||
{% endblock %} | ||||
{% block content-title %}{{title}}{% endblock %} | ||||
{% block content-suptitle %}{{suptitle}}{% endblock %} | ||||
{% block content %} | ||||
{% block content-filter %} | ||||
{% if form %} | ||||
<form class="form" method="get"> | ||||
{% bootstrap_form form layout='horizontal' size='medium' %} | ||||
<div class="pull-right"> | ||||
|
r316 | <br> | ||
r338 | <button type="button" class="btn btn-primary btn-sm" onclick="window.location.replace('?');"><span class="fas fa-sync-alt" aria-hidden="true"></span></button> | |||
<button type="submit" class="btn btn-primary btn-sm"><span class="fas fa-search" aria-hidden="true"></span></button> | ||||
|
r316 | {% if add_url %} | ||
r338 | <a class="btn btn-sm btn-info" href="{{add_url}}"><span class="fas fa-plus" aria-hidden="true"></span></a> | |||
|
r316 | {% endif %} | ||
</div> | ||||
|
r196 | </form> | ||
|
r138 | {% endif %} | ||
{% endblock %} | ||||
|
r196 | <div style="clear: both;"></div> | ||
<br> | ||||
|
r138 | <table class="table table-hover"> | ||
<tr> | ||||
<th>#</th> | ||||
{% for key in keys %} | ||||
|
r320 | {% if key == 'location'%} | ||
<th>System</th> | ||||
{% else %} | ||||
|
r138 | <th>{{ key|title }}</th> | ||
|
r320 | {% endif %} | ||
|
r138 | {% endfor%} | ||
</tr> | ||||
{% for object in objects %} | ||||
<tr class="clickable-row" data-href="{{object.get_absolute_url}}"> | ||||
<td>{{ forloop.counter|add:offset }}</td> | ||||
{% for key in keys %} | ||||
|
r316 | {% if key == 'actions' %} | ||
<td> | ||||
r338 | <a class="btn btn-sm btn-danger" href="{{object.get_absolute_url_delete}}"><span class="fas fa-times" aria-hidden="true"></span></a> | |||
<a class="btn btn-sm btn-primary" href="{{object.get_absolute_url_edit}}"><span class="fa fa-pencil" aria-hidden="true"></span></a> | ||||
|
r316 | </td> | ||
{% else %} | ||||
|
r138 | <td>{{ object|attr:key }}</td> | ||
|
r316 | {% endif %} | ||
|
r138 | {% endfor %} | ||
</tr> | ||||
{% endfor %} | ||||
</table> | ||||
<div class="pagination"> | ||||
<span class="step-links"> | ||||
{% if objects.has_previous %} | ||||
r338 | <a href="?page={{ objects.previous_page_number }}&{{q}}"><span class="fas fa-chevron-left" aria-hidden="true"></span></a> | |||
|
r138 | {% endif %} | ||
<span class="current"> | ||||
Page {{ objects.number }} of {{ objects.paginator.num_pages }}. | ||||
</span> | ||||
{% if objects.has_next %} | ||||
r338 | <a href="?page={{ objects.next_page_number }}&{{q}}"><span class="fas fa-chevron-right" aria-hidden="true"></span></a> | |||
|
r138 | {% endif %} | ||
</span> | ||||
</div> | ||||
{% endblock %} | ||||
{% block extra-js%} | ||||
<script src="{% static 'js/bootstrap-datetimepicker.min.js' %}"></script> | ||||
<script type="text/javascript"> | ||||
r338 | $('.input-group.date').datetimepicker({ | |||
format: "YYYY-MM-DD", | ||||
icons: { | ||||
time: 'far fa-clock', | ||||
date: 'far fa-calendar-alt', | ||||
up: 'fas fa-arrow-up', | ||||
down: 'fas fa-arrow-down', | ||||
previous: 'fas fa-chevron-left', | ||||
next: 'fas fa-chevron-right', | ||||
today: 'far fa-calendar-check', | ||||
clear: 'far fa-trash-alt', | ||||
close: 'fas fa-times' | ||||
} | ||||
}); | ||||
|
r138 | $(".clickable-row").click(function() { | ||
document.location = $(this).data("href"); | ||||
}); | ||||
r338 | ||||
|
r138 | </script> | ||
{% endblock %} | ||||