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

Separated expenses and incomes frontend

Browse Source
This commit is contained in:
Daniel
2023-11-17 12:57:36 +02:00
parent 71ef9aefe1
commit 021be06f40
17 changed files with 87 additions and 915 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> <script>
import Dashboard from './board/Dashboard.svelte'; import Dashboard from './board/Dashboard.svelte';
import SideMenu from './menu/SideMenu.svelte'; import SideMenu from './menu/SideMenu.svelte';
import {selectedTab} from "./stores.js";
function handleTabClick(tab) {
selectedTab.set(tab);
}
</script> </script>
<div id="wrapper"> <div id="wrapper">
<SideMenu /> <SideMenu onTabClick={handleTabClick} />
<Dashboard /> <Dashboard {selectedTab} />
</div> </div>
<style> <style>

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

@@ -1,64 +1,65 @@
<script> <script>
import DashHeader from "./other/DashHeader.svelte"; import { getCookie } from "svelte-cookie";
import DataMenu from "./other/DataMenu.svelte"; import { onMount } from "svelte";
import QuickInfobar from "./other/QuickInfobar.svelte"; import ExpenseDashboard from "./ExpenseDashboard.svelte";
import { getCookie } from "svelte-cookie"; import IncomeDashboard from "./IncomeDashboard.svelte";
import {onMount} from "svelte"; import { incomeData, expenseData, incomeTypes, expenseTypes, selectedTab } from "../stores.js";
import {incomeData, expenseData, incomeTypes, expenseTypes} from "../stores.js"; import axios from "axios";
import axios from "axios"; onMount(async () => {
const token = getCookie('access_token');
if (token === '') {
window.location.href = '/auth/login';
return;
}
onMount(async () => { const config = {
const token = getCookie('access_token'); headers: {
'Authorization': `Bearer ${token}`
}
};
if (token === '') { try {
window.location.href = '/auth/login'; const [incomeResponse, expenseResponse, incomeTypesResponse, expenseTypesResponse] = await Promise.all([
return; axios.get('http://localhost:8081/incomes/personal-incomes', config),
} axios.get('http://localhost:8081/expenses/personal-expenses', config),
axios.get('http://localhost:8081/incomes/categories', config),
axios.get('http://localhost:8081/expenses/categories', config)
]);
const config = { incomeData.set(incomeResponse.data);
headers: { expenseData.set(expenseResponse.data);
'Authorization': `Bearer ${token}` incomeTypes.set(incomeTypesResponse.data);
} expenseTypes.set(expenseTypesResponse.data);
}; } catch (error) {
console.error('Error:', error);
try { }
const [incomeResponse, expenseResponse, incomeTypesResponse, expenseTypesResponse] = await Promise.all([ });
axios.get('http://localhost:8081/incomes/personal-incomes', config),
axios.get('http://localhost:8081/expenses/personal-expenses', config),
axios.get('http://localhost:8081/incomes/categories', config),
axios.get('http://localhost:8081/expenses/categories', config)
]);
incomeData.set(incomeResponse.data);
expenseData.set(expenseResponse.data);
incomeTypes.set(incomeTypesResponse.data);
expenseTypes.set(expenseTypesResponse.data);
} catch (error) {
console.error('Error:', error);
}
});
</script> </script>
<div id="dashboard"> <div id="dashboard">
<DashHeader /> <div id="dashboard">
<QuickInfobar /> {#if $selectedTab === 'expenses'}
<DataMenu /> <ExpenseDashboard {expenseData} {expenseTypes} />
{:else if $selectedTab === 'incomes'}
<IncomeDashboard {incomeData} {incomeTypes} />
{/if}
</div>
</div> </div>
<style> <style>
#dashboard { #dashboard {
font-family: 'Source Sans Pro', sans-serif; font-family: 'Source Sans Pro', sans-serif;
background-color: rgb(245,242,243); background-color: rgb(245,242,243);
border-radius: 20px; border-radius: 20px;
margin: 20px; margin: 20px;
min-width: 100px; min-width: 100px;
display: flex; display: flex;
flex:1 1 auto; flex:1 1 auto;
flex-direction: column; flex-direction: column;
align-items: stretch; align-items: stretch;
justify-content: stretch; justify-content: stretch;
} }
</style> </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> <script>
import Chart from 'chart.js/auto'; import Chart from 'chart.js/auto';
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import { expenseData } from "../../stores.js"; import { expenseData } from "../../../stores.js";
let ctx; let ctx;
let chartCanvas; 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> <script>
import Chart from 'chart.js/auto'; import Chart from 'chart.js/auto';
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import { incomeData, expenseData } from "../../stores.js"; import { incomeData, expenseData } from "../../../stores.js";
let ctx; let ctx;
let chartCanvas; let chartCanvas;

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

@@ -1,96 +0,0 @@
<script>
import Chart from 'chart.js/auto';
import { onMount } from 'svelte';
import { incomeData } from "../../stores.js";
let ctx;
let chartCanvas;
let chart = null;
function groupAndSumByCategory() {
const groupedData = new Map();
$incomeData.forEach(income => {
const category = income.incomeCategory.name;
if (groupedData.has(category)) {
groupedData.set(category, groupedData.get(category) + parseInt(income.amount));
} else {
groupedData.set(category, income.amount);
}
}
);
return groupedData;
}
function createGraph() {
try {
const groupedIncomeData = groupAndSumByCategory();
const chartLabels = Array.from(groupedIncomeData.keys());
const chartValues = Array.from(groupedIncomeData.values());
ctx = chartCanvas.getContext('2d');
if (!chart) {
chart = new Chart(ctx, {
type: 'bar',
data: {
labels: chartLabels,
datasets: [{
label: 'Revenue',
backgroundColor:
['rgb(0, 0, 179)',
'rgb(0, 16, 217)',
'rgb(0, 32, 255)',
'rgb(0, 64, 255)',
'rgb(0, 96, 255)',
'rgb(0, 128, 255)',
'rgb(0, 159, 255)',
'rgb(0, 191, 255)',
'rgb(0, 255, 255)'],
data: chartValues
}]
},
options: {
responsive: true,
maintainAspectRatio: false
}
});
} else {
chart.data.labels = chartLabels;
chart.data.datasets[0].data = chartValues;
chart.update();
}
} catch (error) {
console.error('Error:', error);
}
}
$: {
if ($incomeData) {
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>

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

@@ -1,76 +0,0 @@
<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);
</script>
<div id="expenseInfo" style="max-height: {parentHeight}px;">
<ContentExpense />
<div id="expenseList" style="max-height: {listParentHeight}px;">
<ul>
{#each $expenseData as item}
<li>
{item.incomeCategory ? `${item.incomeCategory.name}: ` : `${item.expenseCategory.name}: `}
{item.incomeCategory ? `+${item.amount}$` : `-${item.amount}$`}
{`${item.date}`}
</li>
{/each}
</ul>
</div>
</div>
<style>
#expenseInfo {
display: flex;
flex-direction: column;
background-color: #212942;
color:white;
border-radius: 10px;
margin: 10px;
}
#expenseList {
scrollbar-width: none;
flex: 1;
border-radius: 10px;
margin: 10px;
overflow-y: auto;
max-height: 100%;
}
#expenseList::-webkit-scrollbar {
display: none;
}
ul {
list-style: none;
padding: 0;
color:black;
}
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);
}
li:hover {
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
</style>

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

@@ -1,75 +0,0 @@
<script>
import { onMount, afterUpdate } from '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);
</script>
<div id="incomeInfo" style="max-height: {parentHeight}px;">
<ContentIncome />
<div id="incomeList" style="max-height: {listParentHeight}px;">
<ul>
{#each $incomeData as item}
<li>
{item.incomeCategory ? `${item.incomeCategory.name}: ` : `${item.expenseCategory.name}: `}
{item.incomeCategory ? `+${item.amount}$` : `-${item.amount}$`}
{`${item.date}`}
</li>
{/each}
</ul>
</div>
</div>
<style>
#incomeInfo {
display: flex;
flex-direction: column;
background-color: #212942;
color:white;
border-radius: 10px;
margin: 10px;
}
#incomeList {
scrollbar-width: none;
flex: 1;
border-radius: 10px;
margin: 10px;
overflow-y: auto;
max-height: 100%;
}
ul {
list-style: none;
padding: 0;
color: black;
}
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);
}
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>

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

@@ -1,175 +0,0 @@
<script>
import Modal from '../modals/Modal.svelte';
import { writable } from 'svelte/store';
import axios from 'axios';
import { getCookie } from "svelte-cookie";
import {expenseTypes, expenseData} from "../../../stores.js";
let showModal;
let amount = '';
let newData;
const selectedExpenseId = writable('');
function addNewExpense(id, amount) {
const today = new Date().toISOString().split('T')[0];
const expenseCategory = $expenseTypes.find(incomeType => incomeType.id === id);
if (expenseCategory) {
const newIncome = {
incomeId: 0,
userDTO: {
name: "Dummy",
surname: "User",
username: "dummyuser"
},
expenseCategory: expenseCategory,
date: today,
amount: parseInt(amount)
};
newData = $expenseData;
newData.push(newIncome);
$expenseData = newData;
} else {
console.error('Expense category not found for id:', id);
}
}
const createExpense = async () => {
const selectedExpense = $expenseTypes.find(expense => expense.id === $selectedExpenseId);
const data = {
expenseCategory: selectedExpense.id,
amount: amount,
};
addNewExpense(selectedExpense.id, amount);
try {
const token = getCookie('access_token');
const response = await axios.post('http://localhost:8081/expenses', data, {
headers: {
'Authorization': `Bearer ${token}`,
'Content-Type': 'application/json',
},
});
if (response.status === 201) {
//console.log("cool");
} else {
console.error('Error:', response.status);
}
} catch (error) {
console.error('Error:', error);
}
};
</script>
<div id="exp">
<div id="optionField">
<h2>Expenses</h2>
<div id="openModal" class="plus-button" role="button" tabindex="0" on:click={() => (showModal = true)} on:keydown={() => console.log("keydown")}>
+
</div>
</div>
<Modal bind:showModal>
<div class="expense-form">
<h3>Expense Details</h3>
<div class="form-group">
<label for="amount">Amount:</label>
<input type="text" id="amount" class="form-control" bind:value={amount} />
</div>
<div class="form-group">
<label for="expenseCategory">Select Expense Category:</label>
<select id="expenseCategory" class="form-control" bind:value={$selectedExpenseId}>
{#each $expenseTypes as expense (expense.id)}
{#if expense.id !== undefined}
<option value={expense.id}>{expense.name}</option>
{/if}
{/each}
</select>
</div>
<button class="btn btn-primary" on:click={createExpense}>Submit</button>
</div>
</Modal>
</div>
<style>
#exp {
padding: 20px;
text-align: center;
}
#optionField {
display: flex;
align-items: center;
justify-content: space-between;
}
.plus-button {
font-size: 24px;
background-color: #007BFF;
color: #fff;
border: none;
border-radius: 50%;
width: 40px;
height: 40px;
line-height: 40px;
cursor: pointer;
}
.plus-button:hover {
background-color: #0056b3;
}
.expense-form {
background-color: #fff;
border-radius: 20px;
padding: 20px;
max-width: 400px;
margin: 0 auto;
}
h3 {
font-size: 20px;
margin-bottom: 20px;
}
.form-group {
margin-bottom: 15px;
}
label {
display: block;
font-weight: bold;
margin-bottom: 5px;
}
.form-control {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
select.form-control {
height: 40px;
}
.btn {
background-color: #007BFF;
color: #fff;
border: none;
border-radius: 5px;
padding: 10px 20px;
cursor: pointer;
}
.btn:hover {
background-color: #0056b3;
}
</style>

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

@@ -1,177 +0,0 @@
<script>
import Modal from '../modals/Modal.svelte';
import { writable } from 'svelte/store';
import axios from 'axios';
import { getCookie } from "svelte-cookie";
import {incomeData, incomeTypes} from "../../../stores.js";
let showModal;
let amount = '';
let newData;
const selectedIncomeId = writable('');
function addNewIncome(id, amount) {
const today = new Date().toISOString().split('T')[0];
const incomeCategory = $incomeTypes.find(incomeType => incomeType.id === id);
console.log(amount);
if (incomeCategory) {
const newIncome = {
incomeId: 0,
userDTO: {
name: "Dummy",
surname: "User",
username: "dummyuser"
},
incomeCategory: incomeCategory,
date: today,
amount: amount
};
newData = $incomeData;
newData.push(newIncome);
$incomeData = newData;
} else {
console.error('Income category not found for id:', id);
}
}
const createIncome = async () => {
const selectedIncome = $incomeTypes.find(income => income.id === $selectedIncomeId);
const data = {
incomeCategory: selectedIncome.id,
amount: parseInt(amount),
};
addNewIncome(selectedIncome.id, amount);
try {
const token = getCookie('access_token');
const response = await axios.post('http://localhost:8081/incomes', data, {
headers: {
'Authorization': `Bearer ${token}`,
'Content-Type': 'application/json',
},
});
if (response.status === 201) {
//console.log("cool");
} else {
console.error('Error:', response.status);
}
} catch (error) {
console.error('Error:', error);
}
};
</script>
<div id="inc">
<div id="optionField">
<h2>Incomes</h2>
<div id="openModal" class="plus-button" role="button" tabindex="0" on:click={() => (showModal = true)} on:keydown={() => console.log("keydown")}>
+
</div>
</div>
<Modal bind:showModal>
<div class="income-form">
<h3>Income Details</h3>
<div class="form-group">
<label for="amount">Amount:</label>
<input type="text" id="amount" class="form-control" bind:value={amount} />
</div>
<div class="form-group">
<label for="incomeCategory">Select Income Category:</label>
<select id="incomeCategory" class="form-control" bind:value={$selectedIncomeId}>
{#each $incomeTypes as income (income.id)}
{#if income.id !== undefined}
<option value={income.id}>{income.name}</option>
{/if}
{/each}
</select>
</div>
<button class="btn btn-primary" on:click={createIncome}>Submit</button>
</div>
</Modal>
</div>
<style>
#inc {
padding: 20px;
text-align: center;
}
#optionField {
display: flex;
align-items: center;
justify-content: space-between;
}
.plus-button {
font-size: 24px;
background-color: #007BFF;
color: #fff;
border: none;
border-radius: 50%;
width: 40px;
height: 40px;
line-height: 40px;
cursor: pointer;
}
.plus-button:hover {
background-color: #0056b3;
}
.income-form {
background-color: #fff;
border-radius: 5px;
padding: 20px;
max-width: 400px;
margin: 0 auto;
}
h3 {
font-size: 20px;
margin-bottom: 20px;
}
.form-group {
margin-bottom: 15px;
}
label {
display: block;
font-weight: bold;
margin-bottom: 5px;
}
.form-control {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
select.form-control {
height: 40px;
}
.btn {
background-color: #007BFF;
color: #fff;
border: none;
border-radius: 5px;
padding: 10px 20px;
cursor: pointer;
}
.btn:hover {
background-color: #0056b3;
}
</style>

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

@@ -1,57 +0,0 @@
<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/other/DashHeader.svelte
View File

@@ -1,66 +0,0 @@
<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>

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

@@ -1,64 +0,0 @@
<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>
<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/other/QuickInfobar.svelte
View File

@@ -1,71 +0,0 @@
<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 { onMount } from 'svelte';
import axios from 'axios'; import axios from 'axios';
import {deleteCookie, getCookie} from "svelte-cookie"; import {deleteCookie, getCookie} from "svelte-cookie";
export let onTabClick;
let username; let username;
@@ -40,12 +41,12 @@
<span class="sideMenuItemText">Profile</span> <span class="sideMenuItemText">Profile</span>
</div> </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> <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">Expenses</span>
</div> </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> <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">Incomes</span>
</div> </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 incomeTypes = writable([]);
export const expenseTypes = writable([]); export const expenseTypes = writable([]);
export let selectedTab = writable('expenses');