You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
134 lines
3.9 KiB
HTML
134 lines
3.9 KiB
HTML
{% extends base_template %}
|
|
{% load static %}
|
|
|
|
{% block content %}
|
|
|
|
{% block filter %}
|
|
{% endblock filter %}
|
|
|
|
<table id="objectTable" class="table" data-selection-mode=
|
|
{% block selection %}
|
|
"single"
|
|
{% endblock selection%}>
|
|
<thead>
|
|
<tr>
|
|
{% block table_header %}
|
|
{% endblock table_header %}
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for object in objects %}
|
|
<tr class="selectable-row" data-id="{{ object.id }}">
|
|
<td style="display: none;"><input type="checkbox" name="object_select" value="{{ object.id }}"></td>
|
|
{% block table_data %}
|
|
{% endblock table_data %}
|
|
</tr>
|
|
{% empty %}
|
|
<tr>
|
|
<td colspan="100%">No data to display</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
<tfoot>
|
|
<tr>
|
|
<td id="footerCell">
|
|
<div class="footer-container">
|
|
<div class="footer-left">
|
|
{% block buttons %}
|
|
{% endblock buttons %}
|
|
<button id="toggleSelectAllBtn" class="btn btn-secondary" style="display: none;">Select All</button>
|
|
</div>
|
|
<div class="footer-right">
|
|
{% if page_obj.has_previous %}
|
|
<a href="?page=1">« first</a>
|
|
<a href="?page={{ page_obj.previous_page_number }}">previous</a>
|
|
{% endif %}
|
|
<span class="page-number">Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}.</span>
|
|
{% if page_obj.has_next %}
|
|
<a href="?page={{ page_obj.next_page_number }}">next</a>
|
|
<a href="?page={{ page_obj.paginator.num_pages }}">last »</a>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tfoot>
|
|
|
|
</table>
|
|
<script>
|
|
const table = document.getElementById('objectTable');
|
|
const headerCells = table.querySelector('thead tr').children.length;
|
|
const footerCell = document.getElementById('footerCell');
|
|
footerCell.colSpan = headerCells;
|
|
{#footerCell.style.textAlign = 'center';#}
|
|
</script>
|
|
|
|
|
|
{% block custom_styles %}
|
|
<style>
|
|
.selectable-row {
|
|
cursor: pointer;
|
|
}
|
|
.selected-row {
|
|
background-color: #e6f3ff;
|
|
}
|
|
.btn[disabled] {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
</style>
|
|
{% endblock custom_styles %}
|
|
|
|
{% block crud_js %}
|
|
<script src="{% static 'js/crud-list.js' %}"></script>
|
|
{% endblock crud_js %}
|
|
|
|
|
|
<div id="deleteModal" class="modal" style="display: none;">
|
|
<div class="modal-content">
|
|
<h3>Confirm Delete</h3>
|
|
<p>Are you sure you want to delete this item?</p>
|
|
<div class="modal-buttons">
|
|
<button class="btn btn-secondary" id="cancelDelete">Cancel</button>
|
|
<button class="btn btn-danger" id="confirmDelete">Delete</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% block modal_styles %}
|
|
<style>
|
|
.modal {
|
|
display: none;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
z-index: 1000;
|
|
}
|
|
|
|
.modal-content {
|
|
position: relative;
|
|
background-color: #EDDECB;
|
|
margin: 15% auto;
|
|
padding: 20px;
|
|
border: 1px solid #a57d52;
|
|
border-radius: 8px;
|
|
width: 80%;
|
|
max-width: 500px;
|
|
}
|
|
|
|
.modal-buttons {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 10px;
|
|
margin-top: 20px;
|
|
}
|
|
</style>
|
|
{% endblock modal_styles %}
|
|
|
|
{% endblock content %}
|
|
|
|
|