90 lines
3.4 KiB
JavaScript
90 lines
3.4 KiB
JavaScript
document.addEventListener(
|
|
'DOMContentLoaded', function () {
|
|
const addBillForm = document.getElementById('addBillForm');
|
|
if (addBillForm) {
|
|
addBillForm.addEventListener(
|
|
'submit', function (e) {
|
|
e.preventDefault();
|
|
const formData = new FormData(this);
|
|
axios.post('/api/add-bill', formData)
|
|
.then(
|
|
function (response) {
|
|
console.log('Bill added successfully');
|
|
loadBills();
|
|
}
|
|
)
|
|
.catch(
|
|
function (error) {
|
|
console.error('Error adding bill:', error);
|
|
}
|
|
);
|
|
}
|
|
);
|
|
}
|
|
|
|
// Load bills if on the dashboard page
|
|
if (document.getElementById('billsTable')) {
|
|
loadBills();
|
|
}
|
|
|
|
// Event delegation for dynamically added "Mark as Paid" buttons
|
|
document.addEventListener(
|
|
'click', function (e) {
|
|
if (e.target && e.target.matches('.mark-bill-paid-btn')) {
|
|
const billId = e.target.getAttribute('data-bill-id');
|
|
axios.post('/api/mark-bill-paid', { id: billId })
|
|
.then(
|
|
function (response) {
|
|
console.log('Bill marked as paid successfully');
|
|
loadBills();
|
|
}
|
|
)
|
|
.catch(
|
|
function (error) {
|
|
console.error('Error marking bill as paid:', error);
|
|
}
|
|
);
|
|
}
|
|
}
|
|
);
|
|
}
|
|
);
|
|
|
|
function loadBills()
|
|
{
|
|
const billsTableBody = document.querySelector('#billsTable tbody');
|
|
billsTableBody.innerHTML = '<tr><td colspan="4" class="text-center">Loading bills...</td></tr>';
|
|
|
|
axios.get('/api/bills')
|
|
.then(
|
|
function (response) {
|
|
const bills = response.data;
|
|
billsTableBody.innerHTML = '';
|
|
|
|
bills.forEach(
|
|
function (bill) {
|
|
const row = `
|
|
<tr>
|
|
<td>${bill.description}</td>
|
|
<td>$${parseFloat(bill.amount).toFixed(2)}</td>
|
|
<td>${bill.due_date}</td>
|
|
<td>
|
|
${bill.is_paid ? '' : '<button type="button" class="btn btn-success btn-sm mark-bill-paid-btn" data-bill-id="' + bill.id + '">Mark as Paid</button>'}
|
|
<button type="button" class="btn btn-primary btn-sm edit-bill-btn" data-bill-id="${bill.id}">Edit</button>
|
|
<button type="button" class="btn btn-danger btn-sm delete-bill-btn" data-bill-id="${bill.id}">Delete</button>
|
|
</td>
|
|
</tr>
|
|
`;
|
|
billsTableBody.innerHTML += row;
|
|
}
|
|
);
|
|
}
|
|
)
|
|
.catch(
|
|
function (error) {
|
|
console.error('Error loading bills:', error);
|
|
billsTableBody.innerHTML = '<tr><td colspan="4" class="text-center">Error loading bills.</td></tr>';
|
|
}
|
|
);
|
|
}
|