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

Merge pull request #24 from lumijiez/front-v2

Browse Source 
Front v2
This commit was merged in pull request #24.
This commit is contained in:
Daniel
2023-10-25 23:56:09 +03:00
committed by GitHub
parent f600f73ec4 b63f156eb7
commit ae6d09b47f
9 changed files with 298 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,11 +4,31 @@
import QuickInfobar from "./other/QuickInfobar.svelte";
import { getCookie } from "svelte-cookie";
import {onMount} from "svelte";
import {writable} from "svelte/store";
import axios from "axios";
onMount(() => {
const incomeData = writable([]);
const expenseData = writable([]);
onMount(async () => {
if (getCookie('access_token') === null ) {
window.location.href = '/auth/login';
}
try {
const response = await axios.get('http://localhost:8081/incomes/personal-incomes', config);
incomeData.set(response.data);
} catch (error) {
console.error('Error fetching income data:', error);
}
try {
const response = await axios.get('http://localhost:8081/expenses/personal-expenses', config);
expenseData.set(response.data);
} catch (error) {
console.error('Error fetching expense data:', error);
}
console.log(getCookie('access_token'));
})
</script>

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

@@ -1,31 +1,35 @@
<script>
import Chart from 'chart.js/auto';
import { onMount } from 'svelte';
import axios from 'axios';
import {getCookie} from "svelte-cookie";
import { incomeData } from '../Dashboard.svelte';
let ctx;
let chartCanvas;
onMount(async () => {
const token = getCookie('access_token');
const config = {
headers: {
'Authorization': `Bearer ${token}`
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) + income.amount);
} else {
groupedData.set(category, income.amount);
}
});
return groupedData;
}
};
try {
const response = await axios.get('http://localhost:8081/incomes/personal-incomes', config);
console.log(response.data);
const incomeData = response.data;
function updateGraph() {
const incomeDataArray = $incomeData;
const groupedIncomeData = groupAndSumByCategory(incomeDataArray);
const chartLabels = incomeData.map(item => item.incomeCategory.name);
const chartValues = incomeData.map(item => item.amount);
const chartLabels = Array.from(groupedIncomeData.keys());
const chartValues = Array.from(groupedIncomeData.values());
if (chartCanvas) {
ctx = chartCanvas.getContext('2d');
if (ctx.chart) {
ctx.chart.destroy();
}
new Chart(ctx, {
type: 'bar',
data: {
@@ -41,16 +45,18 @@
maintainAspectRatio: false
}
});
} catch (error) {
console.error('Error:', error);
}
});
}
onMount(updateGraph);
</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);

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

@@ -7,8 +7,7 @@
let ctx;
let chartCanvas;
onMount(async () => {
async function updateGraph() {
const token = getCookie('access_token');
const config = {
@@ -65,7 +64,9 @@
} catch (error) {
console.error('Error:', error);
}
});
}
onMount(updateGraph);
</script>
<div id="chart">

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

@@ -7,7 +7,7 @@
let ctx;
let chartCanvas;
onMount(async () => {
async function updateGraph() {
const token = getCookie('access_token');
const config = {
@@ -50,7 +50,9 @@
} catch (error) {
console.error('Error:', error);
}
});
}
onMount(updateGraph);
</script>
<div id="chart">

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

@@ -8,7 +8,7 @@
let parentHeight;
let listParentHeight;
onMount(async () => {
async function updateInfo() {
const token = getCookie('access_token');
const config = {
@@ -24,7 +24,8 @@
} catch (error) {
console.error('Error:', error);
}
});
}
onMount(updateInfo);
afterUpdate(() => {
parentHeight = document.querySelector('#expenseInfo').offsetHeight;

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

@@ -9,7 +9,7 @@
let parentHeight;
let listParentHeight;
onMount(async () => {
async function updateInfo() {
const token = getCookie('access_token');
const config = {
@@ -25,7 +25,8 @@
} catch (error) {
console.error('Error:', error);
}
});
}
onMount(updateInfo);
afterUpdate(() => {
parentHeight = document.querySelector('#incomeInfo').offsetHeight;

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

@@ -1,64 +1,171 @@
<script>
import Modal from '../modals/Modal.svelte'
import Modal from '../modals/Modal.svelte';
import { onMount } from 'svelte';
import { writable } from 'svelte/store';
import axios from 'axios';
import { getCookie } from "svelte-cookie";
let showModal;
let amount = '';
const selectedExpenseId = writable('');
onMount(async () => {
try {
const token = getCookie('access_token');
const config = {
headers: {
'Authorization': `Bearer ${token}`
}
};
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);
}
});
const expenseOptions = writable([]);
const createExpense = async () => {
const selectedExpense = $expenseOptions.find(expense => expense.id === $selectedExpenseId);
const data = {
expenseCategory: selectedExpense.id,
amount: amount,
};
try {
const token = getCookie('access_token');
console.log(token);
const response = await axios.post('http://localhost:8081/expenses', data, {
headers: {
'Authorization': `Bearer ${token}`,
'Content-Type': 'application/json',
},
});
console.log(response.data);
if (response.status === 200) {
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="1" on:click={() => (showModal = true)} on:keydown={() => console.log("keydown")}>
+
</div>
</div>
<Modal bind:showModal>
<h2 slot="header">
modal
<small><em>adjective</em> mod·al \ˈmō-dəl\</small>
</h2>
<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>
<ol class="definition-list">
<li>of or relating to modality in logic</li>
<li>
containing provisions as to the mode of procedure or the manner of taking effect —used of a
contract or legacy
</li>
<li>of or relating to a musical mode</li>
<li>of or relating to structure as opposed to substance</li>
<li>
of, relating to, or constituting a grammatical form or category characteristically indicating
predication
</li>
<li>of or relating to a statistical mode</li>
</ol>
<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)}
{#if expense.id !== undefined}
<option value={expense.id}>{expense.name}</option>
{/if}
{/each}
</select>
</div>
<a href="https://www.merriam-webster.com/dictionary/modal">merriam-webster.com</a>
<button class="btn btn-primary" on:click={createExpense}>Submit</button>
</div>
</Modal>
</div>
<style>
#exp {
padding-left: 20px;
padding-right: 20px;
padding: 20px;
text-align: center;
}
#optionField {
display: flex;
align-items: center;
justify-content: space-between;
}
.plus-button {
font-size: xx-large;
background: none;
font-size: 24px;
background-color: #007BFF;
color: #fff;
border: none;
border-radius: 50%;
width: 40px;
height: 40px;
line-height: 40px;
cursor: pointer;
border-radius: 10px;
transition: background 0.3s ease;
}
.plus-button:hover {
background: rgba(128, 128, 128, 0.5);
background-color: #0056b3;
}
#openModal {
top: 0;
background-color: #f2f2f2;
border-radius: 10px 10px 0 0;
z-index: 1;
margin: 0;
.expense-form {
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
padding: 20px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
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>

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

@@ -6,7 +6,7 @@
import { getCookie } from "svelte-cookie";
let showModal;
let amount;
let amount = '';
const selectedIncomeId = writable('');
@@ -34,7 +34,7 @@
const selectedIncome = $incomeOptions.find(income => income.id === $selectedIncomeId);
const data = {
incomeCategory: selectedIncome.id,
amount: $amount,
amount: amount,
};
try {
@@ -61,55 +61,111 @@
</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 id="openModal" class="plus-button" role="button" tabindex="1" on:click={() => (showModal = true)} on:keydown={() => console.log("keydown")}>
+
</div>
</div>
<Modal bind:showModal>
<div>
<div class="income-form">
<h3>Income Details</h3>
<div class="form-group">
<label for="amount">Amount:</label>
<input type="text" id="amount" bind:value={amount} />
<input type="text" id="amount" class="form-control" bind:value={amount} />
</div>
<label for="income">Select Income:</label>
<select id="income" bind:value={$selectedIncomeId}>
<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)}
{#if income.id !== undefined}
<option value={income.id}>{income.name}</option>
{/if}
{/each}
</select>
</div>
<button on:click={createIncome}>Submit</button>
<button class="btn btn-primary" on:click={createIncome}>Submit</button>
</div>
</Modal>
</div>
<style>
#inc {
padding-left: 20px;
padding-right: 20px;
padding: 20px;
text-align: center;
}
#optionField {
display: flex;
align-items: center;
justify-content: space-between;
}
.plus-button {
font-size: xx-large;
background: none;
font-size: 24px;
background-color: #007BFF;
color: #fff;
border: none;
border-radius: 50%;
width: 40px;
height: 40px;
line-height: 40px;
cursor: pointer;
border-radius: 10px;
transition: background 0.3s ease;
}
.plus-button:hover {
background: rgba(128, 128, 128, 0.5);
background-color: #0056b3;
}
#openModal {
top: 0;
background-color: #f2f2f2;
border-radius: 10px 10px 0 0;
z-index: 1;
margin: 0;
.income-form {
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
padding: 20px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
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>

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

@@ -4,6 +4,14 @@
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">