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

394
sheets/templates/clients_table.html
View File

@@ -1,290 +1,124 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Clients Table</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;
padding: 20px;
background-color: #f4f4f9;
}
.add-row-btn, .btn-go-back {
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,
.btn-go-back:hover {
background-color: #0056b3;
}
.container {
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 {
background-color: #28a745;
color: white;
}
.delete-btn {
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;
}
</style>
</head>
<body>
{% extends "base.html" %}
{% block content %}
<div class="container">
<!-- Year Filter -->
<div class="year-filter">
<label for="year-select">Year:</label>
<select id="year-select" onchange="window.location.href='?year='+this.value">
{% for year in available_years %}
<option value="{{ year }}" {% if year == current_year %}selected{% endif %}>
{{ year }}
</option>
{% endfor %}
</select>
</div>
<div class="container">
<h2>Clients Table</h2>
<button class="add-row-btn" id="add-client">Add Client</button>
<table>
<thead>
<tr>
<th>#</th> <!-- This is your new sequential number column -->
<th>ID</th>
<th>Name</th>
<th>Address</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{% for client in clients %}
<tr data-id="{{ client.id }}">
<td>{{ forloop.counter }}</td> <!-- ← this gives you 1, 2, 3... -->
<td>{{ client.id }}</td>
<td>{{ client.name }}</td>
<td>{{ client.address }}</td>
<td class="actions">
<button class="edit-btn">Edit</button>
<button class="delete-btn">Delete</button>
</td>
</tr>
<!-- Annual Summary Table -->
<table class="summary-table">
<thead>
<tr>
<th>Client</th>
{% for month in months %}
<th>{{ month }}</th>
{% endfor %}
</tbody>
</table>
</div>
<th>Total</th>
</tr>
</thead>
<tbody>
{% for data in monthly_data %}
<tr>
<td>{{ data.client.name }}</td>
{% for total in data.monthly_totals %}
<td>{{ total|floatformat:2 }}</td>
{% endfor %}
<td class="total">{{ data.year_total|floatformat:2 }}</td>
</tr>
{% endfor %}
</tbody>
</table>
<!-- Add Client Popup -->
<div id="add-popup" class="popup">
<span class="close-btn">&times;</span>
<h3>Add Client</h3>
<input type="text" id="add-name" placeholder="Name">
<input type="text" id="add-address" placeholder="Address">
<button id="save-add">Add</button>
</div>
<!-- Edit Client Popup -->
<div id="edit-popup" class="popup">
<span class="close-btn">&times;</span>
<h3>Edit Client</h3>
<input type="hidden" id="edit-id">
<input type="text" id="edit-name" placeholder="Name">
<input type="text" id="edit-address" placeholder="Address">
<button id="save-edit">Save</button>
</div>
<div style="margin-top: 30px; text-align: center;">
<a href="{% url 'table_one' %}">
<button class="add-row-btn">Go to Helium input</button>
<!-- Navigation Buttons -->
<div class="navigation-buttons">
<a href="{% url 'table_one' %}" class="nav-button">
Go to Helium Input
</a>
<a href="{% url 'table_two' %}">
<button class="add-row-btn">Go to Table output</button>
<a href="{% url 'table_two' %}" class="nav-button">
Go to Helium Output
</a>
</div>
</div>
<style>
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.year-filter {
margin: 20px 0;
text-align: right;
}
.year-filter label {
margin-right: 10px;
}
.year-filter select {
padding: 5px;
border-radius: 4px;
border: 1px solid #ddd;
}
<script>
let currentModelName = "Client";
.summary-table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}
.summary-table th, .summary-table td {
padding: 10px;
text-align: center;
border: 1px solid #ddd;
}
.summary-table th {
background-color: #007bff;
color: white;
}
.summary-table tr:nth-child(even) {
background-color: #f9f9f9;
}
.summary-table tr:hover {
background-color: #f1f1f1;
}
.total {
font-weight: bold;
background-color: #e6f2ff;
}
// Open Add Popup
$('#add-client').on('click', function () {
$('#add-popup').fadeIn();
});
// Close Popups
$('.close-btn').on('click', function () {
$('.popup').fadeOut();
});
// Save Add Client
$('#save-add').on('click', function () {
let name = $('#add-name').val();
let address = $('#add-address').val();
$.ajax({
url: `/add-entry/Client/`,
method: 'POST',
data: {
'name': name,
'address': address,
'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.address}</td>
<td class="actions">
<button class="edit-btn">Edit</button>
<button class="delete-btn">Delete</button>
</td>
</tr>
`;
$('tbody').append(newRow);
$('#add-popup').fadeOut();
},
error: function (xhr) {
alert('Failed to add client: ' + xhr.responseText);
}
});
});
// Open Edit Popup
$(document).on('click', '.edit-btn', function () {
let row = $(this).closest('tr');
$('#edit-id').val(row.data('id'));
$('#edit-name').val(row.find('td:eq(2)').text()); // Name
$('#edit-address').val(row.find('td:eq(3)').text()); // Address
$('#edit-popup').fadeIn();
});
// Save Edit Client
$('#save-edit').on('click', function () {
let id = $('#edit-id').val();
let name = $('#edit-name').val();
let address = $('#edit-address').val();
$.ajax({
url: `/update-entry/${currentModelName}/`,
method: 'POST',
data: {
'id': id,
'name': name,
'address': address,
'age': 0,
'email': 'none@example.com',
'csrfmiddlewaretoken': '{{ csrf_token }}'
},
success: function (response) {
if (response.status === 'success') {
let row = $(`tr[data-id="${id}"]`);
row.find('td:eq(2)').text(name); // Correct column for Name
row.find('td:eq(3)').text(address); // Correct column for Address
$('#edit-popup').fadeOut();
}
}
});
});
// Delete Client
$(document).on('click', '.delete-btn', function () {
let row = $(this).closest('tr');
let id = row.data('id');
if (!confirm('Are you sure you want to delete this client?')) 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('Delete failed: ' + response.message);
}
},
error: function (xhr, status, error) {
alert('Delete request failed:\n' + xhr.responseText);
console.log('Error:', error);
console.log('Status:', status);
}
});
});
</script>
</body>
</html>
.navigation-buttons {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 30px;
}
.nav-button {
padding: 12px 24px;
background-color: #007bff;
color: white;
text-decoration: none;
border-radius: 4px;
transition: background-color 0.3s;
}
.nav-button:hover {
background-color: #0056b3;
}
</style>
{% endblock %}