byte/expensetracker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'master' of https://github.com/lumijiez/ExpenseTrackerFAF

Browse Source
This commit is contained in:
mirrerror
2023-10-27 00:53:16 +03:00
parent 7bc9a460ed 801cf60db4
commit 9fe17438f7
17 changed files with 249 additions and 358 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/main/java/com/faf223/expensetrackerfaf/controller/ExpenseController.java
View File

@@ -25,7 +25,6 @@ import java.util.stream.Collectors;
@RestController @RestController
@RequestMapping("/expenses") @RequestMapping("/expenses")
@RequiredArgsConstructor @RequiredArgsConstructor
@CrossOrigin(origins = "http://localhost:5173")
public class ExpenseController { public class ExpenseController {
private final ExpenseService expenseService; private final ExpenseService expenseService;

1
src/main/java/com/faf223/expensetrackerfaf/controller/IncomeController.java
View File

@@ -25,7 +25,6 @@ import java.util.stream.Collectors;
@RestController @RestController
@RequestMapping("/incomes") @RequestMapping("/incomes")
@RequiredArgsConstructor @RequiredArgsConstructor
@CrossOrigin(origins = "http://localhost:5173")
public class IncomeController { public class IncomeController {
private final IncomeService incomeService; private final IncomeService incomeService;

1
src/main/java/com/faf223/expensetrackerfaf/controller/UserController.java
View File

@@ -19,7 +19,6 @@ import java.util.ArrayList;
@RestController @RestController
@RequestMapping("/users") @RequestMapping("/users")
@RequiredArgsConstructor @RequiredArgsConstructor
@CrossOrigin(origins = "http://localhost:5173")
public class UserController { public class UserController {
private final UserService userService; private final UserService userService;

27
src/main/java/com/faf223/expensetrackerfaf/web/src/routes/auth/login/LoginForm.svelte
View File

@@ -1,5 +1,4 @@
<script> <script>
import * as EmailValidator from 'email-validator';
import axios from "axios"; import axios from "axios";
import {onMount} from "svelte"; import {onMount} from "svelte";
import { getCookie, setCookie } from 'svelte-cookie'; import { getCookie, setCookie } from 'svelte-cookie';
@@ -9,19 +8,19 @@
let message = "" let message = ""
onMount(async () => { onMount(async () => {
console.log("Mounted");
const access_token = getCookie('access_token'); const access_token = getCookie('access_token');
const refresh_token = getCookie('refresh_token'); const refresh_token = getCookie('refresh_token');
if (access_token && refresh_token) { if (access_token && refresh_token) {
window.location.href = '/dashboard'; window.location.href = '/dashboard';
} }
}); });
async function submitForm(event) { async function submitForm(event) {
event.preventDefault(); event.preventDefault();
console.log("Tried to submit!");
console.log(username);
console.log(password);
try { try {
const response = await axios.post('http://localhost:8081/api/v1/auth/authenticate', { const response = await axios.post('http://localhost:8081/api/v1/auth/authenticate', {
email: username, email: username,
@@ -30,30 +29,14 @@
const { access_token, refresh_token } = response.data; const { access_token, refresh_token } = response.data;
// Save the tokens in cookies
setCookie('access_token', access_token); setCookie('access_token', access_token);
setCookie('refresh_token', refresh_token); setCookie('refresh_token', refresh_token);
console.log(access_token, refresh_token);
window.location.href = '/dashboard' window.location.href = '/dashboard'
} catch (error) { } catch (error) {
console.error('Login failed:', error); console.error('Login failed:', error);
} }
} }
// function validateEmail() {
// let valid = EmailValidator.validate(username);
// isErrorVisible = !valid;
// message = isErrorVisible ? "Invalid e-mail!" : "";
// return valid;
// }
//
// function validatePassword() {
// let valid = password.value !== '';
// isErrorVisible = !valid;
// message = isErrorVisible ? "Invalid password!" : "";
// return valid;
// }
</script> </script>
<div class="animated bounceInDown"> <div class="animated bounceInDown">

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

@@ -5,51 +5,40 @@
import { getCookie } from "svelte-cookie"; import { getCookie } from "svelte-cookie";
import {onMount} from "svelte"; import {onMount} from "svelte";
import {incomeData} from "../stores.js"; import {incomeData, expenseData, incomeTypes, expenseTypes} from "../stores.js";
import {expenseData} from "../stores.js";
import {incomeTypes} from "../stores.js";
import axios from "axios"; import axios from "axios";
onMount(() => { onMount(async () => {
if (getCookie('access_token') === null) { const token = getCookie('access_token');
if (token === '') {
window.location.href = '/auth/login'; window.location.href = '/auth/login';
console.log("no token"); return;
} }
const token = getCookie('access_token');
const config = { const config = {
headers: { headers: {
'Authorization': `Bearer ${token}` 'Authorization': `Bearer ${token}`
} }
}; };
const incomePromise = axios.get('http://localhost:8081/incomes/personal-incomes', config) try {
.then(response => { const [incomeResponse, expenseResponse, incomeTypesResponse, expenseTypesResponse] = await Promise.all([
incomeData.set(response.data); axios.get('http://localhost:8081/incomes/personal-incomes', config),
console.log("Received Income Data"); axios.get('http://localhost:8081/expenses/personal-expenses', config),
}) axios.get('http://localhost:8081/incomes/categories', config),
.catch(error => console.error('Error fetching income data:', error)); axios.get('http://localhost:8081/expenses/categories', config)
]);
const expensePromise = axios.get('http://localhost:8081/expenses/personal-expenses', config) incomeData.set(incomeResponse.data);
.then(response => { expenseData.set(expenseResponse.data);
expenseData.set(response.data); incomeTypes.set(incomeTypesResponse.data);
console.log("Received Expense Data"); expenseTypes.set(expenseTypesResponse.data);
}) } catch (error) {
.catch(error => console.error('Error fetching expense data:', error)); console.error('Error:', error);
}
const incomeTypesPromise = axios.get('http://localhost:8081/incomes/categories', config)
.then(response => {
incomeTypes.set(response.data);
console.log("Received Income Type Data");
})
.catch(error => console.error('Error:', error));
Promise.all([incomePromise, expensePromise, incomeTypesPromise])
.then(() => {
console.log(getCookie('access_token'));
});
}); });
</script> </script>

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

@@ -7,11 +7,9 @@
let chartCanvas; let chartCanvas;
let chart = null; let chart = null;
function createGraph(data) { function groupAndSumByCategory() {
try {
function groupAndSumByCategory(incomes) {
const groupedData = new Map(); const groupedData = new Map();
incomes.forEach(income => { $incomeData.forEach(income => {
const category = income.incomeCategory.name; const category = income.incomeCategory.name;
if (groupedData.has(category)) { if (groupedData.has(category)) {
groupedData.set(category, groupedData.get(category) + parseInt(income.amount)); groupedData.set(category, groupedData.get(category) + parseInt(income.amount));
@@ -23,7 +21,9 @@
return groupedData; return groupedData;
} }
const groupedIncomeData = groupAndSumByCategory(data); function createGraph() {
try {
const groupedIncomeData = groupAndSumByCategory();
const chartLabels = Array.from(groupedIncomeData.keys()); const chartLabels = Array.from(groupedIncomeData.keys());
const chartValues = Array.from(groupedIncomeData.values()); const chartValues = Array.from(groupedIncomeData.values());
@@ -37,7 +37,16 @@
labels: chartLabels, labels: chartLabels,
datasets: [{ datasets: [{
label: 'Revenue', label: 'Revenue',
backgroundColor: 'rgb(255, 99, 132)', backgroundColor:
['rgb(0, 0, 179)',
'rgb(0, 16, 217)',
'rgb(0, 32, 255)',
'rgb(0, 64, 255)',
'rgb(0, 96, 255)',
'rgb(0, 128, 255)',
'rgb(0, 159, 255)',
'rgb(0, 191, 255)',
'rgb(0, 255, 255)'],
data: chartValues data: chartValues
}] }]
}, },
@@ -49,7 +58,6 @@
} else { } else {
chart.data.labels = chartLabels; chart.data.labels = chartLabels;
chart.data.datasets[0].data = chartValues; chart.data.datasets[0].data = chartValues;
console.log(chart.data.datasets[0].data);
chart.update(); chart.update();
} }
} catch (error) { } catch (error) {
@@ -59,13 +67,12 @@
$: { $: {
if ($incomeData) { if ($incomeData) {
createGraph($incomeData); createGraph();
console.log($incomeData);
} }
} }
onMount(() => { onMount(() => {
createGraph($incomeData); createGraph();
}); });
</script> </script>

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

@@ -1,72 +1,76 @@
<script> <script>
import Chart from 'chart.js/auto'; import Chart from 'chart.js/auto';
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import axios from 'axios'; import { expenseData } from "../../stores.js";
import {getCookie} from "svelte-cookie";
let ctx; let ctx;
let chartCanvas; let chartCanvas;
let chart = null;
async function updateGraph() { function groupAndSumByCategory() {
const token = getCookie('access_token'); const groupedData = new Map();
console.log($expenseData)
const config = { $expenseData.forEach(expense => {
headers: { const category = expense.expenseCategory.name;
'Authorization': `Bearer ${token}` if (groupedData.has(category)) {
} groupedData.set(category, groupedData.get(category) + parseInt(expense.amount));
};
try {
const response = await axios.get('http://localhost:8081/expenses/personal-expenses', config);
const aggregatedData = {};
response.data.forEach(item => {
const category = item.expenseCategory.name;
const amount = item.amount;
if (aggregatedData[category]) {
aggregatedData[category] += amount;
} else { } else {
aggregatedData[category] = amount; groupedData.set(category, expense.amount);
}
}
);
return groupedData;
} }
});
const chartLabels = Object.keys(aggregatedData); function createGraph() {
const chartValues = Object.values(aggregatedData); try {
const groupedExpenseData = groupAndSumByCategory();
const chartLabels = Array.from(groupedExpenseData.keys());
const chartValues = Array.from(groupedExpenseData.values());
ctx = chartCanvas.getContext('2d'); ctx = chartCanvas.getContext('2d');
new Chart(ctx, {
if (!chart) {
chart = new Chart(ctx, {
type: 'bar', type: 'bar',
data: { data: {
labels: chartLabels, labels: chartLabels,
datasets: [{ datasets: [{
label: 'Revenue', label: 'Spendings',
backgroundColor: 'rgb(255, 99, 132)', backgroundColor: [
'rgb(107, 80, 107)',
'rgb(171, 61, 169)',
'rgb(222, 37, 218)',
'rgb(235, 68, 232)',
'rgb(255, 128, 255)'],
data: chartValues data: chartValues
}] }]
}, },
options: { options: {
responsive: true, responsive: true,
maintainAspectRatio: false, maintainAspectRatio: false
legend: {
display: false
},
tooltips: {
callbacks: {
label: (tooltipItem) => {
return tooltipItem.yLabel;
}
}
}
} }
}); });
} else {
chart.data.labels = chartLabels;
chart.data.datasets[0].data = chartValues;
chart.update();
}
} catch (error) { } catch (error) {
console.error('Error:', error); console.error('Error:', error);
} }
} }
onMount(updateGraph); $: {
if ($expenseData) {
createGraph();
}
}
onMount(() => {
createGraph();
});
</script> </script>
<div id="chart"> <div id="chart">

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

@@ -1,45 +1,32 @@
<script> <script>
import chartjs from 'chart.js/auto'; import Chart from 'chart.js/auto';
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import axios from 'axios'; import { incomeData, expenseData } from "../../stores.js";
import { getCookie } from "svelte-cookie";
let ctx; let ctx;
let chartCanvas; let chartCanvas;
let chart = null;
async function updateGraph() { function createGraph() {
const token = getCookie('access_token');
const config = {
headers: {
'Authorization': `Bearer ${token}`
}
};
try { try {
const [incomesResponse, expensesResponse] = await Promise.all([ const totalIncomes = $incomeData.reduce((total, item) => total + item.amount, 0);
axios.get('http://localhost:8081/incomes/personal-incomes', config), const totalExpenses = $expenseData.reduce((total, item) => total + item.amount, 0);
axios.get('http://localhost:8081/expenses/personal-expenses', config)
]);
const incomesData = incomesResponse.data;
const expensesData = expensesResponse.data;
const totalIncomes = incomesData.reduce((total, item) => total + item.amount, 0);
const totalExpenses = expensesData.reduce((total, item) => total + item.amount, 0);
const chartLabels = ['Incomes', 'Expenses']; const chartLabels = ['Incomes', 'Expenses'];
const chartValues = [totalIncomes, totalExpenses]; const chartValues = [totalIncomes, totalExpenses];
ctx = chartCanvas.getContext('2d'); ctx = chartCanvas.getContext('2d');
new chartjs(ctx, { if (!chart) {
chart = new Chart(ctx, {
type: 'pie', type: 'pie',
data: { data: {
labels: chartLabels, labels: chartLabels,
datasets: [{ datasets: [{
data: chartValues, data: chartValues,
backgroundColor: ['green', 'red'], backgroundColor: [
'rgb(243, 188, 0)',
'rgb(0, 117, 164)'
],
}] }]
}, },
options: { options: {
@@ -47,12 +34,30 @@
maintainAspectRatio: false maintainAspectRatio: false
} }
}); });
} else {
const totalIncomesUpd = $incomeData.reduce((total, item) => total + parseInt(item.amount), 0);
const totalExpensesUpd = $expenseData.reduce((total, item) => total + parseInt(item.amount), 0);
const chartLabels = ['Incomes', 'Expenses'];
const chartValues = [totalIncomesUpd, totalExpensesUpd];
chart.data.labels = chartLabels;
chart.data.datasets[0].data = chartValues;
chart.update();
}
} catch (error) { } catch (error) {
console.error('Error:', error); console.error('Error:', error);
} }
} }
onMount(updateGraph); $: {
if ($incomeData || $expenseData) {
createGraph();
}
}
onMount(() => {
createGraph();
});
</script> </script>
<div id="chart"> <div id="chart">

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

@@ -1,36 +1,18 @@
<script> <script>
import { onMount, afterUpdate } from 'svelte'; import { onMount, afterUpdate } from 'svelte';
import axios from 'axios';
import { getCookie } from "svelte-cookie";
import ContentExpense from "./contents/ContentExpense.svelte"; import ContentExpense from "./contents/ContentExpense.svelte";
import {expenseData} from "../../stores.js";
let data = [];
let parentHeight; let parentHeight;
let listParentHeight; let listParentHeight;
async function updateInfo() { async function updateInfo() {
const token = getCookie('access_token');
const config = {
headers: {
'Authorization': `Bearer ${token}`
}
};
try {
const response = await axios.get('http://localhost:8081/expenses/personal-expenses', config);
data = response.data;
parentHeight = document.querySelector('#expenseInfo').offsetHeight;
} catch (error) {
console.error('Error:', error);
}
}
onMount(updateInfo);
afterUpdate(() => {
parentHeight = document.querySelector('#expenseInfo').offsetHeight; parentHeight = document.querySelector('#expenseInfo').offsetHeight;
listParentHeight = document.querySelector('#expenseList').offsetHeight; listParentHeight = document.querySelector('#expenseList').offsetHeight;
}); }
onMount(updateInfo);
afterUpdate(updateInfo);
</script> </script>
<div id="expenseInfo" style="max-height: {parentHeight}px;"> <div id="expenseInfo" style="max-height: {parentHeight}px;">
@@ -38,7 +20,7 @@
<div id="expenseList" style="max-height: {listParentHeight}px;"> <div id="expenseList" style="max-height: {listParentHeight}px;">
<ul> <ul>
{#each data as item} {#each $expenseData as item}
<li> <li>
{item.incomeCategory ? `${item.incomeCategory.name}: ` : `${item.expenseCategory.name}: `} {item.incomeCategory ? `${item.incomeCategory.name}: ` : `${item.expenseCategory.name}: `}
{item.incomeCategory ? `+${item.amount}$` : `-${item.amount}$`} {item.incomeCategory ? `+${item.amount}$` : `-${item.amount}$`}
@@ -54,6 +36,10 @@
#expenseInfo { #expenseInfo {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background-color: #212942;
color:white;
border-radius: 10px;
margin: 10px;
} }
#expenseList { #expenseList {
@@ -72,6 +58,7 @@
ul { ul {
list-style: none; list-style: none;
padding: 0; padding: 0;
color:black;
} }
li { li {

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

@@ -1,37 +1,18 @@
<script> <script>
import { onMount, afterUpdate } from 'svelte'; import { onMount, afterUpdate } from 'svelte';
import axios from 'axios'; import { incomeData } from "../../stores.js";
import {getCookie} from "svelte-cookie";
import ContentIncome from "./contents/ContentIncome.svelte"; import ContentIncome from "./contents/ContentIncome.svelte";
let data = [];
let parentHeight; let parentHeight;
let listParentHeight; let listParentHeight;
async function updateInfo() { async function updateInfo() {
const token = getCookie('access_token'); parentHeight = document.querySelector('#expenseInfo').offsetHeight;
const config = {
headers: {
'Authorization': `Bearer ${token}`
}
};
try {
const response = await axios.get('http://localhost:8081/incomes/personal-incomes', config);
data = response.data;
parentHeight = document.querySelector('#incomeInfo').offsetHeight;
} catch (error) {
console.error('Error:', error);
}
}
onMount(updateInfo);
afterUpdate(() => {
parentHeight = document.querySelector('#incomeInfo').offsetHeight;
listParentHeight = document.querySelector('#expenseList').offsetHeight; listParentHeight = document.querySelector('#expenseList').offsetHeight;
}); }
onMount(updateInfo);
afterUpdate(updateInfo);
</script> </script>
<div id="incomeInfo" style="max-height: {parentHeight}px;"> <div id="incomeInfo" style="max-height: {parentHeight}px;">
@@ -39,7 +20,7 @@
<div id="incomeList" style="max-height: {listParentHeight}px;"> <div id="incomeList" style="max-height: {listParentHeight}px;">
<ul> <ul>
{#each data as item} {#each $incomeData as item}
<li> <li>
{item.incomeCategory ? `${item.incomeCategory.name}: ` : `${item.expenseCategory.name}: `} {item.incomeCategory ? `${item.incomeCategory.name}: ` : `${item.expenseCategory.name}: `}
{item.incomeCategory ? `+${item.amount}$` : `-${item.amount}$`} {item.incomeCategory ? `+${item.amount}$` : `-${item.amount}$`}
@@ -54,6 +35,10 @@
#incomeInfo { #incomeInfo {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background-color: #212942;
color:white;
border-radius: 10px;
margin: 10px;
} }
#incomeList { #incomeList {
@@ -68,6 +53,7 @@
ul { ul {
list-style: none; list-style: none;
padding: 0; padding: 0;
color: black;
} }
li { li {

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

@@ -1,45 +1,55 @@
<script> <script>
import Modal from '../modals/Modal.svelte'; import Modal from '../modals/Modal.svelte';
import { onMount } from 'svelte';
import { writable } from 'svelte/store'; import { writable } from 'svelte/store';
import axios from 'axios'; import axios from 'axios';
import { getCookie } from "svelte-cookie"; import { getCookie } from "svelte-cookie";
import {expenseTypes, expenseData} from "../../../stores.js";
let showModal; let showModal;
let amount = ''; let amount = '';
let newData;
const selectedExpenseId = writable(''); const selectedExpenseId = writable('');
onMount(async () => { function addNewExpense(id, amount) {
try { const today = new Date().toISOString().split('T')[0];
const token = getCookie('access_token'); const expenseCategory = $expenseTypes.find(incomeType => incomeType.id === id);
const config = { console.log(amount);
headers: {
'Authorization': `Bearer ${token}` if (expenseCategory) {
} const newIncome = {
incomeId: 0,
userDTO: {
name: "Dummy",
surname: "User",
username: "dummyuser"
},
expenseCategory: expenseCategory,
date: today,
amount: amount
}; };
const response = await axios.get('http://localhost:8081/expenses/categories', config); newData = $expenseData;
expenseOptions.set(response.data); newData.push(newIncome);
console.log(response.data); $expenseData = newData;
} catch (error) { } else {
console.error('Error:', error); console.error('Expense category not found for id:', id);
}
} }
});
const expenseOptions = writable([]);
const createExpense = async () => { const createExpense = async () => {
const selectedExpense = $expenseOptions.find(expense => expense.id === $selectedExpenseId); const selectedExpense = $expenseTypes.find(expense => expense.id === $selectedExpenseId);
const data = { const data = {
expenseCategory: selectedExpense.id, expenseCategory: selectedExpense.id,
amount: amount, amount: amount,
}; };
addNewExpense(selectedExpense.id, amount);
try { try {
const token = getCookie('access_token'); const token = getCookie('access_token');
console.log(token);
const response = await axios.post('http://localhost:8081/expenses', data, { const response = await axios.post('http://localhost:8081/expenses', data, {
headers: { headers: {
'Authorization': `Bearer ${token}`, 'Authorization': `Bearer ${token}`,
@@ -47,10 +57,8 @@
}, },
}); });
console.log(response.data); if (response.status === 201) {
//console.log("cool");
if (response.status === 200) {
console.log("cool");
} else { } else {
console.error('Error:', response.status); console.error('Error:', response.status);
} }
@@ -78,7 +86,7 @@
<div class="form-group"> <div class="form-group">
<label for="expenseCategory">Select Expense Category:</label> <label for="expenseCategory">Select Expense Category:</label>
<select id="expenseCategory" class="form-control" bind:value={$selectedExpenseId}> <select id="expenseCategory" class="form-control" bind:value={$selectedExpenseId}>
{#each $expenseOptions as expense (expense.id)} {#each $expenseTypes as expense (expense.id)}
{#if expense.id !== undefined} {#if expense.id !== undefined}
<option value={expense.id}>{expense.name}</option> <option value={expense.id}>{expense.name}</option>
{/if} {/if}

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

@@ -1,11 +1,9 @@
<script> <script>
import Modal from '../modals/Modal.svelte'; import Modal from '../modals/Modal.svelte';
import { onMount } from 'svelte';
import { writable } from 'svelte/store'; import { writable } from 'svelte/store';
import axios from 'axios'; import axios from 'axios';
import { getCookie } from "svelte-cookie"; import { getCookie } from "svelte-cookie";
import {incomeData} from "../../../stores.js"; import {incomeData, incomeTypes} from "../../../stores.js";
import {incomeTypes} from "../../../stores.js";
let showModal; let showModal;
let amount = ''; let amount = '';
@@ -35,35 +33,13 @@
newData = $incomeData; newData = $incomeData;
newData.push(newIncome); newData.push(newIncome);
$incomeData = newData; $incomeData = newData;
console.log("ggWPPPPP", newIncome);
} else { } else {
console.error('Income category not found for id:', id); console.error('Income category not found for id:', id);
} }
} }
onMount(async () => {
try {
const token = getCookie('access_token');
const config = {
headers: {
'Authorization': `Bearer ${token}`
}
};
const response = await axios.get('http://localhost:8081/incomes/categories', config);
incomeOptions.set(response.data);
console.log(response.data);
} catch (error) {
console.error('Error:', error);
}
});
const incomeOptions = writable([]);
const createIncome = async () => { const createIncome = async () => {
const selectedIncome = $incomeOptions.find(income => income.id === $selectedIncomeId); const selectedIncome = $incomeTypes.find(income => income.id === $selectedIncomeId);
const data = { const data = {
incomeCategory: selectedIncome.id, incomeCategory: selectedIncome.id,
amount: amount, amount: amount,
@@ -73,7 +49,7 @@
try { try {
const token = getCookie('access_token'); const token = getCookie('access_token');
console.log(token);
const response = await axios.post('http://localhost:8081/incomes', data, { const response = await axios.post('http://localhost:8081/incomes', data, {
headers: { headers: {
'Authorization': `Bearer ${token}`, 'Authorization': `Bearer ${token}`,
@@ -81,8 +57,8 @@
}, },
}); });
if (response.status === 200) { if (response.status === 201) {
console.log("cool"); //console.log("cool");
} else { } else {
console.error('Error:', response.status); console.error('Error:', response.status);
} }
@@ -110,7 +86,7 @@
<div class="form-group"> <div class="form-group">
<label for="incomeCategory">Select Income Category:</label> <label for="incomeCategory">Select Income Category:</label>
<select id="incomeCategory" class="form-control" bind:value={$selectedIncomeId}> <select id="incomeCategory" class="form-control" bind:value={$selectedIncomeId}>
{#each $incomeOptions as income (income.id)} {#each $incomeTypes as income (income.id)}
{#if income.id !== undefined} {#if income.id !== undefined}
<option value={income.id}>{income.name}</option> <option value={income.id}>{income.name}</option>
{/if} {/if}

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

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

56
src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/other/QuickInfobar.svelte
View File

@@ -1,38 +1,39 @@
<script> <script>
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import axios from 'axios'; import { incomeData, expenseData } from "../../stores.js";
import { getCookie } from "svelte-cookie";
let infobar1, infobar2, infobar3, infobar4; let infobar1, infobar2, infobar3, infobar4;
let totalExpenses = 0; let totalExpenses = 0;
let totalIncomes = 0; let totalIncomes = 0;
let lastMonthIncome = 800; // Dummy last month's income
let lastMonthExpense = 200; // Dummy last month's expense
onMount(async () => { function updateInfo() {
const token = getCookie('access_token'); totalExpenses = $expenseData.reduce((total, item) => total + parseInt(item.amount), 0);
totalIncomes = $incomeData.reduce((total, item) => total + parseInt(item.amount), 0);
const config = { const incomeDifference = ((totalIncomes - lastMonthIncome) / lastMonthIncome) * 100;
headers: { const expenseDifference = ((lastMonthExpense - totalExpenses) / lastMonthExpense) * 100;
'Authorization': `Bearer ${token}`
}
};
try { try {
const [incomesResponse, expensesResponse] = await Promise.all([ infobar1.innerHTML = `<span style="font-size: larger">Total expenses:</span><br><span style="color:red;font-size: 150%">${totalExpenses.toFixed(2)}$</span>`;
axios.get('http://localhost:8081/incomes/personal-incomes', config), infobar2.innerHTML = `<span style="font-size: larger">Total incomes:</span><br><span style="color:green;font-size: 150%">${totalIncomes.toFixed(2)}$</span>`;
axios.get('http://localhost:8081/expenses/personal-expenses', config)
]);
const incomesData = incomesResponse.data; infobar3.innerHTML = `<span style="font-size: larger">Income by last month:</span><br><span style="color:blue;font-size: 150%">${incomeDifference.toFixed(2)}%</span>`;
const expensesData = expensesResponse.data; infobar4.innerHTML = `<span style="font-size: larger">Expense by last month:</span><br><span style="color:orange;font-size: 150%">${expenseDifference.toFixed(2)}%</span>`;
} catch {
totalExpenses = expensesData.reduce((total, item) => total + item.amount, 0); console.log("not yet loaded");
totalIncomes = incomesData.reduce((total, item) => total + item.amount, 0);
infobar1.innerHTML = `<span style="font-size: larger">Total expenses:</span><br><span style="color:red;font-size: xxx-large">${totalExpenses}$`;
infobar2.innerHTML = `<span style="font-size: larger">Total incomes:</span><br><span style="color:green;font-size: xxx-large">${totalIncomes}$</span>`;
} catch (error) {
console.error('Error:', error);
} }
}
$: {
if ($incomeData || $expenseData) {
updateInfo();
}
}
onMount(() => {
updateInfo();
}); });
</script> </script>
@@ -55,15 +56,16 @@
width: 200px; width: 200px;
min-width: 100px; min-width: 100px;
height: 100px; height: 100px;
color:white; color: white;
padding: 10px; padding: 10px;
border-radius: 10px; border-radius: 10px;
background-color: #212942; background-color: #212942;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
transition: all 0.3s cubic-bezier(.25,.8,.25,1); transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
overflow: hidden;
} }
.infobarElement:hover { .infobarElement:hover {
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
} }
</style> </style>

47
src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/menu/Navbar.svelte
View File

@@ -1,47 +0,0 @@
<script>
</script>
<div id="navbar">
<div id="profilePic">PROFILEPIC</div>
<div class="menuItem" on:click={() => console.log("help clicked")}>Help</div>
<div class="menuItem" on:click={() => console.log("contact clicked")}>Contact</div>
<div class="menuItem" on:click={() => console.log("settings clicked")}>Settings</div>
<div class="menuItem" on:click={() => console.log("logout clicked")}>Logout</div>
</div>
<style>
#navbar {
padding:0;
background-color: rgb(33, 41, 66);
display: flex;
justify-content: flex-end;
}
.menuItem {
font-family: 'Source Sans Pro', sans-serif;
color:white;
display: flex;
align-items: center;
padding-left: 20px;
padding-right: 20px;
text-align: center;
height: 50px;
}
.menuItem:hover {
background-color: rgb(45, 60, 90);
}
#profilePic {
margin-right:auto;
display: flex;
padding-left: 20px;
padding-right: 20px;
align-items: center;
color:white;
justify-self: left;
}
</style>

2
src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/stores.js
View File

@@ -5,3 +5,5 @@ export const incomeData = writable([]);
export const expenseData = writable([]); export const expenseData = writable([]);
export const incomeTypes = writable([]); export const incomeTypes = writable([]);
export const expenseTypes = writable([]);