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

All frontend elements now use Stores instead of requesting their own data

Browse Source 
6 times less requests!
This commit is contained in:
Daniel
2023-10-27 00:07:49 +03:00
parent a2b7b38bf1
commit ef7c7ec7f8
13 changed files with 153 additions and 187 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

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

@@ -7,9 +7,9 @@
let chartCanvas;
let chart = null;
function groupAndSumByCategory(incomes) {
function groupAndSumByCategory() {
const groupedData = new Map();
incomes.forEach(income => {
$incomeData.forEach(income => {
const category = income.incomeCategory.name;
if (groupedData.has(category)) {
groupedData.set(category, groupedData.get(category) + parseInt(income.amount));
@@ -21,10 +21,9 @@
return groupedData;
}
function createGraph(data) {
function createGraph() {
try {
const groupedIncomeData = groupAndSumByCategory(data);
const groupedIncomeData = groupAndSumByCategory();
const chartLabels = Array.from(groupedIncomeData.keys());
const chartValues = Array.from(groupedIncomeData.values());
@@ -38,7 +37,16 @@
labels: chartLabels,
datasets: [{
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
}]
},
@@ -50,7 +58,6 @@
} else {
chart.data.labels = chartLabels;
chart.data.datasets[0].data = chartValues;
console.log(chart.data.datasets[0].data);
chart.update();
}
} catch (error) {
@@ -60,13 +67,12 @@
$: {
if ($incomeData) {
createGraph($incomeData);
console.log($incomeData);
createGraph();
}
}
onMount(() => {
createGraph($incomeData);
createGraph();
});
</script>

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

@@ -7,9 +7,10 @@
let chartCanvas;
let chart = null;
function groupAndSumByCategory(expenses) {
function groupAndSumByCategory() {
const groupedData = new Map();
expenses.forEach(expense => {
console.log($expenseData)
$expenseData.forEach(expense => {
const category = expense.expenseCategory.name;
if (groupedData.has(category)) {
groupedData.set(category, groupedData.get(category) + parseInt(expense.amount));
@@ -21,10 +22,9 @@
return groupedData;
}
function createGraph(data) {
function createGraph() {
try {
const groupedExpenseData = groupAndSumByCategory(data);
const groupedExpenseData = groupAndSumByCategory();
const chartLabels = Array.from(groupedExpenseData.keys());
const chartValues = Array.from(groupedExpenseData.values());
@@ -38,7 +38,12 @@
labels: chartLabels,
datasets: [{
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
}]
},
@@ -50,7 +55,6 @@
} else {
chart.data.labels = chartLabels;
chart.data.datasets[0].data = chartValues;
console.log(chart.data.datasets[0].data);
chart.update();
}
} catch (error) {
@@ -60,13 +64,12 @@
$: {
if ($expenseData) {
createGraph($expenseData);
console.log($expenseData);
createGraph();
}
}
onMount(() => {
createGraph($expenseData);
createGraph();
});
</script>

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

@@ -1,5 +1,5 @@
<script>
import chartjs from 'chart.js/auto';
import Chart from 'chart.js/auto';
import { onMount } from 'svelte';
import { incomeData, expenseData } from "../../stores.js";
@@ -7,24 +7,26 @@
let chartCanvas;
let chart = null;
function createGraph(incomes, expenses) {
function createGraph() {
try {
const totalIncomes = incomes.reduce((total, item) => total + item.amount, 0);
const totalExpenses = expenses.reduce((total, item) => total + item.amount, 0);
const totalIncomes = $incomeData.reduce((total, item) => total + item.amount, 0);
const totalExpenses = $expenseData.reduce((total, item) => total + item.amount, 0);
const chartLabels = ['Incomes', 'Expenses'];
const chartValues = [totalIncomes, totalExpenses];
ctx = chartCanvas.getContext('2d');
if (!chart) {
chart = new chartjs(ctx, {
chart = new Chart(ctx, {
type: 'pie',
data: {
labels: chartLabels,
datasets: [{
data: chartValues,
backgroundColor: ['green', 'red'],
backgroundColor: [
'rgb(243, 188, 0)',
'rgb(0, 117, 164)'
],
}]
},
options: {
@@ -33,9 +35,13 @@
}
});
} 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;
console.log(chart.data.datasets[0].data);
chart.update();
}
} catch (error) {
@@ -45,13 +51,12 @@
$: {
if ($incomeData || $expenseData) {
console.log("created");
createGraph($incomeData, $expenseData);
createGraph();
}
}
onMount(() => {
createGraph($incomeData, $expenseData);
createGraph();
});
</script>

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

@@ -36,6 +36,10 @@
#expenseInfo {
display: flex;
flex-direction: column;
background-color: #212942;
color:white;
border-radius: 10px;
margin: 10px;
}
#expenseList {
@@ -54,6 +58,7 @@
ul {
list-style: none;
padding: 0;
color:black;
}
li {

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

@@ -35,6 +35,10 @@
#incomeInfo {
display: flex;
flex-direction: column;
background-color: #212942;
color:white;
border-radius: 10px;
margin: 10px;
}
#incomeList {
@@ -49,6 +53,7 @@
ul {
list-style: none;
padding: 0;
color: black;
}
li {

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

@@ -3,13 +3,41 @@
import { writable } from 'svelte/store';
import axios from 'axios';
import { getCookie } from "svelte-cookie";
import {expenseTypes} from "../../../stores.js";
import {expenseTypes, expenseData} from "../../../stores.js";
let showModal;
let amount = '';
let newData;
const selectedExpenseId = writable('');
function addNewExpense(id, amount) {
const today = new Date().toISOString().split('T')[0];
const expenseCategory = $expenseTypes.find(incomeType => incomeType.id === id);
console.log(amount);
if (expenseCategory) {
const newIncome = {
incomeId: 0,
userDTO: {
name: "Dummy",
surname: "User",
username: "dummyuser"
},
expenseCategory: expenseCategory,
date: today,
amount: amount
};
newData = $expenseData;
newData.push(newIncome);
$expenseData = newData;
} else {
console.error('Expense category not found for id:', id);
}
}
const createExpense = async () => {
const selectedExpense = $expenseTypes.find(expense => expense.id === $selectedExpenseId);
const data = {
@@ -17,9 +45,11 @@
amount: amount,
};
addNewExpense(selectedExpense.id, amount);
try {
const token = getCookie('access_token');
console.log(token);
const response = await axios.post('http://localhost:8081/expenses', data, {
headers: {
'Authorization': `Bearer ${token}`,
@@ -27,10 +57,8 @@
},
});
console.log(response.data);
if (response.status === 200) {
console.log("cool");
if (response.status === 201) {
//console.log("cool");
} else {
console.error('Error:', response.status);
}

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

@@ -3,8 +3,7 @@
import { writable } from 'svelte/store';
import axios from 'axios';
import { getCookie } from "svelte-cookie";
import {incomeData} from "../../../stores.js";
import {incomeTypes} from "../../../stores.js";
import {incomeData, incomeTypes} from "../../../stores.js";
let showModal;
let amount = '';
@@ -34,7 +33,6 @@
newData = $incomeData;
newData.push(newIncome);
$incomeData = newData;
console.log("ggWPPPPP", newIncome);
} else {
console.error('Income category not found for id:', id);
}
@@ -51,7 +49,7 @@
try {
const token = getCookie('access_token');
console.log(token);
const response = await axios.post('http://localhost:8081/incomes', data, {
headers: {
'Authorization': `Bearer ${token}`,
@@ -59,8 +57,8 @@
},
});
if (response.status === 200) {
console.log("cool");
if (response.status === 201) {
//console.log("cool");
} else {
console.error('Error:', response.status);
}

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 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">

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

@@ -5,22 +5,29 @@
let infobar1, infobar2, infobar3, infobar4;
let totalExpenses = 0;
let totalIncomes = 0;
let lastMonthIncome = 800; // Dummy last month's income
let lastMonthExpense = 200; // Dummy last month's expense
function updateInfo() {
totalExpenses = $expenseData.reduce((total, item) => total + item.amount, 0);
totalIncomes = $incomeData.reduce((total, item) => total + item.amount, 0);
totalExpenses = $expenseData.reduce((total, item) => total + parseInt(item.amount), 0);
totalIncomes = $incomeData.reduce((total, item) => total + parseInt(item.amount), 0);
const incomeDifference = ((totalIncomes - lastMonthIncome) / lastMonthIncome) * 100;
const expenseDifference = ((lastMonthExpense - totalExpenses) / lastMonthExpense) * 100;
try {
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>`;
infobar1.innerHTML = `<span style="font-size: larger">Total expenses:</span><br><span style="color:red;font-size: 150%">${totalExpenses.toFixed(2)}$</span>`;
infobar2.innerHTML = `<span style="font-size: larger">Total incomes:</span><br><span style="color:green;font-size: 150%">${totalIncomes.toFixed(2)}$</span>`;
infobar3.innerHTML = `<span style="font-size: larger">Income by last month:</span><br><span style="color:blue;font-size: 150%">${incomeDifference.toFixed(2)}%</span>`;
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 {
console.log("not yet loaded");
}
}
$: {
if ($incomeData && $expenseData) {
if ($incomeData || $expenseData) {
updateInfo();
}
}
@@ -55,6 +62,7 @@
background-color: #212942;
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);
overflow: hidden;
}
.infobarElement:hover {

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>