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

Merge pull request #28 from lumijiez/front-v2

Browse Source 
Front v2
This commit was merged in pull request #28.
This commit is contained in:
Daniel
2023-10-27 00:08:17 +03:00
committed by GitHub
parent e24ca0d2d5 ef7c7ec7f8
commit 801cf60db4
14 changed files with 249 additions and 355 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/main/java/com/faf223/expensetrackerfaf/web/src/routes/auth/login/LoginForm.svelte
View File

@@ -1,5 +1,4 @@
<script>
import * as EmailValidator from 'email-validator';
import axios from "axios";
import {onMount} from "svelte";
import { getCookie, setCookie } from 'svelte-cookie';
@@ -9,19 +8,19 @@
let message = ""
onMount(async () => {
console.log("Mounted");
const access_token = getCookie('access_token');
const refresh_token = getCookie('refresh_token');
if (access_token && refresh_token) {
window.location.href = '/dashboard';
}
});
async function submitForm(event) {
event.preventDefault();
console.log("Tried to submit!");
console.log(username);
console.log(password);
try {
const response = await axios.post('http://localhost:8081/api/v1/auth/authenticate', {
email: username,
@@ -30,30 +29,14 @@
const { access_token, refresh_token } = response.data;
// Save the tokens in cookies
setCookie('access_token', access_token);
setCookie('refresh_token', refresh_token);
console.log(access_token, refresh_token);
window.location.href = '/dashboard'
} catch (error) {
console.error('Login failed:', error);
}
}
// function validateEmail() {
// let valid = EmailValidator.validate(username);
// isErrorVisible = !valid;
// message = isErrorVisible ? "Invalid e-mail!" : "";
// return valid;
// }
//
// function validatePassword() {
// let valid = password.value !== '';
// isErrorVisible = !valid;
// message = isErrorVisible ? "Invalid password!" : "";
// return valid;
// }
</script>
<div class="animated bounceInDown">

26
src/main/java/com/faf223/expensetrackerfaf/web/src/routes/auth/register/RegisterForm.svelte
View File

@@ -55,7 +55,7 @@
<input type="submit" value="Sign up" class="submitButton">
</form>
<a href="/auth/login" class="noAccount">Already have an account? Sign in</a>
</div>
</div>
</div>
@@ -78,18 +78,18 @@
height: 600px;
box-shadow: 1px 1px 108.8px 19.2px rgb(25, 31, 53);
}
#formTitle {
font-family: 'Source Sans Pro', sans-serif;
color: #5c6bc0;
margin-top: 94px;
}
#formTitle span {
color: #dfdeee;
font-weight: lighter;
}
.registerForm h5 {
font-family: 'Source Sans Pro', sans-serif;
font-size: 13px;
@@ -98,7 +98,7 @@
margin-top: -15px;
margin-bottom: 70px;
}
.registerForm input[type="text"],
.registerForm input[type="password"] {
display: block;
@@ -116,21 +116,21 @@
-o-transition: all .2s ease-out;
transition: all .2s ease-out;
}
.registerForm input[type="text"]:focus,
.registerForm input[type="password"]:focus {
border: 1px solid #79A6FE;
}
a {
color: #5c7fda;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.submitButton {
border: 0;
background: #7f5feb;
@@ -145,23 +145,23 @@
transition: 0.3s;
cursor: pointer;
}
.submitButton:hover {
background: #5d33e6;
}
.recoveryPass {
position: relative;
float: right;
right: 28px;
}
.noAccount {
position: absolute;
top: 92%;
left: 24%;
}
.error {
text-align: center;
width: 337px;

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

@@ -5,51 +5,40 @@
import { getCookie } from "svelte-cookie";
import {onMount} from "svelte";
import {incomeData} from "../stores.js";
import {expenseData} from "../stores.js";
import {incomeTypes} from "../stores.js";
import {incomeData, expenseData, incomeTypes, expenseTypes} from "../stores.js";
import axios from "axios";
onMount(() => {
if (getCookie('access_token') === null) {
onMount(async () => {
const token = getCookie('access_token');
if (token === '') {
window.location.href = '/auth/login';
console.log("no token");
return;
}
const token = getCookie('access_token');
const config = {
headers: {
'Authorization': `Bearer ${token}`
}
};
const incomePromise = axios.get('http://localhost:8081/incomes/personal-incomes', config)
.then(response => {
incomeData.set(response.data);
console.log("Received Income Data");
})
.catch(error => console.error('Error fetching income data:', 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)
]);
const expensePromise = axios.get('http://localhost:8081/expenses/personal-expenses', config)
.then(response => {
expenseData.set(response.data);
console.log("Received Expense Data");
})
.catch(error => console.error('Error fetching expense data:', error));
const incomeTypesPromise = axios.get('http://localhost:8081/incomes/categories', config)
.then(response => {
incomeTypes.set(response.data);
console.log("Received Income Type Data");
})
.catch(error => console.error('Error:', error));
Promise.all([incomePromise, expensePromise, incomeTypesPromise])
.then(() => {
console.log(getCookie('access_token'));
});
incomeData.set(incomeResponse.data);
expenseData.set(expenseResponse.data);
incomeTypes.set(incomeTypesResponse.data);
expenseTypes.set(expenseTypesResponse.data);
} catch (error) {
console.error('Error:', error);
}
});
</script>

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

@@ -7,23 +7,23 @@
let chartCanvas;
let chart = null;
function createGraph(data) {
try {
function groupAndSumByCategory(incomes) {
const groupedData = new Map();
incomes.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 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;
}
const groupedIncomeData = groupAndSumByCategory(data);
function createGraph() {
try {
const groupedIncomeData = groupAndSumByCategory();
const chartLabels = Array.from(groupedIncomeData.keys());
const chartValues = Array.from(groupedIncomeData.values());
@@ -37,7 +37,16 @@
labels: chartLabels,
datasets: [{
label: 'Revenue',
backgroundColor: 'rgb(255, 99, 132)',
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
}]
},
@@ -49,7 +58,6 @@
} else {
chart.data.labels = chartLabels;
chart.data.datasets[0].data = chartValues;
console.log(chart.data.datasets[0].data);
chart.update();
}
} catch (error) {
@@ -59,13 +67,12 @@
$: {
if ($incomeData) {
createGraph($incomeData);
console.log($incomeData);
createGraph();
}
}
onMount(() => {
createGraph($incomeData);
createGraph();
});
</script>

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

@@ -1,72 +1,76 @@
<script>
import Chart from 'chart.js/auto';
import { onMount } from 'svelte';
import axios from 'axios';
import {getCookie} from "svelte-cookie";
import { expenseData } from "../../stores.js";
let ctx;
let chartCanvas;
let chart = null;
async function updateGraph() {
const token = getCookie('access_token');
const config = {
headers: {
'Authorization': `Bearer ${token}`
}
};
try {
const response = await axios.get('http://localhost:8081/expenses/personal-expenses', config);
const aggregatedData = {};
response.data.forEach(item => {
const category = item.expenseCategory.name;
const amount = item.amount;
if (aggregatedData[category]) {
aggregatedData[category] += amount;
} else {
aggregatedData[category] = amount;
}
});
const chartLabels = Object.keys(aggregatedData);
const chartValues = Object.values(aggregatedData);
ctx = chartCanvas.getContext('2d');
new Chart(ctx, {
type: 'bar',
data: {
labels: chartLabels,
datasets: [{
label: 'Revenue',
backgroundColor: 'rgb(255, 99, 132)',
data: chartValues
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
legend: {
display: false
},
tooltips: {
callbacks: {
label: (tooltipItem) => {
return tooltipItem.yLabel;
}
}
function groupAndSumByCategory() {
const groupedData = new Map();
console.log($expenseData)
$expenseData.forEach(expense => {
const category = expense.expenseCategory.name;
if (groupedData.has(category)) {
groupedData.set(category, groupedData.get(category) + parseInt(expense.amount));
} else {
groupedData.set(category, expense.amount);
}
}
});
);
return groupedData;
}
function createGraph() {
try {
const groupedExpenseData = groupAndSumByCategory();
const chartLabels = Array.from(groupedExpenseData.keys());
const chartValues = Array.from(groupedExpenseData.values());
ctx = chartCanvas.getContext('2d');
if (!chart) {
chart = new Chart(ctx, {
type: 'bar',
data: {
labels: chartLabels,
datasets: [{
label: 'Spendings',
backgroundColor: [
'rgb(107, 80, 107)',
'rgb(171, 61, 169)',
'rgb(222, 37, 218)',
'rgb(235, 68, 232)',
'rgb(255, 128, 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);
}
}
onMount(updateGraph);
$: {
if ($expenseData) {
createGraph();
}
}
onMount(() => {
createGraph();
});
</script>
<div id="chart">

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

@@ -1,45 +1,32 @@
<script>
import chartjs from 'chart.js/auto';
import Chart from 'chart.js/auto';
import { onMount } from 'svelte';
import axios from 'axios';
import { getCookie } from "svelte-cookie";
import { incomeData, expenseData } from "../../stores.js";
let ctx;
let chartCanvas;
let chart = null;
async function updateGraph() {
const token = getCookie('access_token');
const config = {
headers: {
'Authorization': `Bearer ${token}`
}
};
function createGraph() {
try {
const [incomesResponse, expensesResponse] = await Promise.all([
axios.get('http://localhost:8081/incomes/personal-incomes', config),
axios.get('http://localhost:8081/expenses/personal-expenses', config)
]);
const incomesData = incomesResponse.data;
const expensesData = expensesResponse.data;
const totalIncomes = incomesData.reduce((total, item) => total + item.amount, 0);
const totalExpenses = expensesData.reduce((total, item) => total + item.amount, 0);
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');
new chartjs(ctx, {
if (!chart) {
chart = new Chart(ctx, {
type: 'pie',
data: {
labels: chartLabels,
datasets: [{
data: chartValues,
backgroundColor: ['green', 'red'],
backgroundColor: [
'rgb(243, 188, 0)',
'rgb(0, 117, 164)'
],
}]
},
options: {
@@ -47,12 +34,30 @@
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);
}
}
onMount(updateGraph);
$: {
if ($incomeData || $expenseData) {
createGraph();
}
}
onMount(() => {
createGraph();
});
</script>
<div id="chart">

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

@@ -1,36 +1,18 @@
<script>
import { onMount, afterUpdate } from 'svelte';
import axios from 'axios';
import { getCookie } from "svelte-cookie";
import ContentExpense from "./contents/ContentExpense.svelte";
import {expenseData} from "../../stores.js";
let data = [];
let parentHeight;
let listParentHeight;
async function updateInfo() {
const token = getCookie('access_token');
const config = {
headers: {
'Authorization': `Bearer ${token}`
}
};
try {
const response = await axios.get('http://localhost:8081/expenses/personal-expenses', config);
data = response.data;
parentHeight = document.querySelector('#expenseInfo').offsetHeight;
} catch (error) {
console.error('Error:', error);
}
}
onMount(updateInfo);
afterUpdate(() => {
parentHeight = document.querySelector('#expenseInfo').offsetHeight;
listParentHeight = document.querySelector('#expenseList').offsetHeight;
});
}
onMount(updateInfo);
afterUpdate(updateInfo);
</script>
<div id="expenseInfo" style="max-height: {parentHeight}px;">
@@ -38,7 +20,7 @@
<div id="expenseList" style="max-height: {listParentHeight}px;">
<ul>
{#each data as item}
{#each $expenseData as item}
<li>
{item.incomeCategory ? `${item.incomeCategory.name}: ` : `${item.expenseCategory.name}: `}
{item.incomeCategory ? `+${item.amount}$` : `-${item.amount}$`}
@@ -54,6 +36,10 @@
#expenseInfo {
display: flex;
flex-direction: column;
background-color: #212942;
color:white;
border-radius: 10px;
margin: 10px;
}
#expenseList {
@@ -72,6 +58,7 @@
ul {
list-style: none;
padding: 0;
color:black;
}
li {

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

@@ -1,37 +1,18 @@
<script>
import { onMount, afterUpdate } from 'svelte';
import axios from 'axios';
import {getCookie} from "svelte-cookie";
import { incomeData } from "../../stores.js";
import ContentIncome from "./contents/ContentIncome.svelte";
let data = [];
let parentHeight;
let listParentHeight;
async function updateInfo() {
const token = getCookie('access_token');
const config = {
headers: {
'Authorization': `Bearer ${token}`
}
};
try {
const response = await axios.get('http://localhost:8081/incomes/personal-incomes', config);
data = response.data;
parentHeight = document.querySelector('#incomeInfo').offsetHeight;
} catch (error) {
console.error('Error:', error);
}
}
onMount(updateInfo);
afterUpdate(() => {
parentHeight = document.querySelector('#incomeInfo').offsetHeight;
parentHeight = document.querySelector('#expenseInfo').offsetHeight;
listParentHeight = document.querySelector('#expenseList').offsetHeight;
});
}
onMount(updateInfo);
afterUpdate(updateInfo);
</script>
<div id="incomeInfo" style="max-height: {parentHeight}px;">
@@ -39,7 +20,7 @@
<div id="incomeList" style="max-height: {listParentHeight}px;">
<ul>
{#each data as item}
{#each $incomeData as item}
<li>
{item.incomeCategory ? `${item.incomeCategory.name}: ` : `${item.expenseCategory.name}: `}
{item.incomeCategory ? `+${item.amount}$` : `-${item.amount}$`}
@@ -54,6 +35,10 @@
#incomeInfo {
display: flex;
flex-direction: column;
background-color: #212942;
color:white;
border-radius: 10px;
margin: 10px;
}
#incomeList {
@@ -68,6 +53,7 @@
ul {
list-style: none;
padding: 0;
color: black;
}
li {

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

@@ -1,45 +1,55 @@
<script>
import Modal from '../modals/Modal.svelte';
import { onMount } from '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('');
onMount(async () => {
try {
const token = getCookie('access_token');
function addNewExpense(id, amount) {
const today = new Date().toISOString().split('T')[0];
const expenseCategory = $expenseTypes.find(incomeType => incomeType.id === id);
const config = {
headers: {
'Authorization': `Bearer ${token}`
}
console.log(amount);
if (expenseCategory) {
const newIncome = {
incomeId: 0,
userDTO: {
name: "Dummy",
surname: "User",
username: "dummyuser"
},
expenseCategory: expenseCategory,
date: today,
amount: amount
};
const response = await axios.get('http://localhost:8081/expenses/categories', config);
expenseOptions.set(response.data);
console.log(response.data);
} catch (error) {
console.error('Error:', error);
newData = $expenseData;
newData.push(newIncome);
$expenseData = newData;
} else {
console.error('Expense category not found for id:', id);
}
});
const expenseOptions = writable([]);
}
const createExpense = async () => {
const selectedExpense = $expenseOptions.find(expense => expense.id === $selectedExpenseId);
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');
console.log(token);
const response = await axios.post('http://localhost:8081/expenses', data, {
headers: {
'Authorization': `Bearer ${token}`,
@@ -47,10 +57,8 @@
},
});
console.log(response.data);
if (response.status === 200) {
console.log("cool");
if (response.status === 201) {
//console.log("cool");
} else {
console.error('Error:', response.status);
}
@@ -78,7 +86,7 @@
<div class="form-group">
<label for="expenseCategory">Select Expense Category:</label>
<select id="expenseCategory" class="form-control" bind:value={$selectedExpenseId}>
{#each $expenseOptions as expense (expense.id)}
{#each $expenseTypes as expense (expense.id)}
{#if expense.id !== undefined}
<option value={expense.id}>{expense.name}</option>
{/if}

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

@@ -1,11 +1,9 @@
<script>
import Modal from '../modals/Modal.svelte';
import { onMount } from 'svelte';
import { writable } from 'svelte/store';
import axios from 'axios';
import { getCookie } from "svelte-cookie";
import {incomeData} from "../../../stores.js";
import {incomeTypes} from "../../../stores.js";
import {incomeData, incomeTypes} from "../../../stores.js";
let showModal;
let amount = '';
@@ -35,35 +33,13 @@
newData = $incomeData;
newData.push(newIncome);
$incomeData = newData;
console.log("ggWPPPPP", newIncome);
} else {
console.error('Income category not found for id:', id);
}
}
onMount(async () => {
try {
const token = getCookie('access_token');
const config = {
headers: {
'Authorization': `Bearer ${token}`
}
};
const response = await axios.get('http://localhost:8081/incomes/categories', config);
incomeOptions.set(response.data);
console.log(response.data);
} catch (error) {
console.error('Error:', error);
}
});
const incomeOptions = writable([]);
const createIncome = async () => {
const selectedIncome = $incomeOptions.find(income => income.id === $selectedIncomeId);
const selectedIncome = $incomeTypes.find(income => income.id === $selectedIncomeId);
const data = {
incomeCategory: selectedIncome.id,
amount: amount,
@@ -73,7 +49,7 @@
try {
const token = getCookie('access_token');
console.log(token);
const response = await axios.post('http://localhost:8081/incomes', data, {
headers: {
'Authorization': `Bearer ${token}`,
@@ -81,8 +57,8 @@
},
});
if (response.status === 200) {
console.log("cool");
if (response.status === 201) {
//console.log("cool");
} else {
console.error('Error:', response.status);
}
@@ -110,7 +86,7 @@
<div class="form-group">
<label for="incomeCategory">Select Income Category:</label>
<select id="incomeCategory" class="form-control" bind:value={$selectedIncomeId}>
{#each $incomeOptions as income (income.id)}
{#each $incomeTypes as income (income.id)}
{#if income.id !== undefined}
<option value={income.id}>{income.name}</option>
{/if}

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

@@ -4,14 +4,6 @@
import Graph3 from '../graphs/Graph3.svelte';
import Expenses from "../infolists/Expenses.svelte";
import Incomes from "../infolists/Incomes.svelte";
function updateAll() {
Graph1.updateGraph();
Graph2.updateGraph();
Graph3.updateGraph();
Expenses.updateInfo();
Incomes.updateInfo();
}
</script>
<div id="dataMenu">

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

@@ -1,38 +1,39 @@
<script>
import { onMount } from 'svelte';
import axios from 'axios';
import { getCookie } from "svelte-cookie";
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
onMount(async () => {
const token = getCookie('access_token');
function updateInfo() {
totalExpenses = $expenseData.reduce((total, item) => total + parseInt(item.amount), 0);
totalIncomes = $incomeData.reduce((total, item) => total + parseInt(item.amount), 0);
const config = {
headers: {
'Authorization': `Bearer ${token}`
}
};
const incomeDifference = ((totalIncomes - lastMonthIncome) / lastMonthIncome) * 100;
const expenseDifference = ((lastMonthExpense - totalExpenses) / lastMonthExpense) * 100;
try {
const [incomesResponse, expensesResponse] = await Promise.all([
axios.get('http://localhost:8081/incomes/personal-incomes', config),
axios.get('http://localhost:8081/expenses/personal-expenses', config)
]);
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>`;
const incomesData = incomesResponse.data;
const expensesData = expensesResponse.data;
totalExpenses = expensesData.reduce((total, item) => total + item.amount, 0);
totalIncomes = incomesData.reduce((total, item) => total + item.amount, 0);
infobar1.innerHTML = `<span style="font-size: larger">Total expenses:</span><br><span style="color:red;font-size: xxx-large">${totalExpenses}$`;
infobar2.innerHTML = `<span style="font-size: larger">Total incomes:</span><br><span style="color:green;font-size: xxx-large">${totalIncomes}$</span>`;
} catch (error) {
console.error('Error:', error);
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>
@@ -55,15 +56,16 @@
width: 200px;
min-width: 100px;
height: 100px;
color:white;
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);
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);
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
</style>
</style>

47
src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/menu/Navbar.svelte
View File

@@ -1,47 +0,0 @@
<script>
</script>
<div id="navbar">
<div id="profilePic">PROFILEPIC</div>
<div class="menuItem" on:click={() => console.log("help clicked")}>Help</div>
<div class="menuItem" on:click={() => console.log("contact clicked")}>Contact</div>
<div class="menuItem" on:click={() => console.log("settings clicked")}>Settings</div>
<div class="menuItem" on:click={() => console.log("logout clicked")}>Logout</div>
</div>
<style>
#navbar {
padding:0;
background-color: rgb(33, 41, 66);
display: flex;
justify-content: flex-end;
}
.menuItem {
font-family: 'Source Sans Pro', sans-serif;
color:white;
display: flex;
align-items: center;
padding-left: 20px;
padding-right: 20px;
text-align: center;
height: 50px;
}
.menuItem:hover {
background-color: rgb(45, 60, 90);
}
#profilePic {
margin-right:auto;
display: flex;
padding-left: 20px;
padding-right: 20px;
align-items: center;
color:white;
justify-self: left;
}
</style>

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

@@ -4,4 +4,6 @@ export const incomeData = writable([]);
export const expenseData = writable([]);
export const incomeTypes = writable([]);
export const incomeTypes = writable([]);
export const expenseTypes = writable([]);