Front v3 #37
@@ -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"
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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>
|
||||
@@ -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: 1 1 auto;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
justify-content: stretch;
|
||||
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -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>
|
||||
@@ -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 {
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -1,27 +1,15 @@
|
||||
<script>
|
||||
import { onMount, afterUpdate } from 'svelte';
|
||||
import ContentExpense from "./contents/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 ContentExpense from "./ContentExpense.svelte";
|
||||
import { expenseData } from "../../../stores.js";
|
||||
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,47 +19,58 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<style>
|
||||
|
||||
#expenseInfo {
|
||||
min-width: 300px;
|
||||
min-height: 0;
|
||||
background-color: #212942;
|
||||
color: white;
|
||||
border-radius: 0 0 10px 10px;
|
||||
margin: 0 0 10px 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 300px;
|
||||
background-color: #212942;
|
||||
color:white;
|
||||
border-radius: 10px;
|
||||
margin: 10px;
|
||||
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;
|
||||
border-radius: 5px;
|
||||
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);
|
||||
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);
|
||||
}
|
||||
|
||||
li:hover {
|
||||
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
|
||||
#listContainer li:hover {
|
||||
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -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);
|
||||
display:flex;
|
||||
padding:10px;
|
||||
flex-direction: row-reverse;
|
||||
padding:0;
|
||||
display: flex;
|
||||
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;
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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,45 +20,57 @@
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
||||
#incomeInfo {
|
||||
min-width: 300px;
|
||||
min-height: 0;
|
||||
background-color: #212942;
|
||||
color: white;
|
||||
border-radius: 0 0 10px 10px;
|
||||
margin: 0 0 10px 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 300px;
|
||||
background-color: #212942;
|
||||
color:white;
|
||||
border-radius: 10px;
|
||||
margin: 10px;
|
||||
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;
|
||||
border-radius: 5px;
|
||||
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);
|
||||
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);
|
||||
}
|
||||
|
||||
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;
|
||||
#listContainer li:hover {
|
||||
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -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);
|
||||
display:flex;
|
||||
padding:10px;
|
||||
flex-direction: row-reverse;
|
||||
padding:0;
|
||||
display: flex;
|
||||
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;
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user