testing
This commit is contained in:
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Excel-like Table</title>
|
||||
<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" />
|
||||
@ -56,11 +56,11 @@
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
}
|
||||
.edit-btn {
|
||||
.edit-btn-two {
|
||||
background-color: #28a745;
|
||||
color: white;
|
||||
}
|
||||
.delete-btn {
|
||||
.delete-btn-two {
|
||||
background-color: #dc3545;
|
||||
color: white;
|
||||
}
|
||||
@ -111,6 +111,15 @@
|
||||
.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>
|
||||
@ -122,22 +131,22 @@
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<h2>Excel-like Table</h2>
|
||||
<h2>Helium Output</h2>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- Second Table -->
|
||||
<div class="table-container">
|
||||
<button class="add-row-btn" id="add-row-2">Add Row</button>
|
||||
<table id="table-2">
|
||||
<button class="add-row-btn" id="add-row-two">Add Row</button>
|
||||
<table id="table-two">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>ID</th>
|
||||
<th>Name</th>
|
||||
<th>Age</th>
|
||||
<th>Email</th>
|
||||
<th>Client</th>
|
||||
<th>Entry 1</th>
|
||||
<th>Entry 2</th>
|
||||
<th>Date Joined</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
@ -147,13 +156,13 @@
|
||||
<tr data-id="{{ entry.id }}">
|
||||
<td>{{ forloop.counter }}</td>
|
||||
<td>{{ entry.id }}</td>
|
||||
<td>{{ entry.name }}</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">Edit</button>
|
||||
<button class="delete-btn">Delete</button>
|
||||
<button class="edit-btn-two">Edit</button>
|
||||
<button class="delete-btn-two">Delete</button>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
@ -163,24 +172,32 @@
|
||||
</div>
|
||||
|
||||
<!-- Add Entry Popup -->
|
||||
<div id="add-popup" class="popup">
|
||||
<div id="add-popup-two" class="popup">
|
||||
<span class="close-btn">×</span>
|
||||
<h3>Add Entry</h3>
|
||||
<input type="text" id="add-name" placeholder="Name">
|
||||
<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">Add</button>
|
||||
<button id="save-add-two">Add</button>
|
||||
</div>
|
||||
|
||||
<!-- Edit Entry Popup -->
|
||||
<div id="edit-popup" class="popup">
|
||||
<div id="edit-popup-two" class="popup">
|
||||
<span class="close-btn">×</span>
|
||||
<h3>Edit Entry</h3>
|
||||
<input type="hidden" id="edit-id">
|
||||
<input type="text" id="edit-name" placeholder="Name">
|
||||
<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">Save</button>
|
||||
<button id="save-edit-two">Save</button>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
@ -189,10 +206,10 @@
|
||||
let currentModelName = null; // To track which model is being used
|
||||
|
||||
// Open Add Popup for Table 2
|
||||
$('#add-row-2').on('click', function () {
|
||||
currentTableId = 'table-2';
|
||||
$('#add-row-two').on('click', function () {
|
||||
currentTableId = 'table-two';
|
||||
currentModelName = 'SecondTableEntry'; // Model name for Table 2
|
||||
$('#add-popup').fadeIn();
|
||||
$('#add-popup-two').fadeIn();
|
||||
});
|
||||
|
||||
// Close Popups
|
||||
@ -201,8 +218,8 @@
|
||||
});
|
||||
|
||||
// Save Add Entry
|
||||
$('#save-add').on('click', function () {
|
||||
let name = $('#add-name').val();
|
||||
$('#save-add-two').on('click', function () {
|
||||
let client_id = $('#add-client-id').val(); // ✅ Correct variable
|
||||
let age = $('#add-age').val();
|
||||
let email = $('#add-email').val();
|
||||
|
||||
@ -210,49 +227,49 @@
|
||||
url: `/add-entry/${currentModelName}/`,
|
||||
method: 'POST',
|
||||
data: {
|
||||
'name': name,
|
||||
'client_id': client_id, // ✅ REPLACE 'name' with this
|
||||
'age': age,
|
||||
'email': email,
|
||||
'csrfmiddlewaretoken': '{{ csrf_token }}'
|
||||
},
|
||||
success: function (response) {
|
||||
let rowCount = $('#table-2 tbody tr').length + 1;
|
||||
let rowCount = $('#table-two tbody tr').length + 1;
|
||||
let newRow = `
|
||||
<tr data-id="${response.id}">
|
||||
<td>${rowCount}</td> <!-- Serial # -->
|
||||
<td>${response.id}</td> <!-- ID -->
|
||||
<td>${response.name}</td> <!-- Name -->
|
||||
<td>${response.client_name}</td> <!-- Name -->
|
||||
<td>${response.age}</td> <!-- Age -->
|
||||
<td>${response.email}</td> <!-- Email -->
|
||||
<td>${response.date_joined}</td> <!-- Date Joined -->
|
||||
<td class="actions"> <!-- Actions -->
|
||||
<button class="edit-btn">Edit</button>
|
||||
<button class="delete-btn">Delete</button>
|
||||
<button class="edit-btn-two">Edit</button>
|
||||
<button class="delete-btn-two">Delete</button>
|
||||
</td>
|
||||
</tr>
|
||||
`;
|
||||
$('#table-2 tbody').append(newRow);
|
||||
$('#add-popup').fadeOut();
|
||||
$(`#${currentTableId} tbody`).append(newRow);
|
||||
$('#add-popup-two').fadeOut();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Open Edit Popup
|
||||
$(document).on('click', '.edit-btn', function () {
|
||||
$(document).on('click', '.edit-btn-two', function () {
|
||||
let row = $(this).closest('tr');
|
||||
currentTableId = row.closest('table').attr('id'); // Set current table ID
|
||||
currentModelName = currentTableId === 'table-1' ? 'ExcelEntry' : 'SecondTableEntry'; // Set model name
|
||||
currentModelName = 'SecondTableEntry'; // Set model name
|
||||
$('#edit-id').val(row.data('id'));
|
||||
$('#edit-name').val(row.find('td:eq(2)').text()); // Name is now in column 2
|
||||
$('#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').fadeIn();
|
||||
$('#edit-popup-two').fadeIn();
|
||||
});
|
||||
|
||||
// Save Edit Entry
|
||||
$('#save-edit').on('click', function () {
|
||||
$('#save-edit-two').on('click', function () {
|
||||
let id = $('#edit-id').val();
|
||||
let name = $('#edit-name').val();
|
||||
let client_id = $('#edit-client-id').val();
|
||||
let age = $('#edit-age').val();
|
||||
let email = $('#edit-email').val();
|
||||
|
||||
@ -261,7 +278,7 @@
|
||||
method: 'POST',
|
||||
data: {
|
||||
'id': id,
|
||||
'name': name,
|
||||
'client_id': client_id,
|
||||
'age': age,
|
||||
'email': email,
|
||||
'csrfmiddlewaretoken': '{{ csrf_token }}'
|
||||
@ -272,7 +289,7 @@
|
||||
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').fadeOut();
|
||||
$('#edit-popup-two').fadeOut();
|
||||
} else {
|
||||
alert('Failed to update entry: ' + response.message);
|
||||
}
|
||||
@ -284,11 +301,11 @@
|
||||
});
|
||||
|
||||
// Delete Entry
|
||||
$(document).on('click', '.delete-btn', 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 = currentTableId === 'table-1' ? 'ExcelEntry' : 'SecondTableEntry'; // Set model name
|
||||
currentModelName = 'SecondTableEntry'; // Set model name
|
||||
|
||||
if (!confirm('Are you sure you want to delete this entry?')) return;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user