first commit

huziibee · Jan 8, 2024 · ac01842 · ac01842
1 parent d883be0
commit ac01842
Show file tree

Hide file tree

Showing 3,775 changed files with 22,363 additions and 49,440 deletions.
diff --git a/AWS-APP/Dashboard/dashboard.html b/AWS-APP/Dashboard/dashboard.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Dashboard - My Weekly Budget App</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/aws-sdk/2.1030.0/aws-sdk.min.js"></script>
+
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <header class="navigation-header">
+        <h1 class="welcome-message">Welcome back, <span id="username"></span></h1>
+        <nav class="navbar">
+            <a href="dashboard.html">Home</a>
+            <a href="../viewExpenses/view-expenses.html">View Expenses</a>
+            <button class="formbtn" id="logout-btn">Logout</button>
+        </nav>
+    </header>
+
+    <div class="horizontal_display">
+      <div class="dashboard-header">
+        <h2>My Weekly Budget App</h2>
+        <button class="formbtn" id="set-budget-btn">Set Weekly Budget</button>
+
+        <ul id="budget-items">
+        </ul>
+      </div>
+
+      <section class="dashboard-main">
+        <div class="budget-display">
+          <h2>Budget Overview</h2>
+          <p id="budget-amount">
+            Total Budget: R<span id="total-budget">0</span>
+          </p>
+          <p id="amount-spent">
+            Spent So Far: R<span id="spent-amount">0</span>
+          </p>
+          <p id="remaining-budget">
+            Remaining: R<span id="remaining-amount">0</span>
+          </p>
+        </div>
+
+        <div class="expense-tracker">
+          <h2>Add an Expense</h2>
+          <input
+            type="text"
+            id="expense-name"
+            placeholder="Title (eg. Transport)"
+            required
+          />
+          <input
+            type="number"
+            id="expense-amount"
+            placeholder="Amount"
+            required
+          />
+          <button class="formbtn" id="add-expense-btn">Add Expense</button>
+        </div>
+      </section>
+    </div>
+    <script src="https://sdk.amazonaws.com/js/aws-sdk-2.814.0.min.js"></script>
+    <script src="scripts.js"></script>
+  </body>
+</html>
diff --git a/AWS-APP/Dashboard/scripts.js b/AWS-APP/Dashboard/scripts.js
@@ -0,0 +1,193 @@
+
+let amountSpent =0;
+let totalBudget = 0;
+
+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', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify(requestBody)
+        });
+
+        if (!response.ok) {
+            throw new Error('Network response was not ok');
+        }
+
+        const data = await response.json();
+        console.log(data);
+        displayIds(data.Items, data.Count);
+    } catch (error) {
+        console.error('There has been a problem with your fetch operation:', error);
+    }
+}
+
+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);
+    const requestBody = {
+            "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', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify(requestBody)
+        });
+
+        if (!response.ok) {
+            throw new Error('Network response was not ok');
+        }
+
+        const data = await response.json();
+        console.log(data);
+
+    } catch (error) {
+        console.error('There has been a problem with your fetch operation:', error);
+    }
+}
+
+
+function displayIds(items, count) {
+    const responseArea = document.getElementById('budget-items');
+    responseArea.innerHTML = ''; // Clear previous results
+
+    if (count === 0) {
+        document.getElementById('budget-items').style.display = 'none';
+    } else {
+        document.getElementById('budget-items').style.display = 'block';
+
+        // 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 = `<strong>Title:</strong> ${item.name.S} <br> <strong>Amount:</strong> ${item.amount.N}`;
+
+            // 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);
+        });
+
+        // Update the displayed spent amount
+        document.getElementById('spent-amount').textContent = amountSpent.toFixed(2);
+        const remaining = totalBudget - amountSpent;
+        const remainingElement = document.getElementById('remaining-amount');
+        remainingElement.textContent = remaining.toFixed(2);
+
+        document.getElementById('spent-amount').textContent = amountSpent.toFixed(2);
+
+        if (amountSpent / totalBudget >= 0.75) {
+            remainingElement.classList.add('red');
+            remainingElement.classList.remove('orange');
+        } else if (amountSpent / totalBudget >= 0.50) {
+            remainingElement.classList.add('orange');
+            remainingElement.classList.remove('red');
+        } else {
+            remainingElement.classList.remove('red', 'orange');
+        }
+    }
+}
+
+function capitalizeFirstLetter(string) {
+    if (!string) return string; // Return the original string if it's empty
+    return string.charAt(0).toUpperCase() + string.slice(1);
+}
+
+document.addEventListener('DOMContentLoaded', function() {
+
+
+    if (!sessionStorage.getItem('username')) {
+        window.location.href = '../Login/index.html';
+    }
+
+
+
+    document.getElementById('username').textContent = sessionStorage.getItem('username') || 'User';
+
+    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;}
+        document.getElementById('total-budget').textContent = totalBudget.toFixed(2);
+        if (totalBudget) {
+            document.getElementById('set-budget-btn').style.display = 'none';
+            fetchData();
+            updateBudgetDisplay();}
+
+    });
+
+    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 ) {
+            amountSpent += amount;
+            const div = document.createElement('div');
+
+            // Set the content of the div
+            div.innerHTML = `<strong>Title:</strong> ${name} <br> <strong>Amount:</strong> ${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';
+            div.style.marginTop = '10px';
+            div.style.marginBottom = '10px';
+            div.style.backgroundColor = '#ccc';
+
+            document.getElementById('budget-items').appendChild(div);
+            postData(name, amount);
+            updateBudgetDisplay();
+        }
+    });
+
+    function updateBudgetDisplay() {
+        const remaining = totalBudget - amountSpent;
+        const remainingElement = document.getElementById('remaining-amount');
+        remainingElement.textContent = remaining.toFixed(2);
+
+        document.getElementById('spent-amount').textContent = amountSpent.toFixed(2);
+
+        if (amountSpent / totalBudget >= 0.75) {
+            remainingElement.classList.add('red');
+            remainingElement.classList.remove('orange');
+        } else if (amountSpent / totalBudget >= 0.50) {
+            remainingElement.classList.add('orange');
+            remainingElement.classList.remove('red');
+        } else {
+            remainingElement.classList.remove('red', 'orange');
+        }
+    }
+});
diff --git a/AWS-APP/Dashboard/styles.css b/AWS-APP/Dashboard/styles.css
@@ -0,0 +1,130 @@
+
+
+body {
+    font-family: Arial, sans-serif;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+}
+
+#expense-name, #expense-amount {
+    width: 95%;
+    margin-bottom: 1rem;
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+}
+
+.horizontal_display{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+#username{
+    color: #5c94de;
+
+}
+
+#logout-btn {
+    width: 5rem;
+    margin: 0 1rem;
+}
+
+.navbar a {
+    text-decoration: none;
+    color: #000;
+    padding: 0.5rem 1rem;
+}
+
+.navbar a:hover {
+    text-decoration: underline;
+    text-decoration-color: #5c94de;
+}
+
+.dashboard-header {
+    padding-top: 50px; 
+}
+.formbtn {
+    width: 100%;
+    margin: 20px 0px 5px 0;
+    padding: 10px;
+    border: none;
+    background-color: #5c85d6;
+    color: white;
+    cursor: pointer;
+    border-radius: 5px;
+}
+
+
+button:hover {
+    background-color: #4d70b8;
+}
+
+.budget-display, .expense-tracker {
+    margin: 1rem;
+    margin-top: 3rem;
+
+    padding: 1rem;
+    background: #e3f2fd;
+    border: 1px solid #90caf9;
+    border-radius: 5px;
+}
+
+.dashboard-header{
+    margin-right: 10rem;
+    width: 25rem;
+}
+
+.dashboard-header h2{
+    text-align: center;
+}
+
+
+.navigation-header{
+    width: 95%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+#budget-items{
+    margin-top: 1.5rem;
+    display: none;
+    background-color: #f6f7f8;
+    padding: 1rem;
+    padding-top: 0;
+    border-radius: 20px 0 0 20px;
+    overflow-y: auto;
+    height: 18rem;
+}
+s
+#budget-items::-webkit-scrollbar {
+    width: 12px; /* width of the entire scrollbar */
+}
+
+#budget-items::-webkit-scrollbar-track {
+    background: #ccc;
+    border-radius: 20px;
+}
+
+#budget-items::-webkit-scrollbar-thumb {
+    background-color: #5c94de; 
+    border-radius: 20px;
+}
+
+#budget-amount, #amount-spent, #remaining-budget {
+    font-weight: bold;
+}
+
+.orange {
+    color: orange;
+}
+
+.red {
+    color: red;
+}