new update
This commit is contained in:
@@ -27,18 +27,32 @@
|
||||
}
|
||||
table {
|
||||
width: 100%;
|
||||
table-layout: fixed;
|
||||
border-collapse: collapse;
|
||||
margin-top: 20px;
|
||||
}
|
||||
th, td {
|
||||
padding: 12px;
|
||||
text-align: left;
|
||||
text-align: center;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
th:nth-child(1), td:nth-child(1) { width: 5%; } /* # column */
|
||||
th:nth-child(2), td:nth-child(2) { width: 5%; } /* ID column */
|
||||
th:nth-child(3), td:nth-child(3) { width: 15%; } /* Client column */
|
||||
th:nth-child(4), td:nth-child(4) { width: 10%; } /* Entry 1 (Pressure) */
|
||||
th:nth-child(5), td:nth-child(5) { width: 10%; } /* Entry 2 (Purity) */
|
||||
th:nth-child(6), td:nth-child(6) { width: 15%; } /* Date Joined */
|
||||
th:nth-child(7), td:nth-child(7) { width: 25%; } /* Notes */
|
||||
th:nth-child(7), td:nth-child(7) { width: 30%; } /* Actions */
|
||||
|
||||
.actions {
|
||||
white-space: nowrap; /* Prevent buttons from wrapping */
|
||||
}
|
||||
th {
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
tr:hover {
|
||||
background-color: #f1f1f1;
|
||||
@@ -106,6 +120,7 @@
|
||||
.add-row-btn:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -118,14 +133,25 @@
|
||||
<div class="table-container">
|
||||
<button class="add-row-btn" id="add-row-one">Add Row</button>
|
||||
<table id="table-one">
|
||||
<colgroup>
|
||||
<col style="width: 5%"> <!-- # -->
|
||||
<col style="width: 5%"> <!-- ID -->
|
||||
<col style="width: 15%"> <!-- Client -->
|
||||
<col style="width: 10%"> <!-- Druck -->
|
||||
<col style="width: 10%"> <!-- Reinheit -->
|
||||
<col style="width: 15%"> <!-- Date Joined -->
|
||||
<col style="width: 25%"> <!-- Notes -->
|
||||
<col style="width: 15%"> <!-- Actions -->
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>ID</th>
|
||||
<th>Client</th>
|
||||
<th>Entry 1</th>
|
||||
<th>Entry 2</th>
|
||||
<th>Druck</th>
|
||||
<th>Reinheit</th>
|
||||
<th>Date Joined</th>
|
||||
<th>Notes</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
@@ -135,9 +161,10 @@
|
||||
<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>{{ entry.pressure|floatformat:2 }}</td>
|
||||
<td>{{ entry.purity|floatformat:2 }}</td>
|
||||
<td>{{ entry.date_joined|date:"Y-m-d" }}</td>
|
||||
<td>{{ entry.notes|default:"" }}</td>
|
||||
<td class="actions">
|
||||
<button class="edit-btn-one">Edit</button>
|
||||
<button class="delete-btn-one">Delete</button>
|
||||
@@ -152,30 +179,72 @@
|
||||
<!-- Add Popup -->
|
||||
<div id="add-popup-one" class="popup">
|
||||
<span class="close-btn">×</span>
|
||||
<h3>Add Entry</h3>
|
||||
<h3>He Gas Bundle</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>
|
||||
<input type="number" id="add-age" placeholder="Age">
|
||||
<input type="email" id="add-email" placeholder="Email">
|
||||
<button id="save-add-one">Add</button>
|
||||
|
||||
<label for="add-date">Date:</label>
|
||||
<input type="date" id="add-date">
|
||||
|
||||
<div class="input-with-label">
|
||||
<label for="add-pressure">Druck:</label>
|
||||
<input type="number" id="add-pressure" placeholder="Enter pressure" step="0.01" min="0">
|
||||
</div>
|
||||
|
||||
<div class="input-with-label">
|
||||
<label for="add-purity">Reinheit:</label>
|
||||
<input type="number" id="add-purity" placeholder="Enter purity" step="0.01" min="0" max="100">
|
||||
</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-one">Save</button>
|
||||
<button class="cancel-btn">Cancel</button>
|
||||
<button class="help-btn">Help</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Edit Popup -->
|
||||
<div id="edit-popup-one" class="popup">
|
||||
<span class="close-btn">×</span>
|
||||
<h3>Edit Entry</h3>
|
||||
<h3>He Gas Bundle</h3>
|
||||
<input type="hidden" id="edit-id">
|
||||
|
||||
<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>
|
||||
<input type="number" id="edit-age" placeholder="Age">
|
||||
<input type="email" id="edit-email" placeholder="Email">
|
||||
<button id="save-edit-one">Save</button>
|
||||
|
||||
<label for="edit-date">Date:</label>
|
||||
<input type="date" id="edit-date">
|
||||
|
||||
<div class="input-with-label">
|
||||
<label for="edit-pressure">Druck:</label>
|
||||
<input type="number" id="edit-pressure" placeholder="Enter pressure" step="0.01" min="0">
|
||||
</div>
|
||||
|
||||
<div class="input-with-label">
|
||||
<label for="edit-purity">Reinheit:</label>
|
||||
<input type="number" id="edit-purity" placeholder="Enter purity" step="0.01" min="0" max="100">
|
||||
</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-one">Save</button>
|
||||
<button class="cancel-btn">Cancel</button>
|
||||
<button class="help-btn">Help</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
@@ -192,81 +261,135 @@
|
||||
});
|
||||
|
||||
// Add
|
||||
$('#save-add-one').on('click', function () {
|
||||
let client_id = $('#add-client-id').val();
|
||||
let age = $('#add-age').val();
|
||||
let email = $('#add-email').val();
|
||||
$('#save-add-one').on('click', function() {
|
||||
// Validate date first
|
||||
let dateInput = $('#add-date').val();
|
||||
if (!dateInput) {
|
||||
alert('Please select a date');
|
||||
return;
|
||||
}
|
||||
|
||||
// Validate numbers
|
||||
let pressure = parseFloat($('#add-pressure').val());
|
||||
let purity = parseFloat($('#add-purity').val());
|
||||
|
||||
if (isNaN(pressure) || pressure < 0) {
|
||||
alert('Please enter a valid pressure value');
|
||||
return;
|
||||
}
|
||||
|
||||
if (isNaN(purity) || purity < 0 || purity > 100) {
|
||||
alert('Please enter a valid purity value (0-100)');
|
||||
return;
|
||||
}
|
||||
|
||||
// Prepare the form data
|
||||
let formData = {
|
||||
'client_id': $('#add-client-id').val(),
|
||||
'date': dateInput,
|
||||
'pressure': pressure,
|
||||
'purity': purity,
|
||||
'notes': $('#add-notes').val(),
|
||||
'csrfmiddlewaretoken': '{{ csrf_token }}'
|
||||
};
|
||||
|
||||
$.ajax({
|
||||
url: `/add-entry/${currentModelName}/`,
|
||||
url: '/add-entry/ExcelEntry/',
|
||||
method: 'POST',
|
||||
data: {
|
||||
'client_id': client_id,
|
||||
'age': age,
|
||||
'email': email,
|
||||
'csrfmiddlewaretoken': '{{ csrf_token }}'
|
||||
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-one tbody tr').length + 1}</td>
|
||||
<td>${response.id}</td>
|
||||
<td>${response.client_name}</td>
|
||||
<td>${response.pressure}</td>
|
||||
<td>${response.purity}</td>
|
||||
<td>${response.date || ''}</td>
|
||||
<td>${response.notes || ''}</td>
|
||||
<td class="actions">
|
||||
<button class="edit-btn-one">Edit</button>
|
||||
<button class="delete-btn-one">Delete</button>
|
||||
</td>
|
||||
</tr>
|
||||
`;
|
||||
$('#table-one tbody').append(newRow);
|
||||
$('#add-popup-one').fadeOut();
|
||||
} else {
|
||||
alert('Error: ' + (response.message || 'Failed to add entry'));
|
||||
}
|
||||
},
|
||||
success: function (response) {
|
||||
let rowCount = $(`#${currentTableId} tbody tr`).length + 1;
|
||||
let newRow = `
|
||||
<tr data-id="${response.id}">
|
||||
<td>${rowCount}</td>
|
||||
<td>${response.id}</td>
|
||||
<td>${response.client_name}</td>
|
||||
<td>${response.age}</td>
|
||||
<td>${response.email}</td>
|
||||
<td>${response.date_joined}</td>
|
||||
<td class="actions">
|
||||
<button class="edit-btn-one">Edit</button>
|
||||
<button class="delete-btn-one">Delete</button>
|
||||
</td>
|
||||
</tr>
|
||||
`;
|
||||
$(`#${currentTableId} tbody`).append(newRow);
|
||||
$('#add-popup-one').fadeOut();
|
||||
error: function(xhr) {
|
||||
alert('Error: ' + (xhr.responseJSON?.message || 'Server error'));
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Edit
|
||||
$(document).on('click', '.edit-btn-one', function () {
|
||||
$(document).on('click', '.edit-btn-one', function() {
|
||||
let row = $(this).closest('tr');
|
||||
$('#edit-id').val(row.data('id'));
|
||||
$('#edit-client-id').val(row.find('td:eq(2)').text());
|
||||
$('#edit-age').val(row.find('td:eq(3)').text());
|
||||
$('#edit-email').val(row.find('td:eq(4)').text());
|
||||
$('#edit-client-id').val(row.find('td:eq(2)').text().trim());
|
||||
|
||||
// Handle date - ensure it's in correct format
|
||||
let dateText = row.find('td:eq(5)').text().trim();
|
||||
if (dateText) {
|
||||
$('#edit-date').val(dateText);
|
||||
}
|
||||
|
||||
$('#edit-pressure').val(row.find('td:eq(3)').text().trim());
|
||||
$('#edit-purity').val(row.find('td:eq(4)').text().trim());
|
||||
$('#edit-notes').val(row.find('td:eq(6)').text().trim());
|
||||
$('#edit-popup-one').fadeIn();
|
||||
});
|
||||
|
||||
$('#save-edit-one').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();
|
||||
// Update the save-edit-one handler
|
||||
$('#save-edit-one').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
|
||||
'pressure': $('#edit-pressure').val(),
|
||||
'purity': $('#edit-purity').val(),
|
||||
'notes': $('#edit-notes').val(),
|
||||
'csrfmiddlewaretoken': '{{ csrf_token }}'
|
||||
};
|
||||
|
||||
// Validate inputs
|
||||
if (!formData.date) {
|
||||
alert('Please select a date');
|
||||
return;
|
||||
}
|
||||
if (isNaN(formData.pressure) || formData.pressure < 0) {
|
||||
alert('Please enter a valid pressure value');
|
||||
return;
|
||||
}
|
||||
if (isNaN(formData.purity) || formData.purity < 0 || formData.purity > 100) {
|
||||
alert('Please enter a valid purity value (0-100)');
|
||||
return;
|
||||
}
|
||||
|
||||
$.ajax({
|
||||
url: `/update-entry/${currentModelName}/`,
|
||||
url: '/update-entry/ExcelEntry/',
|
||||
method: 'POST',
|
||||
data: {
|
||||
'id': id,
|
||||
'client_id': client_id,
|
||||
'age': age,
|
||||
'email': email,
|
||||
'csrfmiddlewaretoken': '{{ csrf_token }}'
|
||||
},
|
||||
success: function (response) {
|
||||
data: formData,
|
||||
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.pressure);
|
||||
row.find('td:eq(4)').text(response.purity);
|
||||
row.find('td:eq(5)').text(response.date || '');
|
||||
row.find('td:eq(6)').text(response.notes || '');
|
||||
$('#edit-popup-one').fadeOut();
|
||||
} else {
|
||||
alert('Failed to update entry: ' + response.message);
|
||||
alert('Error: ' + (response.message || 'Failed to update entry'));
|
||||
}
|
||||
},
|
||||
error: function () {
|
||||
alert('Failed to update entry. Please try again.');
|
||||
error: function(xhr) {
|
||||
alert('Error: ' + (xhr.responseJSON?.message || 'Server error'));
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user