Merge pull request #24 from lumijiez/front-v2

Front v2

src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/Dashboard.svelte

@@ -4,11 +4,31 @@
 	import QuickInfobar from "./other/QuickInfobar.svelte";
     import { getCookie } from "svelte-cookie";
     import {onMount} from "svelte";
+    import {writable} from "svelte/store";
+    import axios from "axios";
 
-    onMount(() => {
+    const incomeData = writable([]);
+    const expenseData = writable([]);
+
+    onMount(async () => {
             if (getCookie('access_token') === null ) {
                     window.location.href = '/auth/login';
             }
+
+            try {
+                    const response = await axios.get('http://localhost:8081/incomes/personal-incomes', config);
+                    incomeData.set(response.data);
+            } catch (error) {
+                    console.error('Error fetching income data:', error);
+            }
+
+            try {
+                    const response = await axios.get('http://localhost:8081/expenses/personal-expenses', config);
+                    expenseData.set(response.data);
+            } catch (error) {
+                    console.error('Error fetching expense data:', error);
+            }
+
             console.log(getCookie('access_token'));
     })
 </script>

src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/graphs/Graph1.svelte

@@ -1,31 +1,35 @@
 <script>
 	import Chart from 'chart.js/auto';
 	import { onMount } from 'svelte';
-	import axios from 'axios';
+	import { incomeData } from '../Dashboard.svelte';
-	import {getCookie} from "svelte-cookie";
-
 	let ctx;
 	let chartCanvas;
 
-	onMount(async () => {
+	function groupAndSumByCategory(incomes) {
-
+		const groupedData = new Map();
-		const token = getCookie('access_token');
+		incomes.forEach(income => {
-
+			const category = income.incomeCategory.name;
-		const config = {
+			if (groupedData.has(category)) {
-			headers: {
+				groupedData.set(category, groupedData.get(category) + income.amount);
-				'Authorization': `Bearer ${token}`
+			} else {
+				groupedData.set(category, income.amount);
+			}
+		});
+		return groupedData;
 	}
-		};
 
-		try {
+	function updateGraph() {
-			const response = await axios.get('http://localhost:8081/incomes/personal-incomes', config);
+		const incomeDataArray = $incomeData;
-			console.log(response.data);
+		const groupedIncomeData = groupAndSumByCategory(incomeDataArray);
-			const incomeData = response.data;
 
-			const chartLabels = incomeData.map(item => item.incomeCategory.name);
+		const chartLabels = Array.from(groupedIncomeData.keys());
-			const chartValues = incomeData.map(item => item.amount);
+		const chartValues = Array.from(groupedIncomeData.values());
 
+		if (chartCanvas) {
 			ctx = chartCanvas.getContext('2d');
+			if (ctx.chart) {
+				ctx.chart.destroy(); 
+			}
 			new Chart(ctx, {
 				type: 'bar',
 				data: {
@@ -41,16 +45,18 @@
 					maintainAspectRatio: false
 				}
 			});
-		} catch (error) {
-			console.error('Error:', error);
 		}
-	});
+	}
+
+	onMount(updateGraph);
 </script>
 
 <div id="chart">
 	<canvas bind:this={chartCanvas}></canvas>
 </div>
 
+
+
 <style>
 	#chart {
 		box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/graphs/Graph2.svelte

@@ -7,8 +7,7 @@
 	let ctx;
 	let chartCanvas;
 
-	onMount(async () => {
+	async function updateGraph() {
-
 		const token = getCookie('access_token');
 
 		const config = {
@@ -65,7 +64,9 @@
 		} catch (error) {
 			console.error('Error:', error);
 		}
-	});
+	}
+
+	onMount(updateGraph);
 </script>
 
 <div id="chart">

src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/graphs/Graph3.svelte

@@ -7,7 +7,7 @@
 	let ctx;
 	let chartCanvas;
 
-	onMount(async () => {
+	async function updateGraph() {
 		const token = getCookie('access_token');
 
 		const config = {
@@ -50,7 +50,9 @@
 		} catch (error) {
 			console.error('Error:', error);
 		}
-	});
+	}
+
+	onMount(updateGraph);
 </script>
 
 <div id="chart">

src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/Expenses.svelte

@@ -8,7 +8,7 @@
     let parentHeight;
     let listParentHeight;
 
-    onMount(async () => {
+    async function updateInfo() {
         const token = getCookie('access_token');
 
         const config = {
@@ -24,7 +24,8 @@
         } catch (error) {
             console.error('Error:', error);
         }
-    });
+    }
+    onMount(updateInfo);
 
     afterUpdate(() => {
         parentHeight = document.querySelector('#expenseInfo').offsetHeight;

src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/Incomes.svelte

@@ -9,7 +9,7 @@
     let parentHeight;
     let listParentHeight;
 
-    onMount(async () => {
+    async function updateInfo() {
         const token = getCookie('access_token');
 
         const config = {
@@ -25,7 +25,8 @@
         } catch (error) {
             console.error('Error:', error);
         }
-    });
+    }
+    onMount(updateInfo);
 
     afterUpdate(() => {
         parentHeight = document.querySelector('#incomeInfo').offsetHeight;

src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/contents/ContentExpense.svelte

@@ -1,64 +1,171 @@
 <script>
-    import Modal from '../modals/Modal.svelte'
+    import Modal from '../modals/Modal.svelte';
+    import { onMount } from 'svelte';
+    import { writable } from 'svelte/store';
+    import axios from 'axios';
+    import { getCookie } from "svelte-cookie";
+
     let showModal;
+    let amount = '';
+
+    const selectedExpenseId = writable('');
+
+    onMount(async () => {
+        try {
+            const token = getCookie('access_token');
+
+            const config = {
+                headers: {
+                    'Authorization': `Bearer ${token}`
+                }
+            };
+
+            const response = await axios.get('http://localhost:8081/expenses/categories', config);
+            expenseOptions.set(response.data);
+            console.log(response.data);
+        } catch (error) {
+            console.error('Error:', error);
+        }
+    });
+
+    const expenseOptions = writable([]);
+
+    const createExpense = async () => {
+        const selectedExpense = $expenseOptions.find(expense => expense.id === $selectedExpenseId);
+        const data = {
+            expenseCategory: selectedExpense.id,
+            amount: amount,
+        };
+
+        try {
+            const token = getCookie('access_token');
+            console.log(token);
+            const response = await axios.post('http://localhost:8081/expenses', data, {
+                headers: {
+                    'Authorization': `Bearer ${token}`,
+                    'Content-Type': 'application/json',
+                },
+            });
+
+            console.log(response.data);
+
+            if (response.status === 200) {
+                console.log("cool");
+            } else {
+                console.error('Error:', response.status);
+            }
+        } catch (error) {
+            console.error('Error:', error);
+        }
+    };
 </script>
 
 <div id="exp">
+    <div id="optionField">
         <h2>Expenses</h2>
         <div id="openModal" class="plus-button" role="button" tabindex="1" on:click={() => (showModal = true)} on:keydown={() => console.log("keydown")}>
             +
         </div>
+    </div>
     <Modal bind:showModal>
-        <h2 slot="header">
+        <div class="expense-form">
-            modal
+            <h3>Expense Details</h3>
-            <small><em>adjective</em> mod·al \ˈmō-dəl\</small>
+            <div class="form-group">
-        </h2>
+                <label for="amount">Amount:</label>
+                <input type="text" id="amount" class="form-control" bind:value={amount} />
+            </div>
 
-        <ol class="definition-list">
+            <div class="form-group">
-            <li>of or relating to modality in logic</li>
+                <label for="expenseCategory">Select Expense Category:</label>
-            <li>
+                <select id="expenseCategory" class="form-control" bind:value={$selectedExpenseId}>
-                containing provisions as to the mode of procedure or the manner of taking effect —used of a
+                    {#each $expenseOptions as expense (expense.id)}
-                contract or legacy
+                        {#if expense.id !== undefined}
-            </li>
+                            <option value={expense.id}>{expense.name}</option>
-            <li>of or relating to a musical mode</li>
+                        {/if}
-            <li>of or relating to structure as opposed to substance</li>
+                    {/each}
-            <li>
+                </select>
-                of, relating to, or constituting a grammatical form or category characteristically indicating
+            </div>
-                predication
-            </li>
-            <li>of or relating to a statistical mode</li>
-        </ol>
 
-        <a href="https://www.merriam-webster.com/dictionary/modal">merriam-webster.com</a>
+            <button class="btn btn-primary" on:click={createExpense}>Submit</button>
+        </div>
     </Modal>
 </div>
 
+
 <style>
     #exp {
-        padding-left: 20px;
+        padding: 20px;
-        padding-right: 20px;
+        text-align: center;
+    }
+
+    #optionField {
         display: flex;
         align-items: center;
         justify-content: space-between;
     }
 
     .plus-button {
-        font-size: xx-large;
+        font-size: 24px;
-        background: none;
+        background-color: #007BFF;
+        color: #fff;
+        border: none;
+        border-radius: 50%;
+        width: 40px;
+        height: 40px;
+        line-height: 40px;
         cursor: pointer;
-        border-radius: 10px;
-        transition: background 0.3s ease;
     }
 
     .plus-button:hover {
-        background: rgba(128, 128, 128, 0.5);
+        background-color: #0056b3;
     }
 
-    #openModal {
+    .expense-form {
-        top: 0;
+        background-color: #fff;
-        background-color: #f2f2f2;
+        border: 1px solid #ccc;
-        border-radius: 10px 10px 0 0;
+        border-radius: 5px;
-        z-index: 1;
+        padding: 20px;
-        margin: 0;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        max-width: 400px;
+        margin: 0 auto;
+    }
+
+    h3 {
+        font-size: 20px;
+        margin-bottom: 20px;
+    }
+
+    .form-group {
+        margin-bottom: 15px;
+    }
+
+    label {
+        display: block;
+        font-weight: bold;
+        margin-bottom: 5px;
+    }
+
+    .form-control {
+        width: 100%;
+        padding: 10px;
+        border: 1px solid #ccc;
+        border-radius: 5px;
+    }
+
+    select.form-control {
+        height: 40px;
+    }
+
+    .btn {
+        background-color: #007BFF;
+        color: #fff;
+        border: none;
+        border-radius: 5px;
+        padding: 10px 20px;
+        cursor: pointer;
+    }
+
+    .btn:hover {
+        background-color: #0056b3;
     }
 </style>

src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/contents/ContentIncome.svelte

@@ -6,7 +6,7 @@
     import { getCookie } from "svelte-cookie";
 
     let showModal;
-    let amount;
+    let amount = '';
 
     const selectedIncomeId = writable('');
 
@@ -34,7 +34,7 @@
         const selectedIncome = $incomeOptions.find(income => income.id === $selectedIncomeId);
         const data = {
             incomeCategory: selectedIncome.id,
-            amount: $amount,
+            amount: amount,
         };
 
         try {
@@ -61,55 +61,111 @@
 </script>
 
 <div id="inc">
+    <div id="optionField">
         <h2>Incomes</h2>
-    <div id="openModal" class="plus-button" role="button" tabindex="0" on:click={() => (showModal = true)} on:keydown={() => console.log("keydown")}>
+        <div id="openModal" class="plus-button" role="button" tabindex="1" on:click={() => (showModal = true)} on:keydown={() => console.log("keydown")}>
             +
         </div>
+    </div>
     <Modal bind:showModal>
-        <div>
+        <div class="income-form">
+            <h3>Income Details</h3>
+            <div class="form-group">
                 <label for="amount">Amount:</label>
-            <input type="text" id="amount" bind:value={amount} />
+                <input type="text" id="amount" class="form-control" bind:value={amount} />
+            </div>
 
-            <label for="income">Select Income:</label>
+            <div class="form-group">
-            <select id="income" bind:value={$selectedIncomeId}>
+                <label for="incomeCategory">Select Income Category:</label>
+                <select id="incomeCategory" class="form-control" bind:value={$selectedIncomeId}>
                     {#each $incomeOptions as income (income.id)}
                         {#if income.id !== undefined}
                             <option value={income.id}>{income.name}</option>
                         {/if}
                     {/each}
                 </select>
+            </div>
 
-            <button on:click={createIncome}>Submit</button>
+            <button class="btn btn-primary" on:click={createIncome}>Submit</button>
         </div>
     </Modal>
 </div>
 
+
 <style>
     #inc {
-        padding-left: 20px;
+        padding: 20px;
-        padding-right: 20px;
+        text-align: center;
+    }
+
+    #optionField {
         display: flex;
         align-items: center;
         justify-content: space-between;
     }
 
     .plus-button {
-        font-size: xx-large;
+        font-size: 24px;
-        background: none;
+        background-color: #007BFF;
+        color: #fff;
+        border: none;
+        border-radius: 50%;
+        width: 40px;
+        height: 40px;
+        line-height: 40px;
         cursor: pointer;
-        border-radius: 10px;
-        transition: background 0.3s ease;
     }
 
     .plus-button:hover {
-        background: rgba(128, 128, 128, 0.5);
+        background-color: #0056b3;
     }
 
-    #openModal {
+    .income-form {
-        top: 0;
+        background-color: #fff;
-        background-color: #f2f2f2;
+        border: 1px solid #ccc;
-        border-radius: 10px 10px 0 0;
+        border-radius: 5px;
-        z-index: 1;
+        padding: 20px;
-        margin: 0;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        max-width: 400px;
+        margin: 0 auto;
+    }
+
+    h3 {
+        font-size: 20px;
+        margin-bottom: 20px;
+    }
+
+    .form-group {
+        margin-bottom: 15px;
+    }
+
+    label {
+        display: block;
+        font-weight: bold;
+        margin-bottom: 5px;
+    }
+
+    .form-control {
+        width: 100%;
+        padding: 10px;
+        border: 1px solid #ccc;
+        border-radius: 5px;
+    }
+
+    select.form-control {
+        height: 40px;
+    }
+
+    .btn {
+        background-color: #007BFF;
+        color: #fff;
+        border: none;
+        border-radius: 5px;
+        padding: 10px 20px;
+        cursor: pointer;
+    }
+
+    .btn:hover {
+        background-color: #0056b3;
     }
 </style>

src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/other/DataMenu.svelte

@@ -4,6 +4,14 @@
     import Graph3 from '../graphs/Graph3.svelte';
     import Expenses from "../infolists/Expenses.svelte";
     import Incomes from "../infolists/Incomes.svelte";
+
+    function updateAll() {
+        Graph1.updateGraph();
+        Graph2.updateGraph();
+        Graph3.updateGraph();
+        Expenses.updateInfo();
+        Incomes.updateInfo();
+    }
 </script>
 
 <div id="dataMenu">