493 lines
18 KiB
HTML
493 lines
18 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Helium Output</title>
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
margin: 0;
|
|
padding: 20px;
|
|
background-color: #f4f4f9;
|
|
}
|
|
.container {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 20px;
|
|
}
|
|
.table-container {
|
|
width: 48%;
|
|
background-color: white;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
}
|
|
h2 {
|
|
text-align: center;
|
|
color: #333;
|
|
}
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin-top: 20px;
|
|
}
|
|
th, td {
|
|
padding: 12px;
|
|
text-align: left;
|
|
border-bottom: 1px solid #ddd;
|
|
}
|
|
th {
|
|
background-color: #007bff;
|
|
color: white;
|
|
font-weight: bold;
|
|
}
|
|
tr:hover {
|
|
background-color: #f1f1f1;
|
|
}
|
|
.actions button {
|
|
margin: 2px;
|
|
padding: 5px 10px;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
}
|
|
.edit-btn-two {
|
|
background-color: #28a745;
|
|
color: white;
|
|
}
|
|
.delete-btn-two {
|
|
background-color: #dc3545;
|
|
color: white;
|
|
}
|
|
.popup {
|
|
display: none;
|
|
position: fixed;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
background: white;
|
|
padding: 20px;
|
|
border-radius: 5px;
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
|
|
z-index: 1000;
|
|
width: 400px;
|
|
}
|
|
.popup h3 {
|
|
margin-top: 0;
|
|
border-bottom: 1px solid #ddd;
|
|
padding-bottom: 10px;
|
|
}
|
|
.popup label {
|
|
display: block;
|
|
margin-bottom: 5px;
|
|
font-weight: bold;
|
|
}
|
|
.popup input, .popup select, .popup textarea {
|
|
display: block;
|
|
margin-bottom: 15px;
|
|
width: 100%;
|
|
padding: 8px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
box-sizing: border-box;
|
|
}
|
|
.popup textarea {
|
|
height: 100px;
|
|
resize: vertical;
|
|
}
|
|
.popup-buttons {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 10px;
|
|
margin-top: 20px;
|
|
}
|
|
.popup button {
|
|
padding: 8px 16px;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
}
|
|
.save-btn {
|
|
background-color: #28a745;
|
|
color: white;
|
|
}
|
|
.cancel-btn {
|
|
background-color: #6c757d;
|
|
color: white;
|
|
}
|
|
.help-btn {
|
|
background-color: #17a2b8;
|
|
color: white;
|
|
}
|
|
.close-btn {
|
|
cursor: pointer;
|
|
float: right;
|
|
font-size: 18px;
|
|
color: #333;
|
|
}
|
|
.add-row-btn {
|
|
padding: 10px 20px;
|
|
background-color: #007bff;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 16px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.add-row-btn:hover {
|
|
background-color: #0056b3;
|
|
}
|
|
.checkbox-container {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 15px;
|
|
}
|
|
.checkbox-container input[type="checkbox"] {
|
|
width: auto;
|
|
margin-right: 10px;
|
|
margin-bottom: 0;
|
|
}
|
|
.input-with-label {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 15px;
|
|
}
|
|
.input-with-label label {
|
|
width: 120px;
|
|
margin-bottom: 0;
|
|
margin-right: 10px;
|
|
}
|
|
.input-with-label input {
|
|
flex: 1;
|
|
margin-bottom: 0;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="d-flex justify-content-start mb-2">
|
|
<!-- "Go to Clients" button at top-left -->
|
|
<a href="{% url 'clients_list' %}" class="btn btn-outline-primary">
|
|
⇦ Go to Clients
|
|
</a>
|
|
</div>
|
|
|
|
<h2>LHe Dewar Output</h2>
|
|
|
|
<div class="table-container">
|
|
<button class="add-row-btn" id="add-row-two">Add Output</button>
|
|
<table id="table-two">
|
|
<thead>
|
|
<tr>
|
|
<th>#</th>
|
|
<th>ID</th>
|
|
<th>Client</th>
|
|
<th>Date</th>
|
|
<th>Warm</th>
|
|
<th>LHe Delivery</th>
|
|
<th>LHe Output</th>
|
|
<th>Notes</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for entry in entries_table2 %}
|
|
<tr data-id="{{ entry.id }}">
|
|
<td>{{ forloop.counter }}</td>
|
|
<td>{{ entry.id }}</td>
|
|
<td>{{ entry.client.name }}</td>
|
|
<td>{{ entry.date }}</td>
|
|
<td>{{ entry.is_warm|yesno:"Yes,No" }}</td>
|
|
<td>{{ entry.lhe_delivery }}</td>
|
|
<td>{{ entry.lhe_output }}</td>
|
|
<td>{{ entry.notes }}</td>
|
|
<td class="actions">
|
|
<button class="edit-btn-two">Edit</button>
|
|
<button class="delete-btn-two">Delete</button>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Add Entry Popup -->
|
|
<div id="add-popup-two" class="popup">
|
|
<span class="close-btn">×</span>
|
|
<h3>LHe Dewar Output</h3>
|
|
<label for="add-client-id">Client:</label>
|
|
<select id="add-client-id">
|
|
{% for client in clients %}
|
|
<option value="{{ client.id }}">{{ client.name }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
<label for="add-date">Date:</label>
|
|
<input type="date" id="add-date">
|
|
|
|
<div class="checkbox-container">
|
|
<input type="checkbox" id="add-is-warm">
|
|
<label for="add-is-warm">Warm</label>
|
|
</div>
|
|
|
|
<div class="input-with-label">
|
|
<label for="add-lhe-delivery">LHe Anlieferung:</label>
|
|
<input type="text" id="add-lhe-delivery" placeholder="Enter delivery amount">
|
|
</div>
|
|
|
|
<div class="input-with-label">
|
|
<label for="add-lhe-output">LHe Ausgabe:</label>
|
|
<input type="number" id="add-lhe-output" placeholder="Enter output amount (numbers only)" step="0.01" min="0" placeholder="Enter output amount">
|
|
</div>
|
|
|
|
<label for="add-notes">Notes:</label>
|
|
<textarea id="add-notes" placeholder="Additional notes"></textarea>
|
|
|
|
<div class="popup-buttons">
|
|
<button class="save-btn" id="save-add-two">Save</button>
|
|
<button class="cancel-btn" id="cancel-add-two">Cancel</button>
|
|
<button class="help-btn">Help</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Edit Entry Popup -->
|
|
<div id="edit-popup-two" class="popup">
|
|
<span class="close-btn">×</span>
|
|
<h3>LHe Dewar Output</h3>
|
|
<input type="hidden" id="edit-id">
|
|
<label for="edit-client-id">Client:</label>
|
|
<select id="edit-client-id">
|
|
{% for client in clients %}
|
|
<option value="{{ client.id }}">{{ client.name }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
<label for="edit-date">Date:</label>
|
|
<input type="date" id="edit-date">
|
|
|
|
<div class="checkbox-container">
|
|
<input type="checkbox" id="edit-is-warm">
|
|
<label for="edit-is-warm">Warm</label>
|
|
</div>
|
|
|
|
<div class="input-with-label">
|
|
<label for="edit-lhe-delivery">LHe Anlieferung:</label>
|
|
<input type="text" id="edit-lhe-delivery" placeholder="Enter delivery amount">
|
|
</div>
|
|
|
|
<div class="input-with-label">
|
|
<label for="edit-lhe-output">LHe Ausgabe:</label>
|
|
<input type="number" id="edit-lhe-output" placeholder="Enter output amount">
|
|
</div>
|
|
|
|
<label for="edit-notes">Notes:</label>
|
|
<textarea id="edit-notes" placeholder="Additional notes"></textarea>
|
|
|
|
<div class="popup-buttons">
|
|
<button class="save-btn" id="save-edit-two">Save</button>
|
|
<button class="cancel-btn" id="cancel-edit-two">Cancel</button>
|
|
<button class="help-btn">Help</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
$(document).ready(function () {
|
|
let currentTableId = null;
|
|
let currentModelName = null;
|
|
|
|
// Open Add Popup for Table 2
|
|
$('#add-row-two').on('click', function () {
|
|
currentTableId = 'table-two';
|
|
currentModelName = 'SecondTableEntry';
|
|
$('#add-popup-two').fadeIn();
|
|
});
|
|
|
|
// Close Popups
|
|
$('.close-btn, .cancel-btn').on('click', function () {
|
|
$('.popup').fadeOut();
|
|
});
|
|
|
|
// Save Add Entry
|
|
$('#save-add-two').on('click', function() {
|
|
let formData = {
|
|
'client_id': $('#add-client-id').val(),
|
|
'date': $('#add-date').val(), // Ensure this is in YYYY-MM-DD format
|
|
'is_warm': $('#add-is-warm').is(':checked'),
|
|
'lhe_delivery': $('#add-lhe-delivery').val(),
|
|
'lhe_output': $('#add-lhe-output').val(),
|
|
'notes': $('#add-notes').val(),
|
|
'csrfmiddlewaretoken': '{{ csrf_token }}'
|
|
};
|
|
|
|
// Validate date format
|
|
if (!formData.date) {
|
|
alert('Please select a date');
|
|
return;
|
|
}
|
|
|
|
// Validate LHe Output is a number
|
|
if (isNaN(parseFloat(formData.lhe_output))) {
|
|
alert('LHe Output must be a valid number');
|
|
return;
|
|
}
|
|
|
|
$.ajax({
|
|
url: '/add-entry/SecondTableEntry/',
|
|
method: 'POST',
|
|
data: formData,
|
|
success: function(response) {
|
|
if (response.status === 'success') {
|
|
// Add the new row to the table
|
|
let newRow = `
|
|
<tr data-id="${response.id}">
|
|
<td>${$('#table-two tbody tr').length + 1}</td>
|
|
<td>${response.id}</td>
|
|
<td>${response.client_name}</td>
|
|
<td>${response.date || ''}</td>
|
|
<td>${response.is_warm ? 'Yes' : 'No'}</td>
|
|
<td>${response.lhe_delivery}</td>
|
|
<td>${response.lhe_output || ''}</td>
|
|
<td>${response.notes || ''}</td>
|
|
<td class="actions">
|
|
<button class="edit-btn-two">Edit</button>
|
|
<button class="delete-btn-two">Delete</button>
|
|
</td>
|
|
</tr>
|
|
`;
|
|
$('#table-two tbody').append(newRow);
|
|
$('#add-popup-two').fadeOut();
|
|
} else {
|
|
alert('Error: ' + (response.message || 'Failed to add entry'));
|
|
}
|
|
},
|
|
error: function(xhr) {
|
|
alert('Error: ' + (xhr.responseJSON?.message || 'Server error'));
|
|
}
|
|
});
|
|
});
|
|
|
|
// Add this new function to load table data
|
|
function loadTableData() {
|
|
$.ajax({
|
|
url: window.location.href,
|
|
method: 'GET',
|
|
success: function(data) {
|
|
// Parse the HTML response to extract the table body
|
|
let newBody = $(data).find('#table-two tbody').html();
|
|
$('#table-two tbody').html(newBody);
|
|
},
|
|
error: function() {
|
|
alert('Failed to refresh table data');
|
|
}
|
|
});
|
|
}
|
|
|
|
// Open Edit Popup
|
|
$(document).on('click', '.edit-btn-two', function() {
|
|
let row = $(this).closest('tr');
|
|
$('#edit-id').val(row.data('id'));
|
|
|
|
// Set client - find by name since we're showing names in the table
|
|
let clientName = row.find('td:eq(2)').text().trim();
|
|
$(`#edit-client-id option:contains("${clientName}")`).prop('selected', true);
|
|
|
|
// Set date - ensure proper format
|
|
let dateText = row.find('td:eq(3)').text().trim();
|
|
if (dateText) {
|
|
$('#edit-date').val(dateText);
|
|
}
|
|
|
|
// Set other fields
|
|
$('#edit-is-warm').prop('checked', row.find('td:eq(4)').text().trim() === 'Yes');
|
|
$('#edit-lhe-delivery').val(row.find('td:eq(5)').text().trim());
|
|
$('#edit-lhe-output').val(row.find('td:eq(6)').text().trim());
|
|
$('#edit-notes').val(row.find('td:eq(7)').text().trim());
|
|
|
|
$('#edit-popup-two').fadeIn();
|
|
});
|
|
|
|
// Save Edit Entry
|
|
$('#save-edit-two').on('click', function() {
|
|
let formData = {
|
|
'id': $('#edit-id').val(),
|
|
'client_id': $('#edit-client-id').val(),
|
|
'date': $('#edit-date').val(), // Already in YYYY-MM-DD format
|
|
'is_warm': $('#edit-is-warm').is(':checked'),
|
|
'lhe_delivery': $('#edit-lhe-delivery').val(),
|
|
'lhe_output': $('#edit-lhe-output').val(),
|
|
'notes': $('#edit-notes').val(),
|
|
'csrfmiddlewaretoken': '{{ csrf_token }}'
|
|
};
|
|
|
|
// Validate inputs
|
|
if (!formData.date) {
|
|
alert('Please select a date');
|
|
return;
|
|
}
|
|
if (isNaN(parseFloat(formData.lhe_output))) {
|
|
alert('Please enter a valid LHe Output value');
|
|
return;
|
|
}
|
|
|
|
$.ajax({
|
|
url: '/update-entry/SecondTableEntry/',
|
|
method: 'POST',
|
|
data: formData,
|
|
success: function(response) {
|
|
if (response.status === 'success') {
|
|
let row = $(`tr[data-id="${response.id}"]`);
|
|
row.find('td:eq(2)').text(response.client_name);
|
|
row.find('td:eq(3)').text(response.date || '');
|
|
row.find('td:eq(4)').text(response.is_warm ? 'Yes' : 'No');
|
|
row.find('td:eq(5)').text(response.lhe_delivery);
|
|
row.find('td:eq(6)').text(response.lhe_output || '');
|
|
row.find('td:eq(7)').text(response.notes || '');
|
|
$('#edit-popup-two').fadeOut();
|
|
} else {
|
|
alert('Update failed: ' + (response.message || 'Unknown error'));
|
|
}
|
|
},
|
|
error: function(xhr) {
|
|
alert('Error: ' + (xhr.responseJSON?.message || 'Server error'));
|
|
}
|
|
});
|
|
});
|
|
|
|
// Delete Entry
|
|
$(document).on('click', '.delete-btn-two', function () {
|
|
let row = $(this).closest('tr');
|
|
let id = row.data('id');
|
|
currentTableId = row.closest('table').attr('id');
|
|
currentModelName = 'SecondTableEntry';
|
|
|
|
if (!confirm('Are you sure you want to delete this entry?')) return;
|
|
|
|
$.ajax({
|
|
url: `/delete-entry/${currentModelName}/`,
|
|
method: 'POST',
|
|
data: {
|
|
'id': id,
|
|
'csrfmiddlewaretoken': '{{ csrf_token }}'
|
|
},
|
|
success: function (response) {
|
|
if (response.status === 'success') {
|
|
row.fadeOut(300, function () { $(this).remove(); });
|
|
} else {
|
|
alert('Delete failed: ' + response.message);
|
|
}
|
|
},
|
|
error: function (xhr, status, error) {
|
|
alert('Delete failed: ' + (xhr.responseJSON?.message || 'Please try again later'));
|
|
console.error('Error:', error);
|
|
}
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |