diff --git a/AWS-APP/Dashboard/dashboard.html b/AWS-APP/Dashboard/dashboard.html index 6cd6a19..ee0b2dd 100644 --- a/AWS-APP/Dashboard/dashboard.html +++ b/AWS-APP/Dashboard/dashboard.html @@ -10,21 +10,23 @@
-

Welcome back,

- +

Welcome back,

+
- +

My Weekly Budget App

+
+ +
- +
@@ -59,7 +61,10 @@

Add an Expense

- + diff --git a/AWS-APP/Dashboard/scripts.js b/AWS-APP/Dashboard/scripts.js index 6b823ef..0f5f896 100644 --- a/AWS-APP/Dashboard/scripts.js +++ b/AWS-APP/Dashboard/scripts.js @@ -1,14 +1,37 @@ -let amountSpent =0; +let amountSpent = 0; let totalBudget = 0; + +const userPool = new AmazonCognitoIdentity.CognitoUserPool({ + UserPoolId: 'af-south-1_lURIH3IFw', + ClientId: '23hinerifjsno4tbq6bbrcencc', // Generated in the Cognito User Pool settings +}); + + +function logout() { + + const cognitoUser = userPool.getCurrentUser(); + // console.log(cognitoUser); + + if (cognitoUser != null) { + cognitoUser.signOut(); + alert("You have been logged out."); + window.location.href = '../index.html'; + // Redirect to login page or update UI + } + else { + alert("Error occured while logging you out."); + } +} + async function fetchData() { const requestBody = { username: sessionStorage.getItem('username') }; try { - const response = await fetch('https://94u93wm33m.execute-api.af-south-1.amazonaws.com/test/budget-app-get', { + const response = await fetch('https://j0hy1rsjrj.execute-api.af-south-1.amazonaws.com/test/budget-app-get', { method: 'POST', headers: { 'Content-Type': 'application/json' @@ -28,23 +51,83 @@ async function fetchData() { } } + + +async function sendTransactions(transactions) { + const email = 'mhbangie@gmail.com'; // Replace with the email you want to send to + + const lambdaEndpoint = 'https://j0hy1rsjrj.execute-api.af-south-1.amazonaws.com/test/lala'; // Replace with your Lambda endpoint + + console.log(JSON.stringify({ transactions, email })); + try { + const response = await fetch(lambdaEndpoint, { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify({ transactions, email }) + }); + + if (!response.ok) { + throw new Error('Network response was not ok'); + } + + const data = await response.json(); + console.log(data); + + } catch (error) { + console.error('There was an error sending the transactions:', error); + } +} + +// Add a button to your HTML with id 'send-transactions-btn' +// + +document.getElementById('email-btn').addEventListener('click', () => { + console.log('Collecting budget items data...'); + const budgetItems = document.getElementById('budget-items'); + // Initialize an array to hold the transactions + const transactions = []; + + // Iterate over each child div of budgetItems + budgetItems.querySelectorAll('div').forEach((div) => { + // Extract the text content of each div + const titleText = div.querySelector('strong:nth-of-type(1)').nextSibling.textContent.trim(); + const amountText = div.querySelector('strong:nth-of-type(2)').nextSibling.textContent.trim(); + const dateText = div.querySelector('strong:nth-of-type(3)').nextSibling.textContent.trim(); + + + // Add a transaction object to the transactions array + transactions.push({ + title: titleText, + amount: amountText, + date: dateText + }); + }); + + // console.log('Transactions:', transactions); + sendTransactions(transactions); + +}); + + async function postData(name, amount) { const now = new Date(); const year = now.getFullYear(); const month = String(now.getMonth() + 1).padStart(2, '0'); const day = String(now.getDate()).padStart(2, '0'); - + const formattedDate = `${year}${month}${day}`; - console.log(formattedDate,name, amount); + console.log(formattedDate, name, amount); const requestBody = { - "username": sessionStorage.getItem('username'), - "name": name, - "amount": amount.toString(), - "created_at": formattedDate + "username": sessionStorage.getItem('username'), + "name": name, + "amount": amount.toString(), + "created_at": formattedDate }; try { - const response = await fetch('https://94u93wm33m.execute-api.af-south-1.amazonaws.com/test/budgets-app-resource', { + const response = await fetch('https://j0hy1rsjrj.execute-api.af-south-1.amazonaws.com/test/budget-app-post', { method: 'POST', headers: { 'Content-Type': 'application/json' @@ -58,12 +141,37 @@ async function postData(name, amount) { const data = await response.json(); console.log(data); - + } catch (error) { console.error('There has been a problem with your fetch operation:', error); } } +function formatDate(dateString) { + // Create a date object from the input format 'YYYYMMDD' + const year = dateString.substring(0, 4); + const month = dateString.substring(4, 6); + const day = parseInt(dateString.substring(6, 8), 10); // Convert day to number to remove leading 0 + + // Define an array of month names + const months = ["January", "February", "March", "April", "May", "June", + "July", "August", "September", "October", "November", "December"]; + const monthIndex = parseInt(month, 10) - 1; // Convert month to number and get the index (0-based) + const monthName = months[monthIndex]; + + // Function to get ordinal indicator for a given day + function getOrdinalIndicator(day) { + if (day > 3 && day < 21) return 'th'; + switch (day % 10) { + case 1: return "st"; + case 2: return "nd"; + case 3: return "rd"; + default: return "th"; + } + } + // Combine the parts to create the final string + return `${day}${getOrdinalIndicator(day)} ${monthName} ${year}`; +} function displayIds(items, count) { const responseArea = document.getElementById('budget-items'); @@ -71,29 +179,36 @@ function displayIds(items, count) { if (count === 0) { document.getElementById('budget-items').style.display = 'none'; + + document.getElementById('email-btn-container').style.display = 'none'; + } else { document.getElementById('budget-items').style.display = 'block'; - + document.getElementById('email-btn-container').style.display = 'flex'; + + + + // Reset amountSpent to 0 before calculating the total from fetched items amountSpent = 0; items.forEach(item => { // Create a new div element const div = document.createElement('div'); - + // Set the content of the div - div.innerHTML = `Title: ${item.name.S}
Amount: ${item.amount.N}`; + div.innerHTML = `Title: ${item.name.S}
Amount: R${item.amount.N}
Date: ${formatDate(item.created_at.S)}`; // Add the item's amount to the total amountSpent amountSpent += parseFloat(item.amount.N); - + // Apply styles to the div div.style.padding = '20px'; div.style.borderRadius = '5px'; div.style.marginTop = '10px'; div.style.marginBottom = '10px'; div.style.backgroundColor = '#ccc'; - + // Append the div to the responseArea responseArea.appendChild(div); }); @@ -123,7 +238,7 @@ function capitalizeFirstLetter(string) { return string.charAt(0).toUpperCase() + string.slice(1); } -document.addEventListener('DOMContentLoaded', function() { +document.addEventListener('DOMContentLoaded', function () { if (!sessionStorage.getItem('username')) { @@ -134,32 +249,33 @@ document.addEventListener('DOMContentLoaded', function() { document.getElementById('username').textContent = sessionStorage.getItem('username') || 'User'; - document.getElementById('set-budget-btn').addEventListener('click', function() { + document.getElementById('set-budget-btn').addEventListener('click', function () { const budget = prompt("What's your budget for this week?"); totalBudget = parseFloat(budget); - if (isNaN(totalBudget)) {alert('Please enter a valid number'); return;} + if (isNaN(totalBudget)) { alert('Please enter a valid number'); return; } document.getElementById('total-budget').textContent = totalBudget.toFixed(2); if (totalBudget) { document.getElementById('set-budget-btn').style.display = 'none'; fetchData(); - updateBudgetDisplay();} - + updateBudgetDisplay(); + } + }); - document.getElementById('add-expense-btn').addEventListener('click', function() { + document.getElementById('add-expense-btn').addEventListener('click', function () { const name = capitalizeFirstLetter(document.getElementById('expense-name').value); const amount = parseFloat(document.getElementById('expense-amount').value); - if (totalBudget===0) {alert('Please set a budget first'); return;} - else if (name && amount ) { + if (totalBudget === 0) { alert('Please set a budget first'); return; } + else if (name && amount) { amountSpent += amount; const div = document.createElement('div'); - + // Set the content of the div div.innerHTML = `Title: ${name}
Amount: ${amount}`; // Add the item's amount to the total amountSpent // amountSpent += parseFloat(item.amount); - + // Apply styles to the div div.style.padding = '20px'; div.style.borderRadius = '5px'; diff --git a/AWS-APP/Dashboard/styles.css b/AWS-APP/Dashboard/styles.css index 2dfc886..f612f7c 100644 --- a/AWS-APP/Dashboard/styles.css +++ b/AWS-APP/Dashboard/styles.css @@ -116,7 +116,25 @@ s background-color: #5c94de; border-radius: 20px; } +#email-btn { + background: none; + border: none; + color: black; + cursor: pointer; + font-size: 16px; + } + +#email-btn:hover { + text-decoration: underline; + background: none; +} +#email-btn-container{ + display: none; + width: 100%; + justify-content: end; + align-items: center; +} #budget-amount, #amount-spent, #remaining-budget { font-weight: bold; } diff --git a/AWS-APP/Register/register.js b/AWS-APP/Register/register.js index 658507a..c01eb0a 100644 --- a/AWS-APP/Register/register.js +++ b/AWS-APP/Register/register.js @@ -8,7 +8,7 @@ const userPool = new AmazonCognitoIdentity.CognitoUserPool({ -function registerUser(name,email,phone_number, password) { +function registerUser(name, email, phone_number, password) { const attributeList = [ new AmazonCognitoIdentity.CognitoUserAttribute({ Name: 'email', @@ -16,7 +16,7 @@ function registerUser(name,email,phone_number, password) { }), new AmazonCognitoIdentity.CognitoUserAttribute({ Name: 'phone_number', - Value: phone_number, + Value: phone_number, }), ]; @@ -34,13 +34,13 @@ function registerUser(name,email,phone_number, password) { } -document.getElementById('signup-form').addEventListener('submit', function(event){ +document.getElementById('signup-form').addEventListener('submit', function (event) { event.preventDefault(); const email = document.getElementById('signup-email').value; const password = document.getElementById('signup-password').value; const name = document.getElementById('signup-name').value; const phone_number = document.getElementById('signup-phone-number').value; - registerUser(name,email, phone_number, password); + registerUser(name, email, phone_number, password); // window.location.href = 'login.html'; }); diff --git a/AWS-APP/Register/signup.html b/AWS-APP/Register/signup.html index 56ce673..c83f1fe 100644 --- a/AWS-APP/Register/signup.html +++ b/AWS-APP/Register/signup.html @@ -1,31 +1,49 @@ - - - + + + -Signup - - - + Signup + + +
-
-

Sign Up

-
- - - - -
+ +

Sign Up

+
+ + + + +
- -

- Already have an account? - -

-
+ +

+ Already have an account? + +

+
- - - + + + diff --git a/AWS-APP/Verification/verify.html b/AWS-APP/Verification/verify.html index ab68bb4..b12895a 100644 --- a/AWS-APP/Verification/verify.html +++ b/AWS-APP/Verification/verify.html @@ -1,21 +1,23 @@ - - - + + + Verify OTP - - - + + +
-
-

OTP Verification

- - - -
+
+

OTP Verification

+ + +
- + - + diff --git a/AWS-APP/Verification/verify.js b/AWS-APP/Verification/verify.js index 7b0ed22..e410353 100644 --- a/AWS-APP/Verification/verify.js +++ b/AWS-APP/Verification/verify.js @@ -4,13 +4,13 @@ const userPool = new AmazonCognitoIdentity.CognitoUserPool({ ClientId: '23hinerifjsno4tbq6bbrcencc', // Generated in the Cognito User Pool settings }); -document.addEventListener('DOMContentLoaded', function() { +document.addEventListener('DOMContentLoaded', function () { if (!sessionStorage.getItem('username')) { window.location.href = '../index.html'; } }) -document.getElementById('otp-form').addEventListener('submit', function(event){ +document.getElementById('otp-form').addEventListener('submit', function (event) { event.preventDefault(); const otpCode = document.getElementById('otp-code').value; verifyUser(otpCode); @@ -34,7 +34,7 @@ function verifyUser(otpCode) { Pool: userPool, }); - user.confirmRegistration(otpCode, true, function(err, result) { + user.confirmRegistration(otpCode, true, function (err, result) { if (err) { console.error(err); return; diff --git a/AWS-APP/index.html b/AWS-APP/index.html index b6a1608..451992b 100644 --- a/AWS-APP/index.html +++ b/AWS-APP/index.html @@ -10,8 +10,13 @@
-

Login

- +

Logins

+ Login

Don't have an account? - +

- + diff --git a/AWS-APP/scripts.js b/AWS-APP/scripts.js index d6dca46..4ef5c5c 100644 --- a/AWS-APP/scripts.js +++ b/AWS-APP/scripts.js @@ -19,13 +19,13 @@ function loginUser(name, password) { }); cognitoUser.authenticateUser(authenticationDetails, { - onSuccess: function(result) { + onSuccess: function (result) { console.log('User login successful:', result); sessionStorage.setItem('username', name); window.location.href = '../Dashboard/dashboard.html'; }, - onFailure: function(err) { + onFailure: function (err) { console.error('User login failed:', err); alert(err.message || JSON.stringify(err)); }, @@ -33,7 +33,7 @@ function loginUser(name, password) { } -document.getElementById('login-form').addEventListener('submit', function(event){ +document.getElementById('login-form').addEventListener('submit', function (event) { event.preventDefault(); // Here you would validate the user's credentials // For demonstration, we'll just redirect diff --git a/AWS-APP/utils/script.js b/AWS-APP/utils/script.js deleted file mode 100644 index e69de29..0000000 diff --git a/AWS-APP/viewExpenses/view-expenses.html b/AWS-APP/viewExpenses/view-expenses.html deleted file mode 100644 index 7142cdd..0000000 --- a/AWS-APP/viewExpenses/view-expenses.html +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - Dashboard - My Weekly Budget App - - - - - - -