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

testing

Browse Source
This commit is contained in:
Mohamad Jenbaz
2025-04-22 13:40:09 +02:00
parent 63dffd1d80
commit 63556a1ac3
14 changed files with 221 additions and 344 deletions
Download Patch File Download Diff File Expand all files Collapse all files

176
sheets/templates/table_one.html
View File

@ -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 Input</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" />
@ -14,11 +14,6 @@
padding: 20px;
background-color: #f4f4f9;
}
.container {
display: flex;
justify-content: space-between;
gap: 20px;
}
.table-container {
width: 48%;
background-color: white;
@ -56,11 +51,11 @@
cursor: pointer;
font-size: 14px;
}
.edit-btn {
.edit-btn-one {
background-color: #28a745;
color: white;
}
.delete-btn {
.delete-btn-one {
background-color: #dc3545;
color: white;
}
@ -76,7 +71,7 @@
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
z-index: 1000;
}
.popup input {
.popup input, .popup select {
display: block;
margin-bottom: 10px;
width: 100%;
@ -115,92 +110,90 @@
</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">
&#8678; Go to Clients
</a>
</div>
<a href="{% url 'clients_list' %}" class="btn btn-outline-primary">
&#8678; Go to Clients
</a>
<h2>Excel-like Table</h2>
<div class="container">
<!-- First Table -->
<div class="table-container">
<button class="add-row-btn" id="add-row-1">Add Row</button>
<table id="table-1">
<thead>
<tr>
<th>#</th>
<th>ID</th>
<th>Name</th>
<th>Age</th>
<th>Email</th>
<th>Date Joined</th>
<th>Actions</th>
<h2>Helium Input</h2>
<div class="table-container">
<button class="add-row-btn" id="add-row-one">Add Row</button>
<table id="table-one">
<thead>
<tr>
<th>#</th>
<th>ID</th>
<th>Client</th>
<th>Entry 1</th>
<th>Entry 2</th>
<th>Date Joined</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{% for entry in entries_table1 %}
<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-one">Edit</button>
<button class="delete-btn-one">Delete</button>
</td>
</tr>
</thead>
<tbody>
{% for entry in entries_table1 %}
<tr data-id="{{ entry.id }}">
<td>{{ forloop.counter }}</td> <!-- ← sequential number -->
<td>{{ entry.id }}</td>
<td>{{ entry.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>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% endfor %}
</tbody>
</table>
</div>
<!-- Add Entry Popup -->
<div id="add-popup" class="popup">
<!-- Add Popup -->
<div id="add-popup-one" class="popup">
<span class="close-btn">&times;</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-one">Add</button>
</div>
<!-- Edit Entry Popup -->
<div id="edit-popup" class="popup">
<!-- Edit Popup -->
<div id="edit-popup-one" class="popup">
<span class="close-btn">&times;</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-one">Save</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
let currentTableId = 'table-one';
let currentModelName = 'ExcelEntry';
// Open Add Popup for Table 1
$('#add-row-1').on('click', function () {
currentTableId = 'table-1';
currentModelName = 'ExcelEntry'; // Model name for Table 1
$('#add-popup').fadeIn();
$('#add-row-one').on('click', function () {
$('#add-popup-one').fadeIn();
});
// Close Popups
$('.close-btn').on('click', function () {
$('.popup').fadeOut();
});
// Save Add Entry
$('#save-add').on('click', function () {
let name = $('#add-name').val();
// Add
$('#save-add-one').on('click', function () {
let client_id = $('#add-client-id').val();
let age = $('#add-age').val();
let email = $('#add-email').val();
@ -208,7 +201,7 @@
url: `/add-entry/${currentModelName}/`,
method: 'POST',
data: {
'name': name,
'client_id': client_id,
'age': age,
'email': email,
'csrfmiddlewaretoken': '{{ csrf_token }}'
@ -217,40 +210,37 @@
let rowCount = $(`#${currentTableId} tbody tr`).length + 1;
let newRow = `
<tr data-id="${response.id}">
<td>${rowCount}</td> <!-- serial number -->
<td>${rowCount}</td>
<td>${response.id}</td>
<td>${response.name}</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">Edit</button>
<button class="delete-btn">Delete</button>
<button class="edit-btn-one">Edit</button>
<button class="delete-btn-one">Delete</button>
</td>
</tr>
`;
$(`#${currentTableId} tbody`).append(newRow);
$('#add-popup').fadeOut();
$('#add-popup-one').fadeOut();
}
});
});
// Open Edit Popup
$(document).on('click', '.edit-btn', function () {
// Edit
$(document).on('click', '.edit-btn-one', 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
$('#edit-id').val(row.data('id'));
$('#edit-name').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-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-popup-one').fadeIn();
});
// Save Edit Entry
$('#save-edit').on('click', function () {
$('#save-edit-one').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();
@ -259,7 +249,7 @@
method: 'POST',
data: {
'id': id,
'name': name,
'client_id': client_id,
'age': age,
'email': email,
'csrfmiddlewaretoken': '{{ csrf_token }}'
@ -270,7 +260,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-one').fadeOut();
} else {
alert('Failed to update entry: ' + response.message);
}
@ -281,12 +271,10 @@
});
});
// Delete Entry
$(document).on('click', '.delete-btn', function () {
// Delete
$(document).on('click', '.delete-btn-one', 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
if (!confirm('Are you sure you want to delete this entry?')) return;
@ -313,4 +301,4 @@
</script>
</body>
</html>
</html>