Front upd
This commit is contained in:
@@ -15,6 +15,7 @@
|
||||
}
|
||||
|
||||
import axios from "axios";
|
||||
import Statistics from "./Statistics.svelte";
|
||||
|
||||
onMount(async () => {
|
||||
const token = getCookie('access_token');
|
||||
@@ -64,6 +65,8 @@
|
||||
<IncomeDashboard />
|
||||
{:else if $selectedTab === 'settings'}
|
||||
<Settings />
|
||||
{:else if $selectedTab === 'statistics'}
|
||||
<Statistics />
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
import {globalStyles} from "../styles.js";
|
||||
import {themeDark} from "../styles.js";
|
||||
import {themeDefault} from "../styles.js";
|
||||
import {themeColorful} from "../styles.js";
|
||||
|
||||
function theme_dark() {
|
||||
$globalStyles = themeDark;
|
||||
@@ -10,19 +11,34 @@
|
||||
function theme_default() {
|
||||
$globalStyles = themeDefault;
|
||||
}
|
||||
|
||||
function theme_colorful() {
|
||||
$globalStyles = themeColorful;
|
||||
}
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<div style="color: {$globalStyles.dashTextColor}">
|
||||
<h1>Settings</h1>
|
||||
<button class="button-32" on:click={() => theme_default()}>Select</button>
|
||||
<div id="buttonContainer">
|
||||
<div class="settingEntry">
|
||||
<span><svg style="fill: yellow" 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="M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM160 256a96 96 0 1 1 192 0 96 96 0 1 1 -192 0zm224 0a128 128 0 1 0 -256 0 128 128 0 1 0 256 0z"/></svg></span>
|
||||
<h3 class="settingName">Light Mode</h3>
|
||||
<button class="button-32" on:click={() => theme_default()}>Select</button>
|
||||
</div>
|
||||
|
||||
<button class="button-32" on:click={() => theme_dark()}>Select</button>
|
||||
<div class="settingEntry">
|
||||
<span><svg style="fill:darkblue" xmlns="http://www.w3.org/2000/svg" height="16" width="12" viewBox="0 0 384 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"/></svg></span>
|
||||
<h3 class="settingName">Dark Mode</h3>
|
||||
<button class="button-32" on:click={() => theme_dark()}>Select</button>
|
||||
</div>
|
||||
|
||||
<button class="button-32" on:click={() => theme_dark()}>Select</button>
|
||||
<div class="settingEntry">
|
||||
<span><svg style="fill:pink" xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 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 0a48 48 0 1 1 0 96 48 48 0 1 1 0-96zM88 384H70.2c-10.9 0-18.6-10.7-15.2-21.1L93.3 248.1 59.4 304.5c-9.1 15.1-28.8 20-43.9 10.9s-20-28.8-10.9-43.9l53.6-89.2c20.3-33.7 56.7-54.3 96-54.3h11.6c39.3 0 75.7 20.6 96 54.3l53.6 89.2c9.1 15.1 4.2 34.8-10.9 43.9s-34.8 4.2-43.9-10.9l-33.9-56.3L265 362.9c3.5 10.4-4.3 21.1-15.2 21.1H232v96c0 17.7-14.3 32-32 32s-32-14.3-32-32V384H152v96c0 17.7-14.3 32-32 32s-32-14.3-32-32V384z"/></svg></span>
|
||||
<h3 class="settingName">Pinky Theme</h3>
|
||||
<button class="button-32" on:click={() => theme_colorful()}>Select</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="button-32" on:click={() => theme_dark()}>Select</button>
|
||||
|
||||
<button class="button-32" on:click={() => theme_dark()}>Select</button>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
@@ -56,4 +72,19 @@
|
||||
-webkit-filter: saturate(0.2) opacity(0.5);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
#buttonContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.settingEntry {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.settingName {
|
||||
margin: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,2 @@
|
||||
<h1>ACT LIKE THERE'S A NEURAL NETWORK HERE</h1>
|
||||
<h1>IT'S REALLY IN THE WORKS THOUGH</h1>
|
||||
@@ -1,7 +1,7 @@
|
||||
<script>
|
||||
import Chart from 'chart.js/auto';
|
||||
import { onMount } from 'svelte';
|
||||
import { expenseData } from "../../../stores.js";
|
||||
import {onMount} from 'svelte';
|
||||
import {expenseData} from "../../../stores.js";
|
||||
import {globalStyles} from "../../../styles.js";
|
||||
|
||||
let ctx;
|
||||
@@ -10,26 +10,35 @@
|
||||
|
||||
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);
|
||||
groupedData.set(category, parseInt(expense.amount));
|
||||
}
|
||||
}
|
||||
);
|
||||
return groupedData;
|
||||
|
||||
return new Map([...groupedData.entries()].sort());
|
||||
}
|
||||
|
||||
function createGraph() {
|
||||
try {
|
||||
const groupedExpenseData = groupAndSumByCategory();
|
||||
console.log("============= here start")
|
||||
console.log(groupedExpenseData);
|
||||
|
||||
const chartLabels = Array.from(groupedExpenseData.keys());
|
||||
const chartValues = Array.from(groupedExpenseData.values());
|
||||
const chartLabels = [];
|
||||
const chartValues = [];
|
||||
|
||||
for (const [label, value] of groupedExpenseData.entries()) {
|
||||
chartLabels.push(label);
|
||||
chartValues.push(value);
|
||||
}
|
||||
console.log(chartLabels)
|
||||
console.log(chartValues)
|
||||
console.log("============= here end")
|
||||
ctx = chartCanvas.getContext('2d');
|
||||
|
||||
if (!chart) {
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
import {expenseTypes, expenseData} from "../../../stores.js";
|
||||
|
||||
|
||||
let showModal;
|
||||
var showModal;
|
||||
let amount = '';
|
||||
let newData;
|
||||
|
||||
@@ -17,8 +17,8 @@
|
||||
const expenseCategory = $expenseTypes.find(incomeType => incomeType.id === id);
|
||||
|
||||
if (expenseCategory) {
|
||||
const newIncome = {
|
||||
incomeId: 0,
|
||||
const newExpense = {
|
||||
expenseId: 0,
|
||||
userDTO: {
|
||||
name: "Dummy",
|
||||
surname: "User",
|
||||
@@ -30,7 +30,8 @@
|
||||
};
|
||||
|
||||
newData = $expenseData;
|
||||
newData.push(newIncome);
|
||||
newData.push(newExpense);
|
||||
console.log(newExpense);
|
||||
$expenseData = newData;
|
||||
} else {
|
||||
console.error('Expense category not found for id:', id);
|
||||
@@ -38,6 +39,7 @@
|
||||
}
|
||||
|
||||
const createExpense = async () => {
|
||||
showModal = false;
|
||||
const selectedExpense = $expenseTypes.find(expense => expense.id === $selectedExpenseId);
|
||||
const data = {
|
||||
expenseCategory: selectedExpense.id,
|
||||
@@ -45,7 +47,6 @@
|
||||
};
|
||||
|
||||
addNewExpense(selectedExpense.id, parseInt(amount));
|
||||
|
||||
try {
|
||||
const token = getCookie('access_token');
|
||||
|
||||
|
||||
@@ -30,7 +30,7 @@
|
||||
{@html textToIcon[item.expenseCategory.name]}
|
||||
{/if}
|
||||
<span style="font-weight: bold">{item.incomeCategory ? `${item.incomeCategory.name}: ` : `${item.expenseCategory.name}: `}</span>
|
||||
<span style="margin-right: 10px; color: red; font-size: larger">{item.incomeCategory ? `+${item.amount}$` : `-${item.amount}$`}</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>
|
||||
</li>
|
||||
|
||||
@@ -1,19 +1,20 @@
|
||||
<script>
|
||||
|
||||
import {globalStyles} from "../../../styles.js";
|
||||
</script>
|
||||
|
||||
<div id="header">
|
||||
<div id="dashboardTitleWrapper">
|
||||
<div id="dashboardTitleWrapper" style="color: {$globalStyles.dashTextColor}">
|
||||
<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>
|
||||
<svg style="fill: {$globalStyles.dashTextColor}" 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>
|
||||
<svg style="fill: {$globalStyles.dashTextColor}" 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>
|
||||
|
||||
@@ -182,7 +182,6 @@
|
||||
}
|
||||
|
||||
function filterByCategory(category) {
|
||||
console.log(category)
|
||||
let tempArr = $tempExpense.filter(expense => expense.expenseCategory.name === category);
|
||||
expenseData.set(tempArr);
|
||||
}
|
||||
|
||||
@@ -26,7 +26,8 @@
|
||||
}
|
||||
}
|
||||
);
|
||||
return groupedData;
|
||||
|
||||
return new Map([...groupedData.entries()].sort());;
|
||||
}
|
||||
|
||||
function createGraph() {
|
||||
|
||||
@@ -26,7 +26,7 @@
|
||||
{@html textToIcon[item.incomeCategory.name]}
|
||||
{/if}
|
||||
<span style="font-weight: bold">{item.incomeCategory ? `${item.incomeCategory.name}: ` : `${item.expenseCategory.name}: `}</span>
|
||||
<span style="margin-right: 10px; color: green; font-size: larger">{item.incomeCategory ? `+${item.amount}$` : `-${item.amount}$`}</span>
|
||||
<span style="font-weight:bold; margin-right: 10px; color: green; font-size: larger">{item.incomeCategory ? `+${item.amount}$` : `-${item.amount}$`}</span>
|
||||
</span>
|
||||
<span style="">{`${item.date}`}</span>
|
||||
</li>
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
<script>
|
||||
|
||||
import {globalStyles} from "../../../styles.js";
|
||||
</script>
|
||||
|
||||
<div id="header">
|
||||
<div id="dashboardTitleWrapper">
|
||||
<div id="dashboardTitleWrapper" style="color: {$globalStyles.dashTextColor}">
|
||||
<h5>Hello, welcome to your</h5>
|
||||
<h1 id="dashboardTitle">Dashboard</h1>
|
||||
</div>
|
||||
|
||||
@@ -40,7 +40,6 @@
|
||||
onMount(() => {
|
||||
document.body.addEventListener("click", clickOutsideHandler);
|
||||
|
||||
// Clean up the event listener when the component is destroyed
|
||||
return () => {
|
||||
document.body.removeEventListener("click", clickOutsideHandler);
|
||||
};
|
||||
|
||||
@@ -52,11 +52,16 @@
|
||||
<span class="sideMenuItemText">Revenues</span>
|
||||
</div>
|
||||
|
||||
<div 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">General</span>
|
||||
<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"><!–! 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">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>
|
||||
|
||||
@@ -4,15 +4,27 @@ export const themeDefault = {
|
||||
mainColor: '#172233',
|
||||
dashColor: '#F5F2F3',
|
||||
color: 'black',
|
||||
altColor: 'white'
|
||||
altColor: 'white',
|
||||
dashTextColor: 'black',
|
||||
mainDataColor: '#F5F2F3'
|
||||
}
|
||||
|
||||
export const themeDark = {
|
||||
mainColor: '#000000',
|
||||
dashColor: '#202020',
|
||||
color: 'black',
|
||||
altColor: 'white'
|
||||
altColor: 'white',
|
||||
dashTextColor: 'white',
|
||||
mainDataColor: 'black'
|
||||
}
|
||||
|
||||
export const themeColorful = {
|
||||
mainColor: '#F75590',
|
||||
dashColor: '#FCE4D8',
|
||||
color: 'black',
|
||||
altColor: 'white',
|
||||
dashTextColor: 'black',
|
||||
mainDataColor: '#FCE4D8'
|
||||
}
|
||||
export const globalStyles = writable(themeDefault);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user