device list now uses bootstrap

This commit is contained in:
Thomas Nahuel Rusiecki 2024-11-27 23:58:23 -03:00
parent 2a6396b185
commit 138848de5f

View file

@ -4,18 +4,18 @@
{% block content %}
<div class="row">
<div class="row mb-4">
<div class="col">
<h3>{{ subtitle }}</h3>
</div>
<div class="col text-center">
<div class="col d-flex justify-content-end align-items-center">
{% if lot %}
<a href="{% url 'lot:documents' object.id %}" type="button" class="btn btn-green-admin">
<a href="{% url 'lot:documents' object.id %}" type="button" class="btn btn-green-admin me-2">
<i class="bi bi-folder2"></i>
{% trans 'Documents' %}
</a>
{% endif %}
<a href="{# url 'dashboard:exports' object.id #}" type="button" class="btn btn-green-admin">
<a href="{# url 'dashboard:exports' object.id #}" type="button" class="btn btn-green-admin me-2">
<i class="bi bi-reply"></i>
{% trans 'Exports' %}
</a>
@ -28,59 +28,78 @@
</div>
</div>
<div class="dataTable-container">
<div class="dataTable-container mt-4">
<form method="post">
{% csrf_token %}
<table class="table">
<thead>
<tr>
<th scope="col" data-sortable="">
{%trans "select"%}
</th>
<th scope="col" data-sortable="">
{%trans "shortid" %}
</th>
<th scope="col" data-sortable="">
{%trans "type" %}
</th>
<th scope="col" data-sortable="">
{%trans "manufacturer" %}
</th>
<th scope="col" data-sortable="">
{%trans "model" %}
</th>
</tr>
</thead>
{% for dev in devices %}
<tbody>
<tr>
<td>
<input type="checkbox" name="devices" value="{{ dev.id }}" />
</td>
<td>
<a href="{% url 'device:details' dev.id %}">
{{ dev.shortid }}
</a>
</td>
<td>
{% csrf_token %}
<table class="table table-hover table-bordered">
<thead class="table-light">
<tr>
<th scope="col" class="text-center">
<input type="checkbox" id="select-all" />
</th>
<th scope="col" class="text-center">
{% trans "Short ID" %}
</th>
<th scope="col" class="text-center">
{% trans "Type" %}
</th>
<th scope="col" class="text-center">
{% trans "Manufacturer" %}
</th>
<th scope="col" class="text-center">
{% trans "Model" %}
</th>
</tr>
</thead>
<tbody>
{% for dev in devices %}
<tr>
<td class="text-center">
<input type="checkbox" name="devices" value="{{ dev.id }}" />
</td>
<td class="text-center">
<a href="{% url 'device:details' dev.id %}">
{{ dev.shortid }}
</a>
</td>
<td class="text-center">
{{ dev.type }}
</td>
<td>
</td>
<td class="text-center">
{{ dev.manufacturer }}
</td>
<td>
</td>
<td class="text-center">
{{ dev.model }}
</td>
</tr>
</tbody>
{% endfor %}
</table>
<button class="btn btn-green-admin" type="submit" value="{% url 'lot:del_devices' %}" name="url">{% trans 'Remove' %}</button> <button class="btn btn-green-admin" type="submit" name="url" value="{% url 'lot:add_devices' %}">{% trans 'Add'%}</button>
</td>
</tr>
{% endfor %}
</tbody>
</table>
<div class="d-flex justify-content-start mt-5">
<button id="remove-button" class="btn btn-danger me-2" type="submit" value="{% url 'lot:del_devices' %}" name="url" disabled>
<i class="bi bi-trash"></i> {% trans 'Remove' %}
</button>
<button class="btn btn-success" type="submit" name="url" value="{% url 'lot:add_devices' %}">
{% trans 'Add' %}
</button>
</div>
</form>
</div>
<div class="row mt-3">
<div class="col">
{% render_pagination page total_pages limit %}
</div>
</div>
<script>
// Placeholder check-all js
document.getElementById('select-all').onclick = function() {
var checkboxes = document.querySelectorAll('input[type="checkbox"]');
for (var checkbox of checkboxes) {
checkbox.checked = this.checked;
}
}
</script>
{% endblock %}