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

Merge pull request #34 from lumijiez/front-v2

Browse Source 
Front v2
This commit was merged in pull request #34.
This commit is contained in:
Daniel
2023-11-17 12:58:45 +02:00
committed by GitHub
parent ab3641dacb 4404eedeec
commit 4410694993
22 changed files with 429 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,11 +1,18 @@
<script>
import Dashboard from './board/Dashboard.svelte';
import SideMenu from './menu/SideMenu.svelte';
import {selectedTab} from "./stores.js";
function handleTabClick(tab) {
selectedTab.set(tab);
}
</script>
<div id="wrapper">
<SideMenu />
<Dashboard />
<SideMenu onTabClick={handleTabClick} />
<Dashboard {selectedTab} />
</div>
<style>

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

@@ -1,15 +1,12 @@
<script>
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 {incomeData, expenseData, incomeTypes, expenseTypes} from "../stores.js";
import { onMount } from "svelte";
import ExpenseDashboard from "./ExpenseDashboard.svelte";
import IncomeDashboard from "./IncomeDashboard.svelte";
import { incomeData, expenseData, incomeTypes, expenseTypes, selectedTab } from "../stores.js";
import axios from "axios";
onMount(async () => {
const token = getCookie('access_token');
@@ -43,9 +40,13 @@
</script>
<div id="dashboard">
<DashHeader />
<QuickInfobar />
<DataMenu />
<div id="dashboard">
{#if $selectedTab === 'expenses'}
<ExpenseDashboard {expenseData} {expenseTypes} />
{:else if $selectedTab === 'incomes'}
<IncomeDashboard {incomeData} {incomeTypes} />
{/if}
</div>
</div>
<style>

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

@@ -0,0 +1,9 @@
<script>
import DashHeader from "./expenses/other/DashHeader.svelte";
import DataMenu from "./expenses/other/DataMenu.svelte";
import QuickInfobar from "./expenses/other/QuickInfobar.svelte";
</script>
<DashHeader />
<QuickInfobar />
<DataMenu />

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

@@ -0,0 +1,9 @@
<script>
import DashHeader from "./incomes/other/DashHeader.svelte";
import DataMenu from "./incomes/other/DataMenu.svelte";
import QuickInfobar from "./incomes/other/QuickInfobar.svelte";
</script>
<DashHeader />
<QuickInfobar />
<DataMenu />

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

@@ -1,7 +1,7 @@
<script>
import Chart from 'chart.js/auto';
import { onMount } from 'svelte';
import { expenseData } from "../../stores.js";
import { expenseData } from "../../../stores.js";
let ctx;
let chartCanvas;

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

@@ -1,7 +1,7 @@
<script>
import Chart from 'chart.js/auto';
import { onMount } from 'svelte';
import { incomeData, expenseData } from "../../stores.js";
import { incomeData, expenseData } from "../../../stores.js";
let ctx;
let chartCanvas;

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

@@ -1,7 +1,7 @@
<script>
import { onMount, afterUpdate } from 'svelte';
import ContentExpense from "./contents/ContentExpense.svelte";
import {expenseData} from "../../stores.js";
import {expenseData} from "../../../stores.js";
let parentHeight;
let listParentHeight;
@@ -36,6 +36,7 @@
#expenseInfo {
display: flex;
flex-direction: column;
min-width: 300px;
background-color: #212942;
color:white;
border-radius: 10px;

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

@@ -3,7 +3,7 @@
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 = '';

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

0
src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/other/DashHeader.svelte → src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/other/DashHeader.svelte
View File

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

@@ -1,21 +1,17 @@
<script>
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";
</script>
<div id="dataMenu">
<div id="twoVertical">
<Graph1 />
<Graph2 />
</div>
<div id="oneVertical">
<Graph3 />
</div>
<div id="dataPanel">
<Incomes />
<Expenses />
</div>
</div>

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

@@ -1,6 +1,6 @@
<script>
import { onMount } from 'svelte';
import { incomeData, expenseData } from "../../stores.js";
import { incomeData, expenseData } from "../../../stores.js";
let infobar1, infobar2, infobar3, infobar4;
let totalExpenses = 0;

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

@@ -1,7 +1,7 @@
<script>
import Chart from 'chart.js/auto';
import { onMount } from 'svelte';
import { incomeData } from "../../stores.js";
import { incomeData } from "../../../stores.js";
let ctx;
let chartCanvas;

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

@@ -0,0 +1,80 @@
<script>
import Chart from 'chart.js/auto';
import { onMount } from 'svelte';
import { incomeData, expenseData } from "../../../stores.js";
let ctx;
let chartCanvas;
let chart = null;
function createGraph() {
try {
const totalIncomes = $incomeData.reduce((total, item) => total + item.amount, 0);
const totalExpenses = $expenseData.reduce((total, item) => total + item.amount, 0);
const chartLabels = ['Incomes', 'Expenses'];
const chartValues = [totalIncomes, totalExpenses];
ctx = chartCanvas.getContext('2d');
if (!chart) {
chart = new Chart(ctx, {
type: 'pie',
data: {
labels: chartLabels,
datasets: [{
data: chartValues,
backgroundColor: [
'rgb(243, 188, 0)',
'rgb(0, 117, 164)'
],
}]
},
options: {
responsive: true,
maintainAspectRatio: false
}
});
} else {
const totalIncomesUpd = $incomeData.reduce((total, item) => total + parseInt(item.amount), 0);
const totalExpensesUpd = $expenseData.reduce((total, item) => total + parseInt(item.amount), 0);
const chartLabels = ['Incomes', 'Expenses'];
const chartValues = [totalIncomesUpd, totalExpensesUpd];
chart.data.labels = chartLabels;
chart.data.datasets[0].data = chartValues;
chart.update();
}
} catch (error) {
console.error('Error:', error);
}
}
$: {
if ($incomeData || $expenseData) {
createGraph();
}
}
onMount(() => {
createGraph();
});
</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);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
flex: 1;
border-radius: 10px;
margin: 10px;
background-color: #d3d3d3;
}
#chart:hover {
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
</style>

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

@@ -1,6 +1,6 @@
<script>
import { onMount, afterUpdate } from 'svelte';
import { incomeData } from "../../stores.js";
import { incomeData } from "../../../stores.js";
import ContentIncome from "./contents/ContentIncome.svelte";
let parentHeight;
@@ -35,6 +35,7 @@
#incomeInfo {
display: flex;
flex-direction: column;
min-width: 300px;
background-color: #212942;
color:white;
border-radius: 10px;

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

@@ -3,7 +3,7 @@
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 = '';

57
src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/incomes/infolists/modals/Modal.svelte Normal file
View File

@@ -0,0 +1,57 @@
<script>
export let showModal;
let dialog;
$: 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" />
<slot />
</div>
</dialog>
<style>
dialog {
max-width: 32em;
border-radius: 20px;
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;
}
}
</style>

66
src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/incomes/other/DashHeader.svelte Normal file
View File

@@ -0,0 +1,66 @@
<script>
</script>
<div id="header">
<div id="dashboardTitleWrapper">
<h5>Hello, welcome to your</h5>
<h1 id="dashboardTitle">Dashboard</h1>
</div>
<div id="icons">
<div class="headerbtn searchButton">
<svg xmlns="http://www.w3.org/2000/svg" height="1.3em" viewBox="0 0 512 512"><path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/></svg>
</div>
<div class="headerbtn notificationButton">
<svg xmlns="http://www.w3.org/2000/svg" height="1.3em" viewBox="0 0 448 512"><path d="M224 0c-17.7 0-32 14.3-32 32V49.9C119.5 61.4 64 124.2 64 200v33.4c0 45.4-15.5 89.5-43.8 124.9L5.3 377c-5.8 7.2-6.9 17.1-2.9 25.4S14.8 416 24 416H424c9.2 0 17.6-5.3 21.6-13.6s2.9-18.2-2.9-25.4l-14.9-18.6C399.5 322.9 384 278.8 384 233.4V200c0-75.8-55.5-138.6-128-150.1V32c0-17.7-14.3-32-32-32zm0 96h8c57.4 0 104 46.6 104 104v33.4c0 47.9 13.9 94.6 39.7 134.6H72.3C98.1 328 112 281.3 112 233.4V200c0-57.4 46.6-104 104-104h8zm64 352H224 160c0 17 6.7 33.3 18.7 45.3s28.3 18.7 45.3 18.7s33.3-6.7 45.3-18.7s18.7-28.3 18.7-45.3z"/></svg>
</div>
</div>
</div>
<style>
#header {
display: flex;
align-items: center;
justify-content: space-between;
}
#dashboardTitleWrapper {
display: flex;
flex-direction: column;
margin:20px;
margin-bottom: 0px;
}
#dashboardTitleWrapper h5 {
margin: 0;
}
#dashboardTitleWrapper h1 {
margin-top: 0;
}
#icons {
display: flex;
margin-right:20px;
}
.headerbtn {
width: 70px;
height: 70px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.headerbtn:hover::before {
content: "";
width: 40px;
height: 40px;
background-color: rgb(100, 100, 100, 0.25);
border-radius: 50%;
position: absolute;
}
</style>

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

@@ -0,0 +1,60 @@
<script>
import Graph1 from '../graphs/Graph1.svelte';
import Graph3 from '../graphs/Graph3.svelte';
import Incomes from "../infolists/Incomes.svelte";
</script>
<div id="dataMenu">
<div id="twoVertical">
<Graph1 />
</div>
<div id="oneVertical">
<Graph3 />
</div>
<div id="dataPanel">
<Incomes />
</div>
</div>
<style>
#dataMenu {
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
background-color: rgb(245,242,243);
display:flex;
padding:10px;
flex-direction: row-reverse;
justify-content: stretch;
align-items: stretch;
flex-grow: 1;
}
#twoVertical {
display: flex;
flex-direction: column;
align-self: stretch;
flex-grow: 1;
min-width: 0;
min-height:0;
}
#oneVertical {
display: flex;
flex-direction: column;
align-self: stretch;
flex-grow: 1;
min-width: 0;
min-height:0;
}
#dataPanel {
display: flex;
flex-direction: row;
align-self: stretch;
flex-grow: 1;
min-width: 0;
min-height:0;
}
</style>

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

@@ -0,0 +1,71 @@
<script>
import { onMount } from 'svelte';
import { incomeData, expenseData } from "../../../stores.js";
let infobar1, infobar2, infobar3, infobar4;
let totalExpenses = 0;
let totalIncomes = 0;
let lastMonthIncome = 800; // Dummy last month's income
let lastMonthExpense = 200; // Dummy last month's expense
function updateInfo() {
totalExpenses = $expenseData.reduce((total, item) => total + parseInt(item.amount), 0);
totalIncomes = $incomeData.reduce((total, item) => total + parseInt(item.amount), 0);
const incomeDifference = ((totalIncomes - lastMonthIncome) / lastMonthIncome) * 100;
const expenseDifference = ((lastMonthExpense - totalExpenses) / lastMonthExpense) * 100;
try {
infobar1.innerHTML = `<span style="font-size: larger">Total expenses:</span><br><span style="color:red;font-size: 150%">${totalExpenses.toFixed(2)}$</span>`;
infobar2.innerHTML = `<span style="font-size: larger">Total incomes:</span><br><span style="color:green;font-size: 150%">${totalIncomes.toFixed(2)}$</span>`;
infobar3.innerHTML = `<span style="font-size: larger">Income by last month:</span><br><span style="color:blue;font-size: 150%">${incomeDifference.toFixed(2)}%</span>`;
infobar4.innerHTML = `<span style="font-size: larger">Expense by last month:</span><br><span style="color:orange;font-size: 150%">${expenseDifference.toFixed(2)}%</span>`;
} catch {
console.log("not yet loaded");
}
}
$: {
if ($incomeData || $expenseData) {
updateInfo();
}
}
onMount(() => {
updateInfo();
});
</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>
<style>
#quickInfobar {
display: flex;
justify-content: space-between;
margin: 20px;
}
.infobarElement {
margin: 10px;
width: 200px;
min-width: 100px;
height: 100px;
color: white;
padding: 10px;
border-radius: 10px;
background-color: #212942;
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);
overflow: hidden;
}
.infobarElement:hover {
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
</style>

5
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;
@@ -40,12 +41,12 @@
<span class="sideMenuItemText">Profile</span>
</div>
<div class="sideMenuItem">
<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>
</div>
<div class="sideMenuItem">
<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>
</div>

2
src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/stores.js
View File

@@ -7,3 +7,5 @@ export const expenseData = writable([]);
export const incomeTypes = writable([]);
export const expenseTypes = writable([]);
export let selectedTab = writable('expenses');