From 75d081fd8815ba86f30d412c787f4b4d552e24a4 Mon Sep 17 00:00:00 2001 From: Daniel Date: Mon, 11 Dec 2023 00:08:05 +0200 Subject: [PATCH] Front upd --- .../web/src/routes/+page.svelte | 1 - .../routes/dashboard/board/AdminPanel.svelte | 1 + .../routes/dashboard/board/Dashboard.svelte | 29 +- .../dashboard/board/ExpenseDashboard.svelte | 29 +- .../src/routes/dashboard/board/Profile.svelte | 1 + .../board/expenses/graphs/Graph3.svelte | 120 +++++--- .../expenses/infolists/ContentExpense.svelte | 67 ++++- .../board/expenses/infolists/Expenses.svelte | 281 +++++++++++++----- .../board/expenses/other/DashHeader.svelte | 3 +- .../board/expenses/util/EditEntry.svelte | 114 +++++++ .../src/routes/dashboard/menu/SideMenu.svelte | 38 ++- .../routes/dashboard/menu/StickyMenu.svelte | 36 ++- .../web/src/routes/dashboard/stores.js | 12 + 13 files changed, 569 insertions(+), 163 deletions(-) create mode 100644 src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/AdminPanel.svelte create mode 100644 src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/Profile.svelte create mode 100644 src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/util/EditEntry.svelte diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/+page.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/+page.svelte index 0d4f9a3..5a70387 100644 --- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/+page.svelte +++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/+page.svelte @@ -2,7 +2,6 @@ import { onMount } from "svelte"; onMount(() => { - // Redirect to /auth/login window.location.href = '/auth/login'; }); diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/AdminPanel.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/AdminPanel.svelte new file mode 100644 index 0000000..4ffecc0 --- /dev/null +++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/AdminPanel.svelte @@ -0,0 +1 @@ +

ADMIN PANEL

\ No newline at end of file diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/Dashboard.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/Dashboard.svelte index 33bb66a..98ab047 100644 --- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/Dashboard.svelte +++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/Dashboard.svelte @@ -4,7 +4,17 @@ import ExpenseDashboard from "./ExpenseDashboard.svelte"; import IncomeDashboard from "./IncomeDashboard.svelte"; import Settings from "./Settings.svelte"; - import { incomeData, expenseData, incomeTypes, expenseTypes, selectedTab } from "../stores.js"; + import { + incomeData, + expenseData, + incomeTypes, + expenseTypes, + selectedTab, + monthIncome, + monthExpense, + tempExpense, + tempIncome + } from "../stores.js"; import {globalStyles} from "../styles.js"; let componentStyles; @@ -16,6 +26,8 @@ import axios from "axios"; import Statistics from "./Statistics.svelte"; + import AdminPanel from "./AdminPanel.svelte"; + import Profile from "./Profile.svelte"; onMount(async () => { const token = getCookie('access_token'); @@ -32,8 +44,8 @@ }; try { - var currentDate = new Date(); - var currentMonth = currentDate.getMonth() + 1; + const currentDate = new Date(); + const currentMonth = currentDate.getMonth() + 1; const [incomeResponse, expenseResponse, incomeTypesResponse, expenseTypesResponse] = await Promise.all([ axios.get('https://trackio.online:8081/incomes/personal-incomes?month=' + currentMonth , config), axios.get('https://trackio.online:8081/expenses/personal-expenses?month=' + currentMonth, config), @@ -45,8 +57,15 @@ incomeData.set(incomeResponse.data); expenseData.set(expenseResponse.data); + incomeTypes.set(incomeTypesResponse.data); expenseTypes.set(expenseTypesResponse.data); + + tempExpense.set(expenseResponse.data); + tempIncome.set(incomeResponse.data); + + monthIncome.set(incomeResponse.data); + monthExpense.set(expenseResponse.data); } catch (error) { console.error('Error:', error); } @@ -67,6 +86,10 @@ {:else if $selectedTab === 'statistics'} + {:else if $selectedTab === 'admin'} + + {:else if $selectedTab === 'profile'} + {/if} diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/ExpenseDashboard.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/ExpenseDashboard.svelte index a7ca6a3..3896961 100644 --- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/ExpenseDashboard.svelte +++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/ExpenseDashboard.svelte @@ -2,12 +2,19 @@ import DashHeader from "./expenses/other/DashHeader.svelte"; import QuickInfobar from "./expenses/other/QuickInfobar.svelte"; import Expenses from "./expenses/infolists/Expenses.svelte"; + import Graph3 from "./expenses/graphs/Graph3.svelte";
- - +
+ + +
+ +
+ +
@@ -21,6 +28,17 @@ } } + .graphs { + display:flex; + flex-direction: row; + justify-content: space-between; + align-items: stretch; + min-width: 0; + min-height: 0; + height: 100% !important; + width: 100% !important; + flex: 1 1 auto; + } .expenseContainer { display: flex; height: 100%; @@ -29,8 +47,13 @@ } .dataHalf { + display:flex; + min-height: 0; + min-width: 0; + flex-direction: column; flex: 1 1 auto; - background-color: #8BD17C; + background-color: #212942; + padding: 10px; } diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/Profile.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/Profile.svelte new file mode 100644 index 0000000..c74c94d --- /dev/null +++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/Profile.svelte @@ -0,0 +1 @@ +

PROFILE

\ No newline at end of file diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/graphs/Graph3.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/graphs/Graph3.svelte index f7cae70..dc374c3 100644 --- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/graphs/Graph3.svelte +++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/graphs/Graph3.svelte @@ -1,59 +1,44 @@
- +
diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/infolists/ContentExpense.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/infolists/ContentExpense.svelte index 29dfc17..8283051 100644 --- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/infolists/ContentExpense.svelte +++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/infolists/ContentExpense.svelte @@ -5,24 +5,19 @@ import {expenseTypes, expenseData, dateText} from "../../../stores.js"; import { slide } from 'svelte/transition'; - var showModal = false; + let showModal = false; let amount = ''; let newData; const selectedExpenseId = writable(''); - function addNewExpense(id, amount) { + function addNewExpense(expid, id, amount) { const today = new Date().toISOString().split('T')[0]; const expenseCategory = $expenseTypes.find(incomeType => incomeType.id === id); if (expenseCategory) { const newExpense = { - expenseId: 0, - userDTO: { - name: "Dummy", - surname: "User", - username: "dummyuser" - }, + expenseId: expid, expenseCategory: expenseCategory, date: today, amount: parseInt(amount) @@ -30,7 +25,6 @@ newData = $expenseData; newData.push(newExpense); - console.log(newExpense); $expenseData = newData; } else { console.error('Expense category not found for id:', id); @@ -45,7 +39,6 @@ amount: parseInt(amount), }; - addNewExpense(selectedExpense.id, parseInt(amount)); try { const token = getCookie('access_token'); @@ -57,7 +50,7 @@ }); if (response.status === 201) { - //console.log("cool"); + addNewExpense(response.data.expenseId, selectedExpense.id, parseInt(amount)); } else { console.error('Error:', response.status); } @@ -97,7 +90,11 @@ - +
+ + +
+ {/if} @@ -109,6 +106,32 @@ text-align: center; } + button { + background-image: linear-gradient(92.88deg, #455EB5 9.16%, #5643CC 43.89%, #673FD7 64.72%); + border-radius: 8px; + border-style: none; + box-sizing: border-box; + color: #FFFFFF; + cursor: pointer; + flex-shrink: 0; + font-family: "Inter UI", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; + font-size: 16px; + font-weight: 500; + height: 3rem; + padding: 0 1.6rem; + text-align: center; + text-shadow: rgba(0, 0, 0, 0.25) 0 3px 8px; + transition: all .5s; + user-select: none; + -webkit-user-select: none; + touch-action: manipulation; + } + + button:hover { + box-shadow: rgba(80, 63, 205, 0.5) 0 1px 30px; + transition-duration: .1s; + } + #optionField { display: flex; align-items: center; @@ -136,10 +159,28 @@ border-radius: 20px; padding: 20px; max-width: 400px; - margin: 0 auto; color: black; } + input[type=text] { + padding: 12px 20px; + margin: 8px 0; + display: inline-block; + border: 1px solid #ccc; + border-radius: 4px; + box-sizing: border-box; + } + + select { + padding: 12px 20px; + margin: 8px 0; + display: inline-block; + border: 1px solid #ccc; + border-radius: 4px; + box-sizing: border-box; + font-size: 16px; + } + h3 { font-size: 20px; margin-bottom: 20px; diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/infolists/Expenses.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/infolists/Expenses.svelte index de0ddc8..0e66fa7 100644 --- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/infolists/Expenses.svelte +++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/infolists/Expenses.svelte @@ -1,43 +1,65 @@
- +
@@ -226,9 +290,12 @@ {#if isCategoryDropdownExpanded}
+
getAll()} role="button" + tabindex="0" on:keydown={doNothing}>All
{#each $expenseTypes as expense (expense.id)} {#if expense.id !== undefined} -
filterByCategory(expense.name)} value={expense.id}>{expense.name}
+
filterByCategory(expense.name)} role="button" + tabindex="0" on:keydown={doNothing}>{expense.name}
{/if} {/each}
@@ -238,39 +305,109 @@
    {#each $expenseData.toReversed() as item (item.expenseId)} -
  • +
  • +
    {#if textToIcon[item.expenseCategory.name]} {@html textToIcon[item.expenseCategory.name]} {/if} - {item.incomeCategory ? `${item.incomeCategory.name}: ` : `${item.expenseCategory.name}: `} + {item.incomeCategory ? `${item.incomeCategory.name}: ` : `${item.expenseCategory.name}: `} {item.incomeCategory ? `+${item.amount}$` : `-${item.amount}$`} - {`${item.date}`} - - + {`${item.date}`} + clickItemHandler(item.expenseId)}> + clickDeleteHandler(item.expenseId)}> +
    + + {#if dropdownStates[item.expenseId]} + + {/if} + + {#if deleteDropdownStates[item.expenseId]} +
    + Confirm deletion? +
    + + +
    + + + +
    + {/if}
    • - {#if dropdownStates[item.expenseId]} -
    - - - -
    - - -
    - -
    - {/if} {/each}
diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/other/DashHeader.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/other/DashHeader.svelte index c19c7e9..d09453e 100644 --- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/other/DashHeader.svelte +++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/other/DashHeader.svelte @@ -30,8 +30,7 @@ import {globalStyles} from "../../../styles.js"; #dashboardTitleWrapper { display: flex; flex-direction: column; - margin:20px; - margin-bottom: 0px; + margin: 20px 20px 0; } #dashboardTitleWrapper h5 { diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/util/EditEntry.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/util/EditEntry.svelte new file mode 100644 index 0000000..8901e74 --- /dev/null +++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/util/EditEntry.svelte @@ -0,0 +1,114 @@ + + +
+ Edit Entry + + +
+ + +
+
+ + \ No newline at end of file diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/menu/SideMenu.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/menu/SideMenu.svelte index 8094d22..32ae702 100644 --- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/menu/SideMenu.svelte +++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/menu/SideMenu.svelte @@ -6,6 +6,7 @@ export let onTabClick; let username; + let isAdmin = true; onMount(async () => { const token = getCookie('access_token'); @@ -20,13 +21,15 @@ 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 doNothing() { + } +
@@ -37,33 +40,35 @@