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

Front upd

Browse Source
This commit is contained in:
Daniel
2023-11-21 14:51:49 +02:00
parent 7481f91b11
commit a6ef16b569
22 changed files with 636 additions and 315 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -11,10 +11,9 @@
"@fortawesome/free-brands-svg-icons": "^6.4.2",
"@fortawesome/free-solid-svg-icons": "^6.4.2",
"axios": "^1.5.1",
"bootstrap": "^5.3.2",
"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",
@@ -579,9 +578,9 @@
"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==",
"version": "0.3.20",
"resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.20.tgz",
"integrity": "sha512-R8LcPeWZol2zR8mmH3JeKQ6QRCFb7XgUhV9ZlGhHLGyg4wpPiPZNQOOWhFZhxKw8u//yTbNGI42Bx/3paXEQ+Q==",
"dependencies": {
"@jridgewell/resolve-uri": "^3.1.0",
"@jridgewell/sourcemap-codec": "^1.4.14"
@@ -639,6 +638,16 @@
"integrity": "sha512-C16M+IYz0rgRhWZdCmK+h58JMv8vijAA61gmz2rspCSwKwzBebpdcsiUmwrtJRdphuY30i6BSLEOP8ppbNLyLg==",
"dev": true
},
"node_modules/@popperjs/core": {
"version": "2.11.8",
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
"integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
"peer": true,
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/popperjs"
}
},
"node_modules/@sveltejs/adapter-auto": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/@sveltejs/adapter-auto/-/adapter-auto-2.1.0.tgz",
@@ -652,9 +661,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": {
@@ -665,12 +674,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"
@@ -729,9 +738,9 @@
"dev": true
},
"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=="
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
"integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw=="
},
"node_modules/acorn": {
"version": "8.10.0",
@@ -836,6 +845,24 @@
"integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
"dev": true
},
"node_modules/bootstrap": {
"version": "5.3.2",
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.2.tgz",
"integrity": "sha512-D32nmNWiQHo94BKHLmOrdjlL05q1c8oxbtBphQFb9Z5to6eGRDCm0QgeaZ4zFBHzfg2++rqa2JkqCcxDy0sH0g==",
"funding": [
{
"type": "github",
"url": "https://github.com/sponsors/twbs"
},
{
"type": "opencollective",
"url": "https://opencollective.com/bootstrap"
}
],
"peerDependencies": {
"@popperjs/core": "^2.11.8"
}
},
"node_modules/brace-expansion": {
"version": "1.1.11",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -976,11 +1003,6 @@
"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",
@@ -1491,11 +1513,6 @@
"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",
@@ -1615,14 +1632,6 @@
"integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
"dev": true
},
"node_modules/js-cookie": {
"version": "3.0.5",
"resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz",
"integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==",
"engines": {
"node": ">=14"
}
},
"node_modules/js-yaml": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
@@ -1753,6 +1762,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",
@@ -1784,25 +1805,6 @@
"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",
@@ -1851,14 +1853,6 @@
"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",
@@ -2307,17 +2301,6 @@
"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",
@@ -2355,9 +2338,9 @@
}
},
"node_modules/svelte": {
"version": "4.2.1",
"resolved": "https://registry.npmjs.org/svelte/-/svelte-4.2.1.tgz",
"integrity": "sha512-LpLqY2Jr7cRxkrTc796/AaaoMLF/1ax7cto8Ot76wrvKQhrPmZ0JgajiWPmg9mTSDqO16SSLiD17r9MsvAPTmw==",
"version": "4.2.5",
"resolved": "https://registry.npmjs.org/svelte/-/svelte-4.2.5.tgz",
"integrity": "sha512-P9YPKsGkNdw4OJbtpd1uzimQHPj7Ai2sPcOHmmD6VgkFhFDmcYevQi7vE4cQ1g8/Vs64aL2TwMoCNFAzv7TPaQ==",
"dependencies": {
"@ampproject/remapping": "^2.2.1",
"@jridgewell/sourcemap-codec": "^1.4.15",
@@ -2370,7 +2353,7 @@
"estree-walker": "^3.0.3",
"is-reference": "^3.0.1",
"locate-character": "^3.0.0",
"magic-string": "^0.30.0",
"magic-string": "^0.30.4",
"periscopic": "^3.1.0"
},
"engines": {
@@ -2495,9 +2478,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"

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

@@ -26,10 +26,9 @@
"@fortawesome/free-brands-svg-icons": "^6.4.2",
"@fortawesome/free-solid-svg-icons": "^6.4.2",
"axios": "^1.5.1",
"bootstrap": "^5.3.2",
"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",

8
src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/+page.svelte
View File

@@ -1,8 +1,8 @@
<script>
import Dashboard from './board/Dashboard.svelte';
import SideMenu from './menu/SideMenu.svelte';
import {selectedTab} from "./stores.js";
import {globalStyles} from "./styles.js";
function handleTabClick(tab) {
selectedTab.set(tab);
@@ -10,19 +10,19 @@
</script>
<div id="wrapper">
<div id="wrapper" style="background-color: {$globalStyles.mainColor}">
<SideMenu onTabClick={handleTabClick} />
<Dashboard {selectedTab} />
<Dashboard />
</div>
<style>
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400');
#wrapper {
background-color: rgb(23,34,51);
display: flex;
align-items: stretch;
min-height: 100vh;
max-height: 100%;
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
</style>

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

@@ -3,7 +3,16 @@
import { onMount } from "svelte";
import ExpenseDashboard from "./ExpenseDashboard.svelte";
import IncomeDashboard from "./IncomeDashboard.svelte";
import Settings from "./Settings.svelte";
import { incomeData, expenseData, incomeTypes, expenseTypes, selectedTab } from "../stores.js";
import {globalStyles} from "../styles.js";
let componentStyles;
$: {
console.log("got here")
componentStyles = $globalStyles;
}
import axios from "axios";
@@ -39,27 +48,28 @@
});
</script>
<div id="dashboard">
<div id="dashboard">
<div id="dashboard" style="background-color: {componentStyles.dashColor}; color: {componentStyles.color}">
{#if $selectedTab === 'expenses'}
<ExpenseDashboard {expenseData} {expenseTypes} />
<ExpenseDashboard />
{:else if $selectedTab === 'incomes'}
<IncomeDashboard {incomeData} {incomeTypes} />
<IncomeDashboard />
{:else if $selectedTab === 'settings'}
<Settings />
{/if}
</div>
</div>
<style>
#dashboard {
font-family: 'Source Sans Pro', sans-serif;
background-color: rgb(245,242,243);
border-radius: 20px;
margin: 20px;
padding: 20px 20px 0;
min-width: 100px;
display: flex;
flex: 1 1 auto;
flex-direction: column;
align-items: stretch;
justify-content: stretch;
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
</style>

59
src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/Settings.svelte Normal file
View File

@@ -0,0 +1,59 @@
<script>
import {globalStyles} from "../styles.js";
import {themeDark} from "../styles.js";
import {themeDefault} from "../styles.js";
function theme_dark() {
$globalStyles = themeDark;
}
function theme_default() {
$globalStyles = themeDefault;
}
</script>
<div>
<h1>Settings</h1>
<button class="button-32" on:click={() => theme_default()}>Select</button>
<button class="button-32" on:click={() => theme_dark()}>Select</button>
<button class="button-32" on:click={() => theme_dark()}>Select</button>
<button class="button-32" on:click={() => theme_dark()}>Select</button>
<button class="button-32" on:click={() => theme_dark()}>Select</button>
</div>
<style>
.button-32 {
background-color: #fff000;
border-radius: 12px;
color: #000;
cursor: pointer;
font-weight: bold;
padding: 10px 15px;
text-align: center;
transition: 200ms;
width: 100px;
box-sizing: border-box;
border: 0;
font-size: 16px;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
}
.button-32:not(:disabled):hover,
.button-32:not(:disabled):focus {
outline: 0;
background: #f4e603;
box-shadow: 0 0 0 2px rgba(0,0,0,.2), 0 3px 8px 0 rgba(0,0,0,.15);
}
.button-32:disabled {
filter: saturate(0.2) opacity(0.5);
-webkit-filter: saturate(0.2) opacity(0.5);
cursor: not-allowed;
}
</style>

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

@@ -2,6 +2,7 @@
import Chart from 'chart.js/auto';
import { onMount } from 'svelte';
import { expenseData } from "../../../stores.js";
import {globalStyles} from "../../../styles.js";
let ctx;
let chartCanvas;
@@ -73,7 +74,7 @@
});
</script>
<div id="chart">
<div id="chart" style="background-color: {$globalStyles.mainColor}">
<canvas bind:this={chartCanvas}></canvas>
</div>
@@ -82,9 +83,10 @@
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);
flex: 1;
border-radius: 10px;
margin: 10px;
background-color: #d3d3d3;
border-radius: 0 0 10px 10px;
margin: 0 0 10px 10px;
min-width: 0;
min-height:0;
}
#chart:hover {

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

@@ -2,6 +2,7 @@
import Chart from 'chart.js/auto';
import { onMount } from 'svelte';
import { incomeData, expenseData } from "../../../stores.js";
import {globalStyles} from "../../../styles.js";
let ctx;
let chartCanvas;
@@ -15,6 +16,7 @@
const chartLabels = ['Incomes', 'Expenses'];
const chartValues = [totalIncomes, totalExpenses];
if (chartCanvas.getContext('2d') !== undefined) {
ctx = chartCanvas.getContext('2d');
if (!chart) {
chart = new Chart(ctx, {
@@ -44,6 +46,7 @@
chart.data.datasets[0].data = chartValues;
chart.update();
}
}
} catch (error) {
console.error('Error:', error);
}
@@ -60,7 +63,7 @@
});
</script>
<div id="chart">
<div id="chart" style="background-color: {$globalStyles.mainColor}">
<canvas bind:this={chartCanvas}></canvas>
</div>
@@ -69,9 +72,10 @@
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);
flex: 1;
border-radius: 10px;
margin: 10px;
background-color: #d3d3d3;
border-radius: 0 0 10px 10px;
margin: 0 0 10px 10px;
min-width: 0;
min-height:0;
}
#chart:hover {

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

@@ -1,9 +1,10 @@
<script>
import Modal from '../modals/Modal.svelte';
import Modal from './Modal.svelte';
import { writable } from 'svelte/store';
import axios from 'axios';
import { getCookie } from "svelte-cookie";
import {expenseTypes, expenseData} from "../../../../stores.js";
import {expenseTypes, expenseData} from "../../../stores.js";
let showModal;
let amount = '';
@@ -40,10 +41,10 @@
const selectedExpense = $expenseTypes.find(expense => expense.id === $selectedExpenseId);
const data = {
expenseCategory: selectedExpense.id,
amount: amount,
amount: parseInt(amount),
};
addNewExpense(selectedExpense.id, amount);
addNewExpense(selectedExpense.id, parseInt(amount));
try {
const token = getCookie('access_token');
@@ -100,7 +101,7 @@
<style>
#exp {
padding: 20px;
padding: 10px 20px;
text-align: center;
}

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

@@ -1,27 +1,15 @@
<script>
import { onMount, afterUpdate } from 'svelte';
import ContentExpense from "./contents/ContentExpense.svelte";
import ContentExpense from "./ContentExpense.svelte";
import { expenseData } from "../../../stores.js";
let parentHeight;
let listParentHeight;
async function updateInfo() {
parentHeight = document.querySelector('#expenseInfo').offsetHeight;
listParentHeight = document.querySelector('#expenseList').offsetHeight;
}
onMount(updateInfo);
afterUpdate(updateInfo);
import { globalStyles } from "../../../styles.js";
</script>
<div id="expenseInfo" style="max-height: {parentHeight}px;">
<div id="expenseInfo" style="background-color: {$globalStyles.mainColor}">
<ContentExpense />
<div id="expenseList" style="max-height: {listParentHeight}px;">
<div id="listContainer" style="color: {$globalStyles.color}">
<ul>
{#each $expenseData as item}
<li>
<li style="color: {$globalStyles.color}">
{item.incomeCategory ? `${item.incomeCategory.name}: ` : `${item.expenseCategory.name}: `}
{item.incomeCategory ? `+${item.amount}$` : `-${item.amount}$`}
{`${item.date}`}
@@ -31,38 +19,49 @@
</div>
</div>
<style>
#expenseInfo {
display: flex;
flex-direction: column;
min-width: 300px;
min-height: 0;
background-color: #212942;
color: white;
border-radius: 10px;
margin: 10px;
border-radius: 0 0 10px 10px;
margin: 0 0 10px 0;
display: flex;
flex-direction: column;
box-sizing: border-box;
}
#expenseList {
scrollbar-width: none;
flex: 1;
border-radius: 10px;
margin: 10px;
#listContainer {
flex: 1 1 auto;
overflow-y: auto;
max-height: 100%;
min-height: 0;
padding: 0 10px 10px;
margin: 0 0 10px;
box-sizing: border-box;
border-radius: 0 0 10px 10px;
}
#expenseList::-webkit-scrollbar {
display: none;
#listContainer::-webkit-scrollbar {
width: 0;
}
ul {
#listContainer::-webkit-scrollbar-thumb {
background-color: transparent;
}
#listContainer::-webkit-scrollbar-track {
background-color: transparent;
}
#listContainer ul {
list-style: none;
padding: 0;
color:black;
border-radius: 0 0 10px 10px;
}
li {
#listContainer li {
margin-bottom: 20px;
background-color: #f2f2f2;
padding: 10px;
@@ -71,7 +70,7 @@
transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
}
li:hover {
#listContainer li:hover {
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
</style>

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

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

@@ -2,55 +2,163 @@
import Graph2 from '../graphs/Graph2.svelte';
import Graph3 from '../graphs/Graph3.svelte';
import Expenses from "../infolists/Expenses.svelte";
import {globalStyles} from "../../../styles.js";
import { slide } from 'svelte/transition'
import {expenseTypes} from "../../../stores.js";
let isDateDropdownExpanded = false
let isCategoryDropdownExpanded = false
function clickHandlerDate() {
isDateDropdownExpanded = !isDateDropdownExpanded
}
function clickHandlerCategory() {
isCategoryDropdownExpanded = !isCategoryDropdownExpanded;
}
</script>
<div id="dataMenu">
<div id="twoVertical">
<div id="main-data" style="background-color: {$globalStyles.dashColor}; color: {$globalStyles.color}">
<div id="data-header" style="background-color:{$globalStyles.mainColor}; color: {$globalStyles.altColor}">
<span style="color: {$globalStyles.altColor}">Revenue Analysis</span>
<div id="dropdown-date">
<button id="button" on:click={clickHandlerDate}>Filter by Date:</button>
{#if isDateDropdownExpanded}
<div id="date-list" transition:slide>
<div on:click={() => console.log("Today")}>Today</div>
<div on:click={() => console.log("Yesterday")}>Yesterday</div>
<div on:click={() => console.log("Last week")}>Last week</div>
<div on:click={() => console.log("Last month")}>Last month</div>
<div on:click={() => console.log("Current quarter")}>Current quarter</div>
<div on:click={() => console.log("This year")}>This year</div>
</div>
{/if}
</div>
<div id="dropdown-category">
<button id="button" on:click={clickHandlerCategory}>Filter by Category:</button>
{#if isCategoryDropdownExpanded}
<div id="category-list" transition:slide>
{#each $expenseTypes as expense (expense.id)}
{#if expense.id !== undefined}
<option value={expense.id}>{expense.name}</option>
{/if}
{/each}
</div>
{/if}
</div>
</div>
<div id="data-menu">
<div id="first-graph">
<Graph2 />
</div>
<div id="oneVertical">
<div id="second-graph">
<Graph3 />
</div>
<div id="dataPanel">
<Expenses />
</div>
</div>
<style>
#dataMenu {
#main-data {
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
background-color: rgb(245,242,243);
padding:0;
display: flex;
padding:10px;
flex-direction: row-reverse;
min-height: 0;
height: 0;
flex-direction: column;
justify-content: stretch;
align-items: stretch;
flex-grow: 1;
flex: 1 1 auto;
}
#button {
background-color: #fff000;
border-radius: 12px;
color: #000;
cursor: pointer;
font-weight: bold;
padding: 10px 15px;
text-align: center;
transition: 200ms;
width: 100%;
box-sizing: border-box;
border: 0;
font-size: 16px;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
}
#button:not(:disabled):hover,
#button:not(:disabled):focus {
outline: 0;
background: #f4e603;
box-shadow: 0 0 0 2px rgba(0,0,0,.2), 0 3px 8px 0 rgba(0,0,0,.15);
}
#button:disabled {
filter: saturate(0.2) opacity(0.5);
-webkit-filter: saturate(0.2) opacity(0.5);
cursor: not-allowed;
}
#twoVertical {
display: flex;
flex-direction: column;
align-self: stretch;
flex-grow: 1;
min-width: 0;
min-height:0;
#date-list {
background-color: #8BD17C;
position:absolute;
z-index:1;
}
#oneVertical {
display: flex;
flex-direction: column;
align-self: stretch;
flex-grow: 1;
min-width: 0;
min-height:0;
#category-list {
background-color: #8BD17C;
position:absolute;
z-index:1;
}
#dataPanel {
#data-header {
background-color: black;
min-height: 50px;
padding-left: 30px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
font-size: larger;
border: #8BD17C 2px solid;
}
#data-menu {
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
display:flex;
/*padding:10px;*/
flex-direction: row-reverse;
justify-content: space-between;
align-items: stretch;
flex: 1;
height: 0;
min-height: 0;
}
#first-graph {
display: flex;
flex-direction: column;
align-self: stretch;
flex-grow: 1;
min-width: 0;
min-height:0;
}
#second-graph {
display: flex;
flex-direction: column;
align-self: stretch;
flex-grow: 1;
min-width: 0;

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

@@ -1,6 +1,7 @@
<script>
import { onMount } from 'svelte';
import { incomeData, expenseData } from "../../../stores.js";
import {globalStyles} from "../../../styles.js";
let infobar1, infobar2, infobar3, infobar4;
let totalExpenses = 0;
@@ -38,10 +39,10 @@
</script>
<div id="quickInfobar">
<div class="infobarElement" bind:this={infobar1}></div>
<div class="infobarElement" bind:this={infobar2}></div>
<div class="infobarElement" bind:this={infobar3}></div>
<div class="infobarElement" bind:this={infobar4}></div>
<div class="infobarElement" bind:this={infobar1} style="background-color: {$globalStyles.mainColor}"></div>
<div class="infobarElement" bind:this={infobar2} style="background-color: {$globalStyles.mainColor}"></div>
<div class="infobarElement" bind:this={infobar3} style="background-color: {$globalStyles.mainColor}"></div>
<div class="infobarElement" bind:this={infobar4} style="background-color: {$globalStyles.mainColor}"></div>
</div>
<style>

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

@@ -2,6 +2,14 @@
import Chart from 'chart.js/auto';
import { onMount } from 'svelte';
import { incomeData } from "../../../stores.js";
import {globalStyles} from "../../../styles.js";
let componentStyles;
$: {
console.log("got here")
componentStyles = $globalStyles;
}
let ctx;
let chartCanvas;
@@ -76,7 +84,7 @@
});
</script>
<div id="chart">
<div id="chart" style="background-color: {componentStyles.mainColor}">
<canvas bind:this={chartCanvas}></canvas>
</div>
@@ -85,9 +93,10 @@
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);
flex: 1;
border-radius: 10px;
margin: 10px;
background-color: #d3d3d3;
border-radius: 0 0 10px 10px;
margin: 0 0 10px 10px;
min-width: 0;
min-height:0;
}
#chart:hover {

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

@@ -2,6 +2,14 @@
import Chart from 'chart.js/auto';
import { onMount } from 'svelte';
import { incomeData, expenseData } from "../../../stores.js";
import {globalStyles} from "../../../styles.js";
let componentStyles;
$: {
console.log("got here")
componentStyles = $globalStyles;
}
let ctx;
let chartCanvas;
@@ -15,6 +23,7 @@
const chartLabels = ['Incomes', 'Expenses'];
const chartValues = [totalIncomes, totalExpenses];
if (chartCanvas.getContext('2d') !== undefined) {
ctx = chartCanvas.getContext('2d');
if (!chart) {
chart = new Chart(ctx, {
@@ -44,6 +53,7 @@
chart.data.datasets[0].data = chartValues;
chart.update();
}
}
} catch (error) {
console.error('Error:', error);
}
@@ -60,7 +70,7 @@
});
</script>
<div id="chart">
<div id="chart" style="background-color: {componentStyles.mainColor}">
<canvas bind:this={chartCanvas}></canvas>
</div>
@@ -69,9 +79,10 @@
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);
flex: 1;
border-radius: 10px;
margin: 10px;
background-color: #d3d3d3;
border-radius: 0 0 10px 10px;
margin: 0 0 10px 10px;
min-width: 0;
min-height:0;
}
#chart:hover {

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

@@ -1,9 +1,9 @@
<script>
import Modal from '../modals/Modal.svelte';
import Modal from './Modal.svelte';
import { writable } from 'svelte/store';
import axios from 'axios';
import { getCookie } from "svelte-cookie";
import {incomeData, incomeTypes} from "../../../../stores.js";
import {incomeData, incomeTypes} from "../../../stores.js";
let showModal;
let amount = '';
@@ -27,7 +27,7 @@
},
incomeCategory: incomeCategory,
date: today,
amount: amount
amount: parseInt(amount)
};
newData = $incomeData;
@@ -45,7 +45,7 @@
amount: parseInt(amount),
};
addNewIncome(selectedIncome.id, amount);
addNewIncome(selectedIncome.id, parseInt(amount));
try {
const token = getCookie('access_token');
@@ -102,7 +102,7 @@
<style>
#inc {
padding: 20px;
padding: 10px 20px;
text-align: center;
}

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

@@ -1,28 +1,16 @@
<script>
import { onMount, afterUpdate } from 'svelte';
import ContentIncome from "./ContentIncome.svelte";
import { incomeData } from "../../../stores.js";
import ContentIncome from "./contents/ContentIncome.svelte";
let parentHeight;
let listParentHeight;
async function updateInfo() {
parentHeight = document.querySelector('#expenseInfo').offsetHeight;
listParentHeight = document.querySelector('#expenseList').offsetHeight;
}
onMount(updateInfo);
afterUpdate(updateInfo);
import { globalStyles } from "../../../styles.js";
</script>
<div id="incomeInfo" style="max-height: {parentHeight}px;">
<div id="incomeInfo" style="background-color: {$globalStyles.mainColor}">
<ContentIncome />
<div id="incomeList" style="max-height: {listParentHeight}px;">
<div id="listContainer" style="color: {$globalStyles.color}">
<ul>
{#each $incomeData as item}
<li>
{item.incomeCategory ? `${item.incomeCategory.name}: ` : `${item.expenseCategory.name}: `}
{item.incomeCategory ? `${item.incomeCategory.name}: ` : `${item.incomeCategory.name}: `}
{item.incomeCategory ? `+${item.amount}$` : `-${item.amount}$`}
{`${item.date}`}
</li>
@@ -32,32 +20,48 @@
</div>
<style>
#incomeInfo {
display: flex;
flex-direction: column;
min-width: 300px;
min-height: 0;
background-color: #212942;
color: white;
border-radius: 10px;
margin: 10px;
border-radius: 0 0 10px 10px;
margin: 0 0 10px 0;
display: flex;
flex-direction: column;
box-sizing: border-box;
}
#incomeList {
scrollbar-width: none;
flex: 1;
border-radius: 10px;
margin: 10px;
#listContainer {
flex: 1 1 auto;
overflow-y: auto;
max-height: 100%;
min-height: 0;
padding: 0 10px 10px;
margin: 0 0 10px;
box-sizing: border-box;
border-radius: 0 0 10px 10px;
}
ul {
#listContainer::-webkit-scrollbar {
width: 0;
}
#listContainer::-webkit-scrollbar-thumb {
background-color: transparent;
}
#listContainer::-webkit-scrollbar-track {
background-color: transparent;
}
#listContainer ul {
list-style: none;
padding: 0;
color: black;
border-radius: 0 0 10px 10px;
}
li {
#listContainer li {
margin-bottom: 20px;
background-color: #f2f2f2;
padding: 10px;
@@ -66,11 +70,7 @@
transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
}
li:hover {
#listContainer li:hover {
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
src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/incomes/infolists/modals/Modal.svelte → src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/incomes/infolists/Modal.svelte
View File

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

@@ -2,55 +2,163 @@
import Graph1 from '../graphs/Graph1.svelte';
import Graph3 from '../graphs/Graph3.svelte';
import Incomes from "../infolists/Incomes.svelte";
import {globalStyles} from "../../../styles.js";
import { slide } from 'svelte/transition'
import {incomeTypes} from "../../../stores.js";
let isDateDropdownExpanded = false
let isCategoryDropdownExpanded = false
function clickHandlerDate() {
isDateDropdownExpanded = !isDateDropdownExpanded
}
function clickHandlerCategory() {
isCategoryDropdownExpanded = !isCategoryDropdownExpanded;
}
</script>
<div id="dataMenu">
<div id="twoVertical">
<div id="main-data" style="background-color: {$globalStyles.dashColor}; color: {$globalStyles.color}">
<div id="data-header" style="background-color:{$globalStyles.mainColor}; color: {$globalStyles.altColor}">
<span>Revenue Analysis</span>
<div id="dropdown-date">
<button id="button" on:click={clickHandlerDate}>Filter by Date:</button>
{#if isDateDropdownExpanded}
<div id="date-list" transition:slide>
<div on:click={() => console.log("Today")}>Today</div>
<div on:click={() => console.log("Yesterday")}>Yesterday</div>
<div on:click={() => console.log("Last week")}>Last week</div>
<div on:click={() => console.log("Last month")}>Last month</div>
<div on:click={() => console.log("Current quarter")}>Current quarter</div>
<div on:click={() => console.log("This year")}>This year</div>
</div>
{/if}
</div>
<div id="dropdown-category">
<button id="button" on:click={clickHandlerCategory}>Filter by Category:</button>
{#if isCategoryDropdownExpanded}
<div id="category-list" transition:slide>
{#each $incomeTypes as income (income.id)}
{#if income.id !== undefined}
<option value={income.id}>{income.name}</option>
{/if}
{/each}
</div>
{/if}
</div>
</div>
<div id="data-menu">
<div id="first-graph">
<Graph1 />
</div>
<div id="oneVertical">
<div id="second-graph">
<Graph3 />
</div>
<div id="dataPanel">
<Incomes />
</div>
</div>
<style>
#dataMenu {
#main-data {
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
background-color: rgb(245,242,243);
padding:0;
display: flex;
padding:10px;
flex-direction: row-reverse;
min-height: 0;
height: 0;
flex-direction: column;
justify-content: stretch;
align-items: stretch;
flex-grow: 1;
flex: 1 1 auto;
}
#button {
background-color: #fff000;
border-radius: 12px;
color: #000;
cursor: pointer;
font-weight: bold;
padding: 10px 15px;
text-align: center;
transition: 200ms;
width: 100%;
box-sizing: border-box;
border: 0;
font-size: 16px;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
}
#button:not(:disabled):hover,
#button:not(:disabled):focus {
outline: 0;
background: #f4e603;
box-shadow: 0 0 0 2px rgba(0,0,0,.2), 0 3px 8px 0 rgba(0,0,0,.15);
}
#button:disabled {
filter: saturate(0.2) opacity(0.5);
-webkit-filter: saturate(0.2) opacity(0.5);
cursor: not-allowed;
}
#twoVertical {
display: flex;
flex-direction: column;
align-self: stretch;
flex-grow: 1;
min-width: 0;
min-height:0;
#date-list {
background-color: #8BD17C;
position:absolute;
z-index:1;
}
#oneVertical {
display: flex;
flex-direction: column;
align-self: stretch;
flex-grow: 1;
min-width: 0;
min-height:0;
#category-list {
background-color: #8BD17C;
position:absolute;
z-index:1;
}
#dataPanel {
#data-header {
background-color: black;
min-height: 50px;
padding-left: 30px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
font-size: larger;
border: #8BD17C 2px solid;
}
#data-menu {
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
display:flex;
/*padding:10px;*/
flex-direction: row-reverse;
justify-content: space-between;
align-items: stretch;
flex: 1;
height: 0;
min-height: 0;
}
#first-graph {
display: flex;
flex-direction: column;
align-self: stretch;
flex-grow: 1;
min-width: 0;
min-height:0;
}
#second-graph {
display: flex;
flex-direction: column;
align-self: stretch;
flex-grow: 1;
min-width: 0;

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

@@ -1,6 +1,14 @@
<script>
import { onMount } from 'svelte';
import { incomeData, expenseData } from "../../../stores.js";
import {globalStyles} from "../../../styles.js";
let componentStyles;
$: {
console.log("got here")
componentStyles = $globalStyles;
}
let infobar1, infobar2, infobar3, infobar4;
let totalExpenses = 0;
@@ -38,10 +46,10 @@
</script>
<div id="quickInfobar">
<div class="infobarElement" bind:this={infobar1}></div>
<div class="infobarElement" bind:this={infobar2}></div>
<div class="infobarElement" bind:this={infobar3}></div>
<div class="infobarElement" bind:this={infobar4}></div>
<div class="infobarElement" bind:this={infobar1} style="background-color: {componentStyles.mainColor}"></div>
<div class="infobarElement" bind:this={infobar2} style="background-color: {componentStyles.mainColor}"></div>
<div class="infobarElement" bind:this={infobar3} style="background-color: {componentStyles.mainColor}"></div>
<div class="infobarElement" bind:this={infobar4} style="background-color: {componentStyles.mainColor}"></div>
</div>
<style>

7
src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/menu/SideMenu.svelte
View File

@@ -2,6 +2,7 @@
import { onMount } from 'svelte';
import axios from 'axios';
import {deleteCookie, getCookie} from "svelte-cookie";
export let onTabClick;
let username;
@@ -43,12 +44,12 @@
<div on:click={() => onTabClick('expenses')} tabindex="0" role="button" class="sideMenuItem">
<svg class="svgimg" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 576 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M64 64C28.7 64 0 92.7 0 128V384c0 35.3 28.7 64 64 64H512c35.3 0 64-28.7 64-64V128c0-35.3-28.7-64-64-64H64zm64 320H64V320c35.3 0 64 28.7 64 64zM64 192V128h64c0 35.3-28.7 64-64 64zM448 384c0-35.3 28.7-64 64-64v64H448zm64-192c-35.3 0-64-28.7-64-64h64v64zM288 160a96 96 0 1 1 0 192 96 96 0 1 1 0-192z"/></svg>
<span class="sideMenuItemText">Expenses</span>
<span class="sideMenuItemText">Spendings</span>
</div>
<div on:click={() => onTabClick('incomes')} tabindex="0" role="button" class="sideMenuItem">
<svg class="svgimg" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 576 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M64 64C28.7 64 0 92.7 0 128V384c0 35.3 28.7 64 64 64H512c35.3 0 64-28.7 64-64V128c0-35.3-28.7-64-64-64H64zm64 320H64V320c35.3 0 64 28.7 64 64zM64 192V128h64c0 35.3-28.7 64-64 64zM448 384c0-35.3 28.7-64 64-64v64H448zm64-192c-35.3 0-64-28.7-64-64h64v64zM288 160a96 96 0 1 1 0 192 96 96 0 1 1 0-192z"/></svg>
<span class="sideMenuItemText">Incomes</span>
<span class="sideMenuItemText">Revenues</span>
</div>
<div class="sideMenuItem">
@@ -56,7 +57,7 @@
<span class="sideMenuItemText">General</span>
</div>
<div class="sideMenuItem">
<div on:click={() => onTabClick('settings')} tabindex="0" role="button" class="sideMenuItem">
<svg class="svgimg" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4L83.1 425.9c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L22.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8C227.3 1.2 241.5 0 256 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z"/></svg>
<span class="sideMenuItemText">Settings</span>
</div>

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

@@ -0,0 +1,18 @@
import { writable } from 'svelte/store';
export const themeDefault = {
mainColor: '#172233',
dashColor: '#F5F2F3',
color: 'black',
altColor: 'white'
}
export const themeDark = {
mainColor: '#000000',
dashColor: '#202020',
color: 'black',
altColor: 'white'
}
export const globalStyles = writable(themeDefault);