Compare commits
2 Commits
dimas_fami
...
security_b
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
a84c498073 | ||
|
|
aaf67ab09b |
@@ -65,7 +65,6 @@ public class JwtAuthenticationFilter extends OncePerRequestFilter {
|
|||||||
ObjectMapper objectMapper = new ObjectMapper();
|
ObjectMapper objectMapper = new ObjectMapper();
|
||||||
response.getWriter().write(objectMapper.writeValueAsString(errorResponse));
|
response.getWriter().write(objectMapper.writeValueAsString(errorResponse));
|
||||||
|
|
||||||
|
|
||||||
response.getWriter().flush();
|
response.getWriter().flush();
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -5,16 +5,15 @@ import org.springframework.context.annotation.Bean;
|
|||||||
import org.springframework.context.annotation.Configuration;
|
import org.springframework.context.annotation.Configuration;
|
||||||
import org.springframework.http.HttpStatus;
|
import org.springframework.http.HttpStatus;
|
||||||
import org.springframework.security.authentication.AuthenticationProvider;
|
import org.springframework.security.authentication.AuthenticationProvider;
|
||||||
|
import org.springframework.security.config.Customizer;
|
||||||
import org.springframework.security.config.annotation.method.configuration.EnableMethodSecurity;
|
import org.springframework.security.config.annotation.method.configuration.EnableMethodSecurity;
|
||||||
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
|
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
|
||||||
import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
|
import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
|
||||||
import org.springframework.security.config.annotation.web.configurers.AbstractHttpConfigurer;
|
import org.springframework.security.config.annotation.web.configurers.AbstractHttpConfigurer;
|
||||||
import org.springframework.security.config.http.SessionCreationPolicy;
|
|
||||||
import org.springframework.security.oauth2.client.registration.ClientRegistrationRepository;
|
import org.springframework.security.oauth2.client.registration.ClientRegistrationRepository;
|
||||||
import org.springframework.security.web.AuthenticationEntryPoint;
|
import org.springframework.security.web.AuthenticationEntryPoint;
|
||||||
import org.springframework.security.web.SecurityFilterChain;
|
import org.springframework.security.web.SecurityFilterChain;
|
||||||
import org.springframework.security.web.authentication.HttpStatusEntryPoint;
|
import org.springframework.security.web.authentication.HttpStatusEntryPoint;
|
||||||
import org.springframework.security.web.authentication.UsernamePasswordAuthenticationFilter;
|
|
||||||
import org.springframework.web.cors.CorsConfiguration;
|
import org.springframework.web.cors.CorsConfiguration;
|
||||||
import org.springframework.web.cors.CorsConfigurationSource;
|
import org.springframework.web.cors.CorsConfigurationSource;
|
||||||
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
|
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
|
||||||
@@ -30,26 +29,26 @@ public class SecurityConfiguration {
|
|||||||
|
|
||||||
private final JwtAuthenticationFilter jwtAuthFilter;
|
private final JwtAuthenticationFilter jwtAuthFilter;
|
||||||
private final AuthenticationProvider authenticationProvider;
|
private final AuthenticationProvider authenticationProvider;
|
||||||
|
private final ClientRegistrationRepository clientRegistrationRepository;
|
||||||
|
|
||||||
public SecurityConfiguration(JwtAuthenticationFilter jwtAuthFilter,
|
public SecurityConfiguration(JwtAuthenticationFilter jwtAuthFilter,
|
||||||
AuthenticationProvider authenticationProvider) {
|
AuthenticationProvider authenticationProvider,
|
||||||
|
ClientRegistrationRepository clientRegistrationRepository) {
|
||||||
this.jwtAuthFilter = jwtAuthFilter;
|
this.jwtAuthFilter = jwtAuthFilter;
|
||||||
this.authenticationProvider = authenticationProvider;
|
this.authenticationProvider = authenticationProvider;
|
||||||
|
this.clientRegistrationRepository = clientRegistrationRepository;
|
||||||
}
|
}
|
||||||
|
|
||||||
@Bean
|
@Bean
|
||||||
public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
|
public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
|
||||||
http
|
http
|
||||||
.cors(withDefaults())
|
.cors(Customizer.withDefaults())
|
||||||
.csrf(AbstractHttpConfigurer::disable)
|
.csrf(AbstractHttpConfigurer::disable)
|
||||||
.authorizeHttpRequests(auth -> auth
|
.authorizeHttpRequests(auth -> auth
|
||||||
.requestMatchers("/api/v1/auth/*").permitAll()
|
.requestMatchers("/api/v1/auth/*").permitAll()
|
||||||
.anyRequest().authenticated()
|
.anyRequest().authenticated()
|
||||||
)
|
)
|
||||||
//.oauth2Login(withDefaults())
|
.oauth2Login(withDefaults());
|
||||||
.sessionManagement(session -> session.sessionCreationPolicy(SessionCreationPolicy.STATELESS))
|
|
||||||
.authenticationProvider(authenticationProvider)
|
|
||||||
.addFilterBefore(jwtAuthFilter, UsernamePasswordAuthenticationFilter.class);
|
|
||||||
|
|
||||||
return http.build();
|
return http.build();
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -28,7 +28,9 @@ import org.springframework.web.bind.annotation.*;
|
|||||||
|
|
||||||
import java.time.LocalDate;
|
import java.time.LocalDate;
|
||||||
import java.time.Month;
|
import java.time.Month;
|
||||||
import java.util.*;
|
import java.util.Collections;
|
||||||
|
import java.util.List;
|
||||||
|
import java.util.Optional;
|
||||||
import java.util.stream.Collectors;
|
import java.util.stream.Collectors;
|
||||||
|
|
||||||
@RestController
|
@RestController
|
||||||
@@ -50,7 +52,7 @@ public class ExpenseController {
|
|||||||
}
|
}
|
||||||
|
|
||||||
@PostMapping()
|
@PostMapping()
|
||||||
public ResponseEntity<Map<String, Long>> createNewExpense(@RequestBody @Valid ExpenseCreationDTO expenseDTO,
|
public ResponseEntity<Void> createNewExpense(@RequestBody @Valid ExpenseCreationDTO expenseDTO,
|
||||||
BindingResult bindingResult) {
|
BindingResult bindingResult) {
|
||||||
if(bindingResult.hasErrors())
|
if(bindingResult.hasErrors())
|
||||||
throw new TransactionNotCreatedException("Could not create new expense");
|
throw new TransactionNotCreatedException("Could not create new expense");
|
||||||
@@ -66,9 +68,7 @@ public class ExpenseController {
|
|||||||
expense.setUser(user);
|
expense.setUser(user);
|
||||||
|
|
||||||
expenseService.createOrUpdate(expense);
|
expenseService.createOrUpdate(expense);
|
||||||
Map<String, Long> response = new HashMap<>();
|
return ResponseEntity.status(HttpStatus.CREATED).build();
|
||||||
response.put("expenseId", expense.getId());
|
|
||||||
return ResponseEntity.status(HttpStatus.CREATED).body(response);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
throw new TransactionNotCreatedException("Could not create new expense");
|
throw new TransactionNotCreatedException("Could not create new expense");
|
||||||
@@ -98,7 +98,7 @@ public class ExpenseController {
|
|||||||
|
|
||||||
@GetMapping("/personal-expenses")
|
@GetMapping("/personal-expenses")
|
||||||
@Transactional(readOnly = true)
|
@Transactional(readOnly = true)
|
||||||
public ResponseEntity<List<ExpenseDTO>> getExpensesByTimeUnits(@RequestParam Optional<LocalDate> date,
|
public ResponseEntity<List<ExpenseDTO>> getExpensesByUser(@RequestParam Optional<LocalDate> date,
|
||||||
@RequestParam Optional<Integer> month,
|
@RequestParam Optional<Integer> month,
|
||||||
@RequestParam Optional<Integer> startYear,
|
@RequestParam Optional<Integer> startYear,
|
||||||
@RequestParam Optional<Integer> endYear,
|
@RequestParam Optional<Integer> endYear,
|
||||||
|
|||||||
@@ -1,130 +0,0 @@
|
|||||||
package com.faf223.expensetrackerfaf.controller;
|
|
||||||
|
|
||||||
import com.faf223.expensetrackerfaf.dto.FamilyCreationDTO;
|
|
||||||
import com.faf223.expensetrackerfaf.dto.FamilyDTO;
|
|
||||||
import com.faf223.expensetrackerfaf.dto.mappers.FamilyMapper;
|
|
||||||
import com.faf223.expensetrackerfaf.model.Family;
|
|
||||||
import com.faf223.expensetrackerfaf.model.User;
|
|
||||||
import com.faf223.expensetrackerfaf.service.FamilyService;
|
|
||||||
import com.faf223.expensetrackerfaf.service.UserService;
|
|
||||||
import com.faf223.expensetrackerfaf.util.errors.ErrorResponse;
|
|
||||||
import com.faf223.expensetrackerfaf.util.exceptions.*;
|
|
||||||
import jakarta.validation.Valid;
|
|
||||||
import lombok.RequiredArgsConstructor;
|
|
||||||
import org.springframework.http.HttpStatus;
|
|
||||||
import org.springframework.http.ResponseEntity;
|
|
||||||
import org.springframework.security.access.prepost.PreAuthorize;
|
|
||||||
import org.springframework.validation.BindingResult;
|
|
||||||
import org.springframework.web.bind.annotation.*;
|
|
||||||
|
|
||||||
import java.util.HashMap;
|
|
||||||
import java.util.List;
|
|
||||||
import java.util.Map;
|
|
||||||
import java.util.Optional;
|
|
||||||
import java.util.stream.Collectors;
|
|
||||||
|
|
||||||
@RestController
|
|
||||||
@RequestMapping("/families")
|
|
||||||
@RequiredArgsConstructor
|
|
||||||
public class FamilyController {
|
|
||||||
|
|
||||||
private final FamilyService familyService;
|
|
||||||
private final FamilyMapper familyMapper;
|
|
||||||
private final UserService userService;
|
|
||||||
|
|
||||||
@GetMapping()
|
|
||||||
@PreAuthorize("hasRole('ADMIN')")
|
|
||||||
public ResponseEntity<List<FamilyDTO>> getAllFamilies() {
|
|
||||||
List<FamilyDTO> families = familyService.getFamilies().stream().map(familyMapper::toDto).collect(Collectors.toList());
|
|
||||||
if (!families.isEmpty()) return ResponseEntity.ok(families);
|
|
||||||
else throw new FamiliesNotFoundException("Families not found");
|
|
||||||
}
|
|
||||||
|
|
||||||
@PostMapping()
|
|
||||||
public ResponseEntity<Map<String, Long>> createNewFamily(@RequestBody @Valid FamilyCreationDTO familyCreationDTO,
|
|
||||||
BindingResult bindingResult) {
|
|
||||||
if(bindingResult.hasErrors())
|
|
||||||
throw new FamilyNotCreatedException("Could not create new family");
|
|
||||||
|
|
||||||
Family family = familyMapper.toFamily(familyCreationDTO);
|
|
||||||
|
|
||||||
familyService.createOrUpdate(family);
|
|
||||||
Map<String, Long> response = new HashMap<>();
|
|
||||||
response.put("familyId", family.getId());
|
|
||||||
return ResponseEntity.status(HttpStatus.CREATED).body(response);
|
|
||||||
}
|
|
||||||
|
|
||||||
@PatchMapping("/update/{id}")
|
|
||||||
public ResponseEntity<Void> updateFamily(@PathVariable long id, @RequestBody @Valid FamilyCreationDTO familyDTO,
|
|
||||||
BindingResult bindingResult) {
|
|
||||||
if(bindingResult.hasErrors())
|
|
||||||
throw new FamilyNotUpdatedException(ErrorResponse.from(bindingResult).getMessage());
|
|
||||||
|
|
||||||
Family family = familyService.getFamilyById(id);
|
|
||||||
|
|
||||||
if(family == null)
|
|
||||||
throw new FamiliesNotFoundException("The family has not been found");
|
|
||||||
|
|
||||||
if(!familyService.containsMember(family))
|
|
||||||
throw new NotAMemberOfTheFamily("You are not a member of this family");
|
|
||||||
|
|
||||||
family.setName(familyDTO.getName());
|
|
||||||
|
|
||||||
familyService.createOrUpdate(family);
|
|
||||||
return ResponseEntity.status(HttpStatus.CREATED).build();
|
|
||||||
}
|
|
||||||
|
|
||||||
@DeleteMapping("/delete/{id}")
|
|
||||||
public void deleteFamily(@PathVariable long id) {
|
|
||||||
familyService.deleteFamilyById(id);
|
|
||||||
}
|
|
||||||
|
|
||||||
@PatchMapping("/add-member/{id}")
|
|
||||||
public ResponseEntity<Void> addFamilyMember(@PathVariable long id, @RequestParam Optional<String> email) {
|
|
||||||
if(email.isEmpty())
|
|
||||||
throw new UserNotFoundException("You have not specified the user email");
|
|
||||||
|
|
||||||
Family family = familyService.getFamilyById(id);
|
|
||||||
|
|
||||||
if(family == null)
|
|
||||||
throw new FamiliesNotFoundException("The family has not been found");
|
|
||||||
|
|
||||||
if(!familyService.containsMember(family))
|
|
||||||
throw new NotAMemberOfTheFamily("You are not a member of this family");
|
|
||||||
|
|
||||||
User user = userService.getUserByEmail(email.get());
|
|
||||||
|
|
||||||
if(user == null)
|
|
||||||
throw new UserNotFoundException("User with the specified email has not been found");
|
|
||||||
|
|
||||||
family.getMembers().add(user);
|
|
||||||
|
|
||||||
familyService.createOrUpdate(family);
|
|
||||||
return ResponseEntity.status(HttpStatus.CREATED).build();
|
|
||||||
}
|
|
||||||
|
|
||||||
@PatchMapping("/remove-member/{id}")
|
|
||||||
public ResponseEntity<Void> removeFamilyMember(@PathVariable long id, @RequestParam Optional<String> email) {
|
|
||||||
if(email.isEmpty())
|
|
||||||
throw new UserNotFoundException("You have not specified the user email");
|
|
||||||
|
|
||||||
Family family = familyService.getFamilyById(id);
|
|
||||||
|
|
||||||
if(family == null)
|
|
||||||
throw new FamiliesNotFoundException("The family has not been found");
|
|
||||||
|
|
||||||
if(!familyService.containsMember(family))
|
|
||||||
throw new NotAMemberOfTheFamily("You are not a member of this family");
|
|
||||||
|
|
||||||
User user = userService.getUserByEmail(email.get());
|
|
||||||
|
|
||||||
if(user == null)
|
|
||||||
throw new UserNotFoundException("User with the specified email has not been found");
|
|
||||||
|
|
||||||
family.getMembers().remove(user);
|
|
||||||
|
|
||||||
familyService.createOrUpdate(family);
|
|
||||||
return ResponseEntity.status(HttpStatus.CREATED).build();
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
@@ -28,7 +28,9 @@ import org.springframework.web.bind.annotation.*;
|
|||||||
|
|
||||||
import java.time.LocalDate;
|
import java.time.LocalDate;
|
||||||
import java.time.Month;
|
import java.time.Month;
|
||||||
import java.util.*;
|
import java.util.Collections;
|
||||||
|
import java.util.List;
|
||||||
|
import java.util.Optional;
|
||||||
import java.util.stream.Collectors;
|
import java.util.stream.Collectors;
|
||||||
|
|
||||||
@RestController
|
@RestController
|
||||||
@@ -50,7 +52,7 @@ public class IncomeController {
|
|||||||
}
|
}
|
||||||
|
|
||||||
@PostMapping()
|
@PostMapping()
|
||||||
public ResponseEntity<Map<String, Long>> createNewIncome(@RequestBody @Valid IncomeCreationDTO incomeDTO,
|
public ResponseEntity<Void> createNewIncome(@RequestBody @Valid IncomeCreationDTO incomeDTO,
|
||||||
BindingResult bindingResult) {
|
BindingResult bindingResult) {
|
||||||
if(bindingResult.hasErrors())
|
if(bindingResult.hasErrors())
|
||||||
throw new TransactionNotCreatedException(ErrorResponse.from(bindingResult).getMessage());
|
throw new TransactionNotCreatedException(ErrorResponse.from(bindingResult).getMessage());
|
||||||
@@ -66,12 +68,10 @@ public class IncomeController {
|
|||||||
income.setUser(user);
|
income.setUser(user);
|
||||||
|
|
||||||
incomeService.createOrUpdate(income);
|
incomeService.createOrUpdate(income);
|
||||||
Map<String, Long> response = new HashMap<>();
|
return ResponseEntity.status(HttpStatus.CREATED).build();
|
||||||
response.put("incomeId", income.getId());
|
|
||||||
return ResponseEntity.status(HttpStatus.CREATED).body(response);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
throw new TransactionNotCreatedException("Could not create new income");
|
throw new TransactionNotCreatedException("Could not create new expense");
|
||||||
}
|
}
|
||||||
|
|
||||||
@PatchMapping("/update/{id}")
|
@PatchMapping("/update/{id}")
|
||||||
@@ -98,7 +98,7 @@ public class IncomeController {
|
|||||||
|
|
||||||
@GetMapping("/personal-incomes")
|
@GetMapping("/personal-incomes")
|
||||||
@Transactional(readOnly = true)
|
@Transactional(readOnly = true)
|
||||||
public ResponseEntity<List<IncomeDTO>> getIncomesByTimeUnits(@RequestParam Optional<LocalDate> date,
|
public ResponseEntity<List<IncomeDTO>> getIncomesByUser(@RequestParam Optional<LocalDate> date,
|
||||||
@RequestParam Optional<Integer> month,
|
@RequestParam Optional<Integer> month,
|
||||||
@RequestParam Optional<Integer> startYear,
|
@RequestParam Optional<Integer> startYear,
|
||||||
@RequestParam Optional<Integer> endYear,
|
@RequestParam Optional<Integer> endYear,
|
||||||
|
|||||||
@@ -1,20 +1,15 @@
|
|||||||
package com.faf223.expensetrackerfaf.controller;
|
package com.faf223.expensetrackerfaf.controller;
|
||||||
|
|
||||||
import com.faf223.expensetrackerfaf.controller.auth.ChangePasswordRequest;
|
|
||||||
import com.faf223.expensetrackerfaf.dto.UserCreationDTO;
|
import com.faf223.expensetrackerfaf.dto.UserCreationDTO;
|
||||||
import com.faf223.expensetrackerfaf.dto.UserDTO;
|
import com.faf223.expensetrackerfaf.dto.UserDTO;
|
||||||
import com.faf223.expensetrackerfaf.dto.mappers.UserMapper;
|
import com.faf223.expensetrackerfaf.dto.mappers.UserMapper;
|
||||||
import com.faf223.expensetrackerfaf.model.Credential;
|
|
||||||
import com.faf223.expensetrackerfaf.model.User;
|
import com.faf223.expensetrackerfaf.model.User;
|
||||||
import com.faf223.expensetrackerfaf.repository.CredentialRepository;
|
|
||||||
import com.faf223.expensetrackerfaf.service.AuthenticationService;
|
|
||||||
import com.faf223.expensetrackerfaf.service.UserService;
|
import com.faf223.expensetrackerfaf.service.UserService;
|
||||||
import com.faf223.expensetrackerfaf.util.errors.ErrorResponse;
|
import com.faf223.expensetrackerfaf.util.errors.ErrorResponse;
|
||||||
import com.faf223.expensetrackerfaf.util.exceptions.UserNotCreatedException;
|
import com.faf223.expensetrackerfaf.util.exceptions.UserNotCreatedException;
|
||||||
import com.faf223.expensetrackerfaf.util.exceptions.UserNotFoundException;
|
import com.faf223.expensetrackerfaf.util.exceptions.UserNotFoundException;
|
||||||
import jakarta.validation.Valid;
|
import jakarta.validation.Valid;
|
||||||
import lombok.RequiredArgsConstructor;
|
import lombok.RequiredArgsConstructor;
|
||||||
import org.springframework.http.HttpStatus;
|
|
||||||
import org.springframework.http.ResponseEntity;
|
import org.springframework.http.ResponseEntity;
|
||||||
import org.springframework.security.access.prepost.PreAuthorize;
|
import org.springframework.security.access.prepost.PreAuthorize;
|
||||||
import org.springframework.security.core.Authentication;
|
import org.springframework.security.core.Authentication;
|
||||||
@@ -23,7 +18,7 @@ import org.springframework.security.core.userdetails.UserDetails;
|
|||||||
import org.springframework.validation.BindingResult;
|
import org.springframework.validation.BindingResult;
|
||||||
import org.springframework.web.bind.annotation.*;
|
import org.springframework.web.bind.annotation.*;
|
||||||
|
|
||||||
import java.util.*;
|
import java.util.ArrayList;
|
||||||
|
|
||||||
@RestController
|
@RestController
|
||||||
@RequestMapping("/users")
|
@RequestMapping("/users")
|
||||||
@@ -32,87 +27,39 @@ public class UserController {
|
|||||||
|
|
||||||
private final UserService userService;
|
private final UserService userService;
|
||||||
private final UserMapper userMapper;
|
private final UserMapper userMapper;
|
||||||
private final CredentialRepository credentialRepository;
|
|
||||||
private final AuthenticationService authenticationService;
|
|
||||||
|
|
||||||
@PatchMapping()
|
@PatchMapping()
|
||||||
public ResponseEntity<UserDTO> updateUser(@RequestBody @Valid UserCreationDTO userDTO,
|
public ResponseEntity<UserDTO> updateUser(@RequestBody @Valid UserCreationDTO userDTO,
|
||||||
BindingResult bindingResult) {
|
BindingResult bindingResult) {
|
||||||
if (bindingResult.hasErrors())
|
if(bindingResult.hasErrors())
|
||||||
throw new UserNotCreatedException(ErrorResponse.from(bindingResult).getMessage());
|
throw new UserNotCreatedException(ErrorResponse.from(bindingResult).getMessage());
|
||||||
|
|
||||||
User user = userMapper.toUser(userDTO);
|
User user = userMapper.toUser(userDTO);
|
||||||
|
|
||||||
if (!bindingResult.hasErrors()) {
|
if (!bindingResult.hasErrors()) {
|
||||||
|
|
||||||
userService.updateUser(user);
|
userService.updateUser(user);
|
||||||
return ResponseEntity.ok(userMapper.toDto(user));
|
return ResponseEntity.ok(userMapper.toDto(user));
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
throw new UserNotFoundException("The user has not been found");
|
throw new UserNotFoundException("The user has not been found");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@PatchMapping("/update-password")
|
|
||||||
public ResponseEntity<Void> updateUserPassword(@RequestBody ChangePasswordRequest password) {
|
|
||||||
|
|
||||||
authenticationService.updatePassword(password.getPassword());
|
|
||||||
return ResponseEntity.status(HttpStatus.OK).build();
|
|
||||||
}
|
|
||||||
|
|
||||||
@GetMapping("/get-user-data")
|
@GetMapping("/get-user-data")
|
||||||
public ResponseEntity<Map<String, String>> getUser() {
|
public ResponseEntity<UserDTO> getUser() {
|
||||||
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) {
|
||||||
User user = userService.getUserByEmail(userDetails.getUsername());
|
User user = userService.getUserByEmail(userDetails.getUsername());
|
||||||
Optional<Credential> credential = credentialRepository.findByUser(user);
|
if (user != null) return ResponseEntity.ok(userMapper.toDto(user));
|
||||||
|
|
||||||
if (credential.isPresent()) {
|
|
||||||
Map<String, String> userData = new HashMap<>();
|
|
||||||
userData.put("firstname", user.getFirstName());
|
|
||||||
userData.put("lastname", user.getLastName());
|
|
||||||
userData.put("username", user.getUsername());
|
|
||||||
userData.put("userrole", credential.get().getRole().toString()); // Assuming UserRole is an enum
|
|
||||||
|
|
||||||
return ResponseEntity.ok(userData);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
throw new UserNotFoundException("The user has not been found");
|
throw new UserNotFoundException("The user has not been found");
|
||||||
}
|
}
|
||||||
|
|
||||||
@GetMapping()
|
@GetMapping()
|
||||||
@PreAuthorize("hasRole('ADMIN')")
|
@PreAuthorize("hasRole('ADMIN')")
|
||||||
public ResponseEntity<List<UserDTO>> getAllUsers() {
|
public ResponseEntity<ArrayList<UserDTO>> getAllUsers() {
|
||||||
ArrayList<User> users = new ArrayList<>(userService.getUsers());
|
ArrayList<User> users = new ArrayList<>(userService.getUsers());
|
||||||
|
|
||||||
return ResponseEntity.ok(userMapper.toDto(users));
|
return ResponseEntity.ok(userMapper.toDto(users));
|
||||||
}
|
}
|
||||||
|
|
||||||
@GetMapping("/delete/{username}")
|
|
||||||
@PreAuthorize("hasRole('ADMIN')")
|
|
||||||
public ResponseEntity<Void> deleteUserByUsername(@PathVariable String username) {
|
|
||||||
|
|
||||||
userService.deleteByUsername(username);
|
|
||||||
|
|
||||||
return ResponseEntity.status(HttpStatus.OK).build();
|
|
||||||
}
|
|
||||||
|
|
||||||
@GetMapping("/promote/{email}")
|
|
||||||
@PreAuthorize("hasRole('ADMIN')")
|
|
||||||
public ResponseEntity<Void> promoteUser(@PathVariable String email) {
|
|
||||||
|
|
||||||
userService.promoteUser(email);
|
|
||||||
|
|
||||||
return ResponseEntity.status(HttpStatus.OK).build();
|
|
||||||
}
|
|
||||||
|
|
||||||
@GetMapping("/demote/{email}")
|
|
||||||
@PreAuthorize("hasRole('ADMIN')")
|
|
||||||
public ResponseEntity<Void> demoteUser(@PathVariable String email) {
|
|
||||||
|
|
||||||
userService.demoteUser(email);
|
|
||||||
|
|
||||||
return ResponseEntity.status(HttpStatus.OK).build();
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -14,16 +14,19 @@ public class AuthenticationController {
|
|||||||
|
|
||||||
@PostMapping("/register")
|
@PostMapping("/register")
|
||||||
public ResponseEntity<AuthenticationResponse> register(@RequestBody RegisterRequest request) {
|
public ResponseEntity<AuthenticationResponse> register(@RequestBody RegisterRequest request) {
|
||||||
|
System.out.println("register");
|
||||||
return ResponseEntity.ok(service.register(request));
|
return ResponseEntity.ok(service.register(request));
|
||||||
}
|
}
|
||||||
|
|
||||||
@PostMapping("/authenticate")
|
@PostMapping("/authenticate")
|
||||||
public ResponseEntity<AuthenticationResponse> authenticate(@RequestBody AuthenticationRequest request) {
|
public ResponseEntity<AuthenticationResponse> authenticate(@RequestBody AuthenticationRequest request) {
|
||||||
|
System.out.println("Refresh token!========================");
|
||||||
return ResponseEntity.ok(service.authenticate(request));
|
return ResponseEntity.ok(service.authenticate(request));
|
||||||
}
|
}
|
||||||
|
|
||||||
@PostMapping("/refreshtoken")
|
@PostMapping("/refreshtoken")
|
||||||
public ResponseEntity<AuthenticationResponse> refreshAccessToken(@RequestBody TokenRefreshRequest request) {
|
public ResponseEntity<AuthenticationResponse> refreshAccessToken(@RequestBody TokenRefreshRequest request) {
|
||||||
|
System.out.println("Refresh token!========================");
|
||||||
return ResponseEntity.ok(service.refreshAccessToken(request));
|
return ResponseEntity.ok(service.refreshAccessToken(request));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,14 +0,0 @@
|
|||||||
package com.faf223.expensetrackerfaf.controller.auth;
|
|
||||||
|
|
||||||
import lombok.AllArgsConstructor;
|
|
||||||
import lombok.Builder;
|
|
||||||
import lombok.Data;
|
|
||||||
import lombok.NoArgsConstructor;
|
|
||||||
|
|
||||||
@Data
|
|
||||||
@Builder
|
|
||||||
@AllArgsConstructor
|
|
||||||
@NoArgsConstructor
|
|
||||||
public class ChangePasswordRequest {
|
|
||||||
private String password;
|
|
||||||
}
|
|
||||||
@@ -1,14 +0,0 @@
|
|||||||
package com.faf223.expensetrackerfaf.dto;
|
|
||||||
|
|
||||||
import jakarta.validation.constraints.NotEmpty;
|
|
||||||
import jakarta.validation.constraints.NotNull;
|
|
||||||
import lombok.AllArgsConstructor;
|
|
||||||
import lombok.Data;
|
|
||||||
|
|
||||||
@Data
|
|
||||||
@AllArgsConstructor
|
|
||||||
public class FamilyCreationDTO {
|
|
||||||
@NotNull(message = "Name must not be null")
|
|
||||||
@NotEmpty(message = "Name must not be empty")
|
|
||||||
private String name;
|
|
||||||
}
|
|
||||||
@@ -1,14 +0,0 @@
|
|||||||
package com.faf223.expensetrackerfaf.dto;
|
|
||||||
|
|
||||||
import jakarta.validation.constraints.NotEmpty;
|
|
||||||
import jakarta.validation.constraints.NotNull;
|
|
||||||
import lombok.AllArgsConstructor;
|
|
||||||
import lombok.Data;
|
|
||||||
|
|
||||||
@Data
|
|
||||||
@AllArgsConstructor
|
|
||||||
public class FamilyDTO {
|
|
||||||
@NotNull(message = "Name must not be null")
|
|
||||||
@NotEmpty(message = "Name must not be empty")
|
|
||||||
private String name;
|
|
||||||
}
|
|
||||||
@@ -17,4 +17,5 @@ public class UserDTO {
|
|||||||
@NotNull(message = "Username must not be null")
|
@NotNull(message = "Username must not be null")
|
||||||
@NotEmpty(message = "Username must not be empty")
|
@NotEmpty(message = "Username must not be empty")
|
||||||
private String username;
|
private String username;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -5,19 +5,25 @@ import com.faf223.expensetrackerfaf.dto.ExpenseDTO;
|
|||||||
import com.faf223.expensetrackerfaf.model.Expense;
|
import com.faf223.expensetrackerfaf.model.Expense;
|
||||||
import com.faf223.expensetrackerfaf.service.ExpenseCategoryService;
|
import com.faf223.expensetrackerfaf.service.ExpenseCategoryService;
|
||||||
import com.faf223.expensetrackerfaf.service.ExpenseService;
|
import com.faf223.expensetrackerfaf.service.ExpenseService;
|
||||||
import lombok.RequiredArgsConstructor;
|
|
||||||
import org.springframework.beans.factory.annotation.Autowired;
|
import org.springframework.beans.factory.annotation.Autowired;
|
||||||
import org.springframework.stereotype.Component;
|
import org.springframework.stereotype.Component;
|
||||||
|
|
||||||
import java.time.LocalDate;
|
import java.time.LocalDate;
|
||||||
|
|
||||||
@Component
|
@Component
|
||||||
@RequiredArgsConstructor
|
|
||||||
public class ExpenseMapper {
|
public class ExpenseMapper {
|
||||||
|
|
||||||
|
private final ExpenseService expenseService;
|
||||||
private final ExpenseCategoryService expenseCategoryService;
|
private final ExpenseCategoryService expenseCategoryService;
|
||||||
private final UserMapper userMapper;
|
private final UserMapper userMapper;
|
||||||
|
|
||||||
|
@Autowired
|
||||||
|
public ExpenseMapper(ExpenseService expenseService, ExpenseCategoryService expenseCategoryService, UserMapper userMapper) {
|
||||||
|
this.expenseService = expenseService;
|
||||||
|
this.expenseCategoryService = expenseCategoryService;
|
||||||
|
this.userMapper = userMapper;
|
||||||
|
}
|
||||||
|
|
||||||
public ExpenseDTO toDto(Expense expense) {
|
public ExpenseDTO toDto(Expense expense) {
|
||||||
return new ExpenseDTO(expense.getId(), userMapper.toDto(expense.getUser()),
|
return new ExpenseDTO(expense.getId(), userMapper.toDto(expense.getUser()),
|
||||||
expense.getCategory(), expense.getDate(), expense.getAmount());
|
expense.getCategory(), expense.getDate(), expense.getAmount());
|
||||||
|
|||||||
@@ -1,25 +0,0 @@
|
|||||||
package com.faf223.expensetrackerfaf.dto.mappers;
|
|
||||||
|
|
||||||
import com.faf223.expensetrackerfaf.dto.FamilyCreationDTO;
|
|
||||||
import com.faf223.expensetrackerfaf.dto.FamilyDTO;
|
|
||||||
import com.faf223.expensetrackerfaf.model.Family;
|
|
||||||
import lombok.RequiredArgsConstructor;
|
|
||||||
import org.springframework.stereotype.Component;
|
|
||||||
|
|
||||||
@Component
|
|
||||||
@RequiredArgsConstructor
|
|
||||||
public class FamilyMapper {
|
|
||||||
|
|
||||||
private final UserMapper userMapper;
|
|
||||||
|
|
||||||
public FamilyDTO toDto(Family family) {
|
|
||||||
return new FamilyDTO(family.getId(), family.getName(), userMapper.toDto(family.getMembers()));
|
|
||||||
}
|
|
||||||
|
|
||||||
public Family toFamily(FamilyCreationDTO familyCreationDTO) {
|
|
||||||
Family family = new Family();
|
|
||||||
family.setName(familyCreationDTO.getName());
|
|
||||||
return family;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
@@ -2,20 +2,29 @@ package com.faf223.expensetrackerfaf.dto.mappers;
|
|||||||
|
|
||||||
import com.faf223.expensetrackerfaf.dto.IncomeCreationDTO;
|
import com.faf223.expensetrackerfaf.dto.IncomeCreationDTO;
|
||||||
import com.faf223.expensetrackerfaf.dto.IncomeDTO;
|
import com.faf223.expensetrackerfaf.dto.IncomeDTO;
|
||||||
|
import com.faf223.expensetrackerfaf.model.Expense;
|
||||||
import com.faf223.expensetrackerfaf.model.Income;
|
import com.faf223.expensetrackerfaf.model.Income;
|
||||||
import com.faf223.expensetrackerfaf.service.IncomeCategoryService;
|
import com.faf223.expensetrackerfaf.service.IncomeCategoryService;
|
||||||
import lombok.RequiredArgsConstructor;
|
import com.faf223.expensetrackerfaf.service.IncomeService;
|
||||||
|
import org.springframework.beans.factory.annotation.Autowired;
|
||||||
import org.springframework.stereotype.Component;
|
import org.springframework.stereotype.Component;
|
||||||
|
|
||||||
import java.time.LocalDate;
|
import java.time.LocalDate;
|
||||||
|
|
||||||
@Component
|
@Component
|
||||||
@RequiredArgsConstructor
|
|
||||||
public class IncomeMapper {
|
public class IncomeMapper {
|
||||||
|
|
||||||
|
private final IncomeService incomeService;
|
||||||
private final IncomeCategoryService incomeCategoryService;
|
private final IncomeCategoryService incomeCategoryService;
|
||||||
private final UserMapper userMapper;
|
private final UserMapper userMapper;
|
||||||
|
|
||||||
|
@Autowired
|
||||||
|
public IncomeMapper(IncomeService incomeService, IncomeCategoryService incomeCategoryService, UserMapper userMapper) {
|
||||||
|
this.incomeService = incomeService;
|
||||||
|
this.incomeCategoryService = incomeCategoryService;
|
||||||
|
this.userMapper = userMapper;
|
||||||
|
}
|
||||||
|
|
||||||
public IncomeDTO toDto(Income income) {
|
public IncomeDTO toDto(Income income) {
|
||||||
return new IncomeDTO(income.getId(), userMapper.toDto(income.getUser()),
|
return new IncomeDTO(income.getId(), userMapper.toDto(income.getUser()),
|
||||||
income.getCategory(), income.getDate(), income.getAmount());
|
income.getCategory(), income.getDate(), income.getAmount());
|
||||||
|
|||||||
@@ -6,7 +6,6 @@ import com.faf223.expensetrackerfaf.model.User;
|
|||||||
import org.springframework.stereotype.Component;
|
import org.springframework.stereotype.Component;
|
||||||
|
|
||||||
import java.util.ArrayList;
|
import java.util.ArrayList;
|
||||||
import java.util.List;
|
|
||||||
|
|
||||||
@Component
|
@Component
|
||||||
public class UserMapper {
|
public class UserMapper {
|
||||||
@@ -15,9 +14,11 @@ public class UserMapper {
|
|||||||
return new UserDTO(user.getFirstName(), user.getLastName(), user.getUsername());
|
return new UserDTO(user.getFirstName(), user.getLastName(), user.getUsername());
|
||||||
}
|
}
|
||||||
|
|
||||||
public List<UserDTO> toDto(List<User> user) {
|
public ArrayList<UserDTO> toDto(ArrayList<User> user) {
|
||||||
List<UserDTO> list = new ArrayList<>();
|
|
||||||
for (User u : user)
|
ArrayList<UserDTO> list = new ArrayList<>();
|
||||||
|
|
||||||
|
for (User u: user)
|
||||||
list.add(toDto(u));
|
list.add(toDto(u));
|
||||||
|
|
||||||
return list;
|
return list;
|
||||||
|
|||||||
@@ -4,7 +4,10 @@ import com.fasterxml.jackson.annotation.JsonIgnore;
|
|||||||
import jakarta.persistence.*;
|
import jakarta.persistence.*;
|
||||||
import jakarta.validation.constraints.DecimalMin;
|
import jakarta.validation.constraints.DecimalMin;
|
||||||
import jakarta.validation.constraints.NotNull;
|
import jakarta.validation.constraints.NotNull;
|
||||||
import lombok.*;
|
import lombok.AllArgsConstructor;
|
||||||
|
import lombok.Data;
|
||||||
|
import lombok.NoArgsConstructor;
|
||||||
|
import lombok.ToString;
|
||||||
|
|
||||||
import java.math.BigDecimal;
|
import java.math.BigDecimal;
|
||||||
import java.time.LocalDate;
|
import java.time.LocalDate;
|
||||||
@@ -13,7 +16,6 @@ import java.time.LocalDate;
|
|||||||
@AllArgsConstructor
|
@AllArgsConstructor
|
||||||
@NoArgsConstructor
|
@NoArgsConstructor
|
||||||
@Entity(name = "expenses")
|
@Entity(name = "expenses")
|
||||||
@Builder
|
|
||||||
public class Expense implements IMoneyTransaction {
|
public class Expense implements IMoneyTransaction {
|
||||||
@Id
|
@Id
|
||||||
@GeneratedValue(strategy = GenerationType.IDENTITY)
|
@GeneratedValue(strategy = GenerationType.IDENTITY)
|
||||||
@@ -38,6 +40,9 @@ public class Expense implements IMoneyTransaction {
|
|||||||
@DecimalMin(value = "0.0", inclusive = false)
|
@DecimalMin(value = "0.0", inclusive = false)
|
||||||
private BigDecimal amount;
|
private BigDecimal amount;
|
||||||
|
|
||||||
|
public Expense(LocalDate date, BigDecimal amount) {
|
||||||
|
}
|
||||||
|
|
||||||
public Expense(ExpenseCategory expenseCategory, LocalDate date, BigDecimal amount) {
|
public Expense(ExpenseCategory expenseCategory, LocalDate date, BigDecimal amount) {
|
||||||
this.category = expenseCategory;
|
this.category = expenseCategory;
|
||||||
this.date = date;
|
this.date = date;
|
||||||
|
|||||||
@@ -1,42 +0,0 @@
|
|||||||
package com.faf223.expensetrackerfaf.model;
|
|
||||||
|
|
||||||
import jakarta.persistence.*;
|
|
||||||
import jakarta.validation.constraints.NotEmpty;
|
|
||||||
import lombok.*;
|
|
||||||
|
|
||||||
import java.util.List;
|
|
||||||
import java.util.Objects;
|
|
||||||
|
|
||||||
@Data
|
|
||||||
@AllArgsConstructor
|
|
||||||
@NoArgsConstructor
|
|
||||||
@Entity(name = "family")
|
|
||||||
@Builder
|
|
||||||
public class Family {
|
|
||||||
|
|
||||||
@Id
|
|
||||||
@GeneratedValue(strategy = GenerationType.IDENTITY)
|
|
||||||
@Column(name = "family_id")
|
|
||||||
private Long id;
|
|
||||||
|
|
||||||
@NotEmpty
|
|
||||||
@Column(name = "family_name")
|
|
||||||
private String name;
|
|
||||||
|
|
||||||
@OneToMany(mappedBy = "family", fetch = FetchType.LAZY, cascade = CascadeType.ALL)
|
|
||||||
@ToString.Exclude
|
|
||||||
private List<User> members;
|
|
||||||
|
|
||||||
@Override
|
|
||||||
public boolean equals(Object o) {
|
|
||||||
if (this == o) return true;
|
|
||||||
if (o == null || getClass() != o.getClass()) return false;
|
|
||||||
Family family = (Family) o;
|
|
||||||
return Objects.equals(id, family.id) && Objects.equals(name, family.name);
|
|
||||||
}
|
|
||||||
|
|
||||||
@Override
|
|
||||||
public int hashCode() {
|
|
||||||
return Objects.hash(id, name);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -13,7 +13,6 @@ import java.time.LocalDate;
|
|||||||
@AllArgsConstructor
|
@AllArgsConstructor
|
||||||
@NoArgsConstructor
|
@NoArgsConstructor
|
||||||
@Entity(name = "incomes")
|
@Entity(name = "incomes")
|
||||||
@Builder
|
|
||||||
public class Income implements IMoneyTransaction {
|
public class Income implements IMoneyTransaction {
|
||||||
@Id
|
@Id
|
||||||
@GeneratedValue(strategy = GenerationType.IDENTITY)
|
@GeneratedValue(strategy = GenerationType.IDENTITY)
|
||||||
|
|||||||
@@ -3,16 +3,10 @@ package com.faf223.expensetrackerfaf.model;
|
|||||||
import jakarta.persistence.*;
|
import jakarta.persistence.*;
|
||||||
import jakarta.validation.constraints.NotEmpty;
|
import jakarta.validation.constraints.NotEmpty;
|
||||||
import jakarta.validation.constraints.NotNull;
|
import jakarta.validation.constraints.NotNull;
|
||||||
import lombok.AllArgsConstructor;
|
|
||||||
import lombok.Builder;
|
|
||||||
import lombok.Data;
|
import lombok.Data;
|
||||||
import lombok.NoArgsConstructor;
|
|
||||||
|
|
||||||
@Data
|
@Data
|
||||||
@Entity(name = "income_categories")
|
@Entity(name = "income_categories")
|
||||||
@Builder
|
|
||||||
@NoArgsConstructor
|
|
||||||
@AllArgsConstructor
|
|
||||||
public class IncomeCategory implements IMoneyTransactionCategory {
|
public class IncomeCategory implements IMoneyTransactionCategory {
|
||||||
@Id
|
@Id
|
||||||
@GeneratedValue(strategy = GenerationType.IDENTITY)
|
@GeneratedValue(strategy = GenerationType.IDENTITY)
|
||||||
|
|||||||
@@ -1,6 +1,5 @@
|
|||||||
package com.faf223.expensetrackerfaf.model;
|
package com.faf223.expensetrackerfaf.model;
|
||||||
|
|
||||||
import com.fasterxml.jackson.annotation.JsonIgnore;
|
|
||||||
import jakarta.persistence.*;
|
import jakarta.persistence.*;
|
||||||
import jakarta.validation.constraints.NotEmpty;
|
import jakarta.validation.constraints.NotEmpty;
|
||||||
import jakarta.validation.constraints.NotNull;
|
import jakarta.validation.constraints.NotNull;
|
||||||
@@ -35,21 +34,13 @@ public class User {
|
|||||||
private String username;
|
private String username;
|
||||||
|
|
||||||
@Transient
|
@Transient
|
||||||
// @NotNull(message = "Password must not be null")
|
|
||||||
// @NotEmpty(message = "Password must not be empty")
|
|
||||||
private String password;
|
private String password;
|
||||||
|
|
||||||
@OneToMany(mappedBy = "user", fetch = FetchType.LAZY, cascade = CascadeType.ALL)
|
@OneToMany(mappedBy = "user", fetch = FetchType.LAZY)
|
||||||
@ToString.Exclude
|
@ToString.Exclude
|
||||||
private List<Expense> expenses;
|
private List<Expense> expenses;
|
||||||
|
|
||||||
@OneToMany(mappedBy = "user", fetch = FetchType.LAZY, cascade = CascadeType.ALL)
|
@OneToMany(mappedBy = "user", fetch = FetchType.LAZY)
|
||||||
@ToString.Exclude
|
@ToString.Exclude
|
||||||
private List<Income> incomes;
|
private List<Income> incomes;
|
||||||
|
|
||||||
@ManyToOne
|
|
||||||
@JoinColumn(name = "family_id")
|
|
||||||
@ToString.Exclude
|
|
||||||
@JsonIgnore
|
|
||||||
private Family family;
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,7 +1,6 @@
|
|||||||
package com.faf223.expensetrackerfaf.repository;
|
package com.faf223.expensetrackerfaf.repository;
|
||||||
|
|
||||||
import com.faf223.expensetrackerfaf.model.Credential;
|
import com.faf223.expensetrackerfaf.model.Credential;
|
||||||
import com.faf223.expensetrackerfaf.model.User;
|
|
||||||
import org.springframework.data.jpa.repository.JpaRepository;
|
import org.springframework.data.jpa.repository.JpaRepository;
|
||||||
import org.springframework.stereotype.Repository;
|
import org.springframework.stereotype.Repository;
|
||||||
|
|
||||||
@@ -10,8 +9,4 @@ import java.util.Optional;
|
|||||||
@Repository
|
@Repository
|
||||||
public interface CredentialRepository extends JpaRepository<Credential, Long> {
|
public interface CredentialRepository extends JpaRepository<Credential, Long> {
|
||||||
Optional<Credential> findByEmail(String email);
|
Optional<Credential> findByEmail(String email);
|
||||||
|
|
||||||
Optional<Credential> findByUser(User user);
|
|
||||||
|
|
||||||
void deleteByEmail(String email);
|
|
||||||
}
|
}
|
||||||
@@ -1,9 +0,0 @@
|
|||||||
package com.faf223.expensetrackerfaf.repository;
|
|
||||||
|
|
||||||
import com.faf223.expensetrackerfaf.model.Family;
|
|
||||||
import org.springframework.data.jpa.repository.JpaRepository;
|
|
||||||
import org.springframework.stereotype.Repository;
|
|
||||||
|
|
||||||
@Repository
|
|
||||||
public interface FamilyRepository extends JpaRepository<Family, Long> {
|
|
||||||
}
|
|
||||||
@@ -9,6 +9,4 @@ public interface UserRepository extends JpaRepository<User, String> {
|
|||||||
Optional<User> getUserByUserUuid(String userUuid);
|
Optional<User> getUserByUserUuid(String userUuid);
|
||||||
|
|
||||||
Optional<User> findByUsername(String username);
|
Optional<User> findByUsername(String username);
|
||||||
|
|
||||||
void deleteByUsername(String username);
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -15,8 +15,6 @@ import com.faf223.expensetrackerfaf.util.exceptions.UserNotFoundException;
|
|||||||
import lombok.RequiredArgsConstructor;
|
import lombok.RequiredArgsConstructor;
|
||||||
import org.springframework.security.authentication.AuthenticationManager;
|
import org.springframework.security.authentication.AuthenticationManager;
|
||||||
import org.springframework.security.authentication.UsernamePasswordAuthenticationToken;
|
import org.springframework.security.authentication.UsernamePasswordAuthenticationToken;
|
||||||
import org.springframework.security.core.Authentication;
|
|
||||||
import org.springframework.security.core.context.SecurityContextHolder;
|
|
||||||
import org.springframework.security.core.userdetails.UserDetails;
|
import org.springframework.security.core.userdetails.UserDetails;
|
||||||
import org.springframework.security.crypto.password.PasswordEncoder;
|
import org.springframework.security.crypto.password.PasswordEncoder;
|
||||||
import org.springframework.security.oauth2.core.user.OAuth2User;
|
import org.springframework.security.oauth2.core.user.OAuth2User;
|
||||||
@@ -29,7 +27,6 @@ import java.util.Optional;
|
|||||||
public class AuthenticationService {
|
public class AuthenticationService {
|
||||||
|
|
||||||
private final UserRepository userRepository;
|
private final UserRepository userRepository;
|
||||||
private final UserService userService;
|
|
||||||
private final CredentialRepository credentialRepository;
|
private final CredentialRepository credentialRepository;
|
||||||
private final PasswordEncoder passwordEncoder;
|
private final PasswordEncoder passwordEncoder;
|
||||||
private final JwtService jwtService;
|
private final JwtService jwtService;
|
||||||
@@ -52,6 +49,7 @@ public class AuthenticationService {
|
|||||||
String jwtToken = jwtService.generateToken(userDetails);
|
String jwtToken = jwtService.generateToken(userDetails);
|
||||||
String refreshToken = jwtService.generateRefreshToken(userDetails);
|
String refreshToken = jwtService.generateRefreshToken(userDetails);
|
||||||
|
|
||||||
|
System.out.println(user);
|
||||||
return AuthenticationResponse.builder()
|
return AuthenticationResponse.builder()
|
||||||
.accessToken(jwtToken)
|
.accessToken(jwtToken)
|
||||||
.refreshToken(refreshToken)
|
.refreshToken(refreshToken)
|
||||||
@@ -106,6 +104,8 @@ public class AuthenticationService {
|
|||||||
.build();
|
.build();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
public AuthenticationResponse authenticate(AuthenticationRequest request) {
|
public AuthenticationResponse authenticate(AuthenticationRequest request) {
|
||||||
authenticationManager.authenticate(new UsernamePasswordAuthenticationToken(request.getEmail(), request.getPassword()));
|
authenticationManager.authenticate(new UsernamePasswordAuthenticationToken(request.getEmail(), request.getPassword()));
|
||||||
|
|
||||||
@@ -114,6 +114,7 @@ public class AuthenticationService {
|
|||||||
UserDetails userDetails = new PersonDetails(credential);
|
UserDetails userDetails = new PersonDetails(credential);
|
||||||
String jwtToken = jwtService.generateToken(userDetails);
|
String jwtToken = jwtService.generateToken(userDetails);
|
||||||
String refreshToken = jwtService.generateRefreshToken(userDetails);
|
String refreshToken = jwtService.generateRefreshToken(userDetails);
|
||||||
|
System.out.println(jwtToken);
|
||||||
return AuthenticationResponse.builder()
|
return AuthenticationResponse.builder()
|
||||||
.accessToken(jwtToken)
|
.accessToken(jwtToken)
|
||||||
.refreshToken(refreshToken)
|
.refreshToken(refreshToken)
|
||||||
@@ -128,6 +129,7 @@ public class AuthenticationService {
|
|||||||
UserDetails userDetails = new PersonDetails(credential.get());
|
UserDetails userDetails = new PersonDetails(credential.get());
|
||||||
|
|
||||||
String jwtToken = jwtService.generateToken(userDetails);
|
String jwtToken = jwtService.generateToken(userDetails);
|
||||||
|
System.out.println(jwtToken);
|
||||||
return AuthenticationResponse.builder()
|
return AuthenticationResponse.builder()
|
||||||
.accessToken(jwtToken)
|
.accessToken(jwtToken)
|
||||||
.refreshToken(refreshToken)
|
.refreshToken(refreshToken)
|
||||||
@@ -137,21 +139,4 @@ public class AuthenticationService {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
public void updatePassword(String newPassword) {
|
|
||||||
|
|
||||||
Authentication authentication = SecurityContextHolder.getContext().getAuthentication();
|
|
||||||
|
|
||||||
if (authentication != null && authentication.getPrincipal() instanceof UserDetails userDetails) {
|
|
||||||
User user = userService.getUserByEmail(userDetails.getUsername());
|
|
||||||
Optional<Credential> credential = credentialRepository.findByUser(user);
|
|
||||||
|
|
||||||
if (credential.isPresent()) {
|
|
||||||
|
|
||||||
Credential updatedCredential = credential.get();
|
|
||||||
updatedCredential.setPassword(passwordEncoder.encode(newPassword));
|
|
||||||
credentialRepository.save(updatedCredential);
|
|
||||||
}
|
|
||||||
} else throw new UserNotFoundException("User not found!");
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -58,7 +58,6 @@ public class ExpenseService implements ITransactionService {
|
|||||||
|
|
||||||
@Override
|
@Override
|
||||||
public List<Expense> getTransactionsByMonth(Month month) {
|
public List<Expense> getTransactionsByMonth(Month month) {
|
||||||
System.out.println(expenseRepository.filterByMonth(month.getValue()));
|
|
||||||
return expenseRepository.filterByMonth(month.getValue());
|
return expenseRepository.filterByMonth(month.getValue());
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -130,8 +129,6 @@ public class ExpenseService implements ITransactionService {
|
|||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return true;
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
throw new UserNotAuthenticatedException("You are not authenticated");
|
throw new UserNotAuthenticatedException("You are not authenticated");
|
||||||
|
|||||||
@@ -1,67 +0,0 @@
|
|||||||
package com.faf223.expensetrackerfaf.service;
|
|
||||||
|
|
||||||
import com.faf223.expensetrackerfaf.model.Credential;
|
|
||||||
import com.faf223.expensetrackerfaf.model.Family;
|
|
||||||
import com.faf223.expensetrackerfaf.model.User;
|
|
||||||
import com.faf223.expensetrackerfaf.repository.CredentialRepository;
|
|
||||||
import com.faf223.expensetrackerfaf.repository.FamilyRepository;
|
|
||||||
import com.faf223.expensetrackerfaf.repository.UserRepository;
|
|
||||||
import com.faf223.expensetrackerfaf.util.exceptions.UserNotAuthenticatedException;
|
|
||||||
import com.faf223.expensetrackerfaf.util.exceptions.UserNotFoundException;
|
|
||||||
import lombok.RequiredArgsConstructor;
|
|
||||||
import org.springframework.security.core.Authentication;
|
|
||||||
import org.springframework.security.core.context.SecurityContextHolder;
|
|
||||||
import org.springframework.security.core.userdetails.UserDetails;
|
|
||||||
import org.springframework.stereotype.Service;
|
|
||||||
|
|
||||||
import java.util.List;
|
|
||||||
import java.util.Optional;
|
|
||||||
|
|
||||||
@Service
|
|
||||||
@RequiredArgsConstructor
|
|
||||||
public class FamilyService {
|
|
||||||
|
|
||||||
private final FamilyRepository familyRepository;
|
|
||||||
private final CredentialRepository credentialRepository;
|
|
||||||
private final UserRepository userRepository;
|
|
||||||
|
|
||||||
public List<Family> getFamilies() {
|
|
||||||
return familyRepository.findAll();
|
|
||||||
}
|
|
||||||
|
|
||||||
public void createOrUpdate(Family family) {
|
|
||||||
familyRepository.save(family);
|
|
||||||
}
|
|
||||||
|
|
||||||
public Family getFamilyById(long id) {
|
|
||||||
return familyRepository.findById(id).orElse(null);
|
|
||||||
}
|
|
||||||
|
|
||||||
public boolean containsMember(Family family) {
|
|
||||||
Authentication authentication = SecurityContextHolder.getContext().getAuthentication();
|
|
||||||
|
|
||||||
if (authentication != null && authentication.getPrincipal() instanceof UserDetails userDetails) {
|
|
||||||
|
|
||||||
if(authentication.getAuthorities().stream().noneMatch(authority -> authority.getAuthority().equals("ADMIN"))) {
|
|
||||||
|
|
||||||
Optional<Credential> credential = credentialRepository.findByEmail(userDetails.getUsername());
|
|
||||||
if(credential.isEmpty()) throw new UserNotFoundException("The user has not been found");
|
|
||||||
Optional<User> user = userRepository.findById(credential.get().getUser().getUserUuid());
|
|
||||||
if(user.isEmpty()) throw new UserNotFoundException("The user has not been found");
|
|
||||||
|
|
||||||
return user.get().getFamily().equals(family);
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
return true;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
throw new UserNotAuthenticatedException("You are not authenticated");
|
|
||||||
}
|
|
||||||
|
|
||||||
public void deleteFamilyById(long id) {
|
|
||||||
familyRepository.deleteById(id);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
@@ -129,8 +129,6 @@ public class IncomeService implements ITransactionService {
|
|||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return true;
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
throw new UserNotAuthenticatedException("You are not authenticated");
|
throw new UserNotAuthenticatedException("You are not authenticated");
|
||||||
|
|||||||
@@ -1,11 +1,9 @@
|
|||||||
package com.faf223.expensetrackerfaf.service;
|
package com.faf223.expensetrackerfaf.service;
|
||||||
|
|
||||||
import com.faf223.expensetrackerfaf.model.Credential;
|
import com.faf223.expensetrackerfaf.model.Credential;
|
||||||
import com.faf223.expensetrackerfaf.model.Role;
|
|
||||||
import com.faf223.expensetrackerfaf.model.User;
|
import com.faf223.expensetrackerfaf.model.User;
|
||||||
import com.faf223.expensetrackerfaf.repository.CredentialRepository;
|
import com.faf223.expensetrackerfaf.repository.CredentialRepository;
|
||||||
import com.faf223.expensetrackerfaf.repository.UserRepository;
|
import com.faf223.expensetrackerfaf.repository.UserRepository;
|
||||||
import jakarta.transaction.Transactional;
|
|
||||||
import lombok.RequiredArgsConstructor;
|
import lombok.RequiredArgsConstructor;
|
||||||
import org.springframework.stereotype.Service;
|
import org.springframework.stereotype.Service;
|
||||||
|
|
||||||
@@ -30,7 +28,6 @@ public class UserService {
|
|||||||
public User getUserById(String userUuid) {
|
public User getUserById(String userUuid) {
|
||||||
return userRepository.findById(userUuid).orElse(null);
|
return userRepository.findById(userUuid).orElse(null);
|
||||||
}
|
}
|
||||||
|
|
||||||
public User getUserByEmail(String email) {
|
public User getUserByEmail(String email) {
|
||||||
Optional<Credential> credential = credentialRepository.findByEmail(email);
|
Optional<Credential> credential = credentialRepository.findByEmail(email);
|
||||||
if (credential.isPresent()) {
|
if (credential.isPresent()) {
|
||||||
@@ -39,42 +36,4 @@ public class UserService {
|
|||||||
}
|
}
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
@Transactional
|
|
||||||
public void deleteByUsername(String username) {
|
|
||||||
|
|
||||||
Optional<User> user = userRepository.findByUsername(username);
|
|
||||||
if (user.isPresent()) {
|
|
||||||
|
|
||||||
Optional<Credential> credential = credentialRepository.findByUser(user.get());
|
|
||||||
|
|
||||||
if (credential.isPresent()) {
|
|
||||||
|
|
||||||
credentialRepository.deleteByEmail(credential.get().getEmail());
|
|
||||||
userRepository.deleteByUsername(username);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
public void promoteUser(String email) {
|
|
||||||
Optional<Credential> credential = credentialRepository.findByEmail(email);
|
|
||||||
if (credential.isPresent()) {
|
|
||||||
|
|
||||||
System.out.println(email);
|
|
||||||
Credential updatedCredential = credential.get();
|
|
||||||
updatedCredential.setRole(Role.ROLE_ADMIN);
|
|
||||||
credentialRepository.save(updatedCredential);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
public void demoteUser(String email) {
|
|
||||||
Optional<Credential> credential = credentialRepository.findByEmail(email);
|
|
||||||
if (credential.isPresent()) {
|
|
||||||
|
|
||||||
System.out.println(email);
|
|
||||||
Credential updatedCredential = credential.get();
|
|
||||||
updatedCredential.setRole(Role.ROLE_USER);
|
|
||||||
credentialRepository.save(updatedCredential);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
@@ -1,9 +0,0 @@
|
|||||||
package com.faf223.expensetrackerfaf.util.exceptions;
|
|
||||||
|
|
||||||
public class FamiliesNotFoundException extends RuntimeException {
|
|
||||||
|
|
||||||
public FamiliesNotFoundException(String message) {
|
|
||||||
super(message);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
@@ -1,9 +0,0 @@
|
|||||||
package com.faf223.expensetrackerfaf.util.exceptions;
|
|
||||||
|
|
||||||
public class FamilyNotCreatedException extends RuntimeException {
|
|
||||||
|
|
||||||
public FamilyNotCreatedException(String message) {
|
|
||||||
super(message);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
@@ -1,9 +0,0 @@
|
|||||||
package com.faf223.expensetrackerfaf.util.exceptions;
|
|
||||||
|
|
||||||
public class FamilyNotUpdatedException extends RuntimeException {
|
|
||||||
|
|
||||||
public FamilyNotUpdatedException(String message) {
|
|
||||||
super(message);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
@@ -1,9 +0,0 @@
|
|||||||
package com.faf223.expensetrackerfaf.util.exceptions;
|
|
||||||
|
|
||||||
public class NotAMemberOfTheFamily extends RuntimeException {
|
|
||||||
|
|
||||||
public NotAMemberOfTheFamily(String message) {
|
|
||||||
super(message);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
@@ -822,9 +822,9 @@
|
|||||||
"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
|
"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
|
||||||
},
|
},
|
||||||
"node_modules/axios": {
|
"node_modules/axios": {
|
||||||
"version": "1.6.2",
|
"version": "1.5.1",
|
||||||
"resolved": "https://registry.npmjs.org/axios/-/axios-1.6.2.tgz",
|
"resolved": "https://registry.npmjs.org/axios/-/axios-1.5.1.tgz",
|
||||||
"integrity": "sha512-7i24Ri4pmDRfJTR7LDBhsOTtcm+9kjX5WiY1X3wIisx6G9So3pfMkEiU7emUBe46oceVImccTEM3k6C5dbVW8A==",
|
"integrity": "sha512-Q28iYCWzNHjAm+yEAot5QaAMxhMghWLFVf7rRdwhUI+c2jix2DUXjAHXVi+s1ibs3mjPO/cCgbA++3BjD0vP/A==",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"follow-redirects": "^1.15.0",
|
"follow-redirects": "^1.15.0",
|
||||||
"form-data": "^4.0.0",
|
"form-data": "^4.0.0",
|
||||||
|
|||||||
@@ -2,8 +2,7 @@
|
|||||||
"name": "expensetracker",
|
"name": "expensetracker",
|
||||||
"version": "0.0.1",
|
"version": "0.0.1",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "vite dev --host",
|
"dev": "vite dev",
|
||||||
"devs": "vite dev --host --https",
|
|
||||||
"build": "vite build",
|
"build": "vite build",
|
||||||
"preview": "vite preview",
|
"preview": "vite preview",
|
||||||
"lint": "prettier --plugin-search-dir . --check . && eslint .",
|
"lint": "prettier --plugin-search-dir . --check . && eslint .",
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<link rel="icon" href="/favicon.png" />
|
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
||||||
<meta name="viewport" content="width=device-width" />
|
<meta name="viewport" content="width=device-width" />
|
||||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||||
<style>
|
<style>
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 28 KiB |
@@ -1,8 +0,0 @@
|
|||||||
<script>
|
|
||||||
import { onMount } from "svelte";
|
|
||||||
|
|
||||||
onMount(() => {
|
|
||||||
window.location.href = '/auth/login';
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
@@ -22,13 +22,11 @@
|
|||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const response = await axios.post('https://trackio.online:8081/api/v1/auth/authenticate', {
|
const response = await axios.post('http://localhost:8081/api/v1/auth/authenticate', {
|
||||||
email: username,
|
email: username,
|
||||||
password: password,
|
password: password,
|
||||||
});
|
});
|
||||||
|
|
||||||
console.log(response.data)
|
|
||||||
|
|
||||||
const { access_token, refresh_token } = response.data;
|
const { access_token, refresh_token } = response.data;
|
||||||
|
|
||||||
setCookie('access_token', access_token);
|
setCookie('access_token', access_token);
|
||||||
@@ -62,10 +60,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<svelte:head>
|
|
||||||
<link rel="icon" type="image/x-icon" href="../favicon.png" />
|
|
||||||
<title>Login into Track.IO</title>
|
|
||||||
</svelte:head>
|
|
||||||
|
|
||||||
<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');
|
||||||
|
|||||||
@@ -36,7 +36,7 @@
|
|||||||
|
|
||||||
console.log(data)
|
console.log(data)
|
||||||
|
|
||||||
const response = await axios.post('https://trackio.online:8081/api/v1/auth/register', data);
|
const response = await axios.post('http://localhost:8081/api/v1/auth/register', data);
|
||||||
|
|
||||||
const { access_token, refresh_token } = response.data;
|
const { access_token, refresh_token } = response.data;
|
||||||
|
|
||||||
@@ -78,12 +78,6 @@
|
|||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<svelte:head>
|
|
||||||
<link rel="icon" type="image/x-icon" href="../favicon.png" />
|
|
||||||
<title>Register into Track.IO</title>
|
|
||||||
</svelte:head>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="animated bounceInDown">
|
<div class="animated bounceInDown">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
{#if isErrorVisible}
|
{#if isErrorVisible}
|
||||||
|
|||||||
@@ -3,37 +3,15 @@
|
|||||||
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";
|
import {globalStyles} from "./styles.js";
|
||||||
import StickyMenu from "./menu/StickyMenu.svelte";
|
|
||||||
import {onMount} from "svelte";
|
|
||||||
|
|
||||||
function handleTabClick(tab) {
|
function handleTabClick(tab) {
|
||||||
selectedTab.set(tab);
|
selectedTab.set(tab);
|
||||||
}
|
}
|
||||||
|
|
||||||
let screenWidth;
|
|
||||||
|
|
||||||
onMount(() => {
|
|
||||||
screenWidth = window.innerWidth;
|
|
||||||
const handleResize = () => {
|
|
||||||
console.log(screenWidth);
|
|
||||||
screenWidth = window.innerWidth;
|
|
||||||
};
|
|
||||||
|
|
||||||
window.addEventListener('resize', handleResize);
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
window.removeEventListener('resize', handleResize);
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div id="wrapper" style="background-color: {$globalStyles.mainColor}">
|
<div id="wrapper" style="background-color: {$globalStyles.mainColor}">
|
||||||
{#if screenWidth < 900}
|
|
||||||
<StickyMenu onTabClick={handleTabClick} />
|
|
||||||
{:else}
|
|
||||||
<SideMenu onTabClick={handleTabClick} />
|
<SideMenu onTabClick={handleTabClick} />
|
||||||
{/if}
|
|
||||||
<Dashboard />
|
<Dashboard />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -41,18 +19,10 @@
|
|||||||
@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 {
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
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);
|
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (max-width: 900px) {
|
|
||||||
#wrapper {
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
@@ -1 +0,0 @@
|
|||||||
<h1>ADMIN PANEL</h1>
|
|
||||||
@@ -4,17 +4,7 @@
|
|||||||
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 Settings from "./Settings.svelte";
|
||||||
import {
|
import { incomeData, expenseData, incomeTypes, expenseTypes, selectedTab } from "../stores.js";
|
||||||
incomeData,
|
|
||||||
expenseData,
|
|
||||||
incomeTypes,
|
|
||||||
expenseTypes,
|
|
||||||
selectedTab,
|
|
||||||
monthIncome,
|
|
||||||
monthExpense,
|
|
||||||
tempExpense,
|
|
||||||
tempIncome
|
|
||||||
} from "../stores.js";
|
|
||||||
import {globalStyles} from "../styles.js";
|
import {globalStyles} from "../styles.js";
|
||||||
|
|
||||||
let componentStyles;
|
let componentStyles;
|
||||||
@@ -25,9 +15,6 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
import axios from "axios";
|
import axios from "axios";
|
||||||
import Statistics from "./Statistics.svelte";
|
|
||||||
import AdminPanel from "./AdminPanel.svelte";
|
|
||||||
import Profile from "./Profile.svelte";
|
|
||||||
|
|
||||||
onMount(async () => {
|
onMount(async () => {
|
||||||
const token = getCookie('access_token');
|
const token = getCookie('access_token');
|
||||||
@@ -44,39 +31,23 @@
|
|||||||
};
|
};
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const currentDate = new Date();
|
|
||||||
const currentMonth = currentDate.getMonth() + 1;
|
|
||||||
const [incomeResponse, expenseResponse, incomeTypesResponse, expenseTypesResponse] = await Promise.all([
|
const [incomeResponse, expenseResponse, incomeTypesResponse, expenseTypesResponse] = await Promise.all([
|
||||||
axios.get('https://trackio.online:8081/incomes/personal-incomes?month=' + currentMonth , config),
|
axios.get('http://localhost:8081/incomes/personal-incomes', config),
|
||||||
axios.get('https://trackio.online:8081/expenses/personal-expenses?month=' + currentMonth, config),
|
axios.get('http://localhost:8081/expenses/personal-expenses', config),
|
||||||
axios.get('https://trackio.online:8081/incomes/categories', config),
|
axios.get('http://localhost:8081/incomes/categories', config),
|
||||||
axios.get('https://trackio.online:8081/expenses/categories', config)
|
axios.get('http://localhost:8081/expenses/categories', config)
|
||||||
]);
|
]);
|
||||||
|
|
||||||
console.log("Data", incomeResponse.data);
|
|
||||||
|
|
||||||
incomeData.set(incomeResponse.data);
|
incomeData.set(incomeResponse.data);
|
||||||
expenseData.set(expenseResponse.data);
|
expenseData.set(expenseResponse.data);
|
||||||
|
|
||||||
incomeTypes.set(incomeTypesResponse.data);
|
incomeTypes.set(incomeTypesResponse.data);
|
||||||
expenseTypes.set(expenseTypesResponse.data);
|
expenseTypes.set(expenseTypesResponse.data);
|
||||||
|
|
||||||
tempExpense.set(expenseResponse.data);
|
|
||||||
tempIncome.set(incomeResponse.data);
|
|
||||||
|
|
||||||
monthIncome.set(incomeResponse.data);
|
|
||||||
monthExpense.set(expenseResponse.data);
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Error:', error);
|
console.error('Error:', error);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<svelte:head>
|
|
||||||
<link rel="icon" type="image/x-icon" href="../favicon.png" />
|
|
||||||
<title>Track.IO</title>
|
|
||||||
</svelte:head>
|
|
||||||
|
|
||||||
<div id="dashboard" style="background-color: {componentStyles.dashColor}; color: {componentStyles.color}">
|
<div id="dashboard" style="background-color: {componentStyles.dashColor}; color: {componentStyles.color}">
|
||||||
{#if $selectedTab === 'expenses'}
|
{#if $selectedTab === 'expenses'}
|
||||||
<ExpenseDashboard />
|
<ExpenseDashboard />
|
||||||
@@ -84,21 +55,15 @@
|
|||||||
<IncomeDashboard />
|
<IncomeDashboard />
|
||||||
{:else if $selectedTab === 'settings'}
|
{:else if $selectedTab === 'settings'}
|
||||||
<Settings />
|
<Settings />
|
||||||
{:else if $selectedTab === 'statistics'}
|
|
||||||
<Statistics />
|
|
||||||
{:else if $selectedTab === 'admin'}
|
|
||||||
<AdminPanel />
|
|
||||||
{:else if $selectedTab === 'profile'}
|
|
||||||
<Profile />
|
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|
||||||
#dashboard {
|
#dashboard {
|
||||||
font-family: 'Source Sans Pro', sans-serif;
|
font-family: 'Source Sans Pro', sans-serif;
|
||||||
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;
|
||||||
@@ -107,12 +72,4 @@
|
|||||||
justify-content: stretch;
|
justify-content: stretch;
|
||||||
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
|
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (max-width: 900px) {
|
|
||||||
#dashboard {
|
|
||||||
margin: 0;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,59 +1,9 @@
|
|||||||
<script>
|
<script>
|
||||||
import DashHeader from "./expenses/other/DashHeader.svelte";
|
import DashHeader from "./expenses/other/DashHeader.svelte";
|
||||||
|
import DataMenu from "./expenses/other/DataMenu.svelte";
|
||||||
import QuickInfobar from "./expenses/other/QuickInfobar.svelte";
|
import QuickInfobar from "./expenses/other/QuickInfobar.svelte";
|
||||||
import Expenses from "./expenses/infolists/Expenses.svelte";
|
|
||||||
import Graph3 from "./expenses/graphs/Graph3.svelte";
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="expenseContainer">
|
<DashHeader />
|
||||||
<div class="dataHalf">
|
<QuickInfobar />
|
||||||
<div>
|
<DataMenu />
|
||||||
<DashHeader />
|
|
||||||
<QuickInfobar />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="graphs">
|
|
||||||
<Graph3 />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<Expenses />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
@media only screen and (max-width: 900px) {
|
|
||||||
.expenseContainer {
|
|
||||||
flex-wrap: wrap;
|
|
||||||
flex: 1 1 auto;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.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%;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dataHalf {
|
|
||||||
display:flex;
|
|
||||||
min-height: 0;
|
|
||||||
min-width: 0;
|
|
||||||
flex-direction: column;
|
|
||||||
flex: 1 1 auto;
|
|
||||||
background-color: #212942;
|
|
||||||
padding: 10px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
|
|||||||
@@ -1 +0,0 @@
|
|||||||
<h1>PROFILE</h1>
|
|
||||||
@@ -2,7 +2,6 @@
|
|||||||
import {globalStyles} from "../styles.js";
|
import {globalStyles} from "../styles.js";
|
||||||
import {themeDark} from "../styles.js";
|
import {themeDark} from "../styles.js";
|
||||||
import {themeDefault} from "../styles.js";
|
import {themeDefault} from "../styles.js";
|
||||||
import {themeColorful} from "../styles.js";
|
|
||||||
|
|
||||||
function theme_dark() {
|
function theme_dark() {
|
||||||
$globalStyles = themeDark;
|
$globalStyles = themeDark;
|
||||||
@@ -11,34 +10,19 @@
|
|||||||
function theme_default() {
|
function theme_default() {
|
||||||
$globalStyles = themeDefault;
|
$globalStyles = themeDefault;
|
||||||
}
|
}
|
||||||
|
|
||||||
function theme_colorful() {
|
|
||||||
$globalStyles = themeColorful;
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div style="color: {$globalStyles.dashTextColor}">
|
<div>
|
||||||
<h1>Settings</h1>
|
<h1>Settings</h1>
|
||||||
<div id="buttonContainer">
|
|
||||||
<div class="settingEntry">
|
|
||||||
<span><svg style="fill: yellow" xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM160 256a96 96 0 1 1 192 0 96 96 0 1 1 -192 0zm224 0a128 128 0 1 0 -256 0 128 128 0 1 0 256 0z"/></svg></span>
|
|
||||||
<h3 class="settingName">Light Mode</h3>
|
|
||||||
<button class="button-32" on:click={() => theme_default()}>Select</button>
|
<button class="button-32" on:click={() => theme_default()}>Select</button>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="settingEntry">
|
|
||||||
<span><svg style="fill:darkblue" xmlns="http://www.w3.org/2000/svg" height="16" width="12" viewBox="0 0 384 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"/></svg></span>
|
|
||||||
<h3 class="settingName">Dark Mode</h3>
|
|
||||||
<button class="button-32" on:click={() => theme_dark()}>Select</button>
|
<button class="button-32" on:click={() => theme_dark()}>Select</button>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="settingEntry">
|
<button class="button-32" on:click={() => theme_dark()}>Select</button>
|
||||||
<span><svg style="fill:pink" xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M160 0a48 48 0 1 1 0 96 48 48 0 1 1 0-96zM88 384H70.2c-10.9 0-18.6-10.7-15.2-21.1L93.3 248.1 59.4 304.5c-9.1 15.1-28.8 20-43.9 10.9s-20-28.8-10.9-43.9l53.6-89.2c20.3-33.7 56.7-54.3 96-54.3h11.6c39.3 0 75.7 20.6 96 54.3l53.6 89.2c9.1 15.1 4.2 34.8-10.9 43.9s-34.8 4.2-43.9-10.9l-33.9-56.3L265 362.9c3.5 10.4-4.3 21.1-15.2 21.1H232v96c0 17.7-14.3 32-32 32s-32-14.3-32-32V384H152v96c0 17.7-14.3 32-32 32s-32-14.3-32-32V384z"/></svg></span>
|
|
||||||
<h3 class="settingName">Pinky Theme</h3>
|
|
||||||
<button class="button-32" on:click={() => theme_colorful()}>Select</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
<button class="button-32" on:click={() => theme_dark()}>Select</button>
|
||||||
|
|
||||||
|
<button class="button-32" on:click={() => theme_dark()}>Select</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
@@ -72,19 +56,4 @@
|
|||||||
-webkit-filter: saturate(0.2) opacity(0.5);
|
-webkit-filter: saturate(0.2) opacity(0.5);
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
}
|
}
|
||||||
|
|
||||||
#buttonContainer {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.settingEntry {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.settingName {
|
|
||||||
margin: 20px;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
@@ -1,2 +0,0 @@
|
|||||||
<h1>ACT LIKE THERE'S A NEURAL NETWORK HERE</h1>
|
|
||||||
<h1>IT'S REALLY IN THE WORKS THOUGH</h1>
|
|
||||||
@@ -1,7 +1,7 @@
|
|||||||
<script>
|
<script>
|
||||||
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";
|
import {globalStyles} from "../../../styles.js";
|
||||||
|
|
||||||
let ctx;
|
let ctx;
|
||||||
@@ -10,35 +10,26 @@
|
|||||||
|
|
||||||
function groupAndSumByCategory() {
|
function groupAndSumByCategory() {
|
||||||
const groupedData = new Map();
|
const groupedData = new Map();
|
||||||
|
console.log($expenseData)
|
||||||
$expenseData.forEach(expense => {
|
$expenseData.forEach(expense => {
|
||||||
const category = expense.expenseCategory.name;
|
const category = expense.expenseCategory.name;
|
||||||
if (groupedData.has(category)) {
|
if (groupedData.has(category)) {
|
||||||
groupedData.set(category, groupedData.get(category) + parseInt(expense.amount));
|
groupedData.set(category, groupedData.get(category) + parseInt(expense.amount));
|
||||||
} else {
|
} else {
|
||||||
groupedData.set(category, parseInt(expense.amount));
|
groupedData.set(category, expense.amount);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
return groupedData;
|
||||||
return new Map([...groupedData.entries()].sort());
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function createGraph() {
|
function createGraph() {
|
||||||
try {
|
try {
|
||||||
const groupedExpenseData = groupAndSumByCategory();
|
const groupedExpenseData = groupAndSumByCategory();
|
||||||
console.log("============= here start")
|
|
||||||
console.log(groupedExpenseData);
|
|
||||||
|
|
||||||
const chartLabels = [];
|
const chartLabels = Array.from(groupedExpenseData.keys());
|
||||||
const chartValues = [];
|
const chartValues = Array.from(groupedExpenseData.values());
|
||||||
|
|
||||||
for (const [label, value] of groupedExpenseData.entries()) {
|
|
||||||
chartLabels.push(label);
|
|
||||||
chartValues.push(value);
|
|
||||||
}
|
|
||||||
console.log(chartLabels)
|
|
||||||
console.log(chartValues)
|
|
||||||
console.log("============= here end")
|
|
||||||
ctx = chartCanvas.getContext('2d');
|
ctx = chartCanvas.getContext('2d');
|
||||||
|
|
||||||
if (!chart) {
|
if (!chart) {
|
||||||
@@ -59,17 +50,7 @@
|
|||||||
},
|
},
|
||||||
options: {
|
options: {
|
||||||
responsive: true,
|
responsive: true,
|
||||||
maintainAspectRatio: false,
|
maintainAspectRatio: false
|
||||||
plugins: {
|
|
||||||
legend: {
|
|
||||||
labels: {
|
|
||||||
font: {
|
|
||||||
weight: 'bold'
|
|
||||||
},
|
|
||||||
color: '#fff'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
|
|||||||
@@ -1,44 +1,49 @@
|
|||||||
<script>
|
<script>
|
||||||
import Chart from 'chart.js/auto';
|
import Chart from 'chart.js/auto';
|
||||||
import { onMount } from 'svelte';
|
import { onMount } from 'svelte';
|
||||||
import {monthIncome, monthExpense, isCategorizedExpense, categorizedExpense} from "../../../stores.js";
|
import { incomeData, expenseData } from "../../../stores.js";
|
||||||
import { globalStyles } from "../../../styles.js";
|
import {globalStyles} from "../../../styles.js";
|
||||||
|
|
||||||
let ctx;
|
let ctx;
|
||||||
let chartCanvas;
|
let chartCanvas;
|
||||||
let chart = null;
|
let chart = null;
|
||||||
|
|
||||||
let generatedData;
|
|
||||||
|
|
||||||
function createGraph() {
|
function createGraph() {
|
||||||
try {
|
try {
|
||||||
// const allDates = [...new Set([...$monthIncome, ...$monthExpense].map(item => item.date))];
|
const totalIncomes = $incomeData.reduce((total, item) => total + item.amount, 0);
|
||||||
// const uniqueDates = allDates.sort((a, b) => new Date(a) - new Date(b));
|
const totalExpenses = $expenseData.reduce((total, item) => total + item.amount, 0);
|
||||||
//
|
|
||||||
// const incomeValues = uniqueDates.map(date => $monthIncome.filter(item => item.date === date).reduce((total, item) => total + item.amount, 0));
|
const chartLabels = ['Incomes', 'Expenses'];
|
||||||
// const expenseValues = uniqueDates.map(date => $monthExpense.filter(item => item.date === date).reduce((total, item) => total + item.amount, 0));
|
const chartValues = [totalIncomes, totalExpenses];
|
||||||
|
|
||||||
if (chartCanvas.getContext('2d') !== undefined) {
|
if (chartCanvas.getContext('2d') !== undefined) {
|
||||||
ctx = chartCanvas.getContext('2d');
|
ctx = chartCanvas.getContext('2d');
|
||||||
if (!chart) {
|
if (!chart) {
|
||||||
chart = new Chart(ctx, {
|
chart = new Chart(ctx, {
|
||||||
type: 'line',
|
type: 'pie',
|
||||||
data: generatedData,
|
data: {
|
||||||
|
labels: chartLabels,
|
||||||
|
datasets: [{
|
||||||
|
data: chartValues,
|
||||||
|
backgroundColor: [
|
||||||
|
'rgb(243, 188, 0)',
|
||||||
|
'rgb(0, 117, 164)'
|
||||||
|
],
|
||||||
|
}]
|
||||||
|
},
|
||||||
options: {
|
options: {
|
||||||
responsive: true,
|
responsive: true,
|
||||||
maintainAspectRatio: false
|
maintainAspectRatio: false
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
if ($isCategorizedExpense === true) {
|
const totalIncomesUpd = $incomeData.reduce((total, item) => total + parseInt(item.amount), 0);
|
||||||
chart.data.labels = generatedData.labels;
|
const totalExpensesUpd = $expenseData.reduce((total, item) => total + parseInt(item.amount), 0);
|
||||||
chart.data.datasets = generatedData.datasets;
|
|
||||||
} else {
|
|
||||||
generatedData.datasets = generatedData.datasets.filter(dataset => dataset.label !== "Category");
|
|
||||||
chart.data.labels = generatedData.labels;
|
|
||||||
chart.data.datasets = generatedData.datasets;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
const chartLabels = ['Incomes', 'Expenses'];
|
||||||
|
const chartValues = [totalIncomesUpd, totalExpensesUpd];
|
||||||
|
chart.data.labels = chartLabels;
|
||||||
|
chart.data.datasets[0].data = chartValues;
|
||||||
chart.update();
|
chart.update();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -48,55 +53,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
$: {
|
$: {
|
||||||
if (isCategorizedExpense) {
|
if ($incomeData || $expenseData) {
|
||||||
const allDates = [...new Set([...$monthExpense, ...$categorizedExpense].map(item => item.date))];
|
|
||||||
const uniqueDates = allDates.sort((a, b) => new Date(a) - new Date(b));
|
|
||||||
|
|
||||||
const categorizedValues = uniqueDates.map(date => $categorizedExpense.filter(item => item.date === date).reduce((total, item) => total + item.amount, 0));
|
|
||||||
const expenseValues = uniqueDates.map(date => $monthExpense.filter(item => item.date === date).reduce((total, item) => total + item.amount, 0));
|
|
||||||
|
|
||||||
generatedData = {
|
|
||||||
labels: uniqueDates,
|
|
||||||
datasets: [
|
|
||||||
{
|
|
||||||
label: "Category",
|
|
||||||
backgroundColor: "rgba(21, 194, 58, 0.4)",
|
|
||||||
borderColor: "rgba(21, 194, 58, 1)",
|
|
||||||
data: categorizedValues,
|
|
||||||
tension: 0.2,
|
|
||||||
fill: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "Expense",
|
|
||||||
backgroundColor: "rgba(194, 21, 96, 0.4)",
|
|
||||||
borderColor: "rgba(194, 21, 96, 1)",
|
|
||||||
data: expenseValues,
|
|
||||||
tension: 0.4,
|
|
||||||
fill: true
|
|
||||||
}
|
|
||||||
]
|
|
||||||
};
|
|
||||||
} else {
|
|
||||||
const allDates = [...new Set([...$monthExpense].map(item => item.date))];
|
|
||||||
const uniqueDates = allDates.sort((a, b) => new Date(a) - new Date(b));
|
|
||||||
|
|
||||||
const expenseValues = uniqueDates.map(date => $monthExpense.filter(item => item.date === date).reduce((total, item) => total + item.amount, 0));
|
|
||||||
|
|
||||||
generatedData = {
|
|
||||||
labels: uniqueDates,
|
|
||||||
datasets:
|
|
||||||
{
|
|
||||||
label: "Expense",
|
|
||||||
backgroundColor: "rgba(194, 21, 96, 0.4)",
|
|
||||||
borderColor: "rgba(194, 21, 96, 1)",
|
|
||||||
data: expenseValues,
|
|
||||||
tension: 0.4,
|
|
||||||
fill: true
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
if ($monthIncome || $monthExpense || $isCategorizedExpense || $categorizedExpense) {
|
|
||||||
createGraph();
|
createGraph();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -107,22 +64,21 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div id="chart" style="background-color: {$globalStyles.mainColor}">
|
<div id="chart" style="background-color: {$globalStyles.mainColor}">
|
||||||
<canvas id="canvas" bind:this={chartCanvas}></canvas>
|
<canvas bind:this={chartCanvas}></canvas>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
#chart {
|
#chart {
|
||||||
min-width: 0;
|
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
|
||||||
min-height:0;
|
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
|
||||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
|
flex: 1;
|
||||||
transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
|
|
||||||
display: flex;
|
|
||||||
flex: 1 1 auto;
|
|
||||||
border-radius: 0 0 10px 10px;
|
border-radius: 0 0 10px 10px;
|
||||||
margin: 0 0 10px 10px;
|
margin: 0 0 10px 10px;
|
||||||
|
min-width: 0;
|
||||||
|
min-height:0;
|
||||||
}
|
}
|
||||||
|
|
||||||
#chart:hover {
|
#chart: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>
|
||||||
|
|||||||
@@ -1,30 +1,36 @@
|
|||||||
<script>
|
<script>
|
||||||
|
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, dateText} from "../../../stores.js";
|
import {expenseTypes, expenseData} from "../../../stores.js";
|
||||||
import { slide } from 'svelte/transition';
|
|
||||||
|
|
||||||
let showModal = false;
|
|
||||||
|
let showModal;
|
||||||
let amount = '';
|
let amount = '';
|
||||||
let newData;
|
let newData;
|
||||||
|
|
||||||
const selectedExpenseId = writable('');
|
const selectedExpenseId = writable('');
|
||||||
|
|
||||||
function addNewExpense(expid, id, amount) {
|
function addNewExpense(id, amount) {
|
||||||
const today = new Date().toISOString().split('T')[0];
|
const today = new Date().toISOString().split('T')[0];
|
||||||
const expenseCategory = $expenseTypes.find(incomeType => incomeType.id === id);
|
const expenseCategory = $expenseTypes.find(incomeType => incomeType.id === id);
|
||||||
|
|
||||||
if (expenseCategory) {
|
if (expenseCategory) {
|
||||||
const newExpense = {
|
const newIncome = {
|
||||||
expenseId: expid,
|
incomeId: 0,
|
||||||
|
userDTO: {
|
||||||
|
name: "Dummy",
|
||||||
|
surname: "User",
|
||||||
|
username: "dummyuser"
|
||||||
|
},
|
||||||
expenseCategory: expenseCategory,
|
expenseCategory: expenseCategory,
|
||||||
date: today,
|
date: today,
|
||||||
amount: parseInt(amount)
|
amount: parseInt(amount)
|
||||||
};
|
};
|
||||||
|
|
||||||
newData = $expenseData;
|
newData = $expenseData;
|
||||||
newData.push(newExpense);
|
newData.push(newIncome);
|
||||||
$expenseData = newData;
|
$expenseData = newData;
|
||||||
} else {
|
} else {
|
||||||
console.error('Expense category not found for id:', id);
|
console.error('Expense category not found for id:', id);
|
||||||
@@ -32,17 +38,18 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
const createExpense = async () => {
|
const createExpense = async () => {
|
||||||
showModal = false;
|
|
||||||
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: parseInt(amount),
|
amount: parseInt(amount),
|
||||||
};
|
};
|
||||||
|
|
||||||
|
addNewExpense(selectedExpense.id, parseInt(amount));
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const token = getCookie('access_token');
|
const token = getCookie('access_token');
|
||||||
|
|
||||||
const response = await axios.post('https://trackio.online:8081/expenses', data, {
|
const response = await axios.post('http://localhost:8081/expenses', data, {
|
||||||
headers: {
|
headers: {
|
||||||
'Authorization': `Bearer ${token}`,
|
'Authorization': `Bearer ${token}`,
|
||||||
'Content-Type': 'application/json',
|
'Content-Type': 'application/json',
|
||||||
@@ -50,7 +57,7 @@
|
|||||||
});
|
});
|
||||||
|
|
||||||
if (response.status === 201) {
|
if (response.status === 201) {
|
||||||
addNewExpense(response.data.expenseId, selectedExpense.id, parseInt(amount));
|
//console.log("cool");
|
||||||
} else {
|
} else {
|
||||||
console.error('Error:', response.status);
|
console.error('Error:', response.status);
|
||||||
}
|
}
|
||||||
@@ -58,21 +65,17 @@
|
|||||||
console.error('Error:', error);
|
console.error('Error:', error);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
function toggleModal() {
|
|
||||||
showModal = !showModal;
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div id="exp">
|
<div id="exp">
|
||||||
<div id="optionField">
|
<div id="optionField">
|
||||||
<h2>Expenses: {$dateText}</h2>
|
<h2>Expenses</h2>
|
||||||
<div id="openModal" class="plus-button" role="button" tabindex="0" on:click={toggleModal} on:keydown={() => console.log("keydown")}>
|
<div id="openModal" class="plus-button" role="button" tabindex="0" on:click={() => (showModal = true)} on:keydown={() => console.log("keydown")}>
|
||||||
+
|
+
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{#if showModal}
|
<Modal bind:showModal>
|
||||||
<div class="expense-form" transition:slide>
|
<div class="expense-form">
|
||||||
<h3>Expense Details</h3>
|
<h3>Expense Details</h3>
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label for="amount">Amount:</label>
|
<label for="amount">Amount:</label>
|
||||||
@@ -90,13 +93,9 @@
|
|||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div style="display: flex; justify-content: space-around">
|
<button class="btn btn-primary" on:click={createExpense}>Submit</button>
|
||||||
<button class="btn btn-primary" on:click={createExpense}>SUBMIT</button>
|
|
||||||
<button class="btn btn-primary" on:click={() => showModal = false}>CANCEL</button>
|
|
||||||
</div>
|
</div>
|
||||||
|
</Modal>
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
@@ -106,32 +105,6 @@
|
|||||||
text-align: center;
|
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 {
|
#optionField {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -159,26 +132,7 @@
|
|||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
max-width: 400px;
|
max-width: 400px;
|
||||||
color: black;
|
margin: 0 auto;
|
||||||
}
|
|
||||||
|
|
||||||
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 {
|
h3 {
|
||||||
|
|||||||
@@ -1,349 +1,18 @@
|
|||||||
<script>
|
<script>
|
||||||
import ContentExpense from "./ContentExpense.svelte";
|
import ContentExpense from "./ContentExpense.svelte";
|
||||||
import {
|
import { expenseData } from "../../../stores.js";
|
||||||
dateText,
|
import { globalStyles } from "../../../styles.js";
|
||||||
expenseData,
|
|
||||||
expenseTypes,
|
|
||||||
incomeData,
|
|
||||||
tempExpense,
|
|
||||||
tempIncome,
|
|
||||||
monthIncome,
|
|
||||||
monthExpense,
|
|
||||||
isCategorizedExpense,
|
|
||||||
categorizedExpense
|
|
||||||
} from "../../../stores.js";
|
|
||||||
import {globalStyles} from "../../../styles.js";
|
|
||||||
import {onMount} from "svelte";
|
|
||||||
import axios from "axios";
|
|
||||||
import {getCookie} from "svelte-cookie";
|
|
||||||
import {slide} from 'svelte/transition'
|
|
||||||
import EditEntry from "../util/EditEntry.svelte";
|
|
||||||
|
|
||||||
const textToIcon = {
|
|
||||||
'Groceries': "<svg fill=\"#299146\" xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"18\" viewBox=\"0 0 576 512\"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d=\"M0 24C0 10.7 10.7 0 24 0H69.5c22 0 41.5 12.8 50.6 32h411c26.3 0 45.5 25 38.6 50.4l-41 152.3c-8.5 31.4-37 53.3-69.5 53.3H170.7l5.4 28.5c2.2 11.3 12.1 19.5 23.6 19.5H488c13.3 0 24 10.7 24 24s-10.7 24-24 24H199.7c-34.6 0-64.3-24.6-70.7-58.5L77.4 54.5c-.7-3.8-4-6.5-7.9-6.5H24C10.7 48 0 37.3 0 24zM128 464a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zm336-48a48 48 0 1 1 0 96 48 48 0 1 1 0-96z\"/></svg>",
|
|
||||||
'Utilities': "<svg fill=\"#8f0611\" xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"16\" viewBox=\"0 0 512 512\"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d=\"M176 88v40H336V88c0-4.4-3.6-8-8-8H184c-4.4 0-8 3.6-8 8zm-48 40V88c0-30.9 25.1-56 56-56H328c30.9 0 56 25.1 56 56v40h28.1c12.7 0 24.9 5.1 33.9 14.1l51.9 51.9c9 9 14.1 21.2 14.1 33.9V304H384V288c0-17.7-14.3-32-32-32s-32 14.3-32 32v16H192V288c0-17.7-14.3-32-32-32s-32 14.3-32 32v16H0V227.9c0-12.7 5.1-24.9 14.1-33.9l51.9-51.9c9-9 21.2-14.1 33.9-14.1H128zM0 416V336H128v16c0 17.7 14.3 32 32 32s32-14.3 32-32V336H320v16c0 17.7 14.3 32 32 32s32-14.3 32-32V336H512v80c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64z\"/></svg>",
|
|
||||||
'Rent': "<svg fill=\"#386907\" xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"18\" viewBox=\"0 0 576 512\"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d=\"M575.8 255.5c0 18-15 32.1-32 32.1h-32l.7 160.2c0 2.7-.2 5.4-.5 8.1V472c0 22.1-17.9 40-40 40H456c-1.1 0-2.2 0-3.3-.1c-1.4 .1-2.8 .1-4.2 .1H416 392c-22.1 0-40-17.9-40-40V448 384c0-17.7-14.3-32-32-32H256c-17.7 0-32 14.3-32 32v64 24c0 22.1-17.9 40-40 40H160 128.1c-1.5 0-3-.1-4.5-.2c-1.2 .1-2.4 .2-3.6 .2H104c-22.1 0-40-17.9-40-40V360c0-.9 0-1.9 .1-2.8V287.6H32c-18 0-32-14-32-32.1c0-9 3-17 10-24L266.4 8c7-7 15-8 22-8s15 2 21 7L564.8 231.5c8 7 12 15 11 24z\"/></svg>",
|
|
||||||
'Transportation': "<svg fill=\"#027874\" xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"16\" viewBox=\"0 0 512 512\"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d=\"M135.2 117.4L109.1 192H402.9l-26.1-74.6C372.3 104.6 360.2 96 346.6 96H165.4c-13.6 0-25.7 8.6-30.2 21.4zM39.6 196.8L74.8 96.3C88.3 57.8 124.6 32 165.4 32H346.6c40.8 0 77.1 25.8 90.6 64.3l35.2 100.5c23.2 9.6 39.6 32.5 39.6 59.2V400v48c0 17.7-14.3 32-32 32H448c-17.7 0-32-14.3-32-32V400H96v48c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32V400 256c0-26.7 16.4-49.6 39.6-59.2zM128 288a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zm288 32a32 32 0 1 0 0-64 32 32 0 1 0 0 64z\"/></svg>",
|
|
||||||
'Education': "<svg fill=\"#091094\" xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"20\" viewBox=\"0 0 640 512\"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d=\"M337.8 5.4C327-1.8 313-1.8 302.2 5.4L166.3 96H48C21.5 96 0 117.5 0 144V464c0 26.5 21.5 48 48 48H256V416c0-35.3 28.7-64 64-64s64 28.7 64 64v96H592c26.5 0 48-21.5 48-48V144c0-26.5-21.5-48-48-48H473.7L337.8 5.4zM96 192h32c8.8 0 16 7.2 16 16v64c0 8.8-7.2 16-16 16H96c-8.8 0-16-7.2-16-16V208c0-8.8 7.2-16 16-16zm400 16c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16v64c0 8.8-7.2 16-16 16H512c-8.8 0-16-7.2-16-16V208zM96 320h32c8.8 0 16 7.2 16 16v64c0 8.8-7.2 16-16 16H96c-8.8 0-16-7.2-16-16V336c0-8.8 7.2-16 16-16zm400 16c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16v64c0 8.8-7.2 16-16 16H512c-8.8 0-16-7.2-16-16V336zM232 176a88 88 0 1 1 176 0 88 88 0 1 1 -176 0zm88-48c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16s-7.2-16-16-16H336V144c0-8.8-7.2-16-16-16z\"/></svg>",
|
|
||||||
'Restaurants & Cafes': "<svg fill=\"#961115\" xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"16\" viewBox=\"0 0 512 512\"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d=\"M0 192c0-35.3 28.7-64 64-64c.5 0 1.1 0 1.6 0C73 91.5 105.3 64 144 64c15 0 29 4.1 40.9 11.2C198.2 49.6 225.1 32 256 32s57.8 17.6 71.1 43.2C339 68.1 353 64 368 64c38.7 0 71 27.5 78.4 64c.5 0 1.1 0 1.6 0c35.3 0 64 28.7 64 64c0 11.7-3.1 22.6-8.6 32H8.6C3.1 214.6 0 203.7 0 192zm0 91.4C0 268.3 12.3 256 27.4 256H484.6c15.1 0 27.4 12.3 27.4 27.4c0 70.5-44.4 130.7-106.7 154.1L403.5 452c-2 16-15.6 28-31.8 28H140.2c-16.1 0-29.8-12-31.8-28l-1.8-14.4C44.4 414.1 0 353.9 0 283.4z\"/></svg>",
|
|
||||||
'Home Maintenance': "<svg fill=\"#386907\" xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"18\" viewBox=\"0 0 576 512\"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d=\"M575.8 255.5c0 18-15 32.1-32 32.1h-32l.7 160.2c0 2.7-.2 5.4-.5 8.1V472c0 22.1-17.9 40-40 40H456c-1.1 0-2.2 0-3.3-.1c-1.4 .1-2.8 .1-4.2 .1H416 392c-22.1 0-40-17.9-40-40V448 384c0-17.7-14.3-32-32-32H256c-17.7 0-32 14.3-32 32v64 24c0 22.1-17.9 40-40 40H160 128.1c-1.5 0-3-.1-4.5-.2c-1.2 .1-2.4 .2-3.6 .2H104c-22.1 0-40-17.9-40-40V360c0-.9 0-1.9 .1-2.8V287.6H32c-18 0-32-14-32-32.1c0-9 3-17 10-24L266.4 8c7-7 15-8 22-8s15 2 21 7L564.8 231.5c8 7 12 15 11 24z\"/></svg>",
|
|
||||||
'Transport': "<svg fill=\"#027874\" xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"16\" viewBox=\"0 0 512 512\"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d=\"M135.2 117.4L109.1 192H402.9l-26.1-74.6C372.3 104.6 360.2 96 346.6 96H165.4c-13.6 0-25.7 8.6-30.2 21.4zM39.6 196.8L74.8 96.3C88.3 57.8 124.6 32 165.4 32H346.6c40.8 0 77.1 25.8 90.6 64.3l35.2 100.5c23.2 9.6 39.6 32.5 39.6 59.2V400v48c0 17.7-14.3 32-32 32H448c-17.7 0-32-14.3-32-32V400H96v48c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32V400 256c0-26.7 16.4-49.6 39.6-59.2zM128 288a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zm288 32a32 32 0 1 0 0-64 32 32 0 1 0 0 64z\"/></svg>",
|
|
||||||
'Shopping': "<svg fill=\"#2b26ad\" xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"18\" viewBox=\"0 0 576 512\"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d=\"M0 24C0 10.7 10.7 0 24 0H69.5c22 0 41.5 12.8 50.6 32h411c26.3 0 45.5 25 38.6 50.4l-41 152.3c-8.5 31.4-37 53.3-69.5 53.3H170.7l5.4 28.5c2.2 11.3 12.1 19.5 23.6 19.5H488c13.3 0 24 10.7 24 24s-10.7 24-24 24H199.7c-34.6 0-64.3-24.6-70.7-58.5L77.4 54.5c-.7-3.8-4-6.5-7.9-6.5H24C10.7 48 0 37.3 0 24zM128 464a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zm336-48a48 48 0 1 1 0 96 48 48 0 1 1 0-96z\"/></svg>",
|
|
||||||
'Miscellaneous': "<svg fill=\"#299146\" xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"16\" viewBox=\"0 0 512 512\"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d=\"M403.8 34.4c12-5 25.7-2.2 34.9 6.9l64 64c6 6 9.4 14.1 9.4 22.6s-3.4 16.6-9.4 22.6l-64 64c-9.2 9.2-22.9 11.9-34.9 6.9s-19.8-16.6-19.8-29.6V160H352c-10.1 0-19.6 4.7-25.6 12.8L284 229.3 244 176l31.2-41.6C293.3 110.2 321.8 96 352 96h32V64c0-12.9 7.8-24.6 19.8-29.6zM164 282.7L204 336l-31.2 41.6C154.7 401.8 126.2 416 96 416H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H96c10.1 0 19.6-4.7 25.6-12.8L164 282.7zm274.6 188c-9.2 9.2-22.9 11.9-34.9 6.9s-19.8-16.6-19.8-29.6V416H352c-30.2 0-58.7-14.2-76.8-38.4L121.6 172.8c-6-8.1-15.5-12.8-25.6-12.8H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H96c30.2 0 58.7 14.2 76.8 38.4L326.4 339.2c6 8.1 15.5 12.8 25.6 12.8h32V320c0-12.9 7.8-24.6 19.8-29.6s25.7-2.2 34.9 6.9l64 64c6 6 9.4 14.1 9.4 22.6s-3.4 16.6-9.4 22.6l-64 64z\"/></svg>",
|
|
||||||
'Charity': "<svg fill=\"#961189\" xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"18\" viewBox=\"0 0 576 512\"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d=\"M163.9 136.9c-29.4-29.8-29.4-78.2 0-108s77-29.8 106.4 0l17.7 18 17.7-18c29.4-29.8 77-29.8 106.4 0s29.4 78.2 0 108L310.5 240.1c-6.2 6.3-14.3 9.4-22.5 9.4s-16.3-3.1-22.5-9.4L163.9 136.9zM568.2 336.3c13.1 17.8 9.3 42.8-8.5 55.9L433.1 485.5c-23.4 17.2-51.6 26.5-80.7 26.5H192 32c-17.7 0-32-14.3-32-32V416c0-17.7 14.3-32 32-32H68.8l44.9-36c22.7-18.2 50.9-28 80-28H272h16 64c17.7 0 32 14.3 32 32s-14.3 32-32 32H288 272c-8.8 0-16 7.2-16 16s7.2 16 16 16H392.6l119.7-88.2c17.8-13.1 42.8-9.3 55.9 8.5zM193.6 384l0 0-.9 0c.3 0 .6 0 .9 0z\"/></svg>",
|
|
||||||
'Legal Services': "<svg fill=\"#916129\" xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"16\" viewBox=\"0 0 512 512\"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d=\"M318.6 9.4c-12.5-12.5-32.8-12.5-45.3 0l-120 120c-12.5 12.5-12.5 32.8 0 45.3l16 16c12.5 12.5 32.8 12.5 45.3 0l4-4L325.4 293.4l-4 4c-12.5 12.5-12.5 32.8 0 45.3l16 16c12.5 12.5 32.8 12.5 45.3 0l120-120c12.5-12.5 12.5-32.8 0-45.3l-16-16c-12.5-12.5-32.8-12.5-45.3 0l-4 4L330.6 74.6l4-4c12.5-12.5 12.5-32.8 0-45.3l-16-16zm-152 288c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3l48 48c12.5 12.5 32.8 12.5 45.3 0l112-112c12.5-12.5 12.5-32.8 0-45.3l-1.4-1.4L272 285.3 226.7 240 168 298.7l-1.4-1.4z\"/></svg>"
|
|
||||||
};
|
|
||||||
|
|
||||||
let isDateDropdownExpanded = false
|
|
||||||
let isCategoryDropdownExpanded = false
|
|
||||||
let dropdownStates = {};
|
|
||||||
let deleteDropdownStates = {}
|
|
||||||
|
|
||||||
$: {
|
|
||||||
dropdownStates = {};
|
|
||||||
deleteDropdownStates = {};
|
|
||||||
$expenseData.toReversed().forEach(data => {
|
|
||||||
dropdownStates[data.expenseId] = false;
|
|
||||||
deleteDropdownStates[data.expenseId] = false;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function clickHandlerDate() {
|
|
||||||
isDateDropdownExpanded = !isDateDropdownExpanded
|
|
||||||
}
|
|
||||||
|
|
||||||
function clickItemHandler(id) {
|
|
||||||
dropdownStates[id] = !dropdownStates[id];
|
|
||||||
if (deleteDropdownStates[id] === true) deleteDropdownStates[id] = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
function clickDeleteHandler(id) {
|
|
||||||
deleteDropdownStates[id] = !deleteDropdownStates[id];
|
|
||||||
if (dropdownStates[id] === true) dropdownStates[id] = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
function clickHandlerCategory() {
|
|
||||||
isCategoryDropdownExpanded = !isCategoryDropdownExpanded;
|
|
||||||
}
|
|
||||||
|
|
||||||
function clickOutsideHandler(event) {
|
|
||||||
const isDateButton = event.target.closest("#btn1");
|
|
||||||
const isCategoryButton = event.target.closest("#btn2");
|
|
||||||
|
|
||||||
if (!isDateButton) {
|
|
||||||
isDateDropdownExpanded = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!isCategoryButton) {
|
|
||||||
isCategoryDropdownExpanded = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
onMount(() => {
|
|
||||||
document.body.addEventListener("click", clickOutsideHandler);
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
document.body.removeEventListener("click", clickOutsideHandler);
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|
||||||
async function getToday() {
|
|
||||||
const currentDate = new Date();
|
|
||||||
const currentDay = currentDate.toISOString().split('T')[0];
|
|
||||||
try {
|
|
||||||
const response1 = await axios.get('https://trackio.online:8081/expenses/personal-expenses?date=' + currentDay, {
|
|
||||||
headers: {
|
|
||||||
'Authorization': `Bearer ${getCookie('access_token')}`
|
|
||||||
}
|
|
||||||
});
|
|
||||||
expenseData.set(response1.data);
|
|
||||||
tempExpense.set(response1.data);
|
|
||||||
const response2 = await axios.get('https://trackio.online:8081/incomes/personal-incomes?date=' + currentDay, {
|
|
||||||
headers: {
|
|
||||||
'Authorization': `Bearer ${getCookie('access_token')}`
|
|
||||||
}
|
|
||||||
});
|
|
||||||
incomeData.set(response2.data);
|
|
||||||
tempIncome.set(response2.data);
|
|
||||||
$dateText = "Today"
|
|
||||||
|
|
||||||
$isCategorizedExpense = false;
|
|
||||||
categorizedExpense.set([]);
|
|
||||||
} catch (error) {
|
|
||||||
console.error("Error fetching expenses:", error);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function getYesterday() {
|
|
||||||
const currentDate = new Date();
|
|
||||||
|
|
||||||
const yesterday = new Date(currentDate);
|
|
||||||
yesterday.setDate(currentDate.getDate() - 1);
|
|
||||||
|
|
||||||
const yesterdayString = yesterday.toISOString().split('T')[0];
|
|
||||||
|
|
||||||
try {
|
|
||||||
const response1 = await axios.get('https://trackio.online:8081/expenses/personal-expenses?date=' + yesterdayString, {
|
|
||||||
headers: {
|
|
||||||
'Authorization': `Bearer ${getCookie('access_token')}`
|
|
||||||
}
|
|
||||||
});
|
|
||||||
expenseData.set(response1.data);
|
|
||||||
tempExpense.set(response1.data);
|
|
||||||
const response2 = await axios.get('https://trackio.online:8081/incomes/personal-incomes?date=' + yesterdayString, {
|
|
||||||
headers: {
|
|
||||||
'Authorization': `Bearer ${getCookie('access_token')}`
|
|
||||||
}
|
|
||||||
});
|
|
||||||
incomeData.set(response2.data);
|
|
||||||
tempIncome.set(response2.data);
|
|
||||||
$dateText = "Yesterday"
|
|
||||||
} catch (error) {
|
|
||||||
console.error("Error fetching expenses:", error);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function getMonth() {
|
|
||||||
const currentDate = new Date();
|
|
||||||
const year = currentDate.getMonth() + 1;
|
|
||||||
|
|
||||||
try {
|
|
||||||
const response1 = await axios.get('https://trackio.online:8081/expenses/personal-expenses?month=' + year, {
|
|
||||||
headers: {
|
|
||||||
'Authorization': `Bearer ${getCookie('access_token')}`
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
expenseData.set(response1.data);
|
|
||||||
tempExpense.set(response1.data);
|
|
||||||
monthExpense.set(response1.data);
|
|
||||||
const response2 = await axios.get('https://trackio.online:8081/incomes/personal-incomes?month=' + year, {
|
|
||||||
headers: {
|
|
||||||
'Authorization': `Bearer ${getCookie('access_token')}`
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
incomeData.set(response2.data);
|
|
||||||
tempIncome.set(response2.data);
|
|
||||||
monthIncome.set(response2.data);
|
|
||||||
$dateText = "This Month"
|
|
||||||
|
|
||||||
$isCategorizedExpense = false;
|
|
||||||
categorizedExpense.set([]);
|
|
||||||
} catch (error) {
|
|
||||||
console.error("Error fetching expenses:", error);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function getLastMonth() {
|
|
||||||
const currentDate = new Date();
|
|
||||||
const year = currentDate.getMonth();
|
|
||||||
|
|
||||||
try {
|
|
||||||
const response1 = await axios.get('https://trackio.online:8081/expenses/personal-expenses?month=' + year, {
|
|
||||||
headers: {
|
|
||||||
'Authorization': `Bearer ${getCookie('access_token')}`
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
expenseData.set(response1.data);
|
|
||||||
tempExpense.set(response1.data)
|
|
||||||
monthExpense.set(response1.data);
|
|
||||||
const response2 = await axios.get('https://trackio.online:8081/incomes/personal-incomes?month=' + year, {
|
|
||||||
headers: {
|
|
||||||
'Authorization': `Bearer ${getCookie('access_token')}`
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
incomeData.set(response2.data);
|
|
||||||
tempIncome.set(response2.data);
|
|
||||||
monthIncome.set(response2.data);
|
|
||||||
$dateText = "Last Month"
|
|
||||||
|
|
||||||
$isCategorizedExpense = false;
|
|
||||||
categorizedExpense.set([]);
|
|
||||||
} catch (error) {
|
|
||||||
console.error("Error fetching expenses:", error);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function getLastYear() {
|
|
||||||
const currentDate = new Date();
|
|
||||||
const year = currentDate.getFullYear();
|
|
||||||
|
|
||||||
try {
|
|
||||||
const response1 = await axios.get('https://trackio.online:8081/expenses/personal-expenses?year=' + year, {
|
|
||||||
headers: {
|
|
||||||
'Authorization': `Bearer ${getCookie('access_token')}`
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
expenseData.set(response1.data);
|
|
||||||
tempExpense.set(response1.data);
|
|
||||||
monthExpense.set(response1.data);
|
|
||||||
const response2 = await axios.get('https://trackio.online:8081/incomes/personal-incomes?year=' + year, {
|
|
||||||
headers: {
|
|
||||||
'Authorization': `Bearer ${getCookie('access_token')}`
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
incomeData.set(response2.data);
|
|
||||||
tempIncome.set(response2.data);
|
|
||||||
monthIncome.set(response2.data);
|
|
||||||
$dateText = "This Year"
|
|
||||||
|
|
||||||
$isCategorizedExpense = false;
|
|
||||||
categorizedExpense.set([]);
|
|
||||||
} catch (error) {
|
|
||||||
console.error("Error fetching expenses:", error);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function filterByCategory(category) {
|
|
||||||
$isCategorizedExpense = true;
|
|
||||||
console.log($isCategorizedExpense);
|
|
||||||
let tempArr = $tempExpense.filter(expense => expense.expenseCategory.name === category);
|
|
||||||
categorizedExpense.set(tempArr);
|
|
||||||
expenseData.set(tempArr);
|
|
||||||
}
|
|
||||||
|
|
||||||
function getAll() {
|
|
||||||
categorizedExpense.set([]);
|
|
||||||
$isCategorizedExpense = false;
|
|
||||||
console.log($isCategorizedExpense);
|
|
||||||
expenseData.set($tempExpense);
|
|
||||||
}
|
|
||||||
|
|
||||||
function doNothing() {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div id="expenseInfo" style="background-color: {$globalStyles.mainColor}">
|
<div id="expenseInfo" style="background-color: {$globalStyles.mainColor}">
|
||||||
<ContentExpense/>
|
<ContentExpense />
|
||||||
<div style="display: flex; justify-content: space-between">
|
|
||||||
<div id="dropdown-date" style="margin: 10px;">
|
|
||||||
<button id="btn1" class="button" on:click={clickHandlerDate}>Filter by Date ▼</button>
|
|
||||||
{#if isDateDropdownExpanded}
|
|
||||||
<div id="date-list" transition:slide>
|
|
||||||
<div class="date-entry" on:click={() => getToday()} role="button" tabindex="0"
|
|
||||||
on:keydown={doNothing}>Today
|
|
||||||
</div>
|
|
||||||
<div class="date-entry" on:click={() => getYesterday()} role="button" tabindex="0"
|
|
||||||
on:keydown={doNothing}>Yesterday
|
|
||||||
</div>
|
|
||||||
<div class="date-entry" on:click={() => getMonth()} role="button" tabindex="0"
|
|
||||||
on:keydown={doNothing}>This month
|
|
||||||
</div>
|
|
||||||
<div class="date-entry" on:click={() => getLastMonth()} role="button" tabindex="0"
|
|
||||||
on:keydown={doNothing}>Last month
|
|
||||||
</div>
|
|
||||||
<div class="date-entry" on:click={() => getLastYear()} role="button" tabindex="0"
|
|
||||||
on:keydown={doNothing}>This year
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="dropdown-category" style="margin: 10px;">
|
|
||||||
<button id="btn2" class="button" on:click={clickHandlerCategory}>Filter by Category ▼</button>
|
|
||||||
{#if isCategoryDropdownExpanded}
|
|
||||||
<div id="date-list" transition:slide>
|
|
||||||
<div class="date-entry" on:click={() => getAll()} role="button"
|
|
||||||
tabindex="0" on:keydown={doNothing}>All</div>
|
|
||||||
{#each $expenseTypes as expense (expense.id)}
|
|
||||||
{#if expense.id !== undefined}
|
|
||||||
<div class="date-entry" on:click={() => filterByCategory(expense.name)} role="button"
|
|
||||||
tabindex="0" on:keydown={doNothing}>{expense.name}</div>
|
|
||||||
{/if}
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="listContainer" style="color: {$globalStyles.color}">
|
<div id="listContainer" style="color: {$globalStyles.color}">
|
||||||
<ul>
|
<ul>
|
||||||
{#each $expenseData.toReversed() as item (item.expenseId)}
|
{#each $expenseData as item}
|
||||||
<li style="display:flex; flex-direction: column; justify-content: space-between; color: {$globalStyles.color}">
|
<li style="color: {$globalStyles.color}">
|
||||||
<div style="display:flex; flex-direction: row; justify-content: space-between; align-items: center;">
|
{item.incomeCategory ? `${item.incomeCategory.name}: ` : `${item.expenseCategory.name}: `}
|
||||||
<span>
|
{item.incomeCategory ? `+${item.amount}$` : `-${item.amount}$`}
|
||||||
{#if textToIcon[item.expenseCategory.name]}
|
{`${item.date}`}
|
||||||
{@html textToIcon[item.expenseCategory.name]}
|
|
||||||
{/if}
|
|
||||||
<span style="font-weight: bold">{item.incomeCategory ? `${item.incomeCategory.name}: ` : `${item.expenseCategory.name}: `}</span>
|
|
||||||
<span style="font-weight:bold; margin-right: 10px; color: red; font-size: larger">{item.incomeCategory ? `+${item.amount}$` : `-${item.amount}$`}</span>
|
|
||||||
</span>
|
|
||||||
<span style="margin-right: 5px;">{`${item.date}`}
|
|
||||||
<span id="editBtn" role="button" tabindex="0" on:keydown={doNothing}
|
|
||||||
on:click={() => clickItemHandler(item.expenseId)}><svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><path
|
|
||||||
d="M471.6 21.7c-21.9-21.9-57.3-21.9-79.2 0L362.3 51.7l97.9 97.9 30.1-30.1c21.9-21.9 21.9-57.3 0-79.2L471.6 21.7zm-299.2 220c-6.1 6.1-10.8 13.6-13.5 21.9l-29.6 88.8c-2.9 8.6-.6 18.1 5.8 24.6s15.9 8.7 24.6 5.8l88.8-29.6c8.2-2.7 15.7-7.4 21.9-13.5L437.7 172.3 339.7 74.3 172.4 241.7zM96 64C43 64 0 107 0 160V416c0 53 43 96 96 96H352c53 0 96-43 96-96V320c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7-14.3 32-32 32H96c-17.7 0-32-14.3-32-32V160c0-17.7 14.3-32 32-32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H96z"/></svg></span>
|
|
||||||
<span id="deleteBtn" role="button" tabindex="0" on:keydown={doNothing}
|
|
||||||
on:click={() => clickDeleteHandler(item.expenseId)}><svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><path
|
|
||||||
d="M135.2 17.7L128 32H32C14.3 32 0 46.3 0 64S14.3 96 32 96H416c17.7 0 32-14.3 32-32s-14.3-32-32-32H320l-7.2-14.3C307.4 6.8 296.3 0 284.2 0H163.8c-12.1 0-23.2 6.8-28.6 17.7zM416 128H32L53.2 467c1.6 25.3 22.6 45 47.9 45H346.9c25.3 0 46.3-19.7 47.9-45L416 128z"/></svg></span>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{#if dropdownStates[item.expenseId]}
|
|
||||||
<EditEntry {item} bind:isOn={dropdownStates[item.expenseId]}/>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
{#if deleteDropdownStates[item.expenseId]}
|
|
||||||
<div style="padding: 5px; margin-top: 5px; display:flex; flex-direction: column; justify-content: space-evenly"
|
|
||||||
class="inputForm" transition:slide>
|
|
||||||
<span id="textf" style="text-align: center; margin-bottom: 10px">Confirm deletion?</span>
|
|
||||||
<div style="display:flex; flex-direction: row; justify-content: space-evenly">
|
|
||||||
<button id="confirmBtn">CONFIRM</button>
|
|
||||||
<button id="cancelBtn">CANCEL</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- <button style="background-color: #8BD17C" on:click={() => console.log("LOL")}>Delete</button>-->
|
|
||||||
<!-- <button style="background-color: palevioletred" on:click={clickItemHandler(item.expenseId)}>Cancel</button>-->
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
</li>
|
</li>
|
||||||
{/each}
|
{/each}
|
||||||
</ul>
|
</ul>
|
||||||
@@ -351,107 +20,14 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
#textf {
|
|
||||||
font-family: "Inter UI", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
|
|
||||||
font-size: 20px;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
#confirmBtn {
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
#confirmBtn:hover {
|
|
||||||
box-shadow: rgba(80, 63, 205, 0.5) 0 1px 30px;
|
|
||||||
transition-duration: .1s;
|
|
||||||
}
|
|
||||||
|
|
||||||
#cancelBtn {
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
#cancelBtn:hover {
|
|
||||||
box-shadow: rgba(80, 63, 205, 0.5) 0 1px 30px;
|
|
||||||
transition-duration: .1s;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (max-width: 900px) {
|
|
||||||
#listContainer {
|
|
||||||
max-height: 50vh;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#expenseInfo {
|
#expenseInfo {
|
||||||
margin: 0;
|
min-width: 300px;
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#editBtn {
|
|
||||||
margin-left: 5px;
|
|
||||||
margin-right: 5px;
|
|
||||||
fill: darkblue;
|
|
||||||
}
|
|
||||||
|
|
||||||
.inputForm {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#editBtn:hover {
|
|
||||||
cursor: pointer;
|
|
||||||
fill: lightseagreen;
|
|
||||||
}
|
|
||||||
|
|
||||||
#deleteBtn {
|
|
||||||
fill: red;
|
|
||||||
}
|
|
||||||
|
|
||||||
#deleteBtn:hover {
|
|
||||||
cursor: pointer;
|
|
||||||
fill: palevioletred;
|
|
||||||
}
|
|
||||||
|
|
||||||
#expenseInfo {
|
|
||||||
min-width: 350px;
|
|
||||||
min-height: 0;
|
min-height: 0;
|
||||||
background-color: #212942;
|
background-color: #212942;
|
||||||
color: white;
|
color: white;
|
||||||
|
border-radius: 0 0 10px 10px;
|
||||||
|
margin: 0 0 10px 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
@@ -462,27 +38,21 @@
|
|||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
min-height: 0;
|
min-height: 0;
|
||||||
padding: 0 10px 10px;
|
padding: 0 10px 10px;
|
||||||
/*margin: 0 0 10px;*/
|
margin: 0 0 10px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
border-radius: 0 0 10px 10px;
|
border-radius: 0 0 10px 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar {
|
#listContainer::-webkit-scrollbar {
|
||||||
width: 10px;
|
width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar-track {
|
#listContainer::-webkit-scrollbar-thumb {
|
||||||
background: #f1f1f1;
|
background-color: transparent;
|
||||||
border-radius: 10px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb {
|
#listContainer::-webkit-scrollbar-track {
|
||||||
background: #888;
|
background-color: transparent;
|
||||||
border-radius: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb:hover {
|
|
||||||
background: #555;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#listContainer ul {
|
#listContainer ul {
|
||||||
@@ -503,87 +73,4 @@
|
|||||||
#listContainer 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);
|
||||||
}
|
}
|
||||||
|
|
||||||
.button {
|
|
||||||
align-items: center;
|
|
||||||
background-color: #0A66C2;
|
|
||||||
border: 0;
|
|
||||||
border-radius: 100px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
color: #ffffff;
|
|
||||||
cursor: pointer;
|
|
||||||
display: inline-flex;
|
|
||||||
font-family: -apple-system, system-ui, system-ui, "Segoe UI", Roboto, "Helvetica Neue", "Fira Sans", Ubuntu, Oxygen, "Oxygen Sans", Cantarell, "Droid Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Lucida Grande", Helvetica, Arial, sans-serif;
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 600;
|
|
||||||
justify-content: center;
|
|
||||||
line-height: 20px;
|
|
||||||
max-width: 480px;
|
|
||||||
min-height: 40px;
|
|
||||||
min-width: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
padding: 0 20px;
|
|
||||||
text-align: center;
|
|
||||||
touch-action: manipulation;
|
|
||||||
transition: background-color 0.167s cubic-bezier(0.4, 0, 0.2, 1) 0s, box-shadow 0.167s cubic-bezier(0.4, 0, 0.2, 1) 0s, color 0.167s cubic-bezier(0.4, 0, 0.2, 1) 0s;
|
|
||||||
user-select: none;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button:hover,
|
|
||||||
.button:focus {
|
|
||||||
background-color: #16437E;
|
|
||||||
color: #ffffff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button:active {
|
|
||||||
background: #09223b;
|
|
||||||
color: rgb(255, 255, 255, .7);
|
|
||||||
}
|
|
||||||
|
|
||||||
.button:disabled {
|
|
||||||
cursor: not-allowed;
|
|
||||||
background: rgba(0, 0, 0, .08);
|
|
||||||
color: rgba(0, 0, 0, .3);
|
|
||||||
}
|
|
||||||
|
|
||||||
#date-list {
|
|
||||||
background-color: black;
|
|
||||||
position: absolute;
|
|
||||||
margin-top: 20px;
|
|
||||||
max-height: 400px;
|
|
||||||
overflow-y: scroll;
|
|
||||||
border-radius: 20px;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.date-entry {
|
|
||||||
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;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
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 .3s;
|
|
||||||
user-select: none;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
touch-action: manipulation;
|
|
||||||
margin: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.date-entry:hover {
|
|
||||||
box-shadow: rgba(255, 255, 255, 0.8) 0 0 20px;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -0,0 +1,57 @@
|
|||||||
|
<script>
|
||||||
|
export let showModal;
|
||||||
|
|
||||||
|
let dialog;
|
||||||
|
|
||||||
|
$: if (dialog && showModal) dialog.showModal();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-noninteractive-element-interactions -->
|
||||||
|
<dialog
|
||||||
|
bind:this={dialog}
|
||||||
|
on:close={() => (showModal = false)}
|
||||||
|
on:click|self={() => dialog.close()}
|
||||||
|
>
|
||||||
|
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
||||||
|
<div on:click|stopPropagation>
|
||||||
|
<slot name="header" />
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
|
</dialog>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
dialog {
|
||||||
|
max-width: 32em;
|
||||||
|
border-radius: 20px;
|
||||||
|
border: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
dialog::backdrop {
|
||||||
|
background: rgba(0, 0, 0, 0.3);
|
||||||
|
}
|
||||||
|
dialog > div {
|
||||||
|
padding: 1em;
|
||||||
|
}
|
||||||
|
dialog[open] {
|
||||||
|
animation: zoom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||||
|
}
|
||||||
|
@keyframes zoom {
|
||||||
|
from {
|
||||||
|
transform: scale(0.95);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
dialog[open]::backdrop {
|
||||||
|
animation: fade 0.2s ease-out;
|
||||||
|
}
|
||||||
|
@keyframes fade {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -1,20 +1,19 @@
|
|||||||
<script>
|
<script>
|
||||||
|
|
||||||
import {globalStyles} from "../../../styles.js";
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div id="header">
|
<div id="header">
|
||||||
<div id="dashboardTitleWrapper" style="color: {$globalStyles.dashTextColor}">
|
<div id="dashboardTitleWrapper">
|
||||||
<h5>Hello, welcome to your</h5>
|
<h5>Hello, welcome to your</h5>
|
||||||
<h1 id="dashboardTitle">Dashboard</h1>
|
<h1 id="dashboardTitle">Dashboard</h1>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="icons">
|
<div id="icons">
|
||||||
<div class="headerbtn searchButton">
|
<div class="headerbtn searchButton">
|
||||||
<svg style="fill: {$globalStyles.dashTextColor}" xmlns="http://www.w3.org/2000/svg" height="1.3em" viewBox="0 0 512 512"><path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/></svg>
|
<svg xmlns="http://www.w3.org/2000/svg" height="1.3em" viewBox="0 0 512 512"><path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/></svg>
|
||||||
</div>
|
</div>
|
||||||
<div class="headerbtn notificationButton">
|
<div class="headerbtn notificationButton">
|
||||||
<svg style="fill: {$globalStyles.dashTextColor}" xmlns="http://www.w3.org/2000/svg" height="1.3em" viewBox="0 0 448 512"><path d="M224 0c-17.7 0-32 14.3-32 32V49.9C119.5 61.4 64 124.2 64 200v33.4c0 45.4-15.5 89.5-43.8 124.9L5.3 377c-5.8 7.2-6.9 17.1-2.9 25.4S14.8 416 24 416H424c9.2 0 17.6-5.3 21.6-13.6s2.9-18.2-2.9-25.4l-14.9-18.6C399.5 322.9 384 278.8 384 233.4V200c0-75.8-55.5-138.6-128-150.1V32c0-17.7-14.3-32-32-32zm0 96h8c57.4 0 104 46.6 104 104v33.4c0 47.9 13.9 94.6 39.7 134.6H72.3C98.1 328 112 281.3 112 233.4V200c0-57.4 46.6-104 104-104h8zm64 352H224 160c0 17 6.7 33.3 18.7 45.3s28.3 18.7 45.3 18.7s33.3-6.7 45.3-18.7s18.7-28.3 18.7-45.3z"/></svg>
|
<svg xmlns="http://www.w3.org/2000/svg" height="1.3em" viewBox="0 0 448 512"><path d="M224 0c-17.7 0-32 14.3-32 32V49.9C119.5 61.4 64 124.2 64 200v33.4c0 45.4-15.5 89.5-43.8 124.9L5.3 377c-5.8 7.2-6.9 17.1-2.9 25.4S14.8 416 24 416H424c9.2 0 17.6-5.3 21.6-13.6s2.9-18.2-2.9-25.4l-14.9-18.6C399.5 322.9 384 278.8 384 233.4V200c0-75.8-55.5-138.6-128-150.1V32c0-17.7-14.3-32-32-32zm0 96h8c57.4 0 104 46.6 104 104v33.4c0 47.9 13.9 94.6 39.7 134.6H72.3C98.1 328 112 281.3 112 233.4V200c0-57.4 46.6-104 104-104h8zm64 352H224 160c0 17 6.7 33.3 18.7 45.3s28.3 18.7 45.3 18.7s33.3-6.7 45.3-18.7s18.7-28.3 18.7-45.3z"/></svg>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -30,7 +29,8 @@ import {globalStyles} from "../../../styles.js";
|
|||||||
#dashboardTitleWrapper {
|
#dashboardTitleWrapper {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
margin: 20px 20px 0;
|
margin:20px;
|
||||||
|
margin-bottom: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#dashboardTitleWrapper h5 {
|
#dashboardTitleWrapper h5 {
|
||||||
|
|||||||
@@ -0,0 +1,168 @@
|
|||||||
|
<script>
|
||||||
|
import Graph2 from '../graphs/Graph2.svelte';
|
||||||
|
import Graph3 from '../graphs/Graph3.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>
|
||||||
|
|
||||||
|
<div id="main-data" style="background-color: {$globalStyles.dashColor}; color: {$globalStyles.color}">
|
||||||
|
<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 />
|
||||||
|
</div>
|
||||||
|
<div id="second-graph">
|
||||||
|
<Graph3 />
|
||||||
|
</div>
|
||||||
|
<Expenses />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
#main-data {
|
||||||
|
border-bottom-left-radius: 20px;
|
||||||
|
border-bottom-right-radius: 20px;
|
||||||
|
padding:0;
|
||||||
|
display: flex;
|
||||||
|
min-height: 0;
|
||||||
|
height: 0;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: stretch;
|
||||||
|
align-items: stretch;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#date-list {
|
||||||
|
background-color: #8BD17C;
|
||||||
|
position:absolute;
|
||||||
|
z-index:1;
|
||||||
|
}
|
||||||
|
|
||||||
|
#category-list {
|
||||||
|
background-color: #8BD17C;
|
||||||
|
position:absolute;
|
||||||
|
z-index:1;
|
||||||
|
}
|
||||||
|
|
||||||
|
#data-header {
|
||||||
|
background-color: black;
|
||||||
|
min-height: 50px;
|
||||||
|
padding-left: 30px;
|
||||||
|
display: flex;
|
||||||
|
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;
|
||||||
|
flex-grow: 1;
|
||||||
|
min-width: 0;
|
||||||
|
min-height:0;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
@@ -17,11 +17,11 @@
|
|||||||
const expenseDifference = ((lastMonthExpense - totalExpenses) / lastMonthExpense) * 100;
|
const expenseDifference = ((lastMonthExpense - totalExpenses) / lastMonthExpense) * 100;
|
||||||
|
|
||||||
try {
|
try {
|
||||||
infobar1.innerHTML = `<span style="font-size: larger">Total expenses:</span><br><span style="color:red;font-size: xxx-large">${totalExpenses.toFixed(2)}$</span>`;
|
infobar1.innerHTML = `<span style="font-size: larger">Total expenses:</span><br><span style="color:red;font-size: 150%">${totalExpenses.toFixed(2)}$</span>`;
|
||||||
infobar2.innerHTML = `<span style="font-size: larger">Total incomes:</span><br><span style="color:green;font-size: xxx-large">${totalIncomes.toFixed(2)}$</span>`;
|
infobar2.innerHTML = `<span style="font-size: larger">Total incomes:</span><br><span style="color:green;font-size: 150%">${totalIncomes.toFixed(2)}$</span>`;
|
||||||
|
|
||||||
infobar3.innerHTML = `<span style="font-size: larger">Income by last month:</span><br><span style="color:blue;font-size: xxx-large">${incomeDifference.toFixed(2)}%</span>`;
|
infobar3.innerHTML = `<span style="font-size: larger">Income by last month:</span><br><span style="color:blue;font-size: 150%">${incomeDifference.toFixed(2)}%</span>`;
|
||||||
infobar4.innerHTML = `<span style="font-size: larger">Expense by last month:</span><br><span style="color:orange;font-size: xxx-large">${expenseDifference.toFixed(2)}%</span>`;
|
infobar4.innerHTML = `<span style="font-size: larger">Expense by last month:</span><br><span style="color:orange;font-size: 150%">${expenseDifference.toFixed(2)}%</span>`;
|
||||||
} catch {
|
} catch {
|
||||||
console.log("not yet loaded");
|
console.log("not yet loaded");
|
||||||
}
|
}
|
||||||
@@ -49,17 +49,14 @@
|
|||||||
#quickInfobar {
|
#quickInfobar {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
flex-wrap: wrap;
|
|
||||||
min-height: 0;
|
|
||||||
flex: 1 1 auto;
|
|
||||||
margin: 20px;
|
margin: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.infobarElement {
|
.infobarElement {
|
||||||
margin: 10px;
|
margin: 10px;
|
||||||
min-width: 0px;
|
width: 200px;
|
||||||
min-height: 0px;
|
min-width: 100px;
|
||||||
flex: 1 1 auto;
|
height: 100px;
|
||||||
color: white;
|
color: white;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
|
|||||||
@@ -1,114 +0,0 @@
|
|||||||
<script>
|
|
||||||
import {expenseTypes} from "../../../stores.js";
|
|
||||||
import { slide } from 'svelte/transition'
|
|
||||||
export let item;
|
|
||||||
export let isOn;
|
|
||||||
|
|
||||||
function handleSave() {
|
|
||||||
const amount = document.getElementById('amountInput').value;
|
|
||||||
const expenseCategory = document.getElementById('expenseCategory').value;
|
|
||||||
|
|
||||||
console.log("tryna save: " + item.expenseId + " " + amount + " " + expenseCategory)
|
|
||||||
// saveFunction(item.expenseId, amount, expenseCategory);
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div style="display: flex; flex-direction: column" transition:slide>
|
|
||||||
<span id="textf" style="margin-top: 10px; text-align: center">Edit Entry</span>
|
|
||||||
<input type="text" id="amountInput" bind:value={item.amount}>
|
|
||||||
<select id="expenseCategory" class="form-control">
|
|
||||||
{#each $expenseTypes as expense (expense.id)}
|
|
||||||
{#if expense.id !== undefined}
|
|
||||||
{#if expense.id === item.expenseCategory.id}
|
|
||||||
<option value={expense.id} selected>{expense.name}</option>
|
|
||||||
{:else}
|
|
||||||
<option value={expense.id}>{expense.name}</option>
|
|
||||||
{/if}
|
|
||||||
{/if}
|
|
||||||
{/each}
|
|
||||||
</select>
|
|
||||||
<div style="margin: 10px; display:flex; flex-direction: row; justify-content: space-evenly">
|
|
||||||
<button class="buttonCL" id="saveBtn" on:click={handleSave}>SAVE</button>
|
|
||||||
<button class="buttonCL" id="cancelBtn" on:click={() => isOn = false}>CANCEL</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
|
|
||||||
#textf {
|
|
||||||
font-family: "Inter UI","SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
|
|
||||||
font-size: 20px;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
#saveBtn {
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
#saveBtn:hover {
|
|
||||||
box-shadow: rgba(80, 63, 205, 0.5) 0 1px 30px;
|
|
||||||
transition-duration: .1s;
|
|
||||||
}
|
|
||||||
|
|
||||||
#cancelBtn {
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
#cancelBtn:hover {
|
|
||||||
box-shadow: rgba(80, 63, 205, 0.5) 0 1px 30px;
|
|
||||||
transition-duration: .1s;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -26,8 +26,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
return groupedData;
|
||||||
return new Map([...groupedData.entries()].sort());;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function createGraph() {
|
function createGraph() {
|
||||||
@@ -61,17 +60,7 @@
|
|||||||
},
|
},
|
||||||
options: {
|
options: {
|
||||||
responsive: true,
|
responsive: true,
|
||||||
maintainAspectRatio: false,
|
maintainAspectRatio: false
|
||||||
plugins: {
|
|
||||||
legend: {
|
|
||||||
labels: {
|
|
||||||
font: {
|
|
||||||
weight: 'bold'
|
|
||||||
},
|
|
||||||
color: '#fff'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
|
|||||||
@@ -40,17 +40,7 @@
|
|||||||
},
|
},
|
||||||
options: {
|
options: {
|
||||||
responsive: true,
|
responsive: true,
|
||||||
maintainAspectRatio: false,
|
maintainAspectRatio: false
|
||||||
plugins: {
|
|
||||||
legend: {
|
|
||||||
labels: {
|
|
||||||
font: {
|
|
||||||
weight: 'bold'
|
|
||||||
},
|
|
||||||
color: '#fff'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
|
|||||||
@@ -50,7 +50,7 @@
|
|||||||
try {
|
try {
|
||||||
const token = getCookie('access_token');
|
const token = getCookie('access_token');
|
||||||
|
|
||||||
const response = await axios.post('https://trackio.online:8081/incomes', data, {
|
const response = await axios.post('http://localhost:8081/incomes', data, {
|
||||||
headers: {
|
headers: {
|
||||||
'Authorization': `Bearer ${token}`,
|
'Authorization': `Bearer ${token}`,
|
||||||
'Content-Type': 'application/json',
|
'Content-Type': 'application/json',
|
||||||
|
|||||||
@@ -2,33 +2,17 @@
|
|||||||
import ContentIncome from "./ContentIncome.svelte";
|
import ContentIncome from "./ContentIncome.svelte";
|
||||||
import { incomeData } from "../../../stores.js";
|
import { incomeData } from "../../../stores.js";
|
||||||
import { globalStyles } from "../../../styles.js";
|
import { globalStyles } from "../../../styles.js";
|
||||||
|
|
||||||
const textToIcon = {
|
|
||||||
'Interest': "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"20\" viewBox=\"0 0 640 512\"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d=\"M539.7 237.3c3.1-12.3 4.3-24.8 4.3-37.4C544 107.4 468.6 32 376.1 32c-77.2 0-144.6 53-163 127.8-15.3-13.2-34.9-20.5-55.2-20.5-46.3 0-84 37.7-84 84 0 7.4 .9 15 3.1 22.4-42.9 20.2-70.8 63.7-70.8 111.2C6.2 424.8 61.7 480 129.4 480h381.2c67.7 0 123.2-55.2 123.2-123.2 0-56.4-38.9-106-94.1-119.5zM199.9 401.6c0 8.3-7 15.3-15.3 15.3H153.6c-8.3 0-15.3-7-15.3-15.3V290.6c0-8.3 7-15.3 15.3-15.3h30.9c8.3 0 15.3 7 15.3 15.3v110.9zm89.5 0c0 8.3-7 15.3-15.3 15.3h-30.9c-8.3 0-15.3-7-15.3-15.3V270.1c0-8.3 7-15.3 15.3-15.3h30.9c8.3 0 15.3 7 15.3 15.3v131.5zm89.5 0c0 8.3-7 15.3-15.3 15.3h-30.9c-8.3 0-15.3-7-15.3-15.3V238.8c0-8.3 7-15.3 15.3-15.3h30.9c8.3 0 15.3 7 15.3 15.3v162.7zm87 0c0 8.3-7 15.3-15.3 15.3h-28.5c-8.3 0-15.3-7-15.3-15.3V176.9c0-8.6 7-15.6 15.3-15.6h28.5c8.3 0 15.3 7 15.3 15.6v224.6z\"/></svg>",
|
|
||||||
'Salary': "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"18\" viewBox=\"0 0 576 512\"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free 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>",
|
|
||||||
'Freelance Income': "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"18\" viewBox=\"0 0 576 512\"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free 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>",
|
|
||||||
'Investment Income': "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"20\" viewBox=\"0 0 640 512\"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d=\"M539.7 237.3c3.1-12.3 4.3-24.8 4.3-37.4C544 107.4 468.6 32 376.1 32c-77.2 0-144.6 53-163 127.8-15.3-13.2-34.9-20.5-55.2-20.5-46.3 0-84 37.7-84 84 0 7.4 .9 15 3.1 22.4-42.9 20.2-70.8 63.7-70.8 111.2C6.2 424.8 61.7 480 129.4 480h381.2c67.7 0 123.2-55.2 123.2-123.2 0-56.4-38.9-106-94.1-119.5zM199.9 401.6c0 8.3-7 15.3-15.3 15.3H153.6c-8.3 0-15.3-7-15.3-15.3V290.6c0-8.3 7-15.3 15.3-15.3h30.9c8.3 0 15.3 7 15.3 15.3v110.9zm89.5 0c0 8.3-7 15.3-15.3 15.3h-30.9c-8.3 0-15.3-7-15.3-15.3V270.1c0-8.3 7-15.3 15.3-15.3h30.9c8.3 0 15.3 7 15.3 15.3v131.5zm89.5 0c0 8.3-7 15.3-15.3 15.3h-30.9c-8.3 0-15.3-7-15.3-15.3V238.8c0-8.3 7-15.3 15.3-15.3h30.9c8.3 0 15.3 7 15.3 15.3v162.7zm87 0c0 8.3-7 15.3-15.3 15.3h-28.5c-8.3 0-15.3-7-15.3-15.3V176.9c0-8.6 7-15.6 15.3-15.6h28.5c8.3 0 15.3 7 15.3 15.6v224.6z\"/></svg>",
|
|
||||||
'Comission': "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"18\" viewBox=\"0 0 576 512\"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d=\"M64 64C28.7 64 0 92.7 0 128v64c0 8.8 7.4 15.7 15.7 18.6C34.5 217.1 48 235 48 256s-13.5 38.9-32.3 45.4C7.4 304.3 0 311.2 0 320v64c0 35.3 28.7 64 64 64H512c35.3 0 64-28.7 64-64V320c0-8.8-7.4-15.7-15.7-18.6C541.5 294.9 528 277 528 256s13.5-38.9 32.3-45.4c8.3-2.9 15.7-9.8 15.7-18.6V128c0-35.3-28.7-64-64-64H64zm64 112l0 160c0 8.8 7.2 16 16 16H432c8.8 0 16-7.2 16-16V176c0-8.8-7.2-16-16-16H144c-8.8 0-16 7.2-16 16zM96 160c0-17.7 14.3-32 32-32H448c17.7 0 32 14.3 32 32V352c0 17.7-14.3 32-32 32H128c-17.7 0-32-14.3-32-32V160z\"/></svg>",
|
|
||||||
'Sold Products': "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"18\" viewBox=\"0 0 576 512\"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free 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>",
|
|
||||||
'Gifts': "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"16\" viewBox=\"0 0 512 512\"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d=\"M190.5 68.8L225.3 128H224 152c-22.1 0-40-17.9-40-40s17.9-40 40-40h2.2c14.9 0 28.8 7.9 36.3 20.8zM64 88c0 14.4 3.5 28 9.6 40H32c-17.7 0-32 14.3-32 32v64c0 17.7 14.3 32 32 32H480c17.7 0 32-14.3 32-32V160c0-17.7-14.3-32-32-32H438.4c6.1-12 9.6-25.6 9.6-40c0-48.6-39.4-88-88-88h-2.2c-31.9 0-61.5 16.9-77.7 44.4L256 85.5l-24.1-41C215.7 16.9 186.1 0 154.2 0H152C103.4 0 64 39.4 64 88zm336 0c0 22.1-17.9 40-40 40H288h-1.3l34.8-59.2C329.1 55.9 342.9 48 357.8 48H360c22.1 0 40 17.9 40 40zM32 288V464c0 26.5 21.5 48 48 48H224V288H32zM288 512H432c26.5 0 48-21.5 48-48V288H288V512z\"/></svg>",
|
|
||||||
'Government Payments': "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"18\" viewBox=\"0 0 576 512\"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free 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>"
|
|
||||||
};
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div id="incomeInfo" style="background-color: {$globalStyles.mainColor}">
|
<div id="incomeInfo" style="background-color: {$globalStyles.mainColor}">
|
||||||
<ContentIncome />
|
<ContentIncome />
|
||||||
<div id="listContainer" style="color: {$globalStyles.color}">
|
<div id="listContainer" style="color: {$globalStyles.color}">
|
||||||
<ul>
|
<ul>
|
||||||
{#each $incomeData.reverse() as item}
|
{#each $incomeData as item}
|
||||||
<li style="display:flex; justify-content: space-between; color: {$globalStyles.color}">
|
<li>
|
||||||
<span>
|
{item.incomeCategory ? `${item.incomeCategory.name}: ` : `${item.incomeCategory.name}: `}
|
||||||
{#if textToIcon[item.incomeCategory.name]}
|
{item.incomeCategory ? `+${item.amount}$` : `-${item.amount}$`}
|
||||||
{@html textToIcon[item.incomeCategory.name]}
|
{`${item.date}`}
|
||||||
{/if}
|
|
||||||
<span style="font-weight: bold">{item.incomeCategory ? `${item.incomeCategory.name}: ` : `${item.expenseCategory.name}: `}</span>
|
|
||||||
<span style="font-weight:bold; margin-right: 10px; color: green; font-size: larger">{item.incomeCategory ? `+${item.amount}$` : `-${item.amount}$`}</span>
|
|
||||||
</span>
|
|
||||||
<span style="">{`${item.date}`}</span>
|
|
||||||
</li>
|
</li>
|
||||||
{/each}
|
{/each}
|
||||||
</ul>
|
</ul>
|
||||||
@@ -59,25 +43,16 @@
|
|||||||
border-radius: 0 0 10px 10px;
|
border-radius: 0 0 10px 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar {
|
#listContainer::-webkit-scrollbar {
|
||||||
width: 10px;
|
width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Track */
|
#listContainer::-webkit-scrollbar-thumb {
|
||||||
::-webkit-scrollbar-track {
|
background-color: transparent;
|
||||||
background: #f1f1f1;
|
|
||||||
border-radius: 10px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Handle */
|
#listContainer::-webkit-scrollbar-track {
|
||||||
::-webkit-scrollbar-thumb {
|
background-color: transparent;
|
||||||
background: #888;
|
|
||||||
border-radius: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Handle on hover */
|
|
||||||
::-webkit-scrollbar-thumb:hover {
|
|
||||||
background: #555;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#listContainer ul {
|
#listContainer ul {
|
||||||
|
|||||||
@@ -1,9 +1,9 @@
|
|||||||
<script>
|
<script>
|
||||||
import {globalStyles} from "../../../styles.js";
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div id="header">
|
<div id="header">
|
||||||
<div id="dashboardTitleWrapper" style="color: {$globalStyles.dashTextColor}">
|
<div id="dashboardTitleWrapper">
|
||||||
<h5>Hello, welcome to your</h5>
|
<h5>Hello, welcome to your</h5>
|
||||||
<h1 id="dashboardTitle">Dashboard</h1>
|
<h1 id="dashboardTitle">Dashboard</h1>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -4,17 +4,10 @@
|
|||||||
import Incomes from "../infolists/Incomes.svelte";
|
import Incomes from "../infolists/Incomes.svelte";
|
||||||
import {globalStyles} from "../../../styles.js";
|
import {globalStyles} from "../../../styles.js";
|
||||||
import { slide } from 'svelte/transition'
|
import { slide } from 'svelte/transition'
|
||||||
import {dateText, expenseData, incomeData, incomeTypes, tempIncome, tempExpense} from "../../../stores.js";
|
import {incomeTypes} from "../../../stores.js";
|
||||||
import axios from "axios";
|
|
||||||
import {getCookie} from "svelte-cookie";
|
|
||||||
import {onMount} from "svelte";
|
|
||||||
|
|
||||||
let isDateDropdownExpanded = false
|
let isDateDropdownExpanded = false
|
||||||
let isCategoryDropdownExpanded = false
|
let isCategoryDropdownExpanded = false
|
||||||
let incomeAnalysisText = "REVENUE ANALYSIS: ";
|
|
||||||
$ : {
|
|
||||||
incomeAnalysisText = "REVENUE ANALYSIS: " + $dateText;
|
|
||||||
}
|
|
||||||
|
|
||||||
function clickHandlerDate() {
|
function clickHandlerDate() {
|
||||||
isDateDropdownExpanded = !isDateDropdownExpanded
|
isDateDropdownExpanded = !isDateDropdownExpanded
|
||||||
@@ -24,195 +17,33 @@
|
|||||||
isCategoryDropdownExpanded = !isCategoryDropdownExpanded;
|
isCategoryDropdownExpanded = !isCategoryDropdownExpanded;
|
||||||
}
|
}
|
||||||
|
|
||||||
function clickOutsideHandler(event) {
|
|
||||||
const isDateButton = event.target.closest("#btn1");
|
|
||||||
const isCategoryButton = event.target.closest("#btn2");
|
|
||||||
|
|
||||||
if (!isDateButton) {
|
|
||||||
isDateDropdownExpanded = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!isCategoryButton) {
|
|
||||||
isCategoryDropdownExpanded = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
onMount(() => {
|
|
||||||
document.body.addEventListener("click", clickOutsideHandler);
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
document.body.removeEventListener("click", clickOutsideHandler);
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|
||||||
async function getToday() {
|
|
||||||
var currentDate = new Date();
|
|
||||||
var currentDay = currentDate.toISOString().split('T')[0];
|
|
||||||
try {
|
|
||||||
const response1 = await axios.get('https://trackio.online:8081/incomes/personal-incomes?date=' + currentDay, {
|
|
||||||
headers: {
|
|
||||||
'Authorization': `Bearer ${getCookie('access_token')}`
|
|
||||||
}
|
|
||||||
});
|
|
||||||
incomeData.set(response1.data);
|
|
||||||
tempIncome.set(response1.data);
|
|
||||||
const response2 = await axios.get('https://trackio.online:8081/expenses/personal-expenses?date=' + currentDay, {
|
|
||||||
headers: {
|
|
||||||
'Authorization': `Bearer ${getCookie('access_token')}`
|
|
||||||
}
|
|
||||||
});
|
|
||||||
expenseData.set(response2.data);
|
|
||||||
tempExpense.set(response2.data);
|
|
||||||
$dateText = "Today"
|
|
||||||
} catch (error) {
|
|
||||||
console.error("Error fetching expenses:", error);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function getYesterday() {
|
|
||||||
var currentDate = new Date();
|
|
||||||
|
|
||||||
var yesterday = new Date(currentDate);
|
|
||||||
yesterday.setDate(currentDate.getDate() - 1);
|
|
||||||
|
|
||||||
var yesterdayString = yesterday.toISOString().split('T')[0];
|
|
||||||
|
|
||||||
try {
|
|
||||||
const response1 = await axios.get('https://trackio.online:8081/incomes/personal-incomes?date=' + yesterdayString, {
|
|
||||||
headers: {
|
|
||||||
'Authorization': `Bearer ${getCookie('access_token')}`
|
|
||||||
}
|
|
||||||
});
|
|
||||||
incomeData.set(response1.data);
|
|
||||||
tempIncome.set(response1.data);
|
|
||||||
const response2 = await axios.get('https://trackio.online:8081/expenses/personal-expenses?date=' + yesterdayString, {
|
|
||||||
headers: {
|
|
||||||
'Authorization': `Bearer ${getCookie('access_token')}`
|
|
||||||
}
|
|
||||||
});
|
|
||||||
expenseData.set(response2.data);
|
|
||||||
tempExpense.set(response2.data);
|
|
||||||
$dateText = "Yesterday"
|
|
||||||
} catch (error) {
|
|
||||||
console.error("Error fetching expenses:", error);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function getMonth() {
|
|
||||||
var currentDate = new Date();
|
|
||||||
var year = currentDate.getMonth() + 1;
|
|
||||||
|
|
||||||
try {
|
|
||||||
const response1 = await axios.get('https://trackio.online:8081/incomes/personal-incomes?month=' + year, {
|
|
||||||
headers: {
|
|
||||||
'Authorization': `Bearer ${getCookie('access_token')}`
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
incomeData.set(response1.data);
|
|
||||||
tempIncome.set(response1.data);
|
|
||||||
|
|
||||||
const response2 = await axios.get('https://trackio.online:8081/expenses/personal-expenses?month=' + year, {
|
|
||||||
headers: {
|
|
||||||
'Authorization': `Bearer ${getCookie('access_token')}`
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
expenseData.set(response2.data);
|
|
||||||
tempExpense.set(response2.data);
|
|
||||||
$dateText = "This Month"
|
|
||||||
} catch (error) {
|
|
||||||
console.error("Error fetching expenses:", error);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function getLastMonth() {
|
|
||||||
var currentDate = new Date();
|
|
||||||
var year = currentDate.getMonth();
|
|
||||||
|
|
||||||
try {
|
|
||||||
const response1 = await axios.get('https://trackio.online:8081/expenses/personal-expenses?month=' + year, {
|
|
||||||
headers: {
|
|
||||||
'Authorization': `Bearer ${getCookie('access_token')}`
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
expenseData.set(response1.data);
|
|
||||||
tempExpense.set(response1.data);
|
|
||||||
const response2 = await axios.get('https://trackio.online:8081/incomes/personal-incomes?month=' + year, {
|
|
||||||
headers: {
|
|
||||||
'Authorization': `Bearer ${getCookie('access_token')}`
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
incomeData.set(response2.data);
|
|
||||||
tempIncome.set(response2.data);
|
|
||||||
$dateText = "Last Month"
|
|
||||||
} catch (error) {
|
|
||||||
console.error("Error fetching expenses:", error);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
async function getLastYear() {
|
|
||||||
var currentDate = new Date();
|
|
||||||
var year = currentDate.getFullYear();
|
|
||||||
|
|
||||||
try {
|
|
||||||
const response1 = await axios.get('https://trackio.online:8081/incomes/personal-incomes?year=' + year, {
|
|
||||||
headers: {
|
|
||||||
'Authorization': `Bearer ${getCookie('access_token')}`
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
incomeData.set(response1.data);
|
|
||||||
tempIncome.set(response1.data);
|
|
||||||
const response2 = await axios.get('https://trackio.online:8081/expenses/personal-expenses?year=' + year, {
|
|
||||||
headers: {
|
|
||||||
'Authorization': `Bearer ${getCookie('access_token')}`
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
expenseData.set(response2.data);
|
|
||||||
tempExpense.set(response2.data);
|
|
||||||
$dateText = "This Year"
|
|
||||||
} catch (error) {
|
|
||||||
console.error("Error fetching expenses:", error);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function filterByCategory(category) {
|
|
||||||
console.log(category)
|
|
||||||
let tempArr = $tempIncome.filter(income => income.incomeCategory.name === category);
|
|
||||||
incomeData.set(tempArr);
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div id="main-data" style="background-color: {$globalStyles.dashColor}; color: {$globalStyles.color}">
|
<div id="main-data" style="background-color: {$globalStyles.dashColor}; color: {$globalStyles.color}">
|
||||||
<div id="data-header" style="background-color:{$globalStyles.mainColor}; color: {$globalStyles.altColor}">
|
<div id="data-header" style="background-color:{$globalStyles.mainColor}; color: {$globalStyles.altColor}">
|
||||||
<span style="color: {$globalStyles.altColor}" contenteditable="false" bind:innerHTML={incomeAnalysisText}></span>
|
<span>Revenue Analysis</span>
|
||||||
|
|
||||||
<div id="dropdown-date">
|
<div id="dropdown-date">
|
||||||
<button id="btn1" class="button" on:click={clickHandlerDate}>Filter by Date ▼</button>
|
<button id="button" on:click={clickHandlerDate}>Filter by Date:</button>
|
||||||
{#if isDateDropdownExpanded}
|
{#if isDateDropdownExpanded}
|
||||||
<div id="date-list" transition:slide>
|
<div id="date-list" transition:slide>
|
||||||
<div class="date-entry" on:click={() => getToday()}>Today</div>
|
<div on:click={() => console.log("Today")}>Today</div>
|
||||||
<div class="date-entry" on:click={() => getYesterday()}>Yesterday</div>
|
<div on:click={() => console.log("Yesterday")}>Yesterday</div>
|
||||||
<div class="date-entry" on:click={() => getMonth()}>This month</div>
|
<div on:click={() => console.log("Last week")}>Last week</div>
|
||||||
<div class="date-entry" on:click={() => getLastMonth()}>Last month</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("Current quarter")}>Current quarter</div>
|
||||||
<div class="date-entry" on:click={() => getLastYear()}>This year</div>
|
<div on:click={() => console.log("This year")}>This year</div>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="dropdown-category">
|
<div id="dropdown-category">
|
||||||
<button id="btn2" class="button" on:click={clickHandlerCategory}>Filter by Category ▼</button>
|
<button id="button" on:click={clickHandlerCategory}>Filter by Category:</button>
|
||||||
{#if isCategoryDropdownExpanded}
|
{#if isCategoryDropdownExpanded}
|
||||||
<div id="date-list" transition:slide>
|
<div id="category-list" transition:slide>
|
||||||
{#each $incomeTypes as income (income.id)}
|
{#each $incomeTypes as income (income.id)}
|
||||||
{#if income.id !== undefined}
|
{#if income.id !== undefined}
|
||||||
<div class="date-entry" on:click={() => filterByCategory(income.name)} value={income.id}>{income.name}</div>
|
<option value={income.id}>{income.name}</option>
|
||||||
{/if}
|
{/if}
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
@@ -245,147 +76,48 @@
|
|||||||
flex: 1 1 auto;
|
flex: 1 1 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*#button {*/
|
#button {
|
||||||
/* background-color: #fff000;*/
|
background-color: #fff000;
|
||||||
/* border-radius: 12px;*/
|
border-radius: 12px;
|
||||||
/* color: #000;*/
|
color: #000;
|
||||||
/* cursor: pointer;*/
|
cursor: pointer;
|
||||||
/* font-weight: bold;*/
|
font-weight: bold;
|
||||||
/* padding: 10px 15px;*/
|
padding: 10px 15px;
|
||||||
/* text-align: center;*/
|
text-align: center;
|
||||||
/* transition: 200ms;*/
|
transition: 200ms;
|
||||||
/* width: 100%;*/
|
width: 100%;
|
||||||
/* box-sizing: border-box;*/
|
box-sizing: border-box;
|
||||||
/* border: 0;*/
|
border: 0;
|
||||||
/* font-size: 16px;*/
|
font-size: 16px;
|
||||||
/* user-select: none;*/
|
user-select: none;
|
||||||
/* -webkit-user-select: none;*/
|
-webkit-user-select: none;
|
||||||
/* touch-action: manipulation;*/
|
touch-action: manipulation;
|
||||||
/*}*/
|
}
|
||||||
|
|
||||||
/*#button:not(:disabled):hover,*/
|
#button:not(:disabled):hover,
|
||||||
/*#button:not(:disabled):focus {*/
|
#button:not(:disabled):focus {
|
||||||
/* outline: 0;*/
|
outline: 0;
|
||||||
/* background: #f4e603;*/
|
background: #f4e603;
|
||||||
/* box-shadow: 0 0 0 2px rgba(0,0,0,.2), 0 3px 8px 0 rgba(0,0,0,.15);*/
|
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:disabled {*/
|
|
||||||
/* filter: saturate(0.2) opacity(0.5);*/
|
|
||||||
/* -webkit-filter: saturate(0.2) opacity(0.5);*/
|
|
||||||
/* cursor: not-allowed;*/
|
|
||||||
/*}*/
|
|
||||||
|
|
||||||
#date-list {
|
#date-list {
|
||||||
background-color: #007BFF;
|
background-color: #8BD17C;
|
||||||
position:absolute;
|
position:absolute;
|
||||||
margin-top: 20px;
|
|
||||||
max-height: 400px;
|
|
||||||
overflow-y: scroll;
|
|
||||||
border-radius: 20px;
|
|
||||||
z-index:1;
|
z-index:1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.date-entry {
|
#category-list {
|
||||||
padding: 10px;
|
background-color: #8BD17C;
|
||||||
margin: 10px;
|
position:absolute;
|
||||||
background-color: black;
|
z-index:1;
|
||||||
color: white;
|
|
||||||
border-radius: 20px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.date-entry:hover {
|
|
||||||
background-color: rgb(128, 128, 128);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*.button {*/
|
|
||||||
/* font-size: large;*/
|
|
||||||
/* margin: 10px;*/
|
|
||||||
/* background-color: #007BFF;*/
|
|
||||||
/* color: #fff;*/
|
|
||||||
/* border: none;*/
|
|
||||||
/* border-radius: 20px;*/
|
|
||||||
/* line-height: 40px;*/
|
|
||||||
/* cursor: pointer;*/
|
|
||||||
/*}*/
|
|
||||||
|
|
||||||
/*.button:hover {*/
|
|
||||||
/* background-color: #0056b3;*/
|
|
||||||
/*}*/
|
|
||||||
|
|
||||||
.button {
|
|
||||||
align-items: center;
|
|
||||||
background-color: #0A66C2;
|
|
||||||
border: 0;
|
|
||||||
border-radius: 100px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
color: #ffffff;
|
|
||||||
cursor: pointer;
|
|
||||||
display: inline-flex;
|
|
||||||
font-family: -apple-system, system-ui, system-ui, "Segoe UI", Roboto, "Helvetica Neue", "Fira Sans", Ubuntu, Oxygen, "Oxygen Sans", Cantarell, "Droid Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Lucida Grande", Helvetica, Arial, sans-serif;
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 600;
|
|
||||||
justify-content: center;
|
|
||||||
line-height: 20px;
|
|
||||||
max-width: 480px;
|
|
||||||
min-height: 40px;
|
|
||||||
min-width: 0px;
|
|
||||||
overflow: hidden;
|
|
||||||
padding: 0px;
|
|
||||||
padding-left: 20px;
|
|
||||||
padding-right: 20px;
|
|
||||||
text-align: center;
|
|
||||||
touch-action: manipulation;
|
|
||||||
transition: background-color 0.167s cubic-bezier(0.4, 0, 0.2, 1) 0s, box-shadow 0.167s cubic-bezier(0.4, 0, 0.2, 1) 0s, color 0.167s cubic-bezier(0.4, 0, 0.2, 1) 0s;
|
|
||||||
user-select: none;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button:hover,
|
|
||||||
.button:focus {
|
|
||||||
background-color: #16437E;
|
|
||||||
color: #ffffff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button:active {
|
|
||||||
background: #09223b;
|
|
||||||
color: rgb(255, 255, 255, .7);
|
|
||||||
}
|
|
||||||
|
|
||||||
.button:disabled {
|
|
||||||
cursor: not-allowed;
|
|
||||||
background: rgba(0, 0, 0, .08);
|
|
||||||
color: rgba(0, 0, 0, .3);
|
|
||||||
}
|
|
||||||
|
|
||||||
/*#category-list {*/
|
|
||||||
/* background-color: #8BD17C;*/
|
|
||||||
/* position:absolute;*/
|
|
||||||
/* z-index:1;*/
|
|
||||||
/*}*/
|
|
||||||
|
|
||||||
::-webkit-scrollbar {
|
|
||||||
width: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Track */
|
|
||||||
::-webkit-scrollbar-track {
|
|
||||||
background: #f1f1f1;
|
|
||||||
border-radius: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Handle */
|
|
||||||
::-webkit-scrollbar-thumb {
|
|
||||||
background: #888;
|
|
||||||
border-radius: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Handle on hover */
|
|
||||||
::-webkit-scrollbar-thumb:hover {
|
|
||||||
background: #555;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#data-header {
|
#data-header {
|
||||||
@@ -399,8 +131,7 @@
|
|||||||
border-top-left-radius: 20px;
|
border-top-left-radius: 20px;
|
||||||
border-top-right-radius: 20px;
|
border-top-right-radius: 20px;
|
||||||
font-size: larger;
|
font-size: larger;
|
||||||
margin-bottom: 5px;
|
border: #8BD17C 2px solid;
|
||||||
/*border: #8BD17C 2px solid;*/
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#data-menu {
|
#data-menu {
|
||||||
|
|||||||
@@ -24,11 +24,11 @@
|
|||||||
const expenseDifference = ((lastMonthExpense - totalExpenses) / lastMonthExpense) * 100;
|
const expenseDifference = ((lastMonthExpense - totalExpenses) / lastMonthExpense) * 100;
|
||||||
|
|
||||||
try {
|
try {
|
||||||
infobar1.innerHTML = `<span style="font-size: larger">Total expenses:</span><br><span style="color:red;font-size: xxx-large">${totalExpenses.toFixed(2)}$</span>`;
|
infobar1.innerHTML = `<span style="font-size: larger">Total expenses:</span><br><span style="color:red;font-size: 150%">${totalExpenses.toFixed(2)}$</span>`;
|
||||||
infobar2.innerHTML = `<span style="font-size: larger">Total incomes:</span><br><span style="color:green;font-size: xxx-large">${totalIncomes.toFixed(2)}$</span>`;
|
infobar2.innerHTML = `<span style="font-size: larger">Total incomes:</span><br><span style="color:green;font-size: 150%">${totalIncomes.toFixed(2)}$</span>`;
|
||||||
|
|
||||||
infobar3.innerHTML = `<span style="font-size: larger">Income by last month:</span><br><span style="color:blue;font-size: xxx-large">${incomeDifference.toFixed(2)}%</span>`;
|
infobar3.innerHTML = `<span style="font-size: larger">Income by last month:</span><br><span style="color:blue;font-size: 150%">${incomeDifference.toFixed(2)}%</span>`;
|
||||||
infobar4.innerHTML = `<span style="font-size: larger">Expense by last month:</span><br><span style="color:orange;font-size: xxx-large">${expenseDifference.toFixed(2)}%</span>`;
|
infobar4.innerHTML = `<span style="font-size: larger">Expense by last month:</span><br><span style="color:orange;font-size: 150%">${expenseDifference.toFixed(2)}%</span>`;
|
||||||
} catch {
|
} catch {
|
||||||
console.log("not yet loaded");
|
console.log("not yet loaded");
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -6,7 +6,6 @@
|
|||||||
export let onTabClick;
|
export let onTabClick;
|
||||||
|
|
||||||
let username;
|
let username;
|
||||||
let isAdmin = true;
|
|
||||||
|
|
||||||
onMount(async () => {
|
onMount(async () => {
|
||||||
const token = getCookie('access_token');
|
const token = getCookie('access_token');
|
||||||
@@ -18,18 +17,16 @@
|
|||||||
};
|
};
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const response = await axios.get('https://trackio.online:8081/users/get-user-data', config);
|
const response = await axios.get('http://localhost:8081/users/getUserData', config);
|
||||||
const data = response.data;
|
const data = response.data;
|
||||||
username = data.username;
|
username = data.username;
|
||||||
|
console.log(username)
|
||||||
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Error:', error);
|
console.error('Error:', error);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
function doNothing() {
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div id="sideMenu">
|
<div id="sideMenu">
|
||||||
@@ -40,35 +37,28 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="menuSpace">
|
<div id="menuSpace">
|
||||||
<div on:click={() => onTabClick('profile')} tabindex="0" role="button" class="sideMenuItem" on:keydown={doNothing}>
|
<div class="sideMenuItem">
|
||||||
<svg class="svgimg" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512"><path d="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3z"/></svg>
|
<svg class="svgimg" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 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="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3z"/></svg>
|
||||||
<span class="sideMenuItemText">Profile</span>
|
<span class="sideMenuItemText">Profile</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div on:click={() => onTabClick('expenses')} tabindex="0" role="button" class="sideMenuItem" on:keydown={doNothing}>
|
<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"><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">Spendings</span>
|
<span class="sideMenuItemText">Spendings</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div on:click={() => onTabClick('incomes')} tabindex="0" role="button" class="sideMenuItem" on:keydown={doNothing}>
|
<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"><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">Revenues</span>
|
<span class="sideMenuItemText">Revenues</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div on:click={() => onTabClick('statistics')} tabindex="0" role="button" class="sideMenuItem" on:keydown={doNothing}>
|
<div class="sideMenuItem">
|
||||||
<svg class="svgimg" xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><path d="M160 80c0-26.5 21.5-48 48-48h32c26.5 0 48 21.5 48 48V432c0 26.5-21.5 48-48 48H208c-26.5 0-48-21.5-48-48V80zM0 272c0-26.5 21.5-48 48-48H80c26.5 0 48 21.5 48 48V432c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V272zM368 96h32c26.5 0 48 21.5 48 48V432c0 26.5-21.5 48-48 48H368c-26.5 0-48-21.5-48-48V144c0-26.5 21.5-48 48-48z"/></svg>
|
<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">Statistics</span>
|
<span class="sideMenuItemText">General</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{#if isAdmin}
|
<div on:click={() => onTabClick('settings')} tabindex="0" role="button" class="sideMenuItem">
|
||||||
<div on:click={() => onTabClick('admin')} tabindex="0" role="button" class="sideMenuItem" on:keydown={doNothing}>
|
<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="16" width="14" viewBox="0 0 448 512"><path d="M96 128a128 128 0 1 0 256 0A128 128 0 1 0 96 128zm94.5 200.2l18.6 31L175.8 483.1l-36-146.9c-2-8.1-9.8-13.4-17.9-11.3C51.9 342.4 0 405.8 0 481.3c0 17 13.8 30.7 30.7 30.7H162.5c0 0 0 0 .1 0H168 280h5.5c0 0 0 0 .1 0H417.3c17 0 30.7-13.8 30.7-30.7c0-75.5-51.9-138.9-121.9-156.4c-8.1-2-15.9 3.3-17.9 11.3l-36 146.9L238.9 359.2l18.6-31c6.4-10.7-1.3-24.2-13.7-24.2H224 204.3c-12.4 0-20.1 13.6-13.7 24.2z"/></svg>
|
|
||||||
<span class="sideMenuItemText">Admin Panel</span>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
<div on:click={() => onTabClick('settings')} tabindex="0" role="button" class="sideMenuItem" on:keydown={doNothing}>
|
|
||||||
<svg class="svgimg" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><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>
|
||||||
</div>
|
</div>
|
||||||
@@ -96,7 +86,6 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|
||||||
#sideMenu {
|
#sideMenu {
|
||||||
font-family: 'Source Sans Pro', sans-serif;
|
font-family: 'Source Sans Pro', sans-serif;
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -107,12 +96,6 @@
|
|||||||
margin-left: 20px;
|
margin-left: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (max-width: 900px) {
|
|
||||||
#sideMenu {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#iconSpace {
|
#iconSpace {
|
||||||
margin-top:20px;
|
margin-top:20px;
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -124,11 +107,9 @@
|
|||||||
min-height: 50px;
|
min-height: 50px;
|
||||||
color:white;
|
color:white;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: left;
|
justify-content: center;
|
||||||
padding-left: 20px;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
cursor: pointer;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.sideMenuItem:hover {
|
.sideMenuItem:hover {
|
||||||
|
|||||||
@@ -1,177 +0,0 @@
|
|||||||
<script>
|
|
||||||
import { onMount } from 'svelte';
|
|
||||||
import axios from 'axios';
|
|
||||||
import {deleteCookie, getCookie} from "svelte-cookie";
|
|
||||||
import { slide } from 'svelte/transition'
|
|
||||||
|
|
||||||
export let onTabClick;
|
|
||||||
|
|
||||||
let isMenuDown = false;
|
|
||||||
let isAdmin = true;
|
|
||||||
let username;
|
|
||||||
|
|
||||||
onMount(async () => {
|
|
||||||
const token = getCookie('access_token');
|
|
||||||
|
|
||||||
const config = {
|
|
||||||
headers: {
|
|
||||||
'Authorization': `Bearer ${token}`
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
try {
|
|
||||||
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 toggleMenu() {
|
|
||||||
isMenuDown = !isMenuDown;
|
|
||||||
}
|
|
||||||
|
|
||||||
function doNothing() {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div id="stickyMenu">
|
|
||||||
<div id="stickyButton" tabindex="0" role="button" style="background-color: #191f35; color:white; padding: 10px; display: flex; align-items: center; justify-content: space-around" on:click={toggleMenu} on:keydown={doNothing}>
|
|
||||||
<img id="iconImg" src='./../../../src/lib/images/adidas.png' width="90px" alt="icon"/>
|
|
||||||
<h3>Menu ▼</h3>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{#if isMenuDown}
|
|
||||||
<div id="sideMenu" transition:slide>
|
|
||||||
<div on:click={() => onTabClick('profile')} tabindex="0" role="button" class="sideMenuItem" on:keydown={doNothing}>
|
|
||||||
<svg class="svgimg" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 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="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3z"/></svg>
|
|
||||||
<span class="sideMenuItemText">Profile</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div on:click={() => onTabClick('expenses')} tabindex="0" role="button" class="sideMenuItem" on:keydown={doNothing}>
|
|
||||||
<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">Spendings</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div on:click={() => onTabClick('incomes')} tabindex="0" role="button" class="sideMenuItem" on:keydown={doNothing}>
|
|
||||||
<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">Revenues</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div on:click={() => onTabClick('statistics')} tabindex="0" role="button" class="sideMenuItem" on:keydown={doNothing}>
|
|
||||||
<svg class="svgimg" xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M160 80c0-26.5 21.5-48 48-48h32c26.5 0 48 21.5 48 48V432c0 26.5-21.5 48-48 48H208c-26.5 0-48-21.5-48-48V80zM0 272c0-26.5 21.5-48 48-48H80c26.5 0 48 21.5 48 48V432c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V272zM368 96h32c26.5 0 48 21.5 48 48V432c0 26.5-21.5 48-48 48H368c-26.5 0-48-21.5-48-48V144c0-26.5 21.5-48 48-48z"/></svg>
|
|
||||||
<span class="sideMenuItemText">Statistics</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div on:click={() => onTabClick('settings')} tabindex="0" role="button" class="sideMenuItem" on:keydown={doNothing}>
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{#if isAdmin}
|
|
||||||
<div on:click={() => onTabClick('admin')} tabindex="0" role="button" class="sideMenuItem" on:keydown={doNothing}>
|
|
||||||
<svg class="svgimg" xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M96 128a128 128 0 1 0 256 0A128 128 0 1 0 96 128zm94.5 200.2l18.6 31L175.8 483.1l-36-146.9c-2-8.1-9.8-13.4-17.9-11.3C51.9 342.4 0 405.8 0 481.3c0 17 13.8 30.7 30.7 30.7H162.5c0 0 0 0 .1 0H168 280h5.5c0 0 0 0 .1 0H417.3c17 0 30.7-13.8 30.7-30.7c0-75.5-51.9-138.9-121.9-156.4c-8.1-2-15.9 3.3-17.9 11.3l-36 146.9L238.9 359.2l18.6-31c6.4-10.7-1.3-24.2-13.7-24.2H224 204.3c-12.4 0-20.1 13.6-13.7 24.2z"/></svg>
|
|
||||||
<span class="sideMenuItemText">Admin Panel</span>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
<div id="profileSpace">
|
|
||||||
<div id="profileInfo">Hello, {username}</div>
|
|
||||||
<div id="logout" role="button"
|
|
||||||
tabindex="0"
|
|
||||||
on:click={() => {
|
|
||||||
deleteCookie('access_token');
|
|
||||||
deleteCookie('refresh_token');
|
|
||||||
window.location.href = '/auth/login';
|
|
||||||
}}
|
|
||||||
on:keydown={e => {
|
|
||||||
if (e.key === 'Enter' || e.key === ' ') {
|
|
||||||
deleteCookie('access_token');
|
|
||||||
deleteCookie('refresh_token');
|
|
||||||
window.location.href = '/auth/login';
|
|
||||||
}
|
|
||||||
}}>
|
|
||||||
Log out
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<style>
|
|
||||||
|
|
||||||
#stickyMenu {
|
|
||||||
position:sticky;
|
|
||||||
top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#sideMenu {
|
|
||||||
font-family: 'Source Sans Pro', sans-serif;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
width: 100%;
|
|
||||||
margin:0;
|
|
||||||
justify-content: center;
|
|
||||||
min-width: 150px;
|
|
||||||
background-color: #191f35;
|
|
||||||
position:absolute;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sideMenuItem {
|
|
||||||
min-height: 50px;
|
|
||||||
color:white;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
border-radius: 20px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sideMenuItem:hover {
|
|
||||||
background-color: rgb(45, 60, 90);
|
|
||||||
}
|
|
||||||
|
|
||||||
.sideMenuItemText {
|
|
||||||
padding:10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.svgimg {
|
|
||||||
fill:white;
|
|
||||||
}
|
|
||||||
|
|
||||||
#iconImg {
|
|
||||||
max-width: 150px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#profileSpace {
|
|
||||||
margin-bottom: 20px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
color: white;
|
|
||||||
font-weight: 900;
|
|
||||||
font-size: larger;
|
|
||||||
}
|
|
||||||
|
|
||||||
#logout {
|
|
||||||
background: none;
|
|
||||||
cursor: pointer;
|
|
||||||
border-radius: 10px;
|
|
||||||
transition: background 0.3s ease;
|
|
||||||
padding: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#logout:hover {
|
|
||||||
background: rgba(128, 128, 128, 0.5);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -8,22 +8,4 @@ export const incomeTypes = writable([]);
|
|||||||
|
|
||||||
export const expenseTypes = writable([]);
|
export const expenseTypes = writable([]);
|
||||||
|
|
||||||
export const tempExpense = writable([])
|
|
||||||
|
|
||||||
export const tempIncome = writable([]);
|
|
||||||
|
|
||||||
export const monthIncome = writable([]);
|
|
||||||
|
|
||||||
export const monthExpense = writable([]);
|
|
||||||
|
|
||||||
export const categorizedExpense = writable([]);
|
|
||||||
|
|
||||||
export const categorizedIncome = writable([]);
|
|
||||||
|
|
||||||
export let isCategorizedExpense = writable(false);
|
|
||||||
|
|
||||||
export let isCategorizedIncome = writable(false);
|
|
||||||
|
|
||||||
export let selectedTab = writable('expenses');
|
export let selectedTab = writable('expenses');
|
||||||
|
|
||||||
export let dateText = writable("This Month");
|
|
||||||
@@ -4,27 +4,15 @@ export const themeDefault = {
|
|||||||
mainColor: '#172233',
|
mainColor: '#172233',
|
||||||
dashColor: '#F5F2F3',
|
dashColor: '#F5F2F3',
|
||||||
color: 'black',
|
color: 'black',
|
||||||
altColor: 'white',
|
altColor: 'white'
|
||||||
dashTextColor: 'black',
|
|
||||||
mainDataColor: '#F5F2F3'
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export const themeDark = {
|
export const themeDark = {
|
||||||
mainColor: '#000000',
|
mainColor: '#000000',
|
||||||
dashColor: '#202020',
|
dashColor: '#202020',
|
||||||
color: 'black',
|
color: 'black',
|
||||||
altColor: 'white',
|
altColor: 'white'
|
||||||
dashTextColor: 'white',
|
|
||||||
mainDataColor: 'black'
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export const themeColorful = {
|
|
||||||
mainColor: '#F75590',
|
|
||||||
dashColor: '#FCE4D8',
|
|
||||||
color: 'black',
|
|
||||||
altColor: 'white',
|
|
||||||
dashTextColor: 'black',
|
|
||||||
mainDataColor: '#FCE4D8'
|
|
||||||
}
|
|
||||||
export const globalStyles = writable(themeDefault);
|
export const globalStyles = writable(themeDefault);
|
||||||
|
|
||||||
|
|||||||
@@ -1,15 +1,6 @@
|
|||||||
import fs from 'fs'
|
|
||||||
import { defineConfig } from 'vite';
|
|
||||||
import { sveltekit } from '@sveltejs/kit/vite';
|
import { sveltekit } from '@sveltejs/kit/vite';
|
||||||
|
import { defineConfig } from 'vite';
|
||||||
|
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
plugins: [sveltekit()],
|
plugins: [sveltekit()]
|
||||||
server: {
|
|
||||||
port: 443,
|
|
||||||
https: {
|
|
||||||
key: fs.readFileSync('D:\\Source\\JavaProjects\\ExpenseTrackerFAF\\src\\main\\java\\com\\faf223\\expensetrackerfaf\\web\\privkey.pem'),
|
|
||||||
cert: fs.readFileSync('D:\\Source\\JavaProjects\\ExpenseTrackerFAF\\src\\main\\java\\com\\faf223\\expensetrackerfaf\\web\\fullchain.pem'),
|
|
||||||
proxy: {}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -1,189 +0,0 @@
|
|||||||
package com.faf223.expensetrackerfaf.repository;
|
|
||||||
|
|
||||||
import com.faf223.expensetrackerfaf.model.*;
|
|
||||||
import org.assertj.core.api.Assertions;
|
|
||||||
import org.junit.jupiter.api.Test;
|
|
||||||
import org.springframework.beans.factory.annotation.Autowired;
|
|
||||||
import org.springframework.boot.test.autoconfigure.jdbc.AutoConfigureTestDatabase;
|
|
||||||
import org.springframework.boot.test.autoconfigure.orm.jpa.DataJpaTest;
|
|
||||||
|
|
||||||
import java.math.BigDecimal;
|
|
||||||
import java.time.LocalDate;
|
|
||||||
import java.util.ArrayList;
|
|
||||||
import java.util.List;
|
|
||||||
import java.util.Optional;
|
|
||||||
|
|
||||||
@DataJpaTest
|
|
||||||
@AutoConfigureTestDatabase(replace = AutoConfigureTestDatabase.Replace.NONE)
|
|
||||||
public class ExpenseRepositoryTest {
|
|
||||||
|
|
||||||
@Autowired
|
|
||||||
private ExpenseRepository expenseRepository;
|
|
||||||
@Autowired
|
|
||||||
private ExpenseCategoryRepository expenseCategoryRepository;
|
|
||||||
@Autowired
|
|
||||||
private UserRepository userRepository;
|
|
||||||
|
|
||||||
@Test
|
|
||||||
public void ExpenseRepository_SaveAll_ReturnExpense() {
|
|
||||||
|
|
||||||
User user = User.builder()
|
|
||||||
.firstName("Test")
|
|
||||||
.lastName("TestLast")
|
|
||||||
.username("UserTest")
|
|
||||||
.incomes(new ArrayList<>())
|
|
||||||
.expenses(new ArrayList<>())
|
|
||||||
.build();
|
|
||||||
|
|
||||||
userRepository.save(user);
|
|
||||||
ExpenseCategory expenseCategory = expenseCategoryRepository.getReferenceById(1L);
|
|
||||||
|
|
||||||
Expense expense = Expense.builder()
|
|
||||||
.user(user)
|
|
||||||
.amount(BigDecimal.valueOf(77))
|
|
||||||
.category(expenseCategory)
|
|
||||||
.date(LocalDate.now())
|
|
||||||
.build();
|
|
||||||
|
|
||||||
Expense savedExpense = expenseRepository.save(expense);
|
|
||||||
|
|
||||||
Assertions.assertThat(savedExpense).isNotNull();
|
|
||||||
Assertions.assertThat(savedExpense.getId()).isGreaterThan(0L);
|
|
||||||
}
|
|
||||||
|
|
||||||
@Test
|
|
||||||
public void ExpenseRepository_GateAll_ReturnsMoreThenOneExpense() {
|
|
||||||
|
|
||||||
User user = User.builder()
|
|
||||||
.firstName("Test")
|
|
||||||
.lastName("TestLast")
|
|
||||||
.username("UserTest")
|
|
||||||
.incomes(new ArrayList<>())
|
|
||||||
.expenses(new ArrayList<>())
|
|
||||||
.build();
|
|
||||||
|
|
||||||
userRepository.save(user);
|
|
||||||
ExpenseCategory expenseCategory = expenseCategoryRepository.getReferenceById(1L);
|
|
||||||
|
|
||||||
List<Expense> expenseList = expenseRepository.findAll();
|
|
||||||
int qtyBefore = expenseList.size();
|
|
||||||
|
|
||||||
Expense expense1 = Expense.builder()
|
|
||||||
.user(user)
|
|
||||||
.amount(BigDecimal.valueOf(77))
|
|
||||||
.category(expenseCategory)
|
|
||||||
.date(LocalDate.now())
|
|
||||||
.build();
|
|
||||||
Expense expense2 = Expense.builder()
|
|
||||||
.user(user)
|
|
||||||
.amount(BigDecimal.valueOf(177))
|
|
||||||
.category(expenseCategory)
|
|
||||||
.date(LocalDate.now())
|
|
||||||
.build();
|
|
||||||
|
|
||||||
expenseRepository.save(expense1);
|
|
||||||
expenseRepository.save(expense2);
|
|
||||||
|
|
||||||
expenseList = expenseRepository.findAll();
|
|
||||||
|
|
||||||
Assertions.assertThat(expenseList).isNotNull();
|
|
||||||
Assertions.assertThat(expenseList.size()).isEqualTo(qtyBefore + 2);
|
|
||||||
}
|
|
||||||
|
|
||||||
@Test
|
|
||||||
public void ExpenseRepository_FindById_ReturnExpense() {
|
|
||||||
|
|
||||||
User user = User.builder()
|
|
||||||
.firstName("Test")
|
|
||||||
.lastName("TestLast")
|
|
||||||
.username("UserTest")
|
|
||||||
.incomes(new ArrayList<>())
|
|
||||||
.expenses(new ArrayList<>())
|
|
||||||
.build();
|
|
||||||
|
|
||||||
userRepository.save(user);
|
|
||||||
ExpenseCategory expenseCategory = expenseCategoryRepository.getReferenceById(1L);
|
|
||||||
|
|
||||||
Expense expense = Expense.builder()
|
|
||||||
.user(user)
|
|
||||||
.amount(BigDecimal.valueOf(77))
|
|
||||||
.category(expenseCategory)
|
|
||||||
.date(LocalDate.now())
|
|
||||||
.build();
|
|
||||||
|
|
||||||
expenseRepository.save(expense);
|
|
||||||
|
|
||||||
Optional<Expense> expenseReturn = expenseRepository.findById(expense.getId());
|
|
||||||
Assertions.assertThat(expenseReturn.isPresent()).isTrue();
|
|
||||||
}
|
|
||||||
|
|
||||||
@Test
|
|
||||||
public void ExpenseRepository_FindByUser_ReturnExpenses() {
|
|
||||||
|
|
||||||
Optional<User> user = userRepository.findByUsername("Balaban");
|
|
||||||
Assertions.assertThat(user.isPresent()).isTrue();
|
|
||||||
|
|
||||||
List<Expense> expenses = expenseRepository.findByUser(user.get());
|
|
||||||
|
|
||||||
Assertions.assertThat(expenses).isNotNull();
|
|
||||||
}
|
|
||||||
|
|
||||||
@Test
|
|
||||||
public void ExpenseRepository_FindByDate_ReturnExpenses() {
|
|
||||||
|
|
||||||
List<Expense> expenses = expenseRepository.findByDate(LocalDate.of(2023, 10, 7));
|
|
||||||
|
|
||||||
Assertions.assertThat(expenses).isNotNull();
|
|
||||||
}
|
|
||||||
|
|
||||||
@Test
|
|
||||||
public void ExpenseRepository_UpdateExpense_ReturnExpenseNotNull() {
|
|
||||||
|
|
||||||
Optional<User> user = userRepository.findByUsername("Deep Deep");
|
|
||||||
Assertions.assertThat(user.isPresent()).isTrue();
|
|
||||||
ExpenseCategory expenseCategory = expenseCategoryRepository.getReferenceById(4L);
|
|
||||||
|
|
||||||
Expense expense = Expense.builder()
|
|
||||||
.user(user.get())
|
|
||||||
.amount(BigDecimal.valueOf(700))
|
|
||||||
.category(expenseCategory)
|
|
||||||
.date(LocalDate.of(2023, 10, 5))
|
|
||||||
.build();
|
|
||||||
|
|
||||||
expenseRepository.save(expense);
|
|
||||||
|
|
||||||
Optional<Expense> expenseSave = expenseRepository.findById(expense.getId());
|
|
||||||
Assertions.assertThat(expenseSave).isNotNull();
|
|
||||||
|
|
||||||
Expense expenseToUpdate = expenseSave.get();
|
|
||||||
expenseToUpdate.setDate(LocalDate.of(2023, 10, 6));
|
|
||||||
expenseToUpdate.setAmount(BigDecimal.valueOf(777));
|
|
||||||
|
|
||||||
Expense updatedExpense = expenseRepository.save(expenseToUpdate);
|
|
||||||
|
|
||||||
Assertions.assertThat(updatedExpense).isNotNull();
|
|
||||||
Assertions.assertThat(updatedExpense.getAmount()).isEqualTo(BigDecimal.valueOf(777));
|
|
||||||
}
|
|
||||||
|
|
||||||
@Test
|
|
||||||
public void ExpenseRepository_DeleteExpense_ReturnExpenseNull() {
|
|
||||||
|
|
||||||
Optional<User> user = userRepository.findByUsername("Deep Deep");
|
|
||||||
Assertions.assertThat(user.isPresent()).isTrue();
|
|
||||||
ExpenseCategory expenseCategory = expenseCategoryRepository.getReferenceById(4L);
|
|
||||||
|
|
||||||
Expense expense = Expense.builder()
|
|
||||||
.user(user.get())
|
|
||||||
.amount(BigDecimal.valueOf(700))
|
|
||||||
.category(expenseCategory)
|
|
||||||
.date(LocalDate.of(2023, 10, 5))
|
|
||||||
.build();
|
|
||||||
|
|
||||||
expenseRepository.save(expense);
|
|
||||||
expenseRepository.deleteById(expense.getId());
|
|
||||||
|
|
||||||
Optional<Expense> deletedExpense = expenseRepository.findById(expense.getId());
|
|
||||||
|
|
||||||
Assertions.assertThat(deletedExpense.isPresent()).isFalse();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,192 +0,0 @@
|
|||||||
package com.faf223.expensetrackerfaf.repository;
|
|
||||||
|
|
||||||
import com.faf223.expensetrackerfaf.model.Income;
|
|
||||||
import com.faf223.expensetrackerfaf.model.IncomeCategory;
|
|
||||||
import com.faf223.expensetrackerfaf.model.User;
|
|
||||||
import org.assertj.core.api.Assertions;
|
|
||||||
import org.junit.jupiter.api.Test;
|
|
||||||
import org.springframework.beans.factory.annotation.Autowired;
|
|
||||||
import org.springframework.boot.test.autoconfigure.jdbc.AutoConfigureTestDatabase;
|
|
||||||
import org.springframework.boot.test.autoconfigure.orm.jpa.DataJpaTest;
|
|
||||||
|
|
||||||
import java.math.BigDecimal;
|
|
||||||
import java.time.LocalDate;
|
|
||||||
import java.util.ArrayList;
|
|
||||||
import java.util.List;
|
|
||||||
import java.util.Optional;
|
|
||||||
|
|
||||||
@DataJpaTest
|
|
||||||
@AutoConfigureTestDatabase(replace = AutoConfigureTestDatabase.Replace.NONE)
|
|
||||||
public class IncomeRepositoryTest {
|
|
||||||
|
|
||||||
@Autowired
|
|
||||||
private IncomeRepository incomeRepository;
|
|
||||||
@Autowired
|
|
||||||
private IncomeCategoryRepository incomeCategoryRepository;
|
|
||||||
@Autowired
|
|
||||||
private UserRepository userRepository;
|
|
||||||
|
|
||||||
@Test
|
|
||||||
public void IncomeRepository_SaveAll_ReturnIncome() {
|
|
||||||
|
|
||||||
User user = User.builder()
|
|
||||||
.firstName("Test")
|
|
||||||
.lastName("TestLast")
|
|
||||||
.username("UserTest")
|
|
||||||
.incomes(new ArrayList<>())
|
|
||||||
.expenses(new ArrayList<>())
|
|
||||||
.build();
|
|
||||||
|
|
||||||
userRepository.save(user);
|
|
||||||
IncomeCategory incomeCategory = incomeCategoryRepository.getReferenceById(1L);
|
|
||||||
|
|
||||||
Income income = Income.builder()
|
|
||||||
.user(user)
|
|
||||||
.amount(BigDecimal.valueOf(77))
|
|
||||||
.category(incomeCategory)
|
|
||||||
.date(LocalDate.now())
|
|
||||||
.build();
|
|
||||||
|
|
||||||
Income savedIncome = incomeRepository.save(income);
|
|
||||||
|
|
||||||
Assertions.assertThat(savedIncome).isNotNull();
|
|
||||||
Assertions.assertThat(savedIncome.getId()).isGreaterThan(0L);
|
|
||||||
}
|
|
||||||
|
|
||||||
@Test
|
|
||||||
public void IncomeRepository_GateAll_ReturnsMoreThenOneIncome() {
|
|
||||||
|
|
||||||
User user = User.builder()
|
|
||||||
.firstName("Test")
|
|
||||||
.lastName("TestLast")
|
|
||||||
.username("UserTest")
|
|
||||||
.incomes(new ArrayList<>())
|
|
||||||
.expenses(new ArrayList<>())
|
|
||||||
.build();
|
|
||||||
|
|
||||||
userRepository.save(user);
|
|
||||||
IncomeCategory incomeCategory = incomeCategoryRepository.getReferenceById(1L);
|
|
||||||
|
|
||||||
List<Income> incomeList = incomeRepository.findAll();
|
|
||||||
int qtyBefore = incomeList.size();
|
|
||||||
|
|
||||||
Income income1 = Income.builder()
|
|
||||||
.user(user)
|
|
||||||
.amount(BigDecimal.valueOf(77))
|
|
||||||
.category(incomeCategory)
|
|
||||||
.date(LocalDate.now())
|
|
||||||
.build();
|
|
||||||
Income income2 = Income.builder()
|
|
||||||
.user(user)
|
|
||||||
.amount(BigDecimal.valueOf(177))
|
|
||||||
.category(incomeCategory)
|
|
||||||
.date(LocalDate.now())
|
|
||||||
.build();
|
|
||||||
|
|
||||||
incomeRepository.save(income1);
|
|
||||||
incomeRepository.save(income2);
|
|
||||||
|
|
||||||
incomeList = incomeRepository.findAll();
|
|
||||||
|
|
||||||
Assertions.assertThat(incomeList).isNotNull();
|
|
||||||
Assertions.assertThat(incomeList.size()).isEqualTo(qtyBefore + 2);
|
|
||||||
}
|
|
||||||
|
|
||||||
@Test
|
|
||||||
public void IncomeRepository_FindById_ReturnIncome() {
|
|
||||||
|
|
||||||
User user = User.builder()
|
|
||||||
.firstName("Test")
|
|
||||||
.lastName("TestLast")
|
|
||||||
.username("UserTest")
|
|
||||||
.incomes(new ArrayList<>())
|
|
||||||
.expenses(new ArrayList<>())
|
|
||||||
.build();
|
|
||||||
|
|
||||||
userRepository.save(user);
|
|
||||||
IncomeCategory incomeCategory = incomeCategoryRepository.getReferenceById(1L);
|
|
||||||
|
|
||||||
Income income = Income.builder()
|
|
||||||
.user(user)
|
|
||||||
.amount(BigDecimal.valueOf(77))
|
|
||||||
.category(incomeCategory)
|
|
||||||
.date(LocalDate.now())
|
|
||||||
.build();
|
|
||||||
|
|
||||||
incomeRepository.save(income);
|
|
||||||
|
|
||||||
Optional<Income> incomeReturn = incomeRepository.findById(income.getId());
|
|
||||||
Assertions.assertThat(incomeReturn.isPresent()).isTrue();
|
|
||||||
}
|
|
||||||
|
|
||||||
@Test
|
|
||||||
public void IncomeRepository_FindByUser_ReturnIncomes() {
|
|
||||||
|
|
||||||
Optional<User> user = userRepository.findByUsername("Balaban");
|
|
||||||
Assertions.assertThat(user.isPresent()).isTrue();
|
|
||||||
|
|
||||||
List<Income> incomes = incomeRepository.findByUser(user.get());
|
|
||||||
|
|
||||||
Assertions.assertThat(incomes).isNotNull();
|
|
||||||
}
|
|
||||||
|
|
||||||
@Test
|
|
||||||
public void IncomeRepository_FindByDate_ReturnIncomes() {
|
|
||||||
|
|
||||||
List<Income> incomes = incomeRepository.findByDate(LocalDate.of(2023,10,7));
|
|
||||||
|
|
||||||
Assertions.assertThat(incomes).isNotNull();
|
|
||||||
}
|
|
||||||
|
|
||||||
@Test
|
|
||||||
public void IncomeRepository_UpdateIncome_ReturnIncomeNotNull() {
|
|
||||||
|
|
||||||
Optional<User> user = userRepository.findByUsername("Deep Deep");
|
|
||||||
Assertions.assertThat(user.isPresent()).isTrue();
|
|
||||||
IncomeCategory incomeCategory = incomeCategoryRepository.getReferenceById(4L);
|
|
||||||
|
|
||||||
Income income = Income.builder()
|
|
||||||
.user(user.get())
|
|
||||||
.amount(BigDecimal.valueOf(700))
|
|
||||||
.category(incomeCategory)
|
|
||||||
.date(LocalDate.of(2023,10,5))
|
|
||||||
.build();
|
|
||||||
|
|
||||||
incomeRepository.save(income);
|
|
||||||
|
|
||||||
Optional<Income> incomeSave = incomeRepository.findById(income.getId());
|
|
||||||
Assertions.assertThat(incomeSave).isNotNull();
|
|
||||||
|
|
||||||
Income incomeToUpdate = incomeSave.get();
|
|
||||||
incomeToUpdate.setDate(LocalDate.of(2023,10,6));
|
|
||||||
incomeToUpdate.setAmount(BigDecimal.valueOf(777));
|
|
||||||
|
|
||||||
Income updatedIncome = incomeRepository.save(incomeToUpdate);
|
|
||||||
|
|
||||||
Assertions.assertThat(updatedIncome).isNotNull();
|
|
||||||
Assertions.assertThat(updatedIncome.getAmount()).isEqualTo(BigDecimal.valueOf(777));
|
|
||||||
}
|
|
||||||
|
|
||||||
@Test
|
|
||||||
public void IncomeRepository_DeleteIncome_ReturnIncomeNull() {
|
|
||||||
|
|
||||||
Optional<User> user = userRepository.findByUsername("Deep Deep");
|
|
||||||
Assertions.assertThat(user.isPresent()).isTrue();
|
|
||||||
IncomeCategory incomeCategory = incomeCategoryRepository.getReferenceById(4L);
|
|
||||||
|
|
||||||
Income income = Income.builder()
|
|
||||||
.user(user.get())
|
|
||||||
.amount(BigDecimal.valueOf(700))
|
|
||||||
.category(incomeCategory)
|
|
||||||
.date(LocalDate.of(2023,10,5))
|
|
||||||
.build();
|
|
||||||
|
|
||||||
incomeRepository.save(income);
|
|
||||||
incomeRepository.deleteById(income.getId());
|
|
||||||
|
|
||||||
Optional<Income> deletedIncome = incomeRepository.findById(income.getId());
|
|
||||||
|
|
||||||
Assertions.assertThat(deletedIncome.isPresent()).isFalse();
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
@@ -1,73 +0,0 @@
|
|||||||
package com.faf223.expensetrackerfaf.service;
|
|
||||||
|
|
||||||
import com.faf223.expensetrackerfaf.model.IMoneyTransaction;
|
|
||||||
import com.faf223.expensetrackerfaf.model.Income;
|
|
||||||
import com.faf223.expensetrackerfaf.model.IncomeCategory;
|
|
||||||
import com.faf223.expensetrackerfaf.model.User;
|
|
||||||
import com.faf223.expensetrackerfaf.repository.IncomeCategoryRepository;
|
|
||||||
import com.faf223.expensetrackerfaf.repository.IncomeRepository;
|
|
||||||
import com.faf223.expensetrackerfaf.repository.UserRepository;
|
|
||||||
import org.assertj.core.api.Assertions;
|
|
||||||
import org.junit.jupiter.api.Test;
|
|
||||||
import org.junit.jupiter.api.extension.ExtendWith;
|
|
||||||
import org.mockito.InjectMocks;
|
|
||||||
import org.mockito.Mock;
|
|
||||||
import org.mockito.Mockito;
|
|
||||||
import org.mockito.junit.jupiter.MockitoExtension;
|
|
||||||
|
|
||||||
import java.math.BigDecimal;
|
|
||||||
import java.time.LocalDate;
|
|
||||||
import java.util.ArrayList;
|
|
||||||
import java.util.List;
|
|
||||||
import java.util.Optional;
|
|
||||||
|
|
||||||
import static org.mockito.Mockito.when;
|
|
||||||
|
|
||||||
@ExtendWith(MockitoExtension.class)
|
|
||||||
public class IncomeServiceTest {
|
|
||||||
|
|
||||||
@Mock
|
|
||||||
private IncomeRepository incomeRepository;
|
|
||||||
@Mock
|
|
||||||
private IncomeCategoryRepository incomeCategoryRepository;
|
|
||||||
@Mock
|
|
||||||
private UserRepository userRepository;
|
|
||||||
@InjectMocks
|
|
||||||
private IncomeService incomeService;
|
|
||||||
|
|
||||||
// public void createOrUpdate(IMoneyTransaction income) {
|
|
||||||
// incomeRepository.save((Income) income);
|
|
||||||
// }
|
|
||||||
|
|
||||||
@Test
|
|
||||||
public void IncomeService_CreateIncome_ReturnsIncome() {
|
|
||||||
|
|
||||||
User user = User.builder().build();
|
|
||||||
when(userRepository.findByUsername("Deep Deep")).thenReturn(Optional.of(user));
|
|
||||||
user = userRepository.findByUsername("Deep Deep").get();
|
|
||||||
|
|
||||||
IncomeCategory incomeCategory = IncomeCategory.builder().build();
|
|
||||||
when(incomeCategoryRepository.findById(1L)).thenReturn(Optional.of(incomeCategory));
|
|
||||||
incomeCategory = incomeCategoryRepository.findById(1L).get();
|
|
||||||
|
|
||||||
Income income = Income.builder()
|
|
||||||
.user(user)
|
|
||||||
.amount(BigDecimal.valueOf(111))
|
|
||||||
.category(incomeCategory)
|
|
||||||
.date(LocalDate.of(2023,10,5))
|
|
||||||
.build();
|
|
||||||
|
|
||||||
when(incomeRepository.save(Mockito.any(Income.class))).thenReturn(income);
|
|
||||||
incomeService.createOrUpdate(income);
|
|
||||||
|
|
||||||
Assertions.assertThat(income.getId()).isGreaterThan(0);
|
|
||||||
|
|
||||||
List<Income> incomes = new ArrayList<>();
|
|
||||||
when(incomeRepository.findByUser(user)).thenReturn(List.of(income));
|
|
||||||
incomes = incomeRepository.findByUser(user);
|
|
||||||
|
|
||||||
// TODO: finish service test
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user