mhjenbaz/he-database
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

new update

Browse Source
This commit is contained in:
Mohamad Jenbaz
2025-08-28 12:22:27 +02:00
parent 16fd76ff5a
commit 70e055d20b
12 changed files with 970 additions and 591 deletions
Download Patch File Download Diff File Expand all files Collapse all files

465
sheets/templates/table_two.html
View File

@@ -1,14 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<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 href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" rel="stylesheet"/>
<style>
<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;
@@ -76,23 +75,56 @@
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
z-index: 1000;
width: 400px;
}
.popup input {
.popup h3 {
margin-top: 0;
border-bottom: 1px solid #ddd;
padding-bottom: 10px;
}
.popup label {
display: block;
margin-bottom: 10px;
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 {
margin-top: 10px;
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;
@@ -112,174 +144,244 @@
.add-row-btn:hover {
background-color: #0056b3;
}
.popup select {
display: block;
margin-bottom: 10px;
width: 100%;
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
font-family: Arial, sans-serif;
.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 class="btn btn-outline-primary" href="{% url 'clients_list' %}">
⇦ Go to Clients
<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">
&#8678; Go to Clients
</a>
</div>
<h2>Helium Output</h2>
<!-- Second Table -->
<div class="table-container">
<button class="add-row-btn" id="add-row-two">Add Row</button>
<table id="table-two">
<thead><tr><th>#</th><th>ID</th><th>Client</th><th>Date</th><th>Warm</th><th>LHe Anlieferung</th><th>LHe Ausgabe</th><th>Comments</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.age }}</td>
<td>{{ entry.email }}</td>
<td>{{ entry.date_joined }}</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" style="display:none;">
<span class="close-btn">&times;</span>
<h3>Add Entry</h3>
<label for="add-client-id">Kunde:</label>
<select id="add-client-id">
{% for client in clients %}
<option value="{{ client.id }}">{{ client.name }}</option>
{% endfor %}
</select>
<label for="add-date">Datum:</label>
<input type="date" id="add-date">
<label><input type="checkbox" id="add-warm"> warm</label>
<label for="add-lhe-anlieferung">LHe Anlieferung:</label>
<input type="text" id="add-lhe-anlieferung" placeholder="LHe Anlieferung">
<label for="add-lhe-ausgabe">LHe Ausgabe:</label>
<input type="text" id="add-lhe-ausgabe" placeholder="LHe Ausgabe">
<label for="add-comment">Kommentar:</label>
<textarea id="add-comment" rows="4"></textarea>
<div style="margin-top: 10px;">
<button id="save-add-two">💾 Save</button>
<button class="close-btn">❌ Cancel</button>
<button id="help-btn">❓ Help</button>
</div>
</div>
</div>
<!-- Edit Entry Popup -->
<div class="popup" id="edit-popup-two">
<span class="close-btn">×</span>
<h3>Edit Entry</h3>
<input id="edit-id" type="hidden"/>
<label for="edit-client-id">Kunde:</label>
<select id="edit-client-id">
{% for client in clients %}
<option value="{{ client.id }}">{{ client.name }}</option>
{% endfor %}
</select>
<label><input id="edit-warm" type="checkbox"/> warm</label>
<input id="edit-anlieferung" placeholder="LHe Anlieferung" type="text"/>
<input id="edit-ausgabe" placeholder="LHe Ausgabe" type="text"/>
<textarea id="edit-comments" placeholder="Comments" rows="4"></textarea>
<button id="save-edit-two">Save</button>
<button class="close-btn">Cancel</button>
<button id="help-btn-edit-two">Help</button>
</div>
<script>
$(document).ready(function () {
let currentTableId = null; // To track which table is being edited
let currentModelName = null; // To track which model is being used
<h2>LHe Dewar Output</h2>
// Open Add Popup for Table 2
$('#add-row-two').on('click', function () {
currentTableId = 'table-two';
currentModelName = 'SecondTableEntry'; // Model name for Table 2
$('#add-popup-two').fadeIn();
});
// Close Popups
$('.close-btn').on('click', function () {
$('.popup').fadeOut();
});
// Save Add Entry
$('#save-add-two').on('click', function () {
let client_id = $('#add-client-id').val();
let date = $('#add-date').val();
let warm = $('#add-warm').is(':checked') ? 1 : 0;
let lhe_anlieferung = $('#add-lhe-anlieferung').val();
let lhe_ausgabe = $('#add-lhe-ausgabe').val();
let comment = $('#add-comment').val();
$.ajax({
url: '/add-entry/SecondTableEntry/',
method: 'POST',
data: {
'client_id': client_id,
'date': date,
'warm': warm,
'lhe_anlieferung': lhe_anlieferung,
'lhe_ausgabe': lhe_ausgabe,
'comment': comment,
'csrfmiddlewaretoken': '{{ csrf_token }}'
},
success: function (response) {
let rowCount = $('tbody tr').length + 1;
let newRow = `
<tr data-id="${response.id}">
<td>${rowCount}</td>
<td>${response.id}</td>
<td>${response.name}</td>
<td>${response.warm}</td>
<td>${response.lhe_anlieferung}</td>
<td>${response.lhe_ausgabe}</td>
<td>${response.date}</td>
<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>`;
$('tbody').append(newRow);
$('#add-popup-two').fadeOut();
},
error: function (xhr) {
alert('Failed to add entry: ' + xhr.responseText);
}
});
});
</tr>
{% endfor %}
</tbody>
</table>
</div>
<!-- Add Entry Popup -->
<div id="add-popup-two" class="popup">
<span class="close-btn">&times;</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">&times;</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(),
'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 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) {
// Clear the form
$('#add-popup-two').find('input, textarea, select').val('');
$('#add-is-warm').prop('checked', false);
$('#add-popup-two').fadeOut();
// Reload the table data
loadTableData();
},
error: function(xhr) {
alert('Error: ' + xhr.responseJSON?.message || 'Failed to add entry');
}
});
});
// 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');
currentTableId = row.closest('table').attr('id'); // Set current table ID
currentModelName = 'SecondTableEntry'; // Set model name
currentTableId = row.closest('table').attr('id');
currentModelName = 'SecondTableEntry';
// Get data from the row
let is_warm = row.find('td:eq(4)').text().trim() === 'Yes';
$('#edit-id').val(row.data('id'));
$('#edit-client-id').val(row.find('td:eq(2)').text()); // Name is now in column 2
$('#edit-age').val(row.find('td:eq(3)').text()); // Age is now in column 3
$('#edit-email').val(row.find('td:eq(4)').text()); // Email is now in column 4
$('#edit-client-id').val(row.find('td:eq(2)').text().trim());
$('#edit-date').val(row.find('td:eq(3)').text().trim());
$('#edit-is-warm').prop('checked', is_warm);
$('#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();
});
@@ -287,8 +389,11 @@ $('#save-add-two').on('click', function () {
$('#save-edit-two').on('click', function () {
let id = $('#edit-id').val();
let client_id = $('#edit-client-id').val();
let age = $('#edit-age').val();
let email = $('#edit-email').val();
let date = $('#edit-date').val();
let is_warm = $('#edit-is-warm').is(':checked');
let lhe_delivery = $('#edit-lhe-delivery').val();
let lhe_output = $('#edit-lhe-output').val();
let notes = $('#edit-notes').val();
$.ajax({
url: `/update-entry/${currentModelName}/`,
@@ -296,23 +401,30 @@ $('#save-add-two').on('click', function () {
data: {
'id': id,
'client_id': client_id,
'age': age,
'email': email,
'date': date,
'is_warm': is_warm,
'lhe_delivery': lhe_delivery,
'lhe_output': lhe_output,
'notes': notes,
'csrfmiddlewaretoken': '{{ csrf_token }}'
},
success: function (response) {
if (response.status === 'success') {
let row = $(`tr[data-id="${response.id}"]`);
row.find('td:eq(2)').text(response.name);
row.find('td:eq(3)').text(response.age);
row.find('td:eq(4)').text(response.email);
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('Failed to update entry: ' + response.message);
alert('Update failed: ' + (response.message || 'Please try again later'));
}
},
error: function () {
alert('Failed to update entry. Please try again.');
error: function (xhr, status, error) {
alert('Update failed: ' + (xhr.responseJSON?.message || 'Please try again later'));
console.error('Error:', error);
}
});
});
@@ -321,8 +433,8 @@ $('#save-add-two').on('click', function () {
$(document).on('click', '.delete-btn-two', function () {
let row = $(this).closest('tr');
let id = row.data('id');
currentTableId = row.closest('table').attr('id'); // Set current table ID
currentModelName = 'SecondTableEntry'; // Set model name
currentTableId = row.closest('table').attr('id');
currentModelName = 'SecondTableEntry';
if (!confirm('Are you sure you want to delete this entry?')) return;
@@ -337,11 +449,12 @@ $('#save-add-two').on('click', function () {
if (response.status === 'success') {
row.fadeOut(300, function () { $(this).remove(); });
} else {
alert('Failed to delete entry: ' + response.message);
alert('Delete failed: ' + response.message);
}
},
error: function () {
alert('Failed to delete entry. Please try again.');
error: function (xhr, status, error) {
alert('Delete failed: ' + (xhr.responseJSON?.message || 'Please try again later'));
console.error('Error:', error);
}
});
});