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

Fixed front

Browse Source
This commit is contained in:
Daniel
2023-10-26 14:27:44 +03:00
parent 9c8946f236
commit 34903cd287
8 changed files with 210 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
src/main/java/com/faf223/expensetrackerfaf/web/package-lock.json generated
View File

@@ -14,6 +14,7 @@
"chart.js": "^4.4.0",
"email-validator": "^2.0.4",
"js-cookie": "^3.0.5",
"stores": "^1.0.0",
"svelte-cookie": "^1.0.1",
"svelte-fa": "^3.0.4",
"svelte-simple-modal": "^1.6.1",
@@ -30,7 +31,7 @@
"prettier": "^2.8.0",
"prettier-plugin-svelte": "^2.10.1",
"svelte": "^4.0.5",
"vite": "^4.5.0"
"vite": "^4.4.2"
}
},
"node_modules/@aashutoshrathi/word-wrap": {
@@ -651,9 +652,9 @@
}
},
"node_modules/@sveltejs/kit": {
"version": "1.27.0",
"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.27.0.tgz",
"integrity": "sha512-a1wPIq2uO3RsTmV+KbA4venOgCJDbfHTXFe+g7eJR3N8l46DSuulUONJ1qnk2EnZWYC1Uj3Wbp3US0WFocIzXg==",
"version": "1.25.1",
"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.25.1.tgz",
"integrity": "sha512-pD8XsvNJNgTNkFngNlM60my/X8dXWPKVzN5RghEQr0NjGZmuCjy49AfFu2cGbZjNf5pBcqd2RCNMW912P5fkhA==",
"dev": true,
"hasInstallScript": true,
"dependencies": {
@@ -664,12 +665,12 @@
"esm-env": "^1.0.0",
"kleur": "^4.1.5",
"magic-string": "^0.30.0",
"mrmime": "^1.0.1",
"mime": "^3.0.0",
"sade": "^1.8.1",
"set-cookie-parser": "^2.6.0",
"sirv": "^2.0.2",
"tiny-glob": "^0.2.9",
"undici": "~5.26.2"
"undici": "~5.25.0"
},
"bin": {
"svelte-kit": "svelte-kit.js"
@@ -975,6 +976,11 @@
"node": ">=4"
}
},
"node_modules/curry": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/curry/-/curry-1.2.0.tgz",
"integrity": "sha512-PAdmqPH2DUYTCc/aknv6RxRxmqdRHclvbz+wP8t1Xpg2Nu13qg+oLb6/5iFoDmf4dbmC9loYoy9PwwGbFt/AqA=="
},
"node_modules/debug": {
"version": "4.3.4",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -1485,6 +1491,11 @@
"integrity": "sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==",
"dev": true
},
"node_modules/graceful-fs-stream": {
"version": "0.0.1",
"resolved": "https://registry.npmjs.org/graceful-fs-stream/-/graceful-fs-stream-0.0.1.tgz",
"integrity": "sha512-yZ9Lx4O/LbIQ0prZNtXOt97h8ICA2fwPcmSkrjZcOnXKrMzR8ao+kE78N76su0ffaawHLHyFYt75AkgHdVb41Q=="
},
"node_modules/graphemer": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
@@ -1742,6 +1753,18 @@
"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
"integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA=="
},
"node_modules/mime": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/mime/-/mime-3.0.0.tgz",
"integrity": "sha512-jSCU7/VB1loIWBZe14aEYHU/+1UMEHoaO7qxCOVJOw9GgH72VAWppxNcjU+x9a2k3GSIBXNKxXQFqRvvZ7vr3A==",
"dev": true,
"bin": {
"mime": "cli.js"
},
"engines": {
"node": ">=10.0.0"
}
},
"node_modules/mime-db": {
"version": "1.52.0",
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
@@ -1773,6 +1796,25 @@
"node": "*"
}
},
"node_modules/minimist": {
"version": "1.2.8",
"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
"integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
"funding": {
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/mkdirp": {
"version": "0.5.6",
"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
"integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
"dependencies": {
"minimist": "^1.2.6"
},
"bin": {
"mkdirp": "bin/cmd.js"
}
},
"node_modules/mri": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",
@@ -1821,6 +1863,14 @@
"integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
"dev": true
},
"node_modules/on-headers": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/on-headers/-/on-headers-1.0.2.tgz",
"integrity": "sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA==",
"engines": {
"node": ">= 0.8"
}
},
"node_modules/once": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
@@ -2269,6 +2319,17 @@
"node": ">=0.10.0"
}
},
"node_modules/stores": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/stores/-/stores-1.0.0.tgz",
"integrity": "sha512-aOWM422mpxSj37uo9R1aVKDF2sDRCzjdbn6CYT/H9BECxuuliALmAZcmRVI9/Wq6Pu/HKDY1xZ+ssSuvY6fLlA==",
"dependencies": {
"curry": "~1.2.0",
"graceful-fs-stream": "0.0.1",
"mkdirp": "^0.5.1",
"on-headers": "^1.0.1"
}
},
"node_modules/strip-ansi": {
"version": "6.0.1",
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
@@ -2446,9 +2507,9 @@
}
},
"node_modules/undici": {
"version": "5.26.5",
"resolved": "https://registry.npmjs.org/undici/-/undici-5.26.5.tgz",
"integrity": "sha512-cSb4bPFd5qgR7qr2jYAi0hlX9n5YKK2ONKkLFkxl+v/9BvC0sOpZjBHDBSXc5lWAf5ty9oZdRXytBIHzgUcerw==",
"version": "5.25.4",
"resolved": "https://registry.npmjs.org/undici/-/undici-5.25.4.tgz",
"integrity": "sha512-450yJxT29qKMf3aoudzFpIciqpx6Pji3hEWaXqXmanbXF58LTAGCKxcJjxMXWu3iG+Mudgo3ZUfDB6YDFd/dAw==",
"dev": true,
"dependencies": {
"@fastify/busboy": "^2.0.0"
@@ -2473,9 +2534,9 @@
"dev": true
},
"node_modules/vite": {
"version": "4.5.0",
"resolved": "https://registry.npmjs.org/vite/-/vite-4.5.0.tgz",
"integrity": "sha512-ulr8rNLA6rkyFAlVWw2q5YJ91v098AFQ2R0PRFwPzREXOUJQPtFUG0t+/ZikhaOCDqFoDhN6/v8Sq0o4araFAw==",
"version": "4.4.11",
"resolved": "https://registry.npmjs.org/vite/-/vite-4.4.11.tgz",
"integrity": "sha512-ksNZJlkcU9b0lBwAGZGGaZHCMqHsc8OpgtoYhsQ4/I2v5cnpmmmqe5pM4nv/4Hn6G/2GhTdj0DhZh2e+Er1q5A==",
"dev": true,
"dependencies": {
"esbuild": "^0.18.10",

3
src/main/java/com/faf223/expensetrackerfaf/web/package.json
View File

@@ -20,7 +20,7 @@
"prettier": "^2.8.0",
"prettier-plugin-svelte": "^2.10.1",
"svelte": "^4.0.5",
"vite": "^4.5.0"
"vite": "^4.4.2"
},
"type": "module",
"dependencies": {
@@ -30,6 +30,7 @@
"chart.js": "^4.4.0",
"email-validator": "^2.0.4",
"js-cookie": "^3.0.5",
"stores": "^1.0.0",
"svelte-cookie": "^1.0.1",
"svelte-fa": "^3.0.4",
"svelte-simple-modal": "^1.6.1",

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

@@ -4,33 +4,52 @@
import QuickInfobar from "./other/QuickInfobar.svelte";
import { getCookie } from "svelte-cookie";
import {onMount} from "svelte";
import {writable} from "svelte/store";
import {incomeData} from "../stores.js";
import {expenseData} from "../stores.js";
import {incomeTypes} from "../stores.js";
import axios from "axios";
const incomeData = writable([]);
const expenseData = writable([]);
onMount(async () => {
if (getCookie('access_token') === null ) {
onMount(() => {
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);
}
const token = getCookie('access_token');
const config = {
headers: {
'Authorization': `Bearer ${token}`
}
};
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);
}
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));
console.log(getCookie('access_token'));
})
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));
Promise.all([incomePromise, expensePromise, incomeTypesPromise])
.then(() => {
console.log(getCookie('access_token'));
});
});
</script>
<div id="dashboard">

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

@@ -1,62 +1,78 @@
<script>
import Chart from 'chart.js/auto';
import { onMount } from 'svelte';
import { incomeData } from '../Dashboard.svelte';
import { incomeData } from "../../stores.js";
let ctx;
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) + income.amount);
} else {
groupedData.set(category, income.amount);
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;
}
});
return groupedData;
}
function updateGraph() {
const incomeDataArray = $incomeData;
const groupedIncomeData = groupAndSumByCategory(incomeDataArray);
const groupedIncomeData = groupAndSumByCategory(data);
const chartLabels = Array.from(groupedIncomeData.keys());
const chartValues = Array.from(groupedIncomeData.values());
const chartLabels = Array.from(groupedIncomeData.keys());
const chartValues = Array.from(groupedIncomeData.values());
if (chartCanvas) {
ctx = chartCanvas.getContext('2d');
if (ctx.chart) {
ctx.chart.destroy();
if (!chart) {
chart = new Chart(ctx, {
type: 'bar',
data: {
labels: chartLabels,
datasets: [{
label: 'Revenue',
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();
}
new Chart(ctx, {
type: 'bar',
data: {
labels: chartLabels,
datasets: [{
label: 'Revenue',
backgroundColor: 'rgb(255, 99, 132)',
data: chartValues
}]
},
options: {
responsive: true,
maintainAspectRatio: false
}
});
} catch (error) {
console.error('Error:', error);
}
}
onMount(updateGraph);
$: {
if ($incomeData) {
createGraph($incomeData);
console.log($incomeData);
}
}
onMount(() => {
createGraph($incomeData);
});
</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);

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

@@ -122,10 +122,8 @@
.expense-form {
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
border-radius: 20px;
padding: 20px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
max-width: 400px;
margin: 0 auto;
}

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

@@ -4,12 +4,44 @@
import { writable } from 'svelte/store';
import axios from 'axios';
import { getCookie } from "svelte-cookie";
import {incomeData} from "../../../stores.js";
import {incomeTypes} from "../../../stores.js";
let showModal;
let amount = '';
let newData;
const selectedIncomeId = writable('');
function addNewIncome(id, amount) {
const today = new Date().toISOString().split('T')[0];
const incomeCategory = $incomeTypes.find(incomeType => incomeType.id === id);
console.log(amount);
if (incomeCategory) {
const newIncome = {
incomeId: 0,
userDTO: {
name: "Dummy",
surname: "User",
username: "dummyuser"
},
incomeCategory: incomeCategory,
date: today,
amount: amount
};
newData = $incomeData;
newData.push(newIncome);
$incomeData = newData;
console.log("ggWPPPPP", newIncome);
} else {
console.error('Income category not found for id:', id);
}
}
onMount(async () => {
try {
const token = getCookie('access_token');
@@ -37,6 +69,8 @@
amount: amount,
};
addNewIncome(selectedIncome.id, amount);
try {
const token = getCookie('access_token');
console.log(token);
@@ -47,8 +81,6 @@
},
});
console.log(response.data);
if (response.status === 200) {
console.log("cool");
} else {
@@ -122,10 +154,8 @@
.income-form {
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
padding: 20px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
max-width: 400px;
margin: 0 auto;
}

6
src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/modals/Modal.svelte
View File

@@ -15,18 +15,14 @@
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div on:click|stopPropagation>
<slot name="header" />
<hr />
<slot />
<hr />
<!-- svelte-ignore a11y-autofocus -->
<button autofocus on:click={() => dialog.close()}>close modal</button>
</div>
</dialog>
<style>
dialog {
max-width: 32em;
border-radius: 0.2em;
border-radius: 20px;
border: none;
padding: 0;
}

7
src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/stores.js Normal file
View File

@@ -0,0 +1,7 @@
import {writable} from "svelte/store";
export const incomeData = writable([]);
export const expenseData = writable([]);
export const incomeTypes = writable([]);