A little refactoring for crud template and project structure
This commit is contained in:
@@ -0,0 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>$Title$</title>
|
||||
</head>
|
||||
<body>
|
||||
$END$
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,25 @@
|
||||
{% extends 'list-crud.html' %}
|
||||
{% load static %}
|
||||
|
||||
{% block table_header %}
|
||||
<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>
|
||||
{% endblock table_header %}
|
||||
|
||||
{% block table_data %}
|
||||
<td>{{ object.id }}</td>
|
||||
<td>{{ object.container_number }}</td>
|
||||
<td>{{ object.container_type }}</td>
|
||||
<td>{{ object.line.short_name }}</td>
|
||||
<td>{{ object.created_on }}</td>
|
||||
<td>{{ object.created_by.username }}</td>
|
||||
{% endblock %}
|
||||
|
||||
{% block modal_header %}
|
||||
<h2>Edit Preinfo</h2>
|
||||
{% endblock modal_header %}
|
||||
@@ -0,0 +1,157 @@
|
||||
{% extends 'employee-base.html' %}
|
||||
{% 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>
|
||||
|
||||
{% 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>
|
||||
|
||||
<div class="buttons-container">
|
||||
<button id="editBtn" class="btn" disabled>Edit</button>
|
||||
<button id="deleteBtn" class="btn" disabled>Delete</button>
|
||||
</div>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<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 content %}
|
||||
Reference in New Issue
Block a user