351 lines
12 KiB
HTML
351 lines
12 KiB
HTML
<!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>
|
||
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;
|
||
}
|
||
.popup input {
|
||
display: block;
|
||
margin-bottom: 10px;
|
||
width: 100%;
|
||
padding: 8px;
|
||
border: 1px solid #ddd;
|
||
border-radius: 4px;
|
||
}
|
||
.popup button {
|
||
margin-top: 10px;
|
||
padding: 8px 16px;
|
||
border: none;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
}
|
||
.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;
|
||
}
|
||
.popup select {
|
||
display: block;
|
||
margin-bottom: 10px;
|
||
width: 100%;
|
||
padding: 8px;
|
||
border: 1px solid #ddd;
|
||
border-radius: 4px;
|
||
font-family: Arial, sans-serif;
|
||
}
|
||
</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
|
||
</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">×</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
|
||
|
||
// 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>
|
||
<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);
|
||
}
|
||
});
|
||
});
|
||
});
|
||
|
||
// 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
|
||
$('#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-popup-two').fadeIn();
|
||
});
|
||
|
||
// Save Edit Entry
|
||
$('#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();
|
||
|
||
$.ajax({
|
||
url: `/update-entry/${currentModelName}/`,
|
||
method: 'POST',
|
||
data: {
|
||
'id': id,
|
||
'client_id': client_id,
|
||
'age': age,
|
||
'email': email,
|
||
'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);
|
||
$('#edit-popup-two').fadeOut();
|
||
} else {
|
||
alert('Failed to update entry: ' + response.message);
|
||
}
|
||
},
|
||
error: function () {
|
||
alert('Failed to update entry. Please try again.');
|
||
}
|
||
});
|
||
});
|
||
|
||
// 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'); // Set current table ID
|
||
currentModelName = 'SecondTableEntry'; // Set model name
|
||
|
||
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('Failed to delete entry: ' + response.message);
|
||
}
|
||
},
|
||
error: function () {
|
||
alert('Failed to delete entry. Please try again.');
|
||
}
|
||
});
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |