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-26 23:02:25 +03:00
parent e24ca0d2d5
commit a2b7b38bf1
10 changed files with 142 additions and 214 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -8,17 +8,19 @@
import {incomeData} from "../stores.js";
import {expenseData} from "../stores.js";
import {incomeTypes} from "../stores.js";
import {expenseTypes} from "../stores.js";
import axios from "axios";
onMount(() => {
if (getCookie('access_token') === null) {
if (getCookie('access_token') === '') {
window.location.href = '/auth/login';
console.log("no token");
}
const token = getCookie('access_token');
const config = {
headers: {
'Authorization': `Bearer ${token}`
@@ -46,7 +48,14 @@
})
.catch(error => console.error('Error:', error));
Promise.all([incomePromise, expensePromise, incomeTypesPromise])
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'));
});

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

@@ -7,21 +7,22 @@
let chartCanvas;
let chart = null;
function groupAndSumByCategory(incomes) {
const groupedData = new Map();
incomes.forEach(income => {
const category = income.incomeCategory.name;
if (groupedData.has(category)) {
groupedData.set(category, groupedData.get(category) + parseInt(income.amount));
} else {
groupedData.set(category, income.amount);
}
}
);
return groupedData;
}
function createGraph(data) {
try {
function groupAndSumByCategory(incomes) {
const groupedData = new Map();
incomes.forEach(income => {
const category = income.incomeCategory.name;
if (groupedData.has(category)) {
groupedData.set(category, groupedData.get(category) + parseInt(income.amount));
} else {
groupedData.set(category, income.amount);
}
}
);
return groupedData;
}
const groupedIncomeData = groupAndSumByCategory(data);

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

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

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

@@ -1,39 +1,24 @@
<script>
import chartjs from 'chart.js/auto';
import { onMount } from 'svelte';
import axios from 'axios';
import { getCookie } from "svelte-cookie";
import { incomeData, expenseData } from "../../stores.js";
let ctx;
let chartCanvas;
let chart = null;
async function updateGraph() {
const token = getCookie('access_token');
const config = {
headers: {
'Authorization': `Bearer ${token}`
}
};
function createGraph(incomes, expenses) {
try {
const [incomesResponse, expensesResponse] = await Promise.all([
axios.get('http://localhost:8081/incomes/personal-incomes', config),
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 totalIncomes = incomes.reduce((total, item) => total + item.amount, 0);
const totalExpenses = expenses.reduce((total, item) => total + item.amount, 0);
const chartLabels = ['Incomes', 'Expenses'];
const chartValues = [totalIncomes, totalExpenses];
ctx = chartCanvas.getContext('2d');
new chartjs(ctx, {
if (!chart) {
chart = new chartjs(ctx, {
type: 'pie',
data: {
labels: chartLabels,
@@ -47,12 +32,27 @@
maintainAspectRatio: false
}
});
} else {
chart.data.labels = chartLabels;
chart.data.datasets[0].data = chartValues;
console.log(chart.data.datasets[0].data);
chart.update();
}
} catch (error) {
console.error('Error:', error);
}
}
onMount(updateGraph);
$: {
if ($incomeData || $expenseData) {
console.log("created");
createGraph($incomeData, $expenseData);
}
}
onMount(() => {
createGraph($incomeData, $expenseData);
});
</script>
<div id="chart">

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

@@ -1,36 +1,18 @@
<script>
import { onMount, afterUpdate } from 'svelte';
import axios from 'axios';
import { getCookie } from "svelte-cookie";
import ContentExpense from "./contents/ContentExpense.svelte";
import {expenseData} from "../../stores.js";
let data = [];
let parentHeight;
let listParentHeight;
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;
listParentHeight = document.querySelector('#expenseList').offsetHeight;
});
}
onMount(updateInfo);
afterUpdate(updateInfo);
</script>
<div id="expenseInfo" style="max-height: {parentHeight}px;">
@@ -38,7 +20,7 @@
<div id="expenseList" style="max-height: {listParentHeight}px;">
<ul>
{#each data as item}
{#each $expenseData as item}
<li>
{item.incomeCategory ? `${item.incomeCategory.name}: ` : `${item.expenseCategory.name}: `}
{item.incomeCategory ? `+${item.amount}$` : `-${item.amount}$`}

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

@@ -1,37 +1,18 @@
<script>
import { onMount, afterUpdate } from 'svelte';
import axios from 'axios';
import {getCookie} from "svelte-cookie";
import { incomeData } from "../../stores.js";
import ContentIncome from "./contents/ContentIncome.svelte";
let data = [];
let parentHeight;
let listParentHeight;
async function updateInfo() {
const token = getCookie('access_token');
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;
parentHeight = document.querySelector('#expenseInfo').offsetHeight;
listParentHeight = document.querySelector('#expenseList').offsetHeight;
});
}
onMount(updateInfo);
afterUpdate(updateInfo);
</script>
<div id="incomeInfo" style="max-height: {parentHeight}px;">
@@ -39,7 +20,7 @@
<div id="incomeList" style="max-height: {listParentHeight}px;">
<ul>
{#each data as item}
{#each $incomeData as item}
<li>
{item.incomeCategory ? `${item.incomeCategory.name}: ` : `${item.expenseCategory.name}: `}
{item.incomeCategory ? `+${item.amount}$` : `-${item.amount}$`}

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

@@ -1,37 +1,17 @@
<script>
import Modal from '../modals/Modal.svelte';
import { onMount } from 'svelte';
import { writable } from 'svelte/store';
import axios from 'axios';
import { getCookie } from "svelte-cookie";
import {expenseTypes} from "../../../stores.js";
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 selectedExpense = $expenseTypes.find(expense => expense.id === $selectedExpenseId);
const data = {
expenseCategory: selectedExpense.id,
amount: amount,
@@ -78,7 +58,7 @@
<div class="form-group">
<label for="expenseCategory">Select Expense Category:</label>
<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}
<option value={expense.id}>{expense.name}</option>
{/if}

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

@@ -1,6 +1,5 @@
<script>
import Modal from '../modals/Modal.svelte';
import { onMount } from 'svelte';
import { writable } from 'svelte/store';
import axios from 'axios';
import { getCookie } from "svelte-cookie";
@@ -41,29 +40,8 @@
}
}
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 selectedIncome = $incomeOptions.find(income => income.id === $selectedIncomeId);
const selectedIncome = $incomeTypes.find(income => income.id === $selectedIncomeId);
const data = {
incomeCategory: selectedIncome.id,
amount: amount,
@@ -110,7 +88,7 @@
<div class="form-group">
<label for="incomeCategory">Select Income Category:</label>
<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}
<option value={income.id}>{income.name}</option>
{/if}

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

@@ -1,38 +1,32 @@
<script>
import { onMount } from 'svelte';
import axios from 'axios';
import { getCookie } from "svelte-cookie";
import {incomeData, expenseData} from "../../stores.js";
let infobar1, infobar2, infobar3, infobar4;
let totalExpenses = 0;
let totalIncomes = 0;
onMount(async () => {
const token = getCookie('access_token');
const config = {
headers: {
'Authorization': `Bearer ${token}`
}
};
function updateInfo() {
totalExpenses = $expenseData.reduce((total, item) => total + item.amount, 0);
totalIncomes = $incomeData.reduce((total, item) => total + item.amount, 0);
try {
const [incomesResponse, expensesResponse] = await Promise.all([
axios.get('http://localhost:8081/incomes/personal-incomes', config),
axios.get('http://localhost:8081/expenses/personal-expenses', config)
]);
const incomesData = incomesResponse.data;
const expensesData = expensesResponse.data;
totalExpenses = expensesData.reduce((total, item) => total + item.amount, 0);
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);
} catch {
console.log("not yet loaded");
}
}
$: {
if ($incomeData && $expenseData) {
updateInfo();
}
}
onMount(() => {
updateInfo();
});
</script>

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 incomeTypes = writable([]);
export const expenseTypes = writable([]);