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

Security branch #38

Merged
DmitriiKaban merged 6 commits from security_branch into master 2023-11-27 06:30:52 +00:00
Conversation 2 Commits 6 Files Changed 8 +839 -380
31 changed files with 839 additions and 380 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit fa99d42bee - Show all commits

30
src/main/java/com/faf223/expensetrackerfaf/controller/ExpenseController.java
View File

@@ -22,6 +22,7 @@ import org.springframework.security.access.prepost.PreAuthorize;
import org.springframework.security.core.Authentication; import org.springframework.security.core.Authentication;
import org.springframework.security.core.context.SecurityContextHolder; import org.springframework.security.core.context.SecurityContextHolder;
import org.springframework.security.core.userdetails.UserDetails; import org.springframework.security.core.userdetails.UserDetails;
import org.springframework.transaction.annotation.Transactional;
import org.springframework.validation.BindingResult; import org.springframework.validation.BindingResult;
import org.springframework.web.bind.annotation.*; import org.springframework.web.bind.annotation.*;
@@ -96,25 +97,36 @@ public class ExpenseController {
} }
@GetMapping("/personal-expenses") @GetMapping("/personal-expenses")
@Transactional(readOnly = true)
public ResponseEntity<List<ExpenseDTO>> getExpensesByUser(@RequestParam Optional<LocalDate> date, public ResponseEntity<List<ExpenseDTO>> getExpensesByUser(@RequestParam Optional<LocalDate> date,
@RequestParam Optional<Month> month) { @RequestParam Optional<Integer> month,
@RequestParam Optional<Integer> startYear,
@RequestParam Optional<Integer> endYear,
@RequestParam Optional<String> lastUnit) {
Authentication authentication = SecurityContextHolder.getContext().getAuthentication(); Authentication authentication = SecurityContextHolder.getContext().getAuthentication();
if (authentication != null && authentication.getPrincipal() instanceof UserDetails userDetails) { if (authentication != null && authentication.getPrincipal() instanceof UserDetails userDetails) {
String email = userDetails.getUsername(); String email = userDetails.getUsername();
List<ExpenseDTO> expenses; List<ExpenseDTO> expenses = Collections.emptyList();
expenses = date.map(localDate -> expenseService.getTransactionsByDate(localDate, email).stream().map(expenseMapper::toDto).toList()) if(date.isPresent())
.orElseGet(() -> month.map(value -> expenseService.getTransactionsByMonth(value, email).stream().map(expenseMapper::toDto).toList()) expenses = expenseService.getTransactionsByDate(date.get(), email).stream().map(expenseMapper::toDto).toList();
.orElseGet(() -> expenseService.getTransactionsByEmail(email).stream().map(expenseMapper::toDto).toList())); else if(month.isPresent())
expenses = expenseService.getTransactionsByMonth(Month.of(month.get()), email).stream().map(expenseMapper::toDto).toList();
else if(startYear.isPresent() && endYear.isPresent())
expenses = expenseService.getYearIntervalTransactions(email, startYear.get(), endYear.get()).stream().map(expenseMapper::toDto).toList();
else if(lastUnit.isPresent()) {
if(lastUnit.get().equalsIgnoreCase("week"))
expenses = expenseService.getLastWeekTransactions(email).stream().map(expenseMapper::toDto).toList();
else if(lastUnit.get().equalsIgnoreCase("month"))
expenses = expenseService.getLastMonthTransactions(email).stream().map(expenseMapper::toDto).toList();
if (!expenses.isEmpty()) {
return ResponseEntity.ok(expenses);
} else {
return ResponseEntity.ok(Collections.emptyList());
} }
return ResponseEntity.ok(expenses);
} }
throw new TransactionsNotFoundException("The expenses have not been found"); throw new TransactionsNotFoundException("The expenses have not been found");

32
src/main/java/com/faf223/expensetrackerfaf/controller/IncomeController.java
View File

@@ -22,6 +22,7 @@ import org.springframework.security.access.prepost.PreAuthorize;
import org.springframework.security.core.Authentication; import org.springframework.security.core.Authentication;
import org.springframework.security.core.context.SecurityContextHolder; import org.springframework.security.core.context.SecurityContextHolder;
import org.springframework.security.core.userdetails.UserDetails; import org.springframework.security.core.userdetails.UserDetails;
import org.springframework.transaction.annotation.Transactional;
import org.springframework.validation.BindingResult; import org.springframework.validation.BindingResult;
import org.springframework.web.bind.annotation.*; import org.springframework.web.bind.annotation.*;
@@ -96,25 +97,36 @@ public class IncomeController {
} }
@GetMapping("/personal-incomes") @GetMapping("/personal-incomes")
public ResponseEntity<List<IncomeDTO>> getExpensesByUser(@RequestParam Optional<LocalDate> date, @Transactional(readOnly = true)
@RequestParam Optional<Month> month) { public ResponseEntity<List<IncomeDTO>> getIncomesByUser(@RequestParam Optional<LocalDate> date,
@RequestParam Optional<Integer> month,
@RequestParam Optional<Integer> startYear,
@RequestParam Optional<Integer> endYear,
@RequestParam Optional<String> lastUnit) {
Authentication authentication = SecurityContextHolder.getContext().getAuthentication(); Authentication authentication = SecurityContextHolder.getContext().getAuthentication();
if (authentication != null && authentication.getPrincipal() instanceof UserDetails userDetails) { if (authentication != null && authentication.getPrincipal() instanceof UserDetails userDetails) {
String email = userDetails.getUsername(); String email = userDetails.getUsername();
List<IncomeDTO> incomes; List<IncomeDTO> incomes = Collections.emptyList();
incomes = date.map(localDate -> incomeService.getTransactionsByDate(localDate, email).stream().map(incomeMapper::toDto).toList()) if(date.isPresent())
.orElseGet(() -> month.map(value -> incomeService.getTransactionsByMonth(value, email).stream().map(incomeMapper::toDto).toList()) incomes = incomeService.getTransactionsByDate(date.get(), email).stream().map(incomeMapper::toDto).toList();
.orElseGet(() -> incomeService.getTransactionsByEmail(email).stream().map(incomeMapper::toDto).toList())); else if(month.isPresent())
incomes = incomeService.getTransactionsByMonth(Month.of(month.get()), email).stream().map(incomeMapper::toDto).toList();
else if(startYear.isPresent() && endYear.isPresent())
incomes = incomeService.getYearIntervalTransactions(email, startYear.get(), endYear.get()).stream().map(incomeMapper::toDto).toList();
else if(lastUnit.isPresent()) {
if(lastUnit.get().equalsIgnoreCase("week"))
incomes = incomeService.getLastWeekTransactions(email).stream().map(incomeMapper::toDto).toList();
else if(lastUnit.get().equalsIgnoreCase("month"))
incomes = incomeService.getLastMonthTransactions(email).stream().map(incomeMapper::toDto).toList();
if (!incomes.isEmpty()) {
return ResponseEntity.ok(incomes);
} else {
return ResponseEntity.ok(Collections.emptyList());
} }
return ResponseEntity.ok(incomes);
} }
throw new TransactionsNotFoundException("The expenses have not been found"); throw new TransactionsNotFoundException("The expenses have not been found");

13
src/main/java/com/faf223/expensetrackerfaf/repository/ExpenseRepository.java
View File

@@ -3,6 +3,7 @@ package com.faf223.expensetrackerfaf.repository;
import com.faf223.expensetrackerfaf.model.Expense; import com.faf223.expensetrackerfaf.model.Expense;
import com.faf223.expensetrackerfaf.model.User; import com.faf223.expensetrackerfaf.model.User;
import org.springframework.data.jpa.repository.JpaRepository; import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.data.jpa.repository.query.Procedure;
import org.springframework.stereotype.Repository; import org.springframework.stereotype.Repository;
import java.time.LocalDate; import java.time.LocalDate;
@@ -14,4 +15,16 @@ public interface ExpenseRepository extends JpaRepository<Expense, Long> {
List<Expense> findByDate(LocalDate date); List<Expense> findByDate(LocalDate date);
List<Expense> findByDateBetween(LocalDate start, LocalDate end); List<Expense> findByDateBetween(LocalDate start, LocalDate end);
@Procedure(procedureName = "get_expenses_by_month")
List<Expense> filterByMonth(int month);
@Procedure(procedureName = "get_last_week_expenses")
List<Expense> findLastWeek();
@Procedure(procedureName = "get_last_month_expenses")
List<Expense> findLastMonth();
@Procedure(procedureName = "get_expenses_by_year_interval")
List<Expense> filterByYearInterval(int start, int end);
} }

18
src/main/java/com/faf223/expensetrackerfaf/repository/IncomeRepository.java
View File

@@ -3,7 +3,9 @@ package com.faf223.expensetrackerfaf.repository;
import com.faf223.expensetrackerfaf.model.Income; import com.faf223.expensetrackerfaf.model.Income;
import com.faf223.expensetrackerfaf.model.User; import com.faf223.expensetrackerfaf.model.User;
import org.springframework.data.jpa.repository.JpaRepository; import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.data.jpa.repository.query.Procedure;
import org.springframework.stereotype.Repository; import org.springframework.stereotype.Repository;
import org.springframework.transaction.annotation.Transactional;
import java.time.LocalDate; import java.time.LocalDate;
import java.util.List; import java.util.List;
@@ -14,4 +16,20 @@ public interface IncomeRepository extends JpaRepository<Income, Long> {
List<Income> findByDate(LocalDate date); List<Income> findByDate(LocalDate date);
List<Income> findByDateBetween(LocalDate start, LocalDate end); List<Income> findByDateBetween(LocalDate start, LocalDate end);
@Transactional(readOnly = true)
@Procedure(procedureName = "get_incomes_by_month")
List<Income> filterByMonth(int month);
@Transactional(readOnly = true)
@Procedure(procedureName = "get_last_week_incomes")
List<Income> findLastWeek();
@Transactional(readOnly = true)
@Procedure(procedureName = "get_last_month_incomes")
List<Income> findLastMonth();
@Transactional(readOnly = true)
@Procedure(procedureName = "get_incomes_by_year_interval")
List<Income> filterByYearInterval(int start, int end);
} }

20
src/main/java/com/faf223/expensetrackerfaf/service/CredentialService.java Normal file
View File

@@ -0,0 +1,20 @@
package com.faf223.expensetrackerfaf.service;
import com.faf223.expensetrackerfaf.model.Credential;
import com.faf223.expensetrackerfaf.repository.CredentialRepository;
import lombok.RequiredArgsConstructor;
import org.springframework.stereotype.Service;
import java.util.Optional;
@Service
@RequiredArgsConstructor
public class CredentialService {
private final CredentialRepository credentialRepository;
public Optional<Credential> findByEmail(String email) {
return credentialRepository.findByEmail(email);
}
}

60
src/main/java/com/faf223/expensetrackerfaf/service/ExpenseService.java
View File

@@ -4,6 +4,7 @@ import com.faf223.expensetrackerfaf.model.*;
import com.faf223.expensetrackerfaf.repository.CredentialRepository; import com.faf223.expensetrackerfaf.repository.CredentialRepository;
import com.faf223.expensetrackerfaf.repository.ExpenseRepository; import com.faf223.expensetrackerfaf.repository.ExpenseRepository;
import com.faf223.expensetrackerfaf.repository.UserRepository; import com.faf223.expensetrackerfaf.repository.UserRepository;
import com.faf223.expensetrackerfaf.util.TransactionFilter;
import com.faf223.expensetrackerfaf.util.exceptions.UserNotAuthenticatedException; import com.faf223.expensetrackerfaf.util.exceptions.UserNotAuthenticatedException;
import com.faf223.expensetrackerfaf.util.exceptions.UserNotFoundException; import com.faf223.expensetrackerfaf.util.exceptions.UserNotFoundException;
import lombok.RequiredArgsConstructor; import lombok.RequiredArgsConstructor;
@@ -11,6 +12,7 @@ import org.springframework.security.core.Authentication;
import org.springframework.security.core.context.SecurityContextHolder; import org.springframework.security.core.context.SecurityContextHolder;
import org.springframework.security.core.userdetails.UserDetails; import org.springframework.security.core.userdetails.UserDetails;
import org.springframework.stereotype.Service; import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import java.time.LocalDate; import java.time.LocalDate;
import java.time.Month; import java.time.Month;
@@ -25,6 +27,7 @@ public class ExpenseService implements ITransactionService {
private final ExpenseRepository expenseRepository; private final ExpenseRepository expenseRepository;
private final CredentialRepository credentialRepository; private final CredentialRepository credentialRepository;
private final UserRepository userRepository; private final UserRepository userRepository;
private final TransactionFilter transactionFilter;
public void createOrUpdate(IMoneyTransaction expense) { public void createOrUpdate(IMoneyTransaction expense) {
expenseRepository.save((Expense) expense); expenseRepository.save((Expense) expense);
@@ -47,37 +50,47 @@ public class ExpenseService implements ITransactionService {
@Override @Override
public List<Expense> getTransactionsByDate(LocalDate date, String email) { public List<Expense> getTransactionsByDate(LocalDate date, String email) {
return getTransactionsByDate(date) return (List<Expense>) transactionFilter.filterByEmail(getTransactionsByDate(date), email);
.stream()
.filter(transaction -> {
Optional<Credential> credential = credentialRepository.findByEmail(email);
if(credential.isEmpty())
throw new UserNotFoundException("The user has not been found");
return credential.get().getUser().equals(transaction.getUser());
})
.toList();
} }
// TODO: store transaction month in a separate field in the DB and change this logic
@Override @Override
public List<Expense> getTransactionsByMonth(Month month) { public List<Expense> getTransactionsByMonth(Month month) {
LocalDate startOfMonth = LocalDate.of(LocalDate.now().getYear(), month, 1); return expenseRepository.filterByMonth(month.getValue());
LocalDate endOfMonth = startOfMonth.plusMonths(1).minusDays(1);
return expenseRepository.findByDateBetween(startOfMonth, endOfMonth);
} }
@Override @Override
public List<Expense> getTransactionsByMonth(Month month, String email) { public List<Expense> getTransactionsByMonth(Month month, String email) {
return getTransactionsByMonth(month) return (List<Expense>) transactionFilter.filterByEmail(getTransactionsByMonth(month), email);
.stream() }
.filter(transaction -> {
Optional<Credential> credential = credentialRepository.findByEmail(email); @Override
if(credential.isEmpty()) public List<Expense> getLastWeekTransactions() {
throw new UserNotFoundException("The user has not been found"); return expenseRepository.findLastWeek();
return credential.get().getUser().equals(transaction.getUser()); }
})
.toList(); @Override
public List<Expense> getLastWeekTransactions(String email) {
return (List<Expense>) transactionFilter.filterByEmail(getLastWeekTransactions(), email);
}
@Override
public List<Expense> getLastMonthTransactions() {
return expenseRepository.findLastMonth();
}
@Override
public List<Expense> getLastMonthTransactions(String email) {
return (List<Expense>) transactionFilter.filterByEmail(getLastMonthTransactions(), email);
}
@Override
public List<Expense> getYearIntervalTransactions(int start, int end) {
return expenseRepository.filterByYearInterval(start, end);
}
@Override
public List<Expense> getYearIntervalTransactions(String email, int start, int end) {
return (List<Expense>) transactionFilter.filterByEmail(getYearIntervalTransactions(start, end), email);
} }
public List<Expense> getTransactions() { public List<Expense> getTransactions() {
@@ -113,4 +126,5 @@ public class ExpenseService implements ITransactionService {
throw new UserNotAuthenticatedException("You are not authenticated"); throw new UserNotAuthenticatedException("You are not authenticated");
} }
} }

6
src/main/java/com/faf223/expensetrackerfaf/service/ITransactionService.java
View File

@@ -17,6 +17,12 @@ public interface ITransactionService {
List<? extends IMoneyTransaction> getTransactionsByDate(LocalDate date, String email); List<? extends IMoneyTransaction> getTransactionsByDate(LocalDate date, String email);
List<? extends IMoneyTransaction> getTransactionsByMonth(Month month); List<? extends IMoneyTransaction> getTransactionsByMonth(Month month);
List<? extends IMoneyTransaction> getTransactionsByMonth(Month month, String email); List<? extends IMoneyTransaction> getTransactionsByMonth(Month month, String email);
List<? extends IMoneyTransaction> getLastWeekTransactions();
List<? extends IMoneyTransaction> getLastWeekTransactions(String email);
List<? extends IMoneyTransaction> getLastMonthTransactions();
List<? extends IMoneyTransaction> getLastMonthTransactions(String email);
List<? extends IMoneyTransaction> getYearIntervalTransactions(int start, int end);
List<? extends IMoneyTransaction> getYearIntervalTransactions(String email, int start, int end);
IMoneyTransaction getTransactionById(long id); IMoneyTransaction getTransactionById(long id);
void deleteTransactionById(long it); void deleteTransactionById(long it);
boolean belongsToUser(IMoneyTransaction transaction); boolean belongsToUser(IMoneyTransaction transaction);

58
src/main/java/com/faf223/expensetrackerfaf/service/IncomeService.java
View File

@@ -7,6 +7,7 @@ import com.faf223.expensetrackerfaf.model.User;
import com.faf223.expensetrackerfaf.repository.CredentialRepository; import com.faf223.expensetrackerfaf.repository.CredentialRepository;
import com.faf223.expensetrackerfaf.repository.IncomeRepository; import com.faf223.expensetrackerfaf.repository.IncomeRepository;
import com.faf223.expensetrackerfaf.repository.UserRepository; import com.faf223.expensetrackerfaf.repository.UserRepository;
import com.faf223.expensetrackerfaf.util.TransactionFilter;
import com.faf223.expensetrackerfaf.util.exceptions.UserNotAuthenticatedException; import com.faf223.expensetrackerfaf.util.exceptions.UserNotAuthenticatedException;
import com.faf223.expensetrackerfaf.util.exceptions.UserNotFoundException; import com.faf223.expensetrackerfaf.util.exceptions.UserNotFoundException;
import lombok.RequiredArgsConstructor; import lombok.RequiredArgsConstructor;
@@ -28,6 +29,7 @@ public class IncomeService implements ITransactionService {
private final IncomeRepository incomeRepository; private final IncomeRepository incomeRepository;
private final CredentialRepository credentialRepository; private final CredentialRepository credentialRepository;
private final UserRepository userRepository; private final UserRepository userRepository;
private final TransactionFilter transactionFilter;
public void createOrUpdate(IMoneyTransaction income) { public void createOrUpdate(IMoneyTransaction income) {
incomeRepository.save((Income) income); incomeRepository.save((Income) income);
@@ -54,37 +56,47 @@ public class IncomeService implements ITransactionService {
@Override @Override
public List<Income> getTransactionsByDate(LocalDate date, String email) { public List<Income> getTransactionsByDate(LocalDate date, String email) {
return getTransactionsByDate(date) return (List<Income>) transactionFilter.filterByEmail(getTransactionsByDate(date), email);
.stream()
.filter(transaction -> {
Optional<Credential> credential = credentialRepository.findByEmail(email);
if(credential.isEmpty())
throw new UserNotFoundException("The user has not been found");
return credential.get().getUser().equals(transaction.getUser());
})
.toList();
} }
// TODO: store transaction month in a separate field in the DB and change this logic
@Override @Override
public List<Income> getTransactionsByMonth(Month month) { public List<Income> getTransactionsByMonth(Month month) {
LocalDate startOfMonth = LocalDate.of(LocalDate.now().getYear(), month, 1); return incomeRepository.filterByMonth(month.getValue());
LocalDate endOfMonth = startOfMonth.plusMonths(1).minusDays(1);
return incomeRepository.findByDateBetween(startOfMonth, endOfMonth);
} }
@Override @Override
public List<Income> getTransactionsByMonth(Month month, String email) { public List<Income> getTransactionsByMonth(Month month, String email) {
return getTransactionsByMonth(month) return (List<Income>) transactionFilter.filterByEmail(getTransactionsByMonth(month), email);
.stream() }
.filter(transaction -> {
Optional<Credential> credential = credentialRepository.findByEmail(email); @Override
if(credential.isEmpty()) public List<Income> getLastWeekTransactions() {
throw new UserNotFoundException("The user has not been found"); return incomeRepository.findLastWeek();
return credential.get().getUser().equals(transaction.getUser()); }
})
.toList(); @Override
public List<Income> getLastWeekTransactions(String email) {
return (List<Income>) transactionFilter.filterByEmail(getLastWeekTransactions(), email);
}
@Override
public List<Income> getLastMonthTransactions() {
return incomeRepository.findLastMonth();
}
@Override
public List<Income> getLastMonthTransactions(String email) {
return (List<Income>) transactionFilter.filterByEmail(getLastMonthTransactions(), email);
}
@Override
public List<Income> getYearIntervalTransactions(int start, int end) {
return incomeRepository.filterByYearInterval(start, end);
}
@Override
public List<Income> getYearIntervalTransactions(String email, int start, int end) {
return (List<Income>) transactionFilter.filterByEmail(getYearIntervalTransactions(start, end), email);
} }
public Income getTransactionById(long id) { public Income getTransactionById(long id) {

31
src/main/java/com/faf223/expensetrackerfaf/util/TransactionFilter.java Normal file
View File

@@ -0,0 +1,31 @@
package com.faf223.expensetrackerfaf.util;
import com.faf223.expensetrackerfaf.model.Credential;
import com.faf223.expensetrackerfaf.model.IMoneyTransaction;
import com.faf223.expensetrackerfaf.service.CredentialService;
import com.faf223.expensetrackerfaf.util.exceptions.UserNotFoundException;
import lombok.RequiredArgsConstructor;
import org.springframework.stereotype.Component;
import java.util.List;
import java.util.Optional;
@Component
@RequiredArgsConstructor
public class TransactionFilter {
private final CredentialService credentialService;
public List<? extends IMoneyTransaction> filterByEmail(List<? extends IMoneyTransaction> transactions, String email) {
return transactions
.stream()
.filter(transaction -> {
Optional<Credential> credential = credentialService.findByEmail(email);
if(credential.isEmpty())
throw new UserNotFoundException("The user has not been found");
return credential.get().getUser().equals(transaction.getUser());
})
.toList();
}
}

135
src/main/java/com/faf223/expensetrackerfaf/web/package-lock.json generated
View File

@@ -11,10 +11,9 @@
"@fortawesome/free-brands-svg-icons": "^6.4.2", "@fortawesome/free-brands-svg-icons": "^6.4.2",
"@fortawesome/free-solid-svg-icons": "^6.4.2", "@fortawesome/free-solid-svg-icons": "^6.4.2",
"axios": "^1.5.1", "axios": "^1.5.1",
"bootstrap": "^5.3.2",
"chart.js": "^4.4.0", "chart.js": "^4.4.0",
"email-validator": "^2.0.4", "email-validator": "^2.0.4",
"js-cookie": "^3.0.5",
"stores": "^1.0.0",
"svelte-cookie": "^1.0.1", "svelte-cookie": "^1.0.1",
"svelte-fa": "^3.0.4", "svelte-fa": "^3.0.4",
"svelte-simple-modal": "^1.6.1", "svelte-simple-modal": "^1.6.1",
@@ -579,9 +578,9 @@
"integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==" "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
}, },
"node_modules/@jridgewell/trace-mapping": { "node_modules/@jridgewell/trace-mapping": {
"version": "0.3.19", "version": "0.3.20",
"resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.19.tgz", "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.20.tgz",
"integrity": "sha512-kf37QtfW+Hwx/buWGMPcR60iF9ziHa6r/CZJIHbmcm4+0qrXiVdxegAH0F6yddEVQ7zdkjcGCgCzUu+BcbhQxw==", "integrity": "sha512-R8LcPeWZol2zR8mmH3JeKQ6QRCFb7XgUhV9ZlGhHLGyg4wpPiPZNQOOWhFZhxKw8u//yTbNGI42Bx/3paXEQ+Q==",
"dependencies": { "dependencies": {
"@jridgewell/resolve-uri": "^3.1.0", "@jridgewell/resolve-uri": "^3.1.0",
"@jridgewell/sourcemap-codec": "^1.4.14" "@jridgewell/sourcemap-codec": "^1.4.14"
@@ -639,6 +638,16 @@
"integrity": "sha512-C16M+IYz0rgRhWZdCmK+h58JMv8vijAA61gmz2rspCSwKwzBebpdcsiUmwrtJRdphuY30i6BSLEOP8ppbNLyLg==", "integrity": "sha512-C16M+IYz0rgRhWZdCmK+h58JMv8vijAA61gmz2rspCSwKwzBebpdcsiUmwrtJRdphuY30i6BSLEOP8ppbNLyLg==",
"dev": true "dev": true
}, },
"node_modules/@popperjs/core": {
"version": "2.11.8",
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
"integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
"peer": true,
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/popperjs"
}
},
"node_modules/@sveltejs/adapter-auto": { "node_modules/@sveltejs/adapter-auto": {
"version": "2.1.0", "version": "2.1.0",
"resolved": "https://registry.npmjs.org/@sveltejs/adapter-auto/-/adapter-auto-2.1.0.tgz", "resolved": "https://registry.npmjs.org/@sveltejs/adapter-auto/-/adapter-auto-2.1.0.tgz",
@@ -652,9 +661,9 @@
} }
}, },
"node_modules/@sveltejs/kit": { "node_modules/@sveltejs/kit": {
"version": "1.27.0", "version": "1.25.1",
"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.27.0.tgz", "resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.25.1.tgz",
"integrity": "sha512-a1wPIq2uO3RsTmV+KbA4venOgCJDbfHTXFe+g7eJR3N8l46DSuulUONJ1qnk2EnZWYC1Uj3Wbp3US0WFocIzXg==", "integrity": "sha512-pD8XsvNJNgTNkFngNlM60my/X8dXWPKVzN5RghEQr0NjGZmuCjy49AfFu2cGbZjNf5pBcqd2RCNMW912P5fkhA==",
"dev": true, "dev": true,
"hasInstallScript": true, "hasInstallScript": true,
"dependencies": { "dependencies": {
@@ -665,12 +674,12 @@
"esm-env": "^1.0.0", "esm-env": "^1.0.0",
"kleur": "^4.1.5", "kleur": "^4.1.5",
"magic-string": "^0.30.0", "magic-string": "^0.30.0",
"mrmime": "^1.0.1", "mime": "^3.0.0",
"sade": "^1.8.1", "sade": "^1.8.1",
"set-cookie-parser": "^2.6.0", "set-cookie-parser": "^2.6.0",
"sirv": "^2.0.2", "sirv": "^2.0.2",
"tiny-glob": "^0.2.9", "tiny-glob": "^0.2.9",
"undici": "~5.26.2" "undici": "~5.25.0"
}, },
"bin": { "bin": {
"svelte-kit": "svelte-kit.js" "svelte-kit": "svelte-kit.js"
@@ -729,9 +738,9 @@
"dev": true "dev": true
}, },
"node_modules/@types/estree": { "node_modules/@types/estree": {
"version": "1.0.2", "version": "1.0.5",
"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.2.tgz", "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
"integrity": "sha512-VeiPZ9MMwXjO32/Xu7+OwflfmeoRwkE/qzndw42gGtgJwZopBnzy2gD//NN1+go1mADzkDcqf/KnFRSjTJ8xJA==" "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw=="
}, },
"node_modules/acorn": { "node_modules/acorn": {
"version": "8.10.0", "version": "8.10.0",
@@ -836,6 +845,24 @@
"integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==", "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
"dev": true "dev": true
}, },
"node_modules/bootstrap": {
"version": "5.3.2",
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.2.tgz",
"integrity": "sha512-D32nmNWiQHo94BKHLmOrdjlL05q1c8oxbtBphQFb9Z5to6eGRDCm0QgeaZ4zFBHzfg2++rqa2JkqCcxDy0sH0g==",
"funding": [
{
"type": "github",
"url": "https://github.com/sponsors/twbs"
},
{
"type": "opencollective",
"url": "https://opencollective.com/bootstrap"
}
],
"peerDependencies": {
"@popperjs/core": "^2.11.8"
}
},
"node_modules/brace-expansion": { "node_modules/brace-expansion": {
"version": "1.1.11", "version": "1.1.11",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -976,11 +1003,6 @@
"node": ">=4" "node": ">=4"
} }
}, },
"node_modules/curry": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/curry/-/curry-1.2.0.tgz",
"integrity": "sha512-PAdmqPH2DUYTCc/aknv6RxRxmqdRHclvbz+wP8t1Xpg2Nu13qg+oLb6/5iFoDmf4dbmC9loYoy9PwwGbFt/AqA=="
},
"node_modules/debug": { "node_modules/debug": {
"version": "4.3.4", "version": "4.3.4",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -1491,11 +1513,6 @@
"integrity": "sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==", "integrity": "sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==",
"dev": true "dev": true
}, },
"node_modules/graceful-fs-stream": {
"version": "0.0.1",
"resolved": "https://registry.npmjs.org/graceful-fs-stream/-/graceful-fs-stream-0.0.1.tgz",
"integrity": "sha512-yZ9Lx4O/LbIQ0prZNtXOt97h8ICA2fwPcmSkrjZcOnXKrMzR8ao+kE78N76su0ffaawHLHyFYt75AkgHdVb41Q=="
},
"node_modules/graphemer": { "node_modules/graphemer": {
"version": "1.4.0", "version": "1.4.0",
"resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz", "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
@@ -1615,14 +1632,6 @@
"integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==", "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
"dev": true "dev": true
}, },
"node_modules/js-cookie": {
"version": "3.0.5",
"resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz",
"integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==",
"engines": {
"node": ">=14"
}
},
"node_modules/js-yaml": { "node_modules/js-yaml": {
"version": "4.1.0", "version": "4.1.0",
"resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz", "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
@@ -1753,6 +1762,18 @@
"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz", "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
"integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==" "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA=="
}, },
"node_modules/mime": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/mime/-/mime-3.0.0.tgz",
"integrity": "sha512-jSCU7/VB1loIWBZe14aEYHU/+1UMEHoaO7qxCOVJOw9GgH72VAWppxNcjU+x9a2k3GSIBXNKxXQFqRvvZ7vr3A==",
"dev": true,
"bin": {
"mime": "cli.js"
},
"engines": {
"node": ">=10.0.0"
}
},
"node_modules/mime-db": { "node_modules/mime-db": {
"version": "1.52.0", "version": "1.52.0",
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz", "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
@@ -1784,25 +1805,6 @@
"node": "*" "node": "*"
} }
}, },
"node_modules/minimist": {
"version": "1.2.8",
"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
"integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
"funding": {
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/mkdirp": {
"version": "0.5.6",
"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
"integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
"dependencies": {
"minimist": "^1.2.6"
},
"bin": {
"mkdirp": "bin/cmd.js"
}
},
"node_modules/mri": { "node_modules/mri": {
"version": "1.2.0", "version": "1.2.0",
"resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz", "resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",
@@ -1851,14 +1853,6 @@
"integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==", "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
"dev": true "dev": true
}, },
"node_modules/on-headers": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/on-headers/-/on-headers-1.0.2.tgz",
"integrity": "sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA==",
"engines": {
"node": ">= 0.8"
}
},
"node_modules/once": { "node_modules/once": {
"version": "1.4.0", "version": "1.4.0",
"resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
@@ -2307,17 +2301,6 @@
"node": ">=0.10.0" "node": ">=0.10.0"
} }
}, },
"node_modules/stores": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/stores/-/stores-1.0.0.tgz",
"integrity": "sha512-aOWM422mpxSj37uo9R1aVKDF2sDRCzjdbn6CYT/H9BECxuuliALmAZcmRVI9/Wq6Pu/HKDY1xZ+ssSuvY6fLlA==",
"dependencies": {
"curry": "~1.2.0",
"graceful-fs-stream": "0.0.1",
"mkdirp": "^0.5.1",
"on-headers": "^1.0.1"
}
},
"node_modules/strip-ansi": { "node_modules/strip-ansi": {
"version": "6.0.1", "version": "6.0.1",
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
@@ -2355,9 +2338,9 @@
} }
}, },
"node_modules/svelte": { "node_modules/svelte": {
"version": "4.2.1", "version": "4.2.5",
"resolved": "https://registry.npmjs.org/svelte/-/svelte-4.2.1.tgz", "resolved": "https://registry.npmjs.org/svelte/-/svelte-4.2.5.tgz",
"integrity": "sha512-LpLqY2Jr7cRxkrTc796/AaaoMLF/1ax7cto8Ot76wrvKQhrPmZ0JgajiWPmg9mTSDqO16SSLiD17r9MsvAPTmw==", "integrity": "sha512-P9YPKsGkNdw4OJbtpd1uzimQHPj7Ai2sPcOHmmD6VgkFhFDmcYevQi7vE4cQ1g8/Vs64aL2TwMoCNFAzv7TPaQ==",
"dependencies": { "dependencies": {
"@ampproject/remapping": "^2.2.1", "@ampproject/remapping": "^2.2.1",
"@jridgewell/sourcemap-codec": "^1.4.15", "@jridgewell/sourcemap-codec": "^1.4.15",
@@ -2370,7 +2353,7 @@
"estree-walker": "^3.0.3", "estree-walker": "^3.0.3",
"is-reference": "^3.0.1", "is-reference": "^3.0.1",
"locate-character": "^3.0.0", "locate-character": "^3.0.0",
"magic-string": "^0.30.0", "magic-string": "^0.30.4",
"periscopic": "^3.1.0" "periscopic": "^3.1.0"
}, },
"engines": { "engines": {
@@ -2495,9 +2478,9 @@
} }
}, },
"node_modules/undici": { "node_modules/undici": {
"version": "5.26.5", "version": "5.25.4",
"resolved": "https://registry.npmjs.org/undici/-/undici-5.26.5.tgz", "resolved": "https://registry.npmjs.org/undici/-/undici-5.25.4.tgz",
"integrity": "sha512-cSb4bPFd5qgR7qr2jYAi0hlX9n5YKK2ONKkLFkxl+v/9BvC0sOpZjBHDBSXc5lWAf5ty9oZdRXytBIHzgUcerw==", "integrity": "sha512-450yJxT29qKMf3aoudzFpIciqpx6Pji3hEWaXqXmanbXF58LTAGCKxcJjxMXWu3iG+Mudgo3ZUfDB6YDFd/dAw==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"@fastify/busboy": "^2.0.0" "@fastify/busboy": "^2.0.0"

3
src/main/java/com/faf223/expensetrackerfaf/web/package.json
View File

@@ -26,10 +26,9 @@
"@fortawesome/free-brands-svg-icons": "^6.4.2", "@fortawesome/free-brands-svg-icons": "^6.4.2",
"@fortawesome/free-solid-svg-icons": "^6.4.2", "@fortawesome/free-solid-svg-icons": "^6.4.2",
"axios": "^1.5.1", "axios": "^1.5.1",
"bootstrap": "^5.3.2",
"chart.js": "^4.4.0", "chart.js": "^4.4.0",
"email-validator": "^2.0.4", "email-validator": "^2.0.4",
"js-cookie": "^3.0.5",
"stores": "^1.0.0",
"svelte-cookie": "^1.0.1", "svelte-cookie": "^1.0.1",
"svelte-fa": "^3.0.4", "svelte-fa": "^3.0.4",
"svelte-simple-modal": "^1.6.1", "svelte-simple-modal": "^1.6.1",

8
src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/+page.svelte
View File

@@ -1,8 +1,8 @@
<script> <script>
import Dashboard from './board/Dashboard.svelte'; import Dashboard from './board/Dashboard.svelte';
import SideMenu from './menu/SideMenu.svelte'; import SideMenu from './menu/SideMenu.svelte';
import {selectedTab} from "./stores.js"; import {selectedTab} from "./stores.js";
import {globalStyles} from "./styles.js";
function handleTabClick(tab) { function handleTabClick(tab) {
selectedTab.set(tab); selectedTab.set(tab);
@@ -10,19 +10,19 @@
</script> </script>
<div id="wrapper"> <div id="wrapper" style="background-color: {$globalStyles.mainColor}">
<SideMenu onTabClick={handleTabClick} /> <SideMenu onTabClick={handleTabClick} />
<Dashboard {selectedTab} /> <Dashboard />
</div> </div>
<style> <style>
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400'); @import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400');
#wrapper { #wrapper {
background-color: rgb(23,34,51);
display: flex; display: flex;
align-items: stretch; align-items: stretch;
min-height: 100vh; min-height: 100vh;
max-height: 100%; max-height: 100%;
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
} }
</style> </style>

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

@@ -3,7 +3,16 @@
import { onMount } from "svelte"; import { onMount } from "svelte";
import ExpenseDashboard from "./ExpenseDashboard.svelte"; import ExpenseDashboard from "./ExpenseDashboard.svelte";
import IncomeDashboard from "./IncomeDashboard.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 } from "../stores.js";
import {globalStyles} from "../styles.js";
let componentStyles;
$: {
console.log("got here")
componentStyles = $globalStyles;
}
import axios from "axios"; import axios from "axios";
@@ -39,27 +48,28 @@
}); });
</script> </script>
<div id="dashboard"> <div id="dashboard" style="background-color: {componentStyles.dashColor}; color: {componentStyles.color}">
<div id="dashboard">
{#if $selectedTab === 'expenses'} {#if $selectedTab === 'expenses'}
<ExpenseDashboard {expenseData} {expenseTypes} /> <ExpenseDashboard />
{:else if $selectedTab === 'incomes'} {:else if $selectedTab === 'incomes'}
<IncomeDashboard {incomeData} {incomeTypes} /> <IncomeDashboard />
{:else if $selectedTab === 'settings'}
<Settings />
{/if} {/if}
</div>
</div> </div>
<style> <style>
#dashboard { #dashboard {
font-family: 'Source Sans Pro', sans-serif; font-family: 'Source Sans Pro', sans-serif;
background-color: rgb(245,242,243);
border-radius: 20px; border-radius: 20px;
margin: 20px; margin: 20px;
padding: 20px 20px 0;
min-width: 100px; min-width: 100px;
display: flex; display: flex;
flex:1 1 auto; flex: 1 1 auto;
flex-direction: column; flex-direction: column;
align-items: stretch; align-items: stretch;
justify-content: stretch; justify-content: stretch;
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
} }
</style> </style>

2
src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/ExpenseDashboard.svelte
View File

@@ -6,4 +6,4 @@
<DashHeader /> <DashHeader />
<QuickInfobar /> <QuickInfobar />
<DataMenu /> <DataMenu />

59
src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/Settings.svelte Normal file
View File

@@ -0,0 +1,59 @@
<script>
import {globalStyles} from "../styles.js";
import {themeDark} from "../styles.js";
import {themeDefault} from "../styles.js";
function theme_dark() {
$globalStyles = themeDark;
}
function theme_default() {
$globalStyles = themeDefault;
}
</script>
<div>
<h1>Settings</h1>
<button class="button-32" on:click={() => theme_default()}>Select</button>
<button class="button-32" on:click={() => theme_dark()}>Select</button>
<button class="button-32" on:click={() => theme_dark()}>Select</button>
<button class="button-32" on:click={() => theme_dark()}>Select</button>
<button class="button-32" on:click={() => theme_dark()}>Select</button>
</div>
<style>
.button-32 {
background-color: #fff000;
border-radius: 12px;
color: #000;
cursor: pointer;
font-weight: bold;
padding: 10px 15px;
text-align: center;
transition: 200ms;
width: 100px;
box-sizing: border-box;
border: 0;
font-size: 16px;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
}
.button-32:not(:disabled):hover,
.button-32: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-32:disabled {
filter: saturate(0.2) opacity(0.5);
-webkit-filter: saturate(0.2) opacity(0.5);
cursor: not-allowed;
}
</style>

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

@@ -2,6 +2,7 @@
import Chart from 'chart.js/auto'; import Chart from 'chart.js/auto';
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import { expenseData } from "../../../stores.js"; import { expenseData } from "../../../stores.js";
import {globalStyles} from "../../../styles.js";
let ctx; let ctx;
let chartCanvas; let chartCanvas;
@@ -73,7 +74,7 @@
}); });
</script> </script>
<div id="chart"> <div id="chart" style="background-color: {$globalStyles.mainColor}">
<canvas bind:this={chartCanvas}></canvas> <canvas bind:this={chartCanvas}></canvas>
</div> </div>
@@ -82,9 +83,10 @@
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); 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); transition: all 0.3s cubic-bezier(.25,.8,.25,1);
flex: 1; flex: 1;
border-radius: 10px; border-radius: 0 0 10px 10px;
margin: 10px; margin: 0 0 10px 10px;
background-color: #d3d3d3; min-width: 0;
min-height:0;
} }
#chart:hover { #chart:hover {

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

@@ -2,6 +2,7 @@
import Chart from 'chart.js/auto'; import Chart from 'chart.js/auto';
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import { incomeData, expenseData } from "../../../stores.js"; import { incomeData, expenseData } from "../../../stores.js";
import {globalStyles} from "../../../styles.js";
let ctx; let ctx;
let chartCanvas; let chartCanvas;
@@ -15,34 +16,36 @@
const chartLabels = ['Incomes', 'Expenses']; const chartLabels = ['Incomes', 'Expenses'];
const chartValues = [totalIncomes, totalExpenses]; const chartValues = [totalIncomes, totalExpenses];
ctx = chartCanvas.getContext('2d'); if (chartCanvas.getContext('2d') !== undefined) {
if (!chart) { ctx = chartCanvas.getContext('2d');
chart = new Chart(ctx, { if (!chart) {
type: 'pie', chart = new Chart(ctx, {
data: { type: 'pie',
labels: chartLabels, data: {
datasets: [{ labels: chartLabels,
data: chartValues, datasets: [{
backgroundColor: [ data: chartValues,
'rgb(243, 188, 0)', backgroundColor: [
'rgb(0, 117, 164)' 'rgb(243, 188, 0)',
], 'rgb(0, 117, 164)'
}] ],
}, }]
options: { },
responsive: true, options: {
maintainAspectRatio: false responsive: true,
} maintainAspectRatio: false
}); }
} else { });
const totalIncomesUpd = $incomeData.reduce((total, item) => total + parseInt(item.amount), 0); } else {
const totalExpensesUpd = $expenseData.reduce((total, item) => total + parseInt(item.amount), 0); 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 chartLabels = ['Incomes', 'Expenses'];
const chartValues = [totalIncomesUpd, totalExpensesUpd]; const chartValues = [totalIncomesUpd, totalExpensesUpd];
chart.data.labels = chartLabels; chart.data.labels = chartLabels;
chart.data.datasets[0].data = chartValues; chart.data.datasets[0].data = chartValues;
chart.update(); chart.update();
}
} }
} catch (error) { } catch (error) {
console.error('Error:', error); console.error('Error:', error);
@@ -60,7 +63,7 @@
}); });
</script> </script>
<div id="chart"> <div id="chart" style="background-color: {$globalStyles.mainColor}">
<canvas bind:this={chartCanvas}></canvas> <canvas bind:this={chartCanvas}></canvas>
</div> </div>
@@ -69,9 +72,10 @@
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); 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); transition: all 0.3s cubic-bezier(.25,.8,.25,1);
flex: 1; flex: 1;
border-radius: 10px; border-radius: 0 0 10px 10px;
margin: 10px; margin: 0 0 10px 10px;
background-color: #d3d3d3; min-width: 0;
min-height:0;
} }
#chart:hover { #chart:hover {

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

@@ -1,9 +1,10 @@
<script> <script>
import Modal from '../modals/Modal.svelte'; import Modal from './Modal.svelte';
import { writable } from 'svelte/store'; import { writable } from 'svelte/store';
import axios from 'axios'; import axios from 'axios';
import { getCookie } from "svelte-cookie"; import { getCookie } from "svelte-cookie";
import {expenseTypes, expenseData} from "../../../../stores.js"; import {expenseTypes, expenseData} from "../../../stores.js";
let showModal; let showModal;
let amount = ''; let amount = '';
@@ -40,10 +41,10 @@
const selectedExpense = $expenseTypes.find(expense => expense.id === $selectedExpenseId); const selectedExpense = $expenseTypes.find(expense => expense.id === $selectedExpenseId);
const data = { const data = {
expenseCategory: selectedExpense.id, expenseCategory: selectedExpense.id,
amount: amount, amount: parseInt(amount),
}; };
addNewExpense(selectedExpense.id, amount); addNewExpense(selectedExpense.id, parseInt(amount));
try { try {
const token = getCookie('access_token'); const token = getCookie('access_token');
@@ -100,7 +101,7 @@
<style> <style>
#exp { #exp {
padding: 20px; padding: 10px 20px;
text-align: center; text-align: center;
} }

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

@@ -1,27 +1,15 @@
<script> <script>
import { onMount, afterUpdate } from 'svelte'; import ContentExpense from "./ContentExpense.svelte";
import ContentExpense from "./contents/ContentExpense.svelte"; import { expenseData } from "../../../stores.js";
import {expenseData} from "../../../stores.js"; import { globalStyles } from "../../../styles.js";
let parentHeight;
let listParentHeight;
async function updateInfo() {
parentHeight = document.querySelector('#expenseInfo').offsetHeight;
listParentHeight = document.querySelector('#expenseList').offsetHeight;
}
onMount(updateInfo);
afterUpdate(updateInfo);
</script> </script>
<div id="expenseInfo" style="max-height: {parentHeight}px;"> <div id="expenseInfo" style="background-color: {$globalStyles.mainColor}">
<ContentExpense /> <ContentExpense />
<div id="listContainer" style="color: {$globalStyles.color}">
<div id="expenseList" style="max-height: {listParentHeight}px;">
<ul> <ul>
{#each $expenseData as item} {#each $expenseData as item}
<li> <li style="color: {$globalStyles.color}">
{item.incomeCategory ? `${item.incomeCategory.name}: ` : `${item.expenseCategory.name}: `} {item.incomeCategory ? `${item.incomeCategory.name}: ` : `${item.expenseCategory.name}: `}
{item.incomeCategory ? `+${item.amount}$` : `-${item.amount}$`} {item.incomeCategory ? `+${item.amount}$` : `-${item.amount}$`}
{`${item.date}`} {`${item.date}`}
@@ -31,47 +19,58 @@
</div> </div>
</div> </div>
<style> <style>
#expenseInfo { #expenseInfo {
min-width: 300px;
min-height: 0;
background-color: #212942;
color: white;
border-radius: 0 0 10px 10px;
margin: 0 0 10px 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-width: 300px; box-sizing: border-box;
background-color: #212942;
color:white;
border-radius: 10px;
margin: 10px;
} }
#expenseList { #listContainer {
scrollbar-width: none; flex: 1 1 auto;
flex: 1;
border-radius: 10px;
margin: 10px;
overflow-y: auto; overflow-y: auto;
max-height: 100%; min-height: 0;
padding: 0 10px 10px;
margin: 0 0 10px;
box-sizing: border-box;
border-radius: 0 0 10px 10px;
} }
#expenseList::-webkit-scrollbar { #listContainer::-webkit-scrollbar {
display: none; width: 0;
} }
ul { #listContainer::-webkit-scrollbar-thumb {
background-color: transparent;
}
#listContainer::-webkit-scrollbar-track {
background-color: transparent;
}
#listContainer ul {
list-style: none; list-style: none;
padding: 0; padding: 0;
color:black; border-radius: 0 0 10px 10px;
} }
li { #listContainer li {
margin-bottom: 20px; margin-bottom: 20px;
background-color: #f2f2f2; background-color: #f2f2f2;
padding: 10px; padding: 10px;
border-radius: 5px; border-radius: 5px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); 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); transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
} }
li:hover { #listContainer li: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>

0
src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/infolists/modals/Modal.svelte → src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/infolists/Modal.svelte
View File

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

@@ -2,55 +2,163 @@
import Graph2 from '../graphs/Graph2.svelte'; import Graph2 from '../graphs/Graph2.svelte';
import Graph3 from '../graphs/Graph3.svelte'; import Graph3 from '../graphs/Graph3.svelte';
import Expenses from "../infolists/Expenses.svelte"; import Expenses from "../infolists/Expenses.svelte";
import {globalStyles} from "../../../styles.js";
import { slide } from 'svelte/transition'
import {expenseTypes} from "../../../stores.js";
let isDateDropdownExpanded = false
let isCategoryDropdownExpanded = false
function clickHandlerDate() {
isDateDropdownExpanded = !isDateDropdownExpanded
}
function clickHandlerCategory() {
isCategoryDropdownExpanded = !isCategoryDropdownExpanded;
}
</script> </script>
<div id="dataMenu"> <div id="main-data" style="background-color: {$globalStyles.dashColor}; color: {$globalStyles.color}">
<div id="twoVertical"> <div id="data-header" style="background-color:{$globalStyles.mainColor}; color: {$globalStyles.altColor}">
<span style="color: {$globalStyles.altColor}">Revenue Analysis</span>
<div id="dropdown-date">
<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={() => 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>
{/if}
</div>
<div id="dropdown-category">
<button id="button" on:click={clickHandlerCategory}>Filter by Category:</button>
{#if isCategoryDropdownExpanded}
<div id="category-list" transition:slide>
{#each $expenseTypes as expense (expense.id)}
{#if expense.id !== undefined}
<option value={expense.id}>{expense.name}</option>
{/if}
{/each}
</div>
{/if}
</div>
</div>
<div id="data-menu">
<div id="first-graph">
<Graph2 /> <Graph2 />
</div> </div>
<div id="oneVertical"> <div id="second-graph">
<Graph3 /> <Graph3 />
</div>
<Expenses />
</div> </div>
<div id="dataPanel">
<Expenses />
</div>
</div> </div>
<style> <style>
#dataMenu { #main-data {
border-bottom-left-radius: 20px; border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px; border-bottom-right-radius: 20px;
background-color: rgb(245,242,243); padding:0;
display:flex; display: flex;
padding:10px; min-height: 0;
flex-direction: row-reverse; height: 0;
flex-direction: column;
justify-content: stretch; justify-content: stretch;
align-items: stretch; align-items: stretch;
flex-grow: 1; 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;
} }
#twoVertical { #date-list {
display: flex; background-color: #8BD17C;
flex-direction: column; position:absolute;
align-self: stretch; z-index:1;
flex-grow: 1;
min-width: 0;
min-height:0;
} }
#oneVertical { #category-list {
display: flex; background-color: #8BD17C;
flex-direction: column; position:absolute;
align-self: stretch; z-index:1;
flex-grow: 1;
min-width: 0;
min-height:0;
} }
#dataPanel { #data-header {
background-color: black;
min-height: 50px;
padding-left: 30px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center;
justify-content: space-around;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
font-size: larger;
border: #8BD17C 2px solid;
}
#data-menu {
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
display:flex;
/*padding:10px;*/
flex-direction: row-reverse;
justify-content: space-between;
align-items: stretch;
flex: 1;
height: 0;
min-height: 0;
}
#first-graph {
display: flex;
flex-direction: column;
align-self: stretch;
flex-grow: 1;
min-width: 0;
min-height:0;
}
#second-graph {
display: flex;
flex-direction: column;
align-self: stretch; align-self: stretch;
flex-grow: 1; flex-grow: 1;
min-width: 0; min-width: 0;

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

@@ -1,6 +1,7 @@
<script> <script>
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import { incomeData, expenseData } from "../../../stores.js"; import { incomeData, expenseData } from "../../../stores.js";
import {globalStyles} from "../../../styles.js";
let infobar1, infobar2, infobar3, infobar4; let infobar1, infobar2, infobar3, infobar4;
let totalExpenses = 0; let totalExpenses = 0;
@@ -38,10 +39,10 @@
</script> </script>
<div id="quickInfobar"> <div id="quickInfobar">
<div class="infobarElement" bind:this={infobar1}></div> <div class="infobarElement" bind:this={infobar1} style="background-color: {$globalStyles.mainColor}"></div>
<div class="infobarElement" bind:this={infobar2}></div> <div class="infobarElement" bind:this={infobar2} style="background-color: {$globalStyles.mainColor}"></div>
<div class="infobarElement" bind:this={infobar3}></div> <div class="infobarElement" bind:this={infobar3} style="background-color: {$globalStyles.mainColor}"></div>
<div class="infobarElement" bind:this={infobar4}></div> <div class="infobarElement" bind:this={infobar4} style="background-color: {$globalStyles.mainColor}"></div>
</div> </div>
<style> <style>

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

@@ -2,6 +2,14 @@
import Chart from 'chart.js/auto'; import Chart from 'chart.js/auto';
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import { incomeData } from "../../../stores.js"; import { incomeData } from "../../../stores.js";
import {globalStyles} from "../../../styles.js";
let componentStyles;
$: {
console.log("got here")
componentStyles = $globalStyles;
}
let ctx; let ctx;
let chartCanvas; let chartCanvas;
@@ -76,7 +84,7 @@
}); });
</script> </script>
<div id="chart"> <div id="chart" style="background-color: {componentStyles.mainColor}">
<canvas bind:this={chartCanvas}></canvas> <canvas bind:this={chartCanvas}></canvas>
</div> </div>
@@ -85,9 +93,10 @@
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); 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); transition: all 0.3s cubic-bezier(.25,.8,.25,1);
flex: 1; flex: 1;
border-radius: 10px; border-radius: 0 0 10px 10px;
margin: 10px; margin: 0 0 10px 10px;
background-color: #d3d3d3; min-width: 0;
min-height:0;
} }
#chart:hover { #chart:hover {

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

@@ -2,6 +2,14 @@
import Chart from 'chart.js/auto'; import Chart from 'chart.js/auto';
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import { incomeData, expenseData } from "../../../stores.js"; import { incomeData, expenseData } from "../../../stores.js";
import {globalStyles} from "../../../styles.js";
let componentStyles;
$: {
console.log("got here")
componentStyles = $globalStyles;
}
let ctx; let ctx;
let chartCanvas; let chartCanvas;
@@ -15,34 +23,36 @@
const chartLabels = ['Incomes', 'Expenses']; const chartLabels = ['Incomes', 'Expenses'];
const chartValues = [totalIncomes, totalExpenses]; const chartValues = [totalIncomes, totalExpenses];
ctx = chartCanvas.getContext('2d'); if (chartCanvas.getContext('2d') !== undefined) {
if (!chart) { ctx = chartCanvas.getContext('2d');
chart = new Chart(ctx, { if (!chart) {
type: 'pie', chart = new Chart(ctx, {
data: { type: 'pie',
labels: chartLabels, data: {
datasets: [{ labels: chartLabels,
data: chartValues, datasets: [{
backgroundColor: [ data: chartValues,
'rgb(243, 188, 0)', backgroundColor: [
'rgb(0, 117, 164)' 'rgb(243, 188, 0)',
], 'rgb(0, 117, 164)'
}] ],
}, }]
options: { },
responsive: true, options: {
maintainAspectRatio: false responsive: true,
} maintainAspectRatio: false
}); }
} else { });
const totalIncomesUpd = $incomeData.reduce((total, item) => total + parseInt(item.amount), 0); } else {
const totalExpensesUpd = $expenseData.reduce((total, item) => total + parseInt(item.amount), 0); 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 chartLabels = ['Incomes', 'Expenses'];
const chartValues = [totalIncomesUpd, totalExpensesUpd]; const chartValues = [totalIncomesUpd, totalExpensesUpd];
chart.data.labels = chartLabels; chart.data.labels = chartLabels;
chart.data.datasets[0].data = chartValues; chart.data.datasets[0].data = chartValues;
chart.update(); chart.update();
}
} }
} catch (error) { } catch (error) {
console.error('Error:', error); console.error('Error:', error);
@@ -60,7 +70,7 @@
}); });
</script> </script>
<div id="chart"> <div id="chart" style="background-color: {componentStyles.mainColor}">
<canvas bind:this={chartCanvas}></canvas> <canvas bind:this={chartCanvas}></canvas>
</div> </div>
@@ -69,9 +79,10 @@
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); 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); transition: all 0.3s cubic-bezier(.25,.8,.25,1);
flex: 1; flex: 1;
border-radius: 10px; border-radius: 0 0 10px 10px;
margin: 10px; margin: 0 0 10px 10px;
background-color: #d3d3d3; min-width: 0;
min-height:0;
} }
#chart:hover { #chart:hover {

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

@@ -1,9 +1,9 @@
<script> <script>
import Modal from '../modals/Modal.svelte'; import Modal from './Modal.svelte';
import { writable } from 'svelte/store'; import { writable } from 'svelte/store';
import axios from 'axios'; import axios from 'axios';
import { getCookie } from "svelte-cookie"; import { getCookie } from "svelte-cookie";
import {incomeData, incomeTypes} from "../../../../stores.js"; import {incomeData, incomeTypes} from "../../../stores.js";
let showModal; let showModal;
let amount = ''; let amount = '';
@@ -27,7 +27,7 @@
}, },
incomeCategory: incomeCategory, incomeCategory: incomeCategory,
date: today, date: today,
amount: amount amount: parseInt(amount)
}; };
newData = $incomeData; newData = $incomeData;
@@ -45,7 +45,7 @@
amount: parseInt(amount), amount: parseInt(amount),
}; };
addNewIncome(selectedIncome.id, amount); addNewIncome(selectedIncome.id, parseInt(amount));
try { try {
const token = getCookie('access_token'); const token = getCookie('access_token');
@@ -102,7 +102,7 @@
<style> <style>
#inc { #inc {
padding: 20px; padding: 10px 20px;
text-align: center; text-align: center;
} }

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

@@ -1,28 +1,16 @@
<script> <script>
import { onMount, afterUpdate } from 'svelte'; import ContentIncome from "./ContentIncome.svelte";
import { incomeData } from "../../../stores.js"; import { incomeData } from "../../../stores.js";
import ContentIncome from "./contents/ContentIncome.svelte"; import { globalStyles } from "../../../styles.js";
let parentHeight;
let listParentHeight;
async function updateInfo() {
parentHeight = document.querySelector('#expenseInfo').offsetHeight;
listParentHeight = document.querySelector('#expenseList').offsetHeight;
}
onMount(updateInfo);
afterUpdate(updateInfo);
</script> </script>
<div id="incomeInfo" style="max-height: {parentHeight}px;"> <div id="incomeInfo" style="background-color: {$globalStyles.mainColor}">
<ContentIncome /> <ContentIncome />
<div id="listContainer" style="color: {$globalStyles.color}">
<div id="incomeList" style="max-height: {listParentHeight}px;">
<ul> <ul>
{#each $incomeData as item} {#each $incomeData as item}
<li> <li>
{item.incomeCategory ? `${item.incomeCategory.name}: ` : `${item.expenseCategory.name}: `} {item.incomeCategory ? `${item.incomeCategory.name}: ` : `${item.incomeCategory.name}: `}
{item.incomeCategory ? `+${item.amount}$` : `-${item.amount}$`} {item.incomeCategory ? `+${item.amount}$` : `-${item.amount}$`}
{`${item.date}`} {`${item.date}`}
</li> </li>
@@ -32,45 +20,57 @@
</div> </div>
<style> <style>
#incomeInfo { #incomeInfo {
min-width: 300px;
min-height: 0;
background-color: #212942;
color: white;
border-radius: 0 0 10px 10px;
margin: 0 0 10px 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-width: 300px; box-sizing: border-box;
background-color: #212942;
color:white;
border-radius: 10px;
margin: 10px;
} }
#incomeList { #listContainer {
scrollbar-width: none; flex: 1 1 auto;
flex: 1;
border-radius: 10px;
margin: 10px;
overflow-y: auto; overflow-y: auto;
max-height: 100%; min-height: 0;
padding: 0 10px 10px;
margin: 0 0 10px;
box-sizing: border-box;
border-radius: 0 0 10px 10px;
} }
ul { #listContainer::-webkit-scrollbar {
width: 0;
}
#listContainer::-webkit-scrollbar-thumb {
background-color: transparent;
}
#listContainer::-webkit-scrollbar-track {
background-color: transparent;
}
#listContainer ul {
list-style: none; list-style: none;
padding: 0; padding: 0;
color: black; border-radius: 0 0 10px 10px;
} }
li { #listContainer li {
margin-bottom: 20px; margin-bottom: 20px;
background-color: #f2f2f2; background-color: #f2f2f2;
padding: 10px; padding: 10px;
border-radius: 5px; border-radius: 5px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); 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); transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
} }
li:hover { #listContainer li: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);
}
#incomeList::-webkit-scrollbar {
display: none;
} }
</style> </style>

0
src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/incomes/infolists/modals/Modal.svelte → src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/incomes/infolists/Modal.svelte
View File

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

@@ -2,55 +2,163 @@
import Graph1 from '../graphs/Graph1.svelte'; import Graph1 from '../graphs/Graph1.svelte';
import Graph3 from '../graphs/Graph3.svelte'; import Graph3 from '../graphs/Graph3.svelte';
import Incomes from "../infolists/Incomes.svelte"; import Incomes from "../infolists/Incomes.svelte";
import {globalStyles} from "../../../styles.js";
import { slide } from 'svelte/transition'
import {incomeTypes} from "../../../stores.js";
let isDateDropdownExpanded = false
let isCategoryDropdownExpanded = false
function clickHandlerDate() {
isDateDropdownExpanded = !isDateDropdownExpanded
}
function clickHandlerCategory() {
isCategoryDropdownExpanded = !isCategoryDropdownExpanded;
}
</script> </script>
<div id="dataMenu"> <div id="main-data" style="background-color: {$globalStyles.dashColor}; color: {$globalStyles.color}">
<div id="twoVertical"> <div id="data-header" style="background-color:{$globalStyles.mainColor}; color: {$globalStyles.altColor}">
<span>Revenue Analysis</span>
<div id="dropdown-date">
<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={() => 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>
{/if}
</div>
<div id="dropdown-category">
<button id="button" on:click={clickHandlerCategory}>Filter by Category:</button>
{#if isCategoryDropdownExpanded}
<div id="category-list" transition:slide>
{#each $incomeTypes as income (income.id)}
{#if income.id !== undefined}
<option value={income.id}>{income.name}</option>
{/if}
{/each}
</div>
{/if}
</div>
</div>
<div id="data-menu">
<div id="first-graph">
<Graph1 /> <Graph1 />
</div> </div>
<div id="oneVertical"> <div id="second-graph">
<Graph3 /> <Graph3 />
</div>
<Incomes />
</div> </div>
<div id="dataPanel">
<Incomes />
</div>
</div> </div>
<style> <style>
#dataMenu { #main-data {
border-bottom-left-radius: 20px; border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px; border-bottom-right-radius: 20px;
background-color: rgb(245,242,243); padding:0;
display:flex; display: flex;
padding:10px; min-height: 0;
flex-direction: row-reverse; height: 0;
flex-direction: column;
justify-content: stretch; justify-content: stretch;
align-items: stretch; align-items: stretch;
flex-grow: 1; 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;
} }
#twoVertical { #date-list {
display: flex; background-color: #8BD17C;
flex-direction: column; position:absolute;
align-self: stretch; z-index:1;
flex-grow: 1;
min-width: 0;
min-height:0;
} }
#oneVertical { #category-list {
display: flex; background-color: #8BD17C;
flex-direction: column; position:absolute;
align-self: stretch; z-index:1;
flex-grow: 1;
min-width: 0;
min-height:0;
} }
#dataPanel { #data-header {
background-color: black;
min-height: 50px;
padding-left: 30px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center;
justify-content: space-around;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
font-size: larger;
border: #8BD17C 2px solid;
}
#data-menu {
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
display:flex;
/*padding:10px;*/
flex-direction: row-reverse;
justify-content: space-between;
align-items: stretch;
flex: 1;
height: 0;
min-height: 0;
}
#first-graph {
display: flex;
flex-direction: column;
align-self: stretch;
flex-grow: 1;
min-width: 0;
min-height:0;
}
#second-graph {
display: flex;
flex-direction: column;
align-self: stretch; align-self: stretch;
flex-grow: 1; flex-grow: 1;
min-width: 0; min-width: 0;

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

@@ -1,6 +1,14 @@
<script> <script>
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import { incomeData, expenseData } from "../../../stores.js"; import { incomeData, expenseData } from "../../../stores.js";
import {globalStyles} from "../../../styles.js";
let componentStyles;
$: {
console.log("got here")
componentStyles = $globalStyles;
}
let infobar1, infobar2, infobar3, infobar4; let infobar1, infobar2, infobar3, infobar4;
let totalExpenses = 0; let totalExpenses = 0;
@@ -38,10 +46,10 @@
</script> </script>
<div id="quickInfobar"> <div id="quickInfobar">
<div class="infobarElement" bind:this={infobar1}></div> <div class="infobarElement" bind:this={infobar1} style="background-color: {componentStyles.mainColor}"></div>
<div class="infobarElement" bind:this={infobar2}></div> <div class="infobarElement" bind:this={infobar2} style="background-color: {componentStyles.mainColor}"></div>
<div class="infobarElement" bind:this={infobar3}></div> <div class="infobarElement" bind:this={infobar3} style="background-color: {componentStyles.mainColor}"></div>
<div class="infobarElement" bind:this={infobar4}></div> <div class="infobarElement" bind:this={infobar4} style="background-color: {componentStyles.mainColor}"></div>
</div> </div>
<style> <style>

7
src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/menu/SideMenu.svelte
View File

@@ -2,6 +2,7 @@
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import axios from 'axios'; import axios from 'axios';
import {deleteCookie, getCookie} from "svelte-cookie"; import {deleteCookie, getCookie} from "svelte-cookie";
export let onTabClick; export let onTabClick;
let username; let username;
@@ -43,12 +44,12 @@
<div on:click={() => onTabClick('expenses')} tabindex="0" role="button" class="sideMenuItem"> <div on:click={() => onTabClick('expenses')} tabindex="0" role="button" 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> <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">Expenses</span> <span class="sideMenuItemText">Spendings</span>
</div> </div>
<div on:click={() => onTabClick('incomes')} tabindex="0" role="button" class="sideMenuItem"> <div on:click={() => onTabClick('incomes')} tabindex="0" role="button" 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> <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">Incomes</span> <span class="sideMenuItemText">Revenues</span>
</div> </div>
<div class="sideMenuItem"> <div class="sideMenuItem">
@@ -56,7 +57,7 @@
<span class="sideMenuItemText">General</span> <span class="sideMenuItemText">General</span>
</div> </div>
<div class="sideMenuItem"> <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> <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> <span class="sideMenuItemText">Settings</span>
</div> </div>

18
src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/styles.js Normal file
View File

@@ -0,0 +1,18 @@
import { writable } from 'svelte/store';
export const themeDefault = {
mainColor: '#172233',
dashColor: '#F5F2F3',
color: 'black',
altColor: 'white'
}
export const themeDark = {
mainColor: '#000000',
dashColor: '#202020',
color: 'black',
altColor: 'white'
}
export const globalStyles = writable(themeDefault);