Merge branch 'master' of https://github.com/lumijiez/ExpenseTrackerFAF
This commit is contained in:
mirrerror
@@ -41,7 +41,7 @@ public class ExpenseController {
|
||||
}
|
||||
|
||||
@PostMapping()
|
||||
public ResponseEntity<ExpenseDTO> createNewExpense(@RequestBody ExpenseCreationDTO expenseDTO,
|
||||
public ResponseEntity<Void> createNewExpense(@RequestBody ExpenseCreationDTO expenseDTO,
|
||||
BindingResult bindingResult) {
|
||||
Expense expense = expenseMapper.toExpense(expenseDTO);
|
||||
|
||||
@@ -54,8 +54,7 @@ public class ExpenseController {
|
||||
expense.setUser(user);
|
||||
|
||||
expenseService.createOrUpdate(expense);
|
||||
ExpenseDTO createdExpenseDTO = expenseMapper.toDto(expense);
|
||||
return ResponseEntity.status(HttpStatus.CREATED).body(createdExpenseDTO);
|
||||
return ResponseEntity.status(HttpStatus.CREATED).build();
|
||||
}
|
||||
|
||||
return ResponseEntity.notFound().build();
|
||||
|
||||
@@ -41,7 +41,7 @@ public class IncomeController {
|
||||
}
|
||||
|
||||
@PostMapping()
|
||||
public ResponseEntity<IncomeDTO> createNewIncome(@RequestBody IncomeCreationDTO incomeDTO,
|
||||
public ResponseEntity<Void> createNewIncome(@RequestBody IncomeCreationDTO incomeDTO,
|
||||
BindingResult bindingResult) {
|
||||
Income income = incomeMapper.toIncome(incomeDTO);
|
||||
Authentication authentication = SecurityContextHolder.getContext().getAuthentication();
|
||||
@@ -54,8 +54,7 @@ public class IncomeController {
|
||||
|
||||
System.out.println(income);
|
||||
incomeService.createOrUpdate(income);
|
||||
IncomeDTO createdIncomeDTO = incomeMapper.toDto(income);
|
||||
return ResponseEntity.status(HttpStatus.CREATED).body(createdIncomeDTO);
|
||||
return ResponseEntity.status(HttpStatus.CREATED).build();
|
||||
}
|
||||
|
||||
return ResponseEntity.notFound().build();
|
||||
|
||||
@@ -16,6 +16,7 @@
|
||||
"js-cookie": "^3.0.5",
|
||||
"svelte-cookie": "^1.0.1",
|
||||
"svelte-fa": "^3.0.4",
|
||||
"svelte-simple-modal": "^1.6.1",
|
||||
"svelte-spa-router": "^3.3.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
@@ -45,7 +46,6 @@
|
||||
"version": "2.2.1",
|
||||
"resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.1.tgz",
|
||||
"integrity": "sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@jridgewell/gen-mapping": "^0.3.0",
|
||||
"@jridgewell/trace-mapping": "^0.3.9"
|
||||
@@ -547,7 +547,6 @@
|
||||
"version": "0.3.3",
|
||||
"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
|
||||
"integrity": "sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@jridgewell/set-array": "^1.0.1",
|
||||
"@jridgewell/sourcemap-codec": "^1.4.10",
|
||||
@@ -561,7 +560,6 @@
|
||||
"version": "3.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.1.tgz",
|
||||
"integrity": "sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=6.0.0"
|
||||
}
|
||||
@@ -570,7 +568,6 @@
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz",
|
||||
"integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=6.0.0"
|
||||
}
|
||||
@@ -578,14 +575,12 @@
|
||||
"node_modules/@jridgewell/sourcemap-codec": {
|
||||
"version": "1.4.15",
|
||||
"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
|
||||
"integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==",
|
||||
"dev": true
|
||||
"integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
|
||||
},
|
||||
"node_modules/@jridgewell/trace-mapping": {
|
||||
"version": "0.3.19",
|
||||
"resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.19.tgz",
|
||||
"integrity": "sha512-kf37QtfW+Hwx/buWGMPcR60iF9ziHa6r/CZJIHbmcm4+0qrXiVdxegAH0F6yddEVQ7zdkjcGCgCzUu+BcbhQxw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@jridgewell/resolve-uri": "^3.1.0",
|
||||
"@jridgewell/sourcemap-codec": "^1.4.14"
|
||||
@@ -735,14 +730,12 @@
|
||||
"node_modules/@types/estree": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.2.tgz",
|
||||
"integrity": "sha512-VeiPZ9MMwXjO32/Xu7+OwflfmeoRwkE/qzndw42gGtgJwZopBnzy2gD//NN1+go1mADzkDcqf/KnFRSjTJ8xJA==",
|
||||
"dev": true
|
||||
"integrity": "sha512-VeiPZ9MMwXjO32/Xu7+OwflfmeoRwkE/qzndw42gGtgJwZopBnzy2gD//NN1+go1mADzkDcqf/KnFRSjTJ8xJA=="
|
||||
},
|
||||
"node_modules/acorn": {
|
||||
"version": "8.10.0",
|
||||
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.10.0.tgz",
|
||||
"integrity": "sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==",
|
||||
"dev": true,
|
||||
"bin": {
|
||||
"acorn": "bin/acorn"
|
||||
},
|
||||
@@ -809,7 +802,6 @@
|
||||
"version": "5.3.0",
|
||||
"resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
|
||||
"integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"dequal": "^2.0.3"
|
||||
}
|
||||
@@ -833,7 +825,6 @@
|
||||
"version": "3.2.1",
|
||||
"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.2.1.tgz",
|
||||
"integrity": "sha512-jsyHu61e6N4Vbz/v18DHwWYKK0bSWLqn47eeDSKPB7m8tqMHF9YJ+mhIk2lVteyZrY8tnSj/jHOv4YiTCuCJgg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"dequal": "^2.0.3"
|
||||
}
|
||||
@@ -894,7 +885,6 @@
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/code-red/-/code-red-1.0.4.tgz",
|
||||
"integrity": "sha512-7qJWqItLA8/VPVlKJlFXU+NBlo/qyfs39aJcuMT/2ere32ZqvF5OSxgdM5xOfJJ7O429gg2HM47y8v9P+9wrNw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@jridgewell/sourcemap-codec": "^1.4.15",
|
||||
"@types/estree": "^1.0.1",
|
||||
@@ -965,7 +955,6 @@
|
||||
"version": "2.3.1",
|
||||
"resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
|
||||
"integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"mdn-data": "2.0.30",
|
||||
"source-map-js": "^1.0.1"
|
||||
@@ -1030,7 +1019,6 @@
|
||||
"version": "2.0.3",
|
||||
"resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
|
||||
"integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
}
|
||||
@@ -1298,7 +1286,6 @@
|
||||
"version": "3.0.3",
|
||||
"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
|
||||
"integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@types/estree": "^1.0.0"
|
||||
}
|
||||
@@ -1607,7 +1594,6 @@
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.2.tgz",
|
||||
"integrity": "sha512-v3rht/LgVcsdZa3O2Nqs+NMowLOxeOm7Ay9+/ARQ2F+qEoANRcqrjAZKGN0v8ymUetZGgkp26LTnGT7H0Qo9Pg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@types/estree": "*"
|
||||
}
|
||||
@@ -1705,8 +1691,7 @@
|
||||
"node_modules/locate-character": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz",
|
||||
"integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==",
|
||||
"dev": true
|
||||
"integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA=="
|
||||
},
|
||||
"node_modules/locate-path": {
|
||||
"version": "6.0.0",
|
||||
@@ -1745,7 +1730,6 @@
|
||||
"version": "0.30.4",
|
||||
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.4.tgz",
|
||||
"integrity": "sha512-Q/TKtsC5BPm0kGqgBIF9oXAs/xEf2vRKiIB4wCRQTJOQIByZ1d+NnUOotvJOvNpi5RNIgVOMC3pOuaP1ZTDlVg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@jridgewell/sourcemap-codec": "^1.4.15"
|
||||
},
|
||||
@@ -1756,8 +1740,7 @@
|
||||
"node_modules/mdn-data": {
|
||||
"version": "2.0.30",
|
||||
"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
|
||||
"integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==",
|
||||
"dev": true
|
||||
"integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA=="
|
||||
},
|
||||
"node_modules/mime-db": {
|
||||
"version": "1.52.0",
|
||||
@@ -1937,7 +1920,6 @@
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/periscopic/-/periscopic-3.1.0.tgz",
|
||||
"integrity": "sha512-vKiQ8RRtkl9P+r/+oefh25C3fhybptkHKCZSPlcXiJux2tJF55GnEj3BVn4A5gKfq9NWWXXrxkHBwVPUfH0opw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@types/estree": "^1.0.0",
|
||||
"estree-walker": "^3.0.0",
|
||||
@@ -2283,7 +2265,6 @@
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
|
||||
"integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
@@ -2328,7 +2309,6 @@
|
||||
"version": "4.2.1",
|
||||
"resolved": "https://registry.npmjs.org/svelte/-/svelte-4.2.1.tgz",
|
||||
"integrity": "sha512-LpLqY2Jr7cRxkrTc796/AaaoMLF/1ax7cto8Ot76wrvKQhrPmZ0JgajiWPmg9mTSDqO16SSLiD17r9MsvAPTmw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@ampproject/remapping": "^2.2.1",
|
||||
"@jridgewell/sourcemap-codec": "^1.4.15",
|
||||
@@ -2397,6 +2377,14 @@
|
||||
"svelte": "^3.19.0 || ^4.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/svelte-simple-modal": {
|
||||
"version": "1.6.1",
|
||||
"resolved": "https://registry.npmjs.org/svelte-simple-modal/-/svelte-simple-modal-1.6.1.tgz",
|
||||
"integrity": "sha512-D4/Z7LQ6ThawYb7FlAeS/qGbcwVlqzRHn1zZgWPlEK0cp4l2UMcscqel58mp+gTuk4UX9gl516GYXcHFvuyslA==",
|
||||
"peerDependencies": {
|
||||
"svelte": "^3.30.0 || ^4.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/svelte-spa-router": {
|
||||
"version": "3.3.0",
|
||||
"resolved": "https://registry.npmjs.org/svelte-spa-router/-/svelte-spa-router-3.3.0.tgz",
|
||||
|
||||
@@ -32,6 +32,7 @@
|
||||
"js-cookie": "^3.0.5",
|
||||
"svelte-cookie": "^1.0.1",
|
||||
"svelte-fa": "^3.0.4",
|
||||
"svelte-simple-modal": "^1.6.1",
|
||||
"svelte-spa-router": "^3.3.0"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,14 +1,35 @@
|
||||
<script>
|
||||
import DashHeader from "./DashHeader.svelte";
|
||||
import DataMenu from "./DataMenu.svelte";
|
||||
import QuickInfobar from "./QuickInfobar.svelte";
|
||||
import DashHeader from "./other/DashHeader.svelte";
|
||||
import DataMenu from "./other/DataMenu.svelte";
|
||||
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>
|
||||
|
||||
|
||||
@@ -1,31 +1,35 @@
|
||||
<script>
|
||||
import Chart from 'chart.js/auto';
|
||||
import { onMount } from 'svelte';
|
||||
import axios from 'axios';
|
||||
import {getCookie} from "svelte-cookie";
|
||||
|
||||
import { incomeData } from '../Dashboard.svelte';
|
||||
let ctx;
|
||||
let chartCanvas;
|
||||
|
||||
onMount(async () => {
|
||||
|
||||
const token = getCookie('access_token');
|
||||
|
||||
const config = {
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`
|
||||
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);
|
||||
}
|
||||
});
|
||||
return groupedData;
|
||||
}
|
||||
};
|
||||
|
||||
try {
|
||||
const response = await axios.get('http://localhost:8081/incomes/personal-incomes', config);
|
||||
console.log(response.data);
|
||||
const incomeData = response.data;
|
||||
function updateGraph() {
|
||||
const incomeDataArray = $incomeData;
|
||||
const groupedIncomeData = groupAndSumByCategory(incomeDataArray);
|
||||
|
||||
const chartLabels = incomeData.map(item => item.incomeCategory.name);
|
||||
const chartValues = incomeData.map(item => item.amount);
|
||||
const chartLabels = Array.from(groupedIncomeData.keys());
|
||||
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);
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -2,11 +2,13 @@
|
||||
import { onMount, afterUpdate } from 'svelte';
|
||||
import axios from 'axios';
|
||||
import { getCookie } from "svelte-cookie";
|
||||
import ContentExpense from "./contents/ContentExpense.svelte";
|
||||
|
||||
let data = [];
|
||||
let parentHeight;
|
||||
let listParentHeight;
|
||||
|
||||
onMount(async () => {
|
||||
async function updateInfo() {
|
||||
const token = getCookie('access_token');
|
||||
|
||||
const config = {
|
||||
@@ -22,16 +24,19 @@
|
||||
} catch (error) {
|
||||
console.error('Error:', error);
|
||||
}
|
||||
});
|
||||
}
|
||||
onMount(updateInfo);
|
||||
|
||||
afterUpdate(() => {
|
||||
parentHeight = document.querySelector('#expenseInfo').offsetHeight;
|
||||
listParentHeight = document.querySelector('#expenseList').offsetHeight;
|
||||
});
|
||||
</script>
|
||||
|
||||
<div id="expenseInfo" style="max-height: {parentHeight}px;">
|
||||
<h2 id="text">Expenses</h2>
|
||||
<div id="expenseList">
|
||||
<ContentExpense />
|
||||
|
||||
<div id="expenseList" style="max-height: {listParentHeight}px;">
|
||||
<ul>
|
||||
{#each data as item}
|
||||
<li>
|
||||
@@ -44,32 +49,21 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<style>
|
||||
#text {
|
||||
padding: 0 0 10px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#expenseInfo {
|
||||
flex: 1;
|
||||
border-radius: 10px;
|
||||
margin: 10px;
|
||||
overflow-y: auto;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
h2 {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: #f2f2f2;
|
||||
padding: 10px;
|
||||
border-radius: 10px 10px 0 0;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#expenseList {
|
||||
margin-top: 10px;
|
||||
scrollbar-width: none;
|
||||
flex: 1;
|
||||
border-radius: 10px;
|
||||
margin: 10px;
|
||||
overflow-y: auto;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
#expenseList::-webkit-scrollbar {
|
||||
@@ -1,12 +1,15 @@
|
||||
<script>
|
||||
|
||||
import { onMount, afterUpdate } from 'svelte';
|
||||
import axios from 'axios';
|
||||
import {getCookie} from "svelte-cookie";
|
||||
import ContentIncome from "./contents/ContentIncome.svelte";
|
||||
|
||||
let data = [];
|
||||
let parentHeight;
|
||||
let listParentHeight;
|
||||
|
||||
onMount(async () => {
|
||||
async function updateInfo() {
|
||||
const token = getCookie('access_token');
|
||||
|
||||
const config = {
|
||||
@@ -22,16 +25,19 @@
|
||||
} catch (error) {
|
||||
console.error('Error:', error);
|
||||
}
|
||||
});
|
||||
}
|
||||
onMount(updateInfo);
|
||||
|
||||
afterUpdate(() => {
|
||||
parentHeight = document.querySelector('#incomeInfo').offsetHeight;
|
||||
listParentHeight = document.querySelector('#expenseList').offsetHeight;
|
||||
});
|
||||
</script>
|
||||
|
||||
<div id="incomeInfo" style="max-height: {parentHeight}px;">
|
||||
<h2 id="text">Incomes</h2>
|
||||
<div id="incomeList">
|
||||
<ContentIncome />
|
||||
|
||||
<div id="incomeList" style="max-height: {listParentHeight}px;">
|
||||
<ul>
|
||||
{#each data as item}
|
||||
<li>
|
||||
@@ -45,12 +51,14 @@
|
||||
</div>
|
||||
|
||||
<style>
|
||||
#text {
|
||||
padding: 0 0 10px;
|
||||
margin: 0;
|
||||
#incomeInfo {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#incomeInfo {
|
||||
#incomeList {
|
||||
margin-top: 10px;
|
||||
scrollbar-width: none;
|
||||
flex: 1;
|
||||
border-radius: 10px;
|
||||
margin: 10px;
|
||||
@@ -58,19 +66,6 @@
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
h2 {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: #f2f2f2;
|
||||
padding: 10px;
|
||||
border-radius: 10px 10px 0 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#incomeList {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
@@ -89,4 +84,7 @@
|
||||
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
|
||||
}
|
||||
|
||||
#incomeList::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,171 @@
|
||||
<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";
|
||||
|
||||
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>
|
||||
<div class="expense-form">
|
||||
<h3>Expense Details</h3>
|
||||
<div class="form-group">
|
||||
<label for="amount">Amount:</label>
|
||||
<input type="text" id="amount" class="form-control" bind:value={amount} />
|
||||
</div>
|
||||
|
||||
<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)}
|
||||
{#if expense.id !== undefined}
|
||||
<option value={expense.id}>{expense.name}</option>
|
||||
{/if}
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<button class="btn btn-primary" on:click={createExpense}>Submit</button>
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
|
||||
|
||||
<style>
|
||||
#exp {
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#optionField {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.plus-button {
|
||||
font-size: 24px;
|
||||
background-color: #007BFF;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.plus-button:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
|
||||
.expense-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;
|
||||
}
|
||||
|
||||
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>
|
||||
@@ -0,0 +1,171 @@
|
||||
<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";
|
||||
|
||||
let showModal;
|
||||
let amount = '';
|
||||
|
||||
const selectedIncomeId = writable('');
|
||||
|
||||
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 data = {
|
||||
incomeCategory: selectedIncome.id,
|
||||
amount: amount,
|
||||
};
|
||||
|
||||
try {
|
||||
const token = getCookie('access_token');
|
||||
console.log(token);
|
||||
const response = await axios.post('http://localhost:8081/incomes', 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="inc">
|
||||
<div id="optionField">
|
||||
<h2>Incomes</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>
|
||||
<div class="income-form">
|
||||
<h3>Income Details</h3>
|
||||
<div class="form-group">
|
||||
<label for="amount">Amount:</label>
|
||||
<input type="text" id="amount" class="form-control" bind:value={amount} />
|
||||
</div>
|
||||
|
||||
<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)}
|
||||
{#if income.id !== undefined}
|
||||
<option value={income.id}>{income.name}</option>
|
||||
{/if}
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<button class="btn btn-primary" on:click={createIncome}>Submit</button>
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
|
||||
|
||||
<style>
|
||||
#inc {
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#optionField {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.plus-button {
|
||||
font-size: 24px;
|
||||
background-color: #007BFF;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.plus-button:hover {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
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>
|
||||
@@ -0,0 +1,64 @@
|
||||
<script>
|
||||
export let showModal; // boolean
|
||||
|
||||
let dialog; // HTMLDialogElement
|
||||
|
||||
$: if (dialog && showModal) dialog.showModal();
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-noninteractive-element-interactions -->
|
||||
<dialog
|
||||
bind:this={dialog}
|
||||
on:close={() => (showModal = false)}
|
||||
on:click|self={() => dialog.close()}
|
||||
>
|
||||
<!-- 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: none;
|
||||
padding: 0;
|
||||
}
|
||||
dialog::backdrop {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
dialog > div {
|
||||
padding: 1em;
|
||||
}
|
||||
dialog[open] {
|
||||
animation: zoom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
@keyframes zoom {
|
||||
from {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
to {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
dialog[open]::backdrop {
|
||||
animation: fade 0.2s ease-out;
|
||||
}
|
||||
@keyframes fade {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
button {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
@@ -1,9 +1,17 @@
|
||||
<script>
|
||||
import Graph1 from './graphs/Graph1.svelte';
|
||||
import Graph2 from './graphs/Graph2.svelte';
|
||||
import Graph3 from './graphs/Graph3.svelte';
|
||||
import Expenses from "./Expenses.svelte";
|
||||
import Incomes from "./Incomes.svelte";
|
||||
import Graph1 from '../graphs/Graph1.svelte';
|
||||
import Graph2 from '../graphs/Graph2.svelte';
|
||||
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">
|
||||
Reference in New Issue
Block a user