buttons in table footer
This commit is contained in:
+80
-137
@@ -1,157 +1,100 @@
|
||||
{% extends 'employee-base.html' %}
|
||||
{% extends base_template %}
|
||||
{% load static %}
|
||||
|
||||
{% block content %}
|
||||
<table id="preinfoTable" class="table">
|
||||
<tr>
|
||||
<th style="display: none;">Select</th>
|
||||
<th>Preinfo №</th>
|
||||
<th>Container №</th>
|
||||
<th>Container type</th>
|
||||
<th>Line</th>
|
||||
<th>Created on</th>
|
||||
<th>Created by</th>
|
||||
</tr>
|
||||
{# <div class="pagination">#}
|
||||
{# <span class="step-links">#}
|
||||
{# {% if page_obj.has_previous %}#}
|
||||
{# <a href="?page=1">« first</a>#}
|
||||
{# <a href="?page={{ page_obj.previous_page_number }}">previous</a>#}
|
||||
{# {% endif %}#}
|
||||
{##}
|
||||
{# <span class="current">#}
|
||||
{# 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 %}#}
|
||||
{# </span>#}
|
||||
{# </div>#}
|
||||
<table id="objectTable" class="table">
|
||||
<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="radio" name="object_select" value="{{ object.id }}"></td>
|
||||
{% block table_data %}
|
||||
{% endblock table_data %}
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td id="footerCell">
|
||||
<div class="footer-container">
|
||||
<div class="footer-left">
|
||||
{% block buttons %}
|
||||
{% endblock buttons %}
|
||||
{# <button>Добави</button>#}
|
||||
{# <button>Изтрий</button>#}
|
||||
{# <button>Редактирай</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 %}
|
||||
{# <button>« Назад</button>#}
|
||||
<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 %}
|
||||
{# <button>Напред »</button>#}
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
|
||||
{% for preinfo in preinfos %}
|
||||
<tr class="selectable-row" data-preinfo-id="{{ preinfo.id }}">
|
||||
<td style="display: none;"><input type="radio" name="preinfo_select" value="{{ preinfo.id }}"></td>
|
||||
<td>{{ preinfo.id }}</td>
|
||||
<td>{{ preinfo.container_number }}</td>
|
||||
<td>{{ preinfo.container_type }}</td>
|
||||
<td>{{ preinfo.line.short_name }}</td>
|
||||
<td>{{ preinfo.created_on }}</td>
|
||||
<td>{{ preinfo.created_by.username }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</table>
|
||||
</table>
|
||||
|
||||
<div class="buttons-container">
|
||||
<button id="editBtn" class="btn" disabled>Edit</button>
|
||||
<button id="deleteBtn" class="btn" disabled>Delete</button>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
<!-- Modal -->
|
||||
<div id="editModal" class="modal" style="display: none;">
|
||||
<div class="modal-content">
|
||||
<span class="close">×</span>
|
||||
<h2>Edit Preinfo</h2>
|
||||
<form method="post">
|
||||
{% csrf_token %}
|
||||
<input type="hidden" name="preinfo_id" id="preinfoIdInput">
|
||||
{{ form.as_p }}
|
||||
<button type="submit">Save</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
{# <div class="buttons-container">#}
|
||||
{# {% block buttons %}#}
|
||||
{# {% endblock buttons %}#}
|
||||
{# </div>#}
|
||||
|
||||
{% block custom_styles %}
|
||||
<style>
|
||||
.selectable-row {
|
||||
cursor: pointer;
|
||||
}
|
||||
.selected-row {
|
||||
background-color: #e6f3ff;
|
||||
}
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0,0,0,0.4);
|
||||
}
|
||||
.modal-content {
|
||||
background-color: #fefefe;
|
||||
margin: 15% auto;
|
||||
padding: 20px;
|
||||
border: 1px solid #888;
|
||||
width: 80%;
|
||||
max-width: 500px;
|
||||
}
|
||||
.close {
|
||||
float: right;
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn[disabled] {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const editBtn = document.getElementById('editBtn');
|
||||
const deleteBtn = document.getElementById('deleteBtn');
|
||||
const modal = document.getElementById('editModal');
|
||||
const closeBtn = document.querySelector('.close');
|
||||
const preinfoIdInput = document.getElementById('preinfoIdInput');
|
||||
const rows = document.querySelectorAll('.selectable-row');
|
||||
|
||||
rows.forEach(row => {
|
||||
row.addEventListener('click', function() {
|
||||
// Remove previous selection
|
||||
document.querySelector('.selected-row')?.classList.remove('selected-row');
|
||||
|
||||
// Select current row
|
||||
this.classList.add('selected-row');
|
||||
|
||||
// Check the hidden radio button
|
||||
const radio = this.querySelector('input[type="radio"]');
|
||||
radio.checked = true;
|
||||
|
||||
// Enable buttons
|
||||
editBtn.disabled = false;
|
||||
deleteBtn.disabled = false;
|
||||
});
|
||||
});
|
||||
|
||||
// Enable/disable buttons based on selection
|
||||
document.querySelectorAll('input[name="preinfo_select"]').forEach(radio => {
|
||||
radio.addEventListener('change', function() {
|
||||
console.log('Radio button changed:', this.value); // Debug log
|
||||
editBtn.disabled = false;
|
||||
deleteBtn.disabled = false;
|
||||
});
|
||||
});
|
||||
|
||||
// Edit button click
|
||||
editBtn.addEventListener('click', function() {
|
||||
const selectedId = document.querySelector('input[name="preinfo_select"]:checked').value;
|
||||
preinfoIdInput.value = selectedId;
|
||||
|
||||
// Fetch preinfo data via AJAX
|
||||
const formData = new FormData();
|
||||
formData.append('preinfo_id', selectedId);
|
||||
|
||||
fetch('', {
|
||||
method: 'POST',
|
||||
body: formData,
|
||||
headers: {
|
||||
'X-Requested-With': 'XMLHttpRequest',
|
||||
'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
|
||||
}
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
document.getElementById('id_container_number').value = data.container_number;
|
||||
document.getElementById('id_container_type').value = data.container_type;
|
||||
document.getElementById('id_line').value = data.line;
|
||||
modal.style.display = 'block';
|
||||
});
|
||||
});
|
||||
|
||||
// Close modal
|
||||
closeBtn.addEventListener('click', function() {
|
||||
modal.style.display = 'none';
|
||||
});
|
||||
|
||||
// Close modal when clicking outside
|
||||
window.addEventListener('click', function(event) {
|
||||
if (event.target == modal) {
|
||||
modal.style.display = 'none';
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% endblock custom_styles %}
|
||||
{% block extra_js %}
|
||||
<script src="{% static 'js/crud-list.js' %}"></script>
|
||||
{% endblock extra_js %}
|
||||
{% block custom_js %}{% endblock custom_js %}
|
||||
{% endblock content %}
|
||||
Reference in New Issue
Block a user