Front upd

This commit is contained in:
2023-12-07 12:24:11 +02:00
parent 4a25e8fc66
commit 3c724a395b
11 changed files with 144 additions and 67 deletions

View File

@@ -2,7 +2,7 @@
"name": "expensetracker",
"version": "0.0.1",
"scripts": {
"dev": "vite dev",
"dev": "vite dev --host",
"build": "vite build",
"preview": "vite preview",
"lint": "prettier --plugin-search-dir . --check . && eslint .",

View File

@@ -0,0 +1,8 @@
<script>
import { onMount } from "svelte";
onMount(() => {
// Redirect to /auth/login
window.location.href = '/auth/login';
});
</script>

View File

@@ -22,7 +22,7 @@
event.preventDefault();
try {
const response = await axios.post('http://localhost:8081/api/v1/auth/authenticate', {
const response = await axios.post('http://trackio.online:8081/api/v1/auth/authenticate', {
email: username,
password: password,
});

View File

@@ -36,7 +36,7 @@
console.log(data)
const response = await axios.post('http://localhost:8081/api/v1/auth/register', data);
const response = await axios.post('http://trackio.online:8081/api/v1/auth/register', data);
const { access_token, refresh_token } = response.data;

View File

@@ -31,11 +31,13 @@
};
try {
var currentDate = new Date();
var currentMonth = currentDate.getMonth() + 1;
const [incomeResponse, expenseResponse, incomeTypesResponse, expenseTypesResponse] = await Promise.all([
axios.get('http://localhost:8081/incomes/personal-incomes?month=11', config),
axios.get('http://localhost:8081/expenses/personal-expenses?month=11', config),
axios.get('http://localhost:8081/incomes/categories', config),
axios.get('http://localhost:8081/expenses/categories', config)
axios.get('http://trackio.online:8081/incomes/personal-incomes?month=' + currentMonth , config),
axios.get('http://trackio.online:8081/expenses/personal-expenses?month=' + currentMonth, config),
axios.get('http://trackio.online:8081/incomes/categories', config),
axios.get('http://trackio.online:8081/expenses/categories', config)
]);
console.log("Data", incomeResponse.data);

View File

@@ -49,7 +49,7 @@
try {
const token = getCookie('access_token');
const response = await axios.post('http://localhost:8081/expenses', data, {
const response = await axios.post('http://trackio.online:8081/expenses', data, {
headers: {
'Authorization': `Bearer ${token}`,
'Content-Type': 'application/json',

View File

@@ -4,7 +4,9 @@
import Expenses from "../infolists/Expenses.svelte";
import {globalStyles} from "../../../styles.js";
import { slide } from 'svelte/transition'
import {expenseTypes} from "../../../stores.js";
import {expenseTypes, expenseData} from "../../../stores.js";
import axios from "axios";
import {getCookie} from "svelte-cookie";
let isDateDropdownExpanded = false
let isCategoryDropdownExpanded = false
@@ -17,6 +19,38 @@
isCategoryDropdownExpanded = !isCategoryDropdownExpanded;
}
async function getToday() {
var currentDate = new Date();
var currentDay = currentDate.toISOString().split('T')[0];
try {
const response = await axios.get('http://trackio.online:8081/expenses/personal-expenses?date=' + currentDay, {
headers: {
'Authorization': `Bearer ${getCookie('access_token')}`
}
});
expenseData.set(response.data);
} catch (error) {
console.error("Error fetching expenses:", error);
}
}
async function getLastYear() {
var currentDate = new Date();
var year = currentDate.getFullYear();
try {
const response = await axios.get('http://trackio.online:8081/expenses/personal-expenses?year=' + year, {
headers: {
'Authorization': `Bearer ${getCookie('access_token')}`
}
});
expenseData.set(response.data);
} catch (error) {
console.error("Error fetching expenses:", error);
}
}
</script>
<div id="main-data" style="background-color: {$globalStyles.dashColor}; color: {$globalStyles.color}">
@@ -27,12 +61,12 @@
<button id="button" on:click={clickHandlerDate}>Filter by Date:</button>
{#if isDateDropdownExpanded}
<div id="date-list" transition:slide>
<div on:click={() => console.log("Today")}>Today</div>
<div on:click={() => getToday()}>Today</div>
<div on:click={() => console.log("Yesterday")}>Yesterday</div>
<div on:click={() => console.log("Last week")}>Last week</div>
<div on:click={() => console.log("Last month")}>Last month</div>
<div on:click={() => console.log("Current quarter")}>Current quarter</div>
<div on:click={() => console.log("This year")}>This year</div>
<div on:click={() => getLastYear()}>This year</div>
</div>
{/if}
</div>
@@ -76,35 +110,49 @@
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 {
background-color: #fff000;
border-radius: 12px;
color: #000;
font-size: large;
background-color: #007BFF;
color: #fff;
border: none;
border-radius: 20px;
line-height: 40px;
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:hover {
background-color: #0056b3;
}
@@ -131,7 +179,8 @@
border-top-left-radius: 20px;
border-top-right-radius: 20px;
font-size: larger;
border: #8BD17C 2px solid;
margin-bottom: 5px;
/*border: #8BD17C 2px solid;*/
}
#data-menu {

View File

@@ -50,7 +50,7 @@
try {
const token = getCookie('access_token');
const response = await axios.post('http://localhost:8081/incomes', data, {
const response = await axios.post('http://trackio.online:8081/incomes', data, {
headers: {
'Authorization': `Bearer ${token}`,
'Content-Type': 'application/json',

View File

@@ -76,38 +76,51 @@
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 {
background-color: #fff000;
border-radius: 12px;
color: #000;
font-size: large;
background-color: #007BFF;
color: #fff;
border: none;
border-radius: 20px;
line-height: 40px;
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:hover {
background-color: #0056b3;
}
#button:disabled {
filter: saturate(0.2) opacity(0.5);
-webkit-filter: saturate(0.2) opacity(0.5);
cursor: not-allowed;
}
#date-list {
background-color: #8BD17C;
position:absolute;
@@ -131,7 +144,8 @@
border-top-left-radius: 20px;
border-top-right-radius: 20px;
font-size: larger;
border: #8BD17C 2px solid;
margin-bottom: 5px;
/*border: #8BD17C 2px solid;*/
}
#data-menu {

View File

@@ -17,7 +17,7 @@
};
try {
const response = await axios.get('http://localhost:8081/users/get-user-data', config);
const response = await axios.get('http://trackio.online:8081/users/get-user-data', config);
const data = response.data;
username = data.username;
console.log(username)
@@ -110,6 +110,7 @@
justify-content: center;
align-items: center;
border-radius: 20px;
cursor: pointer;
}
.sideMenuItem:hover {

View File

@@ -2,5 +2,8 @@ import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';
export default defineConfig({
plugins: [sveltekit()]
plugins: [sveltekit()],
server: {
port: 80,
}
});