hpz937/billReminder
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

buidl out some basic functionality

Browse Source
This commit is contained in:
Brad Cimbura
2024-02-09 23:00:51 -06:00
parent d21d91b80e
commit e900175c4d
12 changed files with 288 additions and 216 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
public/assets/js/app.js
View File

@@ -1,5 +1,3 @@
// main.js
document.addEventListener('DOMContentLoaded', function() {
const addBillForm = document.getElementById('addBillForm');
if (addBillForm) {
@@ -8,37 +6,12 @@ document.addEventListener('DOMContentLoaded', function() {
const formData = new FormData(this);
axios.post('/api/add-bill', formData)
.then(function(response) {
// Handle success, e.g., close modal, refresh bill list
console.log('Bill added successfully');
loadBills(); // Reload the bills list
loadBills();
})
.catch(function(error) {
// Handle error, e.g., display error message
console.error('Error adding bill:', error);
});
document.querySelectorAll('.edit-bill-btn').forEach(button => {
button.addEventListener('click', function() {
const billId = this.getAttribute('data-bill-id');
// Fetch bill details and populate the form in the modal
// Then, handle the form submission similar to the add bill form
});
});
document.querySelectorAll('.delete-bill-btn').forEach(button => {
button.addEventListener('click', function() {
const billId = this.getAttribute('data-bill-id');
axios.post('/api/delete-bill', { id: billId })
.then(function(response) {
// Handle success
console.log('Bill deleted successfully');
loadBills(); // Reload the bills list
})
.catch(function(error) {
// Handle error
console.error('Error deleting bill:', error);
});
});
});
});
}
@@ -46,17 +19,31 @@ document.addEventListener('DOMContentLoaded', function() {
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>'; // Loading indicator
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 = ''; // Clear loading indicator
billsTableBody.innerHTML = '';
bills.forEach(function(bill) {
const row = `
@@ -65,7 +52,9 @@ function loadBills() {
<td>$${parseFloat(bill.amount).toFixed(2)}</td>
<td>${bill.due_date}</td>
<td>
<!-- Add action buttons here -->
${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>
`;
@@ -74,6 +63,6 @@ function loadBills() {
})
.catch(function(error) {
console.error('Error loading bills:', error);
billsTableBody.innerHTML = '<tr><td colspan="4" class="text-center">Error loading bills.</td></tr>'; // Error message
billsTableBody.innerHTML = '<tr><td colspan="4" class="text-center">Error loading bills.</td></tr>';
});
}