Paid
`;
- // Add amount input field for per-person payment mode
if (paymentMode === 'per-person' && !user.isYou) {
userHtml += `
@@ -1030,7 +1203,6 @@
userItem.innerHTML = userHtml;
userList.appendChild(userItem);
- // Add event listeners
if (!user.isYou) {
const checkbox = userItem.querySelector(`#is-paid-${index}`);
const removeBtn = userItem.querySelector('.btn-remove');
@@ -1038,7 +1210,6 @@
checkbox.addEventListener('change', () => togglePaid(index));
removeBtn.addEventListener('click', () => removeUser(index));
- // Add event listener for amount input if in per-person mode
if (paymentMode === 'per-person') {
const amountInput = userItem.querySelector(`#amount-${index}`);
amountInput.addEventListener('input', (e) => updateUserAmount(index, e.target.value));
@@ -1049,21 +1220,17 @@
totalUsersEl.textContent = users.length;
}
- // Calculate the price per person
function calculatePricePerPerson() {
const totalAmount = parseFloat(groupAmountInput.value) || 0;
const paymentMode = document.querySelector('input[name="payment-mode"]:checked').value;
- // Re-render users when payment mode changes to update the UI
renderUsers();
if (totalAmount > 0) {
if (paymentMode === 'split-equal') {
- // Split equally mode - calculate from per-person price input
const totalUsers = users.length;
const pricePerPerson = parseFloat(perPersonPriceInput.value) || (totalAmount / totalUsers);
- // Update the per person price input if it's empty or doesn't match the calculation
if (perPersonPriceInput.value === '' || Math.abs(pricePerPerson * totalUsers - totalAmount) > 0.01) {
perPersonPriceInput.value = (totalAmount / totalUsers).toFixed(2);
totalAutoCalculate.textContent = `Total: €${totalAmount.toFixed(2)} (${perPersonPriceInput.value} × ${totalUsers})`;
@@ -1071,7 +1238,6 @@
pricePerPersonEl.textContent = `€${pricePerPerson.toFixed(2)}`;
- // Update cost breakdown
costBreakdownEl.innerHTML = '';
users.forEach(user => {
const li = document.createElement('li');
@@ -1085,10 +1251,8 @@
costBreakdownEl.appendChild(li);
});
} else {
- // Custom per-person mode
pricePerPersonEl.textContent = `Varies (set individually)`;
- // Calculate total assigned amount
let assignedTotal = 0;
users.forEach(user => {
if (!user.isYou) {
@@ -1096,11 +1260,9 @@
}
});
- // Your amount is what's left
const yourAmount = Math.max(0, totalAmount - assignedTotal);
users[0].amount = yourAmount;
- // Update cost breakdown
costBreakdownEl.innerHTML = '';
users.forEach(user => {
const li = document.createElement('li');
@@ -1116,11 +1278,10 @@
}
} else {
pricePerPersonEl.textContent = '€0.00';
- costBreakdownEl.innerHTML = '
You: €0.00 (already paid)';
+ costBreakdownEl.innerHTML = 'You: €0.00';
}
}
- // Add new group payment with individual expenses
function addGroupPayment(e) {
e.preventDefault();
@@ -1142,7 +1303,6 @@
"Paid overall": paid
};
- // First create the group payment
fetchData(
`${apiUrl}/api/database/rows/table/682/?user_field_names=true`,
apiToken,
@@ -1154,18 +1314,15 @@
.then((response) => {
showAlert('Group payment added successfully!', 'success');
- // Get the new group payment ID
const newGroupPaymentId = response.id;
- // Create individual payments for each non-you user
let individualPromises = [];
if (paymentMode === 'split-equal') {
- // Split equally using the per person price
const pricePerPerson = parseFloat(perPersonPriceInput.value);
individualPromises = users
- .filter(user => !user.isYou) // Skip "You" since you already paid
+ .filter(user => !user.isYou)
.map(user => {
const individualData = {
"For": user.name,
@@ -1185,9 +1342,8 @@
);
});
} else {
- // Custom per-person payment
individualPromises = users
- .filter(user => !user.isYou && user.amount > 0) // Skip "You" and users with 0 amount
+ .filter(user => !user.isYou && user.amount > 0)
.map(user => {
const individualData = {
"For": user.name,
@@ -1208,26 +1364,22 @@
});
}
- // Wait for all individual payments to be created
return Promise.all(individualPromises);
})
.then(() => {
showAlert('All individual payments created!', 'success');
addGroupPaymentForm.reset();
- // Reset users to just "You"
users.length = 1;
users[0].amount = 0;
renderUsers();
calculatePricePerPerson();
- // Set payment mode back to split-equal
splitEqualRadio.checked = true;
perPersonContainer.style.display = 'flex';
perPersonPriceInput.value = '';
totalAutoCalculate.textContent = '';
- // Reload data
loadGroupPayments();
loadIndividualPayments();
})
@@ -1236,7 +1388,6 @@
});
}
- // Add new individual payment (original function)
function addIndividualPayment(e) {
e.preventDefault();
@@ -1272,7 +1423,6 @@
});
}
- // Delete a group payment
function deleteGroupPayment(id) {
if (confirm('Are you sure you want to delete this group payment?')) {
fetchData(
@@ -1285,7 +1435,7 @@
.then(() => {
showAlert('Group payment deleted successfully!', 'success');
loadGroupPayments();
- loadIndividualPayments(); // Reload individual payments as they might be linked
+ loadIndividualPayments();
})
.catch(error => {
showAlert(`Failed to delete group payment: ${error.message}`, 'danger');
@@ -1293,7 +1443,6 @@
}
}
- // Delete an individual payment
function deleteIndividualPayment(id) {
if (confirm('Are you sure you want to delete this individual payment?')) {
fetchData(
@@ -1313,7 +1462,6 @@
}
}
- // Toggle group payment paid status
function toggleGroupPaid(id, status) {
fetchData(
`${apiUrl}/api/database/rows/table/682/${id}/?user_field_names=true`,
@@ -1332,7 +1480,6 @@
});
}
- // Toggle individual payment paid status
function toggleIndividualPaid(id, status) {
fetchData(
`${apiUrl}/api/database/rows/table/684/${id}/?user_field_names=true`,
@@ -1351,26 +1498,28 @@
});
}
- // Update summary data
function updateSummary() {
- // Calculate totals
let totalGroup = 0;
let totalIndividual = 0;
+ let totalUnpaid = 0;
groupPayments.forEach(payment => {
totalGroup += parseFloat(payment.Money);
});
individualPayments.forEach(payment => {
- totalIndividual += parseFloat(payment.Money);
+ const amount = parseFloat(payment.Money);
+ totalIndividual += amount;
+
+ if (!payment.Paid) {
+ totalUnpaid += amount;
+ }
});
- // Update summary elements
totalGroupEl.textContent = `€${totalGroup.toFixed(2)}`;
totalIndividualEl.textContent = `€${totalIndividual.toFixed(2)}`;
- remainingEl.textContent = `€${(totalGroup - totalIndividual).toFixed(2)}`;
+ remainingEl.textContent = `€${totalUnpaid.toFixed(2)}`;
- // Generate summary per person
const personSummary = {};
individualPayments.forEach(payment => {
@@ -1390,7 +1539,6 @@
}
});
- // Render person summary
summaryList.innerHTML = '';
if (Object.keys(personSummary).length === 0) {
@@ -1416,7 +1564,6 @@
});
}
- // Show alert message
function showAlert(message, type) {
const alert = document.createElement('div');
alert.className = `alert alert-${type}`;
@@ -1429,7 +1576,6 @@
}, 5000);
}
- // Activate tab
function activateTab(tabId) {
tabs.forEach(tab => {
if (tab.getAttribute('data-tab') === tabId) {
@@ -1447,25 +1593,18 @@
}
});
- // Refresh data when switching to summary tab
if (tabId === 'summary') {
updateSummary();
}
}
- // Initialize the UI
function init() {
- // Initialize the user list
+ setInitialTheme();
renderUsers();
-
- // Initial payment mode setup
onPaymentModeChange();
-
- // Check for saved credentials
checkSavedCredentials();
}
- // Run initialization
init();