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

Better UI #45

Merged
bytegrip merged 1 commits from front-v3 into master 2023-12-10 11:57:51 +00:00
Conversation 0 Commits 1 Files Changed 10 +612 -520
10 changed files with 612 additions and 520 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit ee4c885ae6 - Show all commits

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

@@ -3,15 +3,37 @@
import SideMenu from './menu/SideMenu.svelte';
import {selectedTab} from "./stores.js";
import {globalStyles} from "./styles.js";
import StickyMenu from "./menu/StickyMenu.svelte";
import {onMount} from "svelte";
function handleTabClick(tab) {
selectedTab.set(tab);
}
let screenWidth;
onMount(() => {
screenWidth = window.innerWidth;
const handleResize = () => {
console.log(screenWidth);
screenWidth = window.innerWidth;
};
window.addEventListener('resize', handleResize);
return () => {
window.removeEventListener('resize', handleResize);
};
});
</script>
<div id="wrapper" style="background-color: {$globalStyles.mainColor}">
<SideMenu onTabClick={handleTabClick} />
{#if screenWidth < 900}
<StickyMenu onTabClick={handleTabClick} />
{:else}
<SideMenu onTabClick={handleTabClick} />
{/if}
<Dashboard />
</div>
@@ -19,10 +41,18 @@
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400');
#wrapper {
padding: 0;
margin: 0;
display: flex;
align-items: stretch;
min-height: 100vh;
max-height: 100%;
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
@media only screen and (max-width: 900px) {
#wrapper {
flex-direction: column;
}
}
</style>

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

@@ -76,7 +76,6 @@
font-family: 'Source Sans Pro', sans-serif;
border-radius: 20px;
margin: 20px;
padding: 20px 20px 0;
min-width: 100px;
display: flex;
flex: 1 1 auto;
@@ -85,4 +84,12 @@
justify-content: stretch;
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
@media only screen and (max-width: 900px) {
#dashboard {
margin: 0;
flex-wrap: wrap;
width: 100%;
}
}
</style>

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

@@ -1,9 +1,36 @@
<script>
import DashHeader from "./expenses/other/DashHeader.svelte";
import DataMenu from "./expenses/other/DataMenu.svelte";
import QuickInfobar from "./expenses/other/QuickInfobar.svelte";
import Expenses from "./expenses/infolists/Expenses.svelte";
</script>
<DashHeader />
<QuickInfobar />
<DataMenu />
<div class="expenseContainer">
<div class="dataHalf">
<DashHeader />
<QuickInfobar />
</div>
<Expenses />
</div>
<style>
@media only screen and (max-width: 900px) {
.expenseContainer {
flex-wrap: wrap;
flex: 1 1 auto;
width: 100%;
}
}
.expenseContainer {
display: flex;
height: 100%;
flex-direction: row;
justify-content: space-between;
}
.dataHalf {
flex: 1 1 auto;
background-color: #8BD17C;
}
</style>

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

@@ -1,12 +1,11 @@
<script>
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, dateText} from "../../../stores.js";
import { slide } from 'svelte/transition';
var showModal;
var showModal = false;
let amount = '';
let newData;
@@ -66,17 +65,21 @@
console.error('Error:', error);
}
};
function toggleModal() {
showModal = !showModal;
}
</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")}>
<h2>Expenses: {$dateText}</h2>
<div id="openModal" class="plus-button" role="button" tabindex="0" on:click={toggleModal} on:keydown={() => console.log("keydown")}>
+
</div>
</div>
<Modal bind:showModal>
<div class="expense-form">
{#if showModal}
<div class="expense-form" transition:slide>
<h3>Expense Details</h3>
<div class="form-group">
<label for="amount">Amount:</label>
@@ -96,7 +99,7 @@
<button class="btn btn-primary" on:click={createExpense}>Submit</button>
</div>
</Modal>
{/if}
</div>
@@ -134,6 +137,7 @@
padding: 20px;
max-width: 400px;
margin: 0 auto;
color: black;
}
h3 {

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

@@ -1,7 +1,11 @@
<script>
import ContentExpense from "./ContentExpense.svelte";
import { expenseData } from "../../../stores.js";
import {dateText, expenseData, expenseTypes, incomeData, tempExpense, tempIncome} from "../../../stores.js";
import { globalStyles } from "../../../styles.js";
import {onMount} from "svelte";
import axios from "axios";
import {getCookie} from "svelte-cookie";
import { slide } from 'svelte/transition'
const textToIcon = {
'Groceries': "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"18\" viewBox=\"0 0 576 512\"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d=\"M0 24C0 10.7 10.7 0 24 0H69.5c22 0 41.5 12.8 50.6 32h411c26.3 0 45.5 25 38.6 50.4l-41 152.3c-8.5 31.4-37 53.3-69.5 53.3H170.7l5.4 28.5c2.2 11.3 12.1 19.5 23.6 19.5H488c13.3 0 24 10.7 24 24s-10.7 24-24 24H199.7c-34.6 0-64.3-24.6-70.7-58.5L77.4 54.5c-.7-3.8-4-6.5-7.9-6.5H24C10.7 48 0 37.3 0 24zM128 464a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zm336-48a48 48 0 1 1 0 96 48 48 0 1 1 0-96z\"/></svg>",
@@ -17,14 +21,224 @@
'Charity': "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"18\" viewBox=\"0 0 576 512\"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d=\"M163.9 136.9c-29.4-29.8-29.4-78.2 0-108s77-29.8 106.4 0l17.7 18 17.7-18c29.4-29.8 77-29.8 106.4 0s29.4 78.2 0 108L310.5 240.1c-6.2 6.3-14.3 9.4-22.5 9.4s-16.3-3.1-22.5-9.4L163.9 136.9zM568.2 336.3c13.1 17.8 9.3 42.8-8.5 55.9L433.1 485.5c-23.4 17.2-51.6 26.5-80.7 26.5H192 32c-17.7 0-32-14.3-32-32V416c0-17.7 14.3-32 32-32H68.8l44.9-36c22.7-18.2 50.9-28 80-28H272h16 64c17.7 0 32 14.3 32 32s-14.3 32-32 32H288 272c-8.8 0-16 7.2-16 16s7.2 16 16 16H392.6l119.7-88.2c17.8-13.1 42.8-9.3 55.9 8.5zM193.6 384l0 0-.9 0c.3 0 .6 0 .9 0z\"/></svg>",
'Legal Services': "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"16\" viewBox=\"0 0 512 512\"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d=\"M318.6 9.4c-12.5-12.5-32.8-12.5-45.3 0l-120 120c-12.5 12.5-12.5 32.8 0 45.3l16 16c12.5 12.5 32.8 12.5 45.3 0l4-4L325.4 293.4l-4 4c-12.5 12.5-12.5 32.8 0 45.3l16 16c12.5 12.5 32.8 12.5 45.3 0l120-120c12.5-12.5 12.5-32.8 0-45.3l-16-16c-12.5-12.5-32.8-12.5-45.3 0l-4 4L330.6 74.6l4-4c12.5-12.5 12.5-32.8 0-45.3l-16-16zm-152 288c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3l48 48c12.5 12.5 32.8 12.5 45.3 0l112-112c12.5-12.5 12.5-32.8 0-45.3l-1.4-1.4L272 285.3 226.7 240 168 298.7l-1.4-1.4z\"/></svg>"
};
let isDateDropdownExpanded = false
let isCategoryDropdownExpanded = false
let dropdownStates = {};
$: {
dropdownStates = {};
$expenseData.toReversed().forEach(data => {
dropdownStates[data.expenseId] = false;
});
}
function clickHandlerDate() {
isDateDropdownExpanded = !isDateDropdownExpanded
}
function clickItemHandler(id) {
dropdownStates[id] = !dropdownStates[id];
}
function clickHandlerCategory() {
isCategoryDropdownExpanded = !isCategoryDropdownExpanded;
}
function clickOutsideHandler(event) {
const isDateButton = event.target.closest("#btn1");
const isCategoryButton = event.target.closest("#btn2");
if (!isDateButton) {
isDateDropdownExpanded = false;
}
if (!isCategoryButton) {
isCategoryDropdownExpanded = false;
}
}
onMount(() => {
document.body.addEventListener("click", clickOutsideHandler);
return () => {
document.body.removeEventListener("click", clickOutsideHandler);
};
});
async function getToday() {
var currentDate = new Date();
var currentDay = currentDate.toISOString().split('T')[0];
try {
const response1 = await axios.get('https://trackio.online:8081/expenses/personal-expenses?date=' + currentDay, {
headers: {
'Authorization': `Bearer ${getCookie('access_token')}`
}
});
expenseData.set(response1.data);
tempExpense.set(response1.data);
const response2 = await axios.get('https://trackio.online:8081/incomes/personal-incomes?date=' + currentDay, {
headers: {
'Authorization': `Bearer ${getCookie('access_token')}`
}
});
incomeData.set(response2.data);
tempIncome.set(response2.data);
$dateText = "Today"
} catch (error) {
console.error("Error fetching expenses:", error);
}
}
async function getYesterday() {
var currentDate = new Date();
var yesterday = new Date(currentDate);
yesterday.setDate(currentDate.getDate() - 1);
var yesterdayString = yesterday.toISOString().split('T')[0];
try {
const response1 = await axios.get('https://trackio.online:8081/expenses/personal-expenses?date=' + yesterdayString, {
headers: {
'Authorization': `Bearer ${getCookie('access_token')}`
}
});
expenseData.set(response1.data);
tempExpense.set(response1.data);
const response2 = await axios.get('https://trackio.online:8081/incomes/personal-incomes?date=' + yesterdayString, {
headers: {
'Authorization': `Bearer ${getCookie('access_token')}`
}
});
incomeData.set(response2.data);
tempIncome.set(response2.data);
$dateText = "Yesterday"
} catch (error) {
console.error("Error fetching expenses:", error);
}
}
async function getMonth() {
var currentDate = new Date();
var year = currentDate.getMonth() + 1;
try {
const response1 = await axios.get('https://trackio.online:8081/expenses/personal-expenses?month=' + year, {
headers: {
'Authorization': `Bearer ${getCookie('access_token')}`
}
});
expenseData.set(response1.data);
tempExpense.set(response1.data);
const response2 = await axios.get('https://trackio.online:8081/incomes/personal-incomes?month=' + year, {
headers: {
'Authorization': `Bearer ${getCookie('access_token')}`
}
});
incomeData.set(response2.data);
tempIncome.set(response2.data);
$dateText = "This Month"
} catch (error) {
console.error("Error fetching expenses:", error);
}
}
async function getLastMonth() {
var currentDate = new Date();
var year = currentDate.getMonth();
try {
const response1 = await axios.get('https://trackio.online:8081/expenses/personal-expenses?month=' + year, {
headers: {
'Authorization': `Bearer ${getCookie('access_token')}`
}
});
expenseData.set(response1.data);
tempExpense.set(response1.data)
const response2 = await axios.get('https://trackio.online:8081/incomes/personal-incomes?month=' + year, {
headers: {
'Authorization': `Bearer ${getCookie('access_token')}`
}
});
incomeData.set(response2.data);
tempIncome.set(response2.data);
$dateText = "Last Month"
} catch (error) {
console.error("Error fetching expenses:", error);
}
}
async function getLastYear() {
var currentDate = new Date();
var year = currentDate.getFullYear();
try {
const response1 = await axios.get('https://trackio.online:8081/expenses/personal-expenses?year=' + year, {
headers: {
'Authorization': `Bearer ${getCookie('access_token')}`
}
});
expenseData.set(response1.data);
tempExpense.set(response1.data);
const response2 = await axios.get('https://trackio.online:8081/incomes/personal-incomes?year=' + year, {
headers: {
'Authorization': `Bearer ${getCookie('access_token')}`
}
});
incomeData.set(response2.data);
tempIncome.set(response2.data);
$dateText = "This Year"
} catch (error) {
console.error("Error fetching expenses:", error);
}
}
function filterByCategory(category) {
let tempArr = $tempExpense.filter(expense => expense.expenseCategory.name === category);
expenseData.set(tempArr);
}
</script>
<div id="expenseInfo" style="background-color: {$globalStyles.mainColor}">
<ContentExpense />
<div style="display: flex; justify-content: space-between">
<div id="dropdown-date" style="margin: 10px;">
<button id="btn1" class="button" on:click={clickHandlerDate}>Filter by Date ▼</button>
{#if isDateDropdownExpanded}
<div id="date-list" transition:slide>
<div class="date-entry" on:click={() => getToday()}>Today</div>
<div class="date-entry" on:click={() => getYesterday()}>Yesterday</div>
<div class="date-entry" on:click={() => getMonth()}>This month</div>
<div class="date-entry" on:click={() => getLastMonth()}>Last month</div>
<div class="date-entry" on:click={() => getLastYear()}>This year</div>
</div>
{/if}
</div>
<div id="dropdown-category" style="margin: 10px;">
<button id="btn2" class="button" on:click={clickHandlerCategory}>Filter by Category ▼</button>
{#if isCategoryDropdownExpanded}
<div id="date-list" transition:slide>
{#each $expenseTypes as expense (expense.id)}
{#if expense.id !== undefined}
<div class="date-entry" on:click={() => filterByCategory(expense.name)} value={expense.id}>{expense.name}</div>
{/if}
{/each}
</div>
{/if}
</div>
</div>
<div id="listContainer" style="color: {$globalStyles.color}">
<ul>
{#each $expenseData.reverse() as item}
<li style="display:flex; justify-content: space-between; color: {$globalStyles.color}">
{#each $expenseData.toReversed() as item (item.expenseId)}
<li style="display:flex; justify-content: space-between; align-items: center; color: {$globalStyles.color}">
<span>
{#if textToIcon[item.expenseCategory.name]}
{@html textToIcon[item.expenseCategory.name]}
@@ -32,8 +246,24 @@
<span style="font-weight: bold">{item.incomeCategory ? `${item.incomeCategory.name}: ` : `${item.expenseCategory.name}: `}</span>
<span style="font-weight:bold; margin-right: 10px; color: red; font-size: larger">{item.incomeCategory ? `+${item.amount}$` : `-${item.amount}$`}</span>
</span>
<span style="">{`${item.date}`}</span>
<span style="margin-right: 5px;">{`${item.date}`}
<span id="editBtn" on:click={clickItemHandler(item.expenseId)}><svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M471.6 21.7c-21.9-21.9-57.3-21.9-79.2 0L362.3 51.7l97.9 97.9 30.1-30.1c21.9-21.9 21.9-57.3 0-79.2L471.6 21.7zm-299.2 220c-6.1 6.1-10.8 13.6-13.5 21.9l-29.6 88.8c-2.9 8.6-.6 18.1 5.8 24.6s15.9 8.7 24.6 5.8l88.8-29.6c8.2-2.7 15.7-7.4 21.9-13.5L437.7 172.3 339.7 74.3 172.4 241.7zM96 64C43 64 0 107 0 160V416c0 53 43 96 96 96H352c53 0 96-43 96-96V320c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7-14.3 32-32 32H96c-17.7 0-32-14.3-32-32V160c0-17.7 14.3-32 32-32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H96z"/></svg></span>
<span id="deleteBtn"><svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M135.2 17.7L128 32H32C14.3 32 0 46.3 0 64S14.3 96 32 96H416c17.7 0 32-14.3 32-32s-14.3-32-32-32H320l-7.2-14.3C307.4 6.8 296.3 0 284.2 0H163.8c-12.1 0-23.2 6.8-28.6 17.7zM416 128H32L53.2 467c1.6 25.3 22.6 45 47.9 45H346.9c25.3 0 46.3-19.7 47.9-45L416 128z"/></svg></span>
</span>
</li>
{#if dropdownStates[item.expenseId]}
<div class="inputForm" transition:slide>
<input type="text" id="input1" placeholder="{item.amount}">
<input type="text" id="input2" placeholder="{item.expenseCategory.name}">
<input type="text" id="input3" placeholder="{item.date}">
<div style="display:flex; justify-content: space-evenly">
<button style="background-color: #8BD17C" on:click={() => console.log("LOL")}>Submit</button>
<button style="background-color: palevioletred" on:click={clickItemHandler(item.expenseId)}>Cancel</button>
</div>
</div>
{/if}
{/each}
</ul>
</div>
@@ -41,13 +271,51 @@
<style>
@media only screen and (max-width: 900px) {
#listContainer {
max-height: 50vh;
width: 100%;
}
#expenseInfo {
margin: 0;
width: 100%;
}
}
#editBtn {
margin-left: 5px;
margin-right: 5px;
fill: darkblue;
}
.inputForm {
display: flex;
flex-direction: column;
margin-bottom: 10px;
}
#editBtn:hover {
cursor: pointer;
fill: lightseagreen;
}
#deleteBtn {
fill: red;
}
#deleteBtn:hover {
cursor: pointer;
fill: palevioletred;
}
#expenseInfo {
min-width: 300px;
min-width: 350px;
min-height: 0;
background-color: #212942;
color: white;
border-radius: 0 0 10px 10px;
margin: 0 0 10px 0;
/*border-radius: 0 0 10px 10px;*/
display: flex;
flex-direction: column;
box-sizing: border-box;
@@ -58,7 +326,7 @@
overflow-y: auto;
min-height: 0;
padding: 0 10px 10px;
margin: 0 0 10px;
/*margin: 0 0 10px;*/
box-sizing: border-box;
border-radius: 0 0 10px 10px;
}
@@ -102,4 +370,73 @@
#listContainer li:hover {
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
.button {
align-items: center;
background-color: #0A66C2;
border: 0;
border-radius: 100px;
box-sizing: border-box;
color: #ffffff;
cursor: pointer;
display: inline-flex;
font-family: -apple-system, system-ui, system-ui, "Segoe UI", Roboto, "Helvetica Neue", "Fira Sans", Ubuntu, Oxygen, "Oxygen Sans", Cantarell, "Droid Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Lucida Grande", Helvetica, Arial, sans-serif;
font-size: 16px;
font-weight: 600;
justify-content: center;
line-height: 20px;
max-width: 480px;
min-height: 40px;
min-width: 0px;
overflow: hidden;
padding: 0px;
padding-left: 20px;
padding-right: 20px;
text-align: center;
touch-action: manipulation;
transition: background-color 0.167s cubic-bezier(0.4, 0, 0.2, 1) 0s, box-shadow 0.167s cubic-bezier(0.4, 0, 0.2, 1) 0s, color 0.167s cubic-bezier(0.4, 0, 0.2, 1) 0s;
user-select: none;
-webkit-user-select: none;
vertical-align: middle;
}
.button:hover,
.button:focus {
background-color: #16437E;
color: #ffffff;
}
.button:active {
background: #09223b;
color: rgb(255, 255, 255, .7);
}
.button:disabled {
cursor: not-allowed;
background: rgba(0, 0, 0, .08);
color: rgba(0, 0, 0, .3);
}
#date-list {
background-color: #007BFF;
position:absolute;
margin-top: 20px;
max-height: 400px;
overflow-y: scroll;
border-radius: 20px;
z-index:1;
}
.date-entry {
padding: 10px;
margin: 10px;
background-color: black;
color: white;
border-radius: 20px;
cursor: pointer;
}
.date-entry:hover {
background-color: rgb(128, 128, 128);
}
</style>

57
src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/infolists/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>

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

@@ -1,437 +0,0 @@
<script>
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, expenseData, incomeData, dateText, tempExpense, tempIncome} from "../../../stores.js";
import axios from "axios";
import {getCookie} from "svelte-cookie";
import {onMount} from "svelte";
let isDateDropdownExpanded = false
let isCategoryDropdownExpanded = false
let expenseAnalysisText = "EXPENSE ANALYSIS: " + $dateText;
$ : {
expenseAnalysisText = "EXPENSE ANALYSIS: " + $dateText;
}
function clickHandlerDate() {
isDateDropdownExpanded = !isDateDropdownExpanded
}
function clickHandlerCategory() {
isCategoryDropdownExpanded = !isCategoryDropdownExpanded;
}
function clickOutsideHandler(event) {
const isDateButton = event.target.closest("#btn1");
const isCategoryButton = event.target.closest("#btn2");
if (!isDateButton) {
isDateDropdownExpanded = false;
}
if (!isCategoryButton) {
isCategoryDropdownExpanded = false;
}
}
onMount(() => {
document.body.addEventListener("click", clickOutsideHandler);
// Clean up the event listener when the component is destroyed
return () => {
document.body.removeEventListener("click", clickOutsideHandler);
};
});
async function getToday() {
var currentDate = new Date();
var currentDay = currentDate.toISOString().split('T')[0];
try {
const response1 = await axios.get('https://trackio.online:8081/expenses/personal-expenses?date=' + currentDay, {
headers: {
'Authorization': `Bearer ${getCookie('access_token')}`
}
});
expenseData.set(response1.data);
tempExpense.set(response1.data);
const response2 = await axios.get('https://trackio.online:8081/incomes/personal-incomes?date=' + currentDay, {
headers: {
'Authorization': `Bearer ${getCookie('access_token')}`
}
});
incomeData.set(response2.data);
tempIncome.set(response2.data);
$dateText = "Today"
} catch (error) {
console.error("Error fetching expenses:", error);
}
}
async function getYesterday() {
var currentDate = new Date();
var yesterday = new Date(currentDate);
yesterday.setDate(currentDate.getDate() - 1);
var yesterdayString = yesterday.toISOString().split('T')[0];
try {
const response1 = await axios.get('https://trackio.online:8081/expenses/personal-expenses?date=' + yesterdayString, {
headers: {
'Authorization': `Bearer ${getCookie('access_token')}`
}
});
expenseData.set(response1.data);
tempExpense.set(response1.data);
const response2 = await axios.get('https://trackio.online:8081/incomes/personal-incomes?date=' + yesterdayString, {
headers: {
'Authorization': `Bearer ${getCookie('access_token')}`
}
});
incomeData.set(response2.data);
tempIncome.set(response2.data);
$dateText = "Yesterday"
} catch (error) {
console.error("Error fetching expenses:", error);
}
}
async function getMonth() {
var currentDate = new Date();
var year = currentDate.getMonth() + 1;
try {
const response1 = await axios.get('https://trackio.online:8081/expenses/personal-expenses?month=' + year, {
headers: {
'Authorization': `Bearer ${getCookie('access_token')}`
}
});
expenseData.set(response1.data);
tempExpense.set(response1.data);
const response2 = await axios.get('https://trackio.online:8081/incomes/personal-incomes?month=' + year, {
headers: {
'Authorization': `Bearer ${getCookie('access_token')}`
}
});
incomeData.set(response2.data);
tempIncome.set(response2.data);
$dateText = "This Month"
} catch (error) {
console.error("Error fetching expenses:", error);
}
}
async function getLastMonth() {
var currentDate = new Date();
var year = currentDate.getMonth();
try {
const response1 = await axios.get('https://trackio.online:8081/expenses/personal-expenses?month=' + year, {
headers: {
'Authorization': `Bearer ${getCookie('access_token')}`
}
});
expenseData.set(response1.data);
tempExpense.set(response1.data)
const response2 = await axios.get('https://trackio.online:8081/incomes/personal-incomes?month=' + year, {
headers: {
'Authorization': `Bearer ${getCookie('access_token')}`
}
});
incomeData.set(response2.data);
tempIncome.set(response2.data);
$dateText = "Last Month"
} catch (error) {
console.error("Error fetching expenses:", error);
}
}
async function getLastYear() {
var currentDate = new Date();
var year = currentDate.getFullYear();
try {
const response1 = await axios.get('https://trackio.online:8081/expenses/personal-expenses?year=' + year, {
headers: {
'Authorization': `Bearer ${getCookie('access_token')}`
}
});
expenseData.set(response1.data);
tempExpense.set(response1.data);
const response2 = await axios.get('https://trackio.online:8081/incomes/personal-incomes?year=' + year, {
headers: {
'Authorization': `Bearer ${getCookie('access_token')}`
}
});
incomeData.set(response2.data);
tempIncome.set(response2.data);
$dateText = "This Year"
} catch (error) {
console.error("Error fetching expenses:", error);
}
}
function filterByCategory(category) {
let tempArr = $tempExpense.filter(expense => expense.expenseCategory.name === category);
expenseData.set(tempArr);
}
</script>
<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}" contenteditable="false" bind:innerHTML={expenseAnalysisText}></span>
<div id="dropdown-date">
<button id="btn1" class="button" on:click={clickHandlerDate}>Filter by Date ▼</button>
{#if isDateDropdownExpanded}
<div id="date-list" transition:slide>
<div class="date-entry" on:click={() => getToday()}>Today</div>
<div class="date-entry" on:click={() => getYesterday()}>Yesterday</div>
<div class="date-entry" on:click={() => getMonth()}>This month</div>
<div class="date-entry" on:click={() => getLastMonth()}>Last month</div>
<!-- <div on:click={() => console.log("Last month")}>Last month</div>-->
<!-- <div on:click={() => console.log("Current quarter")}>Current quarter</div>-->
<div class="date-entry" on:click={() => getLastYear()}>This year</div>
</div>
{/if}
</div>
<div id="dropdown-category">
<button id="btn2" class="button" on:click={clickHandlerCategory}>Filter by Category ▼</button>
{#if isCategoryDropdownExpanded}
<div id="date-list" transition:slide>
{#each $expenseTypes as expense (expense.id)}
{#if expense.id !== undefined}
<div class="date-entry" on:click={() => filterByCategory(expense.name)} value={expense.id}>{expense.name}</div>
{/if}
{/each}
</div>
{/if}
</div>
</div>
<div id="data-menu">
<div id="first-graph">
<Graph2 />
</div>
<div id="second-graph">
<Graph3 />
</div>
<Expenses />
</div>
</div>
<style>
#main-data {
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
padding:0;
display: flex;
min-height: 0;
height: 0;
flex-direction: column;
justify-content: stretch;
align-items: stretch;
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;*/
/*}*/
/*.button {*/
/* font-size: large;*/
/* background-color: #007BFF;*/
/* color: #fff;*/
/* border: none;*/
/* border-radius: 20px;*/
/* line-height: 40px;*/
/* cursor: pointer;*/
/* margin: 10px;*/
/*}*/
/*.button:hover {*/
/* background-color: #0056b3;*/
/*}*/
.button {
align-items: center;
background-color: #0A66C2;
border: 0;
border-radius: 100px;
box-sizing: border-box;
color: #ffffff;
cursor: pointer;
display: inline-flex;
font-family: -apple-system, system-ui, system-ui, "Segoe UI", Roboto, "Helvetica Neue", "Fira Sans", Ubuntu, Oxygen, "Oxygen Sans", Cantarell, "Droid Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Lucida Grande", Helvetica, Arial, sans-serif;
font-size: 16px;
font-weight: 600;
justify-content: center;
line-height: 20px;
max-width: 480px;
min-height: 40px;
min-width: 0px;
overflow: hidden;
padding: 0px;
padding-left: 20px;
padding-right: 20px;
text-align: center;
touch-action: manipulation;
transition: background-color 0.167s cubic-bezier(0.4, 0, 0.2, 1) 0s, box-shadow 0.167s cubic-bezier(0.4, 0, 0.2, 1) 0s, color 0.167s cubic-bezier(0.4, 0, 0.2, 1) 0s;
user-select: none;
-webkit-user-select: none;
vertical-align: middle;
}
.button:hover,
.button:focus {
background-color: #16437E;
color: #ffffff;
}
.button:active {
background: #09223b;
color: rgb(255, 255, 255, .7);
}
.button:disabled {
cursor: not-allowed;
background: rgba(0, 0, 0, .08);
color: rgba(0, 0, 0, .3);
}
#date-list {
background-color: #007BFF;
position:absolute;
margin-top: 20px;
max-height: 400px;
overflow-y: scroll;
border-radius: 20px;
z-index:1;
}
.date-entry {
padding: 10px;
margin: 10px;
background-color: black;
color: white;
border-radius: 20px;
cursor: pointer;
}
.date-entry:hover {
background-color: rgb(128, 128, 128);
}
/*#category-list {*/
/* background-color: #8BD17C;*/
/* position:absolute;*/
/* z-index:1;*/
/*}*/
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #888;
border-radius: 10px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}
#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;
margin-bottom: 5px;
/*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;
min-height:0;
}
</style>

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

@@ -49,14 +49,17 @@
#quickInfobar {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
min-height: 0;
flex: 1 1 auto;
margin: 20px;
}
.infobarElement {
margin: 10px;
width: 200px;
min-width: 100px;
height: 100px;
min-width: 0px;
min-height: 0px;
flex: 1 1 auto;
color: white;
padding: 10px;
border-radius: 10px;

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

@@ -91,6 +91,7 @@
</div>
<style>
#sideMenu {
font-family: 'Source Sans Pro', sans-serif;
display: flex;
@@ -101,6 +102,12 @@
margin-left: 20px;
}
@media only screen and (max-width: 900px) {
#sideMenu {
display: none;
}
}
#iconSpace {
margin-top:20px;
display: flex;

171
src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/menu/StickyMenu.svelte Normal file
View File

@@ -0,0 +1,171 @@
<script>
import { onMount } from 'svelte';
import axios from 'axios';
import {deleteCookie, getCookie} from "svelte-cookie";
import { slide } from 'svelte/transition'
export let onTabClick;
let isMenuDown = false;
let username;
onMount(async () => {
const token = getCookie('access_token');
const config = {
headers: {
'Authorization': `Bearer ${token}`
}
};
try {
const response = await axios.get('https://trackio.online:8081/users/get-user-data', config);
const data = response.data;
username = data.username;
console.log(username)
} catch (error) {
console.error('Error:', error);
}
});
function toggleMenu() {
isMenuDown = !isMenuDown;
}
</script>
<div id="stickyMenu">
<div id="stickyButton" style="background-color: #191f35; color:white; padding: 10px; display: flex; align-items: center; justify-content: space-around" on:click={toggleMenu}>
<img id="iconImg" src='./../../../src/lib/images/adidas.png' width="90px" alt="icon"/>
<h3>Menu ▼</h3>
</div>
{#if isMenuDown}
<div id="sideMenu" transition:slide>
<div class="sideMenuItem">
<svg class="svgimg" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 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="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3z"/></svg>
<span class="sideMenuItemText">Profile</span>
</div>
<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">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">Revenues</span>
</div>
<div on:click={() => onTabClick('statistics')} tabindex="0" role="button" class="sideMenuItem">
<svg class="svgimg" xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M160 80c0-26.5 21.5-48 48-48h32c26.5 0 48 21.5 48 48V432c0 26.5-21.5 48-48 48H208c-26.5 0-48-21.5-48-48V80zM0 272c0-26.5 21.5-48 48-48H80c26.5 0 48 21.5 48 48V432c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V272zM368 96h32c26.5 0 48 21.5 48 48V432c0 26.5-21.5 48-48 48H368c-26.5 0-48-21.5-48-48V144c0-26.5 21.5-48 48-48z"/></svg>
<span class="sideMenuItemText">Statistics</span>
</div>
<!-- <div class="sideMenuItem">-->
<!-- <svg class="svgimg" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 576 512">&lt;!&ndash;! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. &ndash;&gt;<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">General</span>-->
<!-- </div>-->
<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>
<div id="profileSpace">
<div id="profileInfo">Hello, {username}</div>
<div id="logout" role="button"
tabindex="0"
on:click={() => {
deleteCookie('access_token');
deleteCookie('refresh_token');
window.location.href = '/auth/login';
}}
on:keydown={e => {
if (e.key === 'Enter' || e.key === ' ') {
deleteCookie('access_token');
deleteCookie('refresh_token');
window.location.href = '/auth/login';
}
}}>
Log out
</div>
</div>
</div>
{/if}
</div>
<style>
#stickyMenu {
position:sticky;
top: 0;
}
#sideMenu {
font-family: 'Source Sans Pro', sans-serif;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
margin:0;
justify-content: center;
min-width: 150px;
background-color: #191f35;
position:absolute;
}
.sideMenuItem {
min-height: 50px;
color:white;
display: flex;
justify-content: center;
align-items: center;
border-radius: 20px;
cursor: pointer;
}
.sideMenuItem:hover {
background-color: rgb(45, 60, 90);
}
.sideMenuItemText {
padding:10px;
}
.svgimg {
fill:white;
}
#iconImg {
max-width: 150px;
}
#profileSpace {
margin-bottom: 20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: white;
font-weight: 900;
font-size: larger;
}
#logout {
background: none;
cursor: pointer;
border-radius: 10px;
transition: background 0.3s ease;
padding: 5px;
}
#logout:hover {
background: rgba(128, 128, 128, 0.5);
}
</style>