Members
(constant) BUDGET
Instance of Budget representing the user's budget.
- Source:
(constant) EXPENSES
Array of all transactions categorized as an expoense.
- Source:
(constant) HttpInterface
HTTP Interface
Acts as an interface which provides all communications which are forwarded to the server. Rather than having different components be responsible for their own requests through the API, the interface is designed with the intention to acts as an intermediary between the client and the server.
- Version:
- 17.04.2023
- Since:
- 17.04.2023
- Source:
(constant) INCOMES
Array of all transactions categorized as an income.
- Source:
(constant) SERVER_URL
URL of the server which delivers the API.
- Source:
(constant) SESSION
Instance of Session which are to hold the JWT.
- Source:
(constant) SHOW_AUTHENTICATION_BUDGET_ALERT
Receive alert with budget summary upon successful login.
(constant) SHOW_AUTHENTICATION_FAILURE_ALERT
Receive alert upon failed authorization.
(constant) SHOW_BUDGET_FAILURE_ALERT
Receive alert upon failure when fetching the budget.
(constant) SHOW_TRANSACTION_ADDITION_ALERT
Receive alert which confirms the creation of a transaction.
(constant) SHOW_TRANSACTION_DELETION_ALERT
Receive alert which confirms the deletion of a transaction.
(constant) SHOW_TRANSACTION_EDITING_ALERT
Receive alert which confirms the update of a transaction.
(constant) SHOW_TRANSACTION_FAILURE_ALERT
Receive alert upon failure when fetching transactions.
(constant) SHOW_TRANSACTION_FETCHING_ALERT
Receive alert with amount of transactions related to the budget upon successful login.
Methods
ActiveLink()
React component which returns a NavLink component which is used for routing purposes in the navbar as well as in a couple of buttons in the login- and register-page. The code is inspired from an example provided by Girts Strazdins at a lecture at NTNU Ålesund for the course IDATA2301 - Web Technologies.
- Source:
- See:
AddTransaction()
Component for creating a new transaction. It consists of a pop-up window with input fields which represents the data associated with the new transaction.
Parameters:
| Name | Type | Description |
|---|---|---|
props.type |
String | The type of the transaction which is either "Income" or "Expense". |
props.addTransaction |
Function for adding the new transaction. |
Analytics()
Analytics component which are to be displayed in the analytics page of the application. It provides a linegraph for displaying all incomes and expenses ordered by date using the LineChart component as well as the sum of incomes and expenses in a bar diagram using the BarChart component.
- Source:
App()
Main component of the React application. It is the ancestor of all other components.
BarChart()
BarChart component imported from ChartJS. It is used to display all transactions associated with the given budget.
Parameters:
| Name | Type | Description |
|---|---|---|
props.income |
Array | Income values represented by integers. |
props.expense |
Array | Expense values represented by integers. |
- Source:
- See:
Budget()
Component which are to be displayed on the budget-page. It contains a Slider component for adjusting the boundary of the budget as well as DatePicker components for adjusting the starting date and ending date of the budget. It also displays DataGrid tables which contains incomes and transactions with the possibility of adding, editing, and deleting a transaction. Lastly, it displays a short summary of the status of the budget as clean text.
- Source:
CustomToolbar()
Customized ToolBar component for the DataGrid components which displays the transactions.
- Source:
DashBoard()
DashBoard component which represents the landing-page after a successful user authentication. It displays a short summary from a given date regarding the status of the budget as well as what transactions which was made at the given date.
The data is displayed through regular text and through the BarChart component which shows the sum of incomes vs. the sum of expenses. The date which are to be summarised can be picked using the DatePicker component on the top of the page.
- Source:
DashboardRouting()
Component which redirects to the Dashboard component.
- Source:
EditTransaction()
Component for editing an existing transaction. It consists of a pop-up window with input fields which represents the data associated with the transaction.
Parameters:
| Name | Type | Description |
|---|---|---|
props.data |
The transaction data which are to be displayed in the editor. |
|
props.type |
String | The type of the transaction which is either "Income" or "Expense". |
props.updateTransaction |
Function for updating a given transaction. |
LineChart()
LineChart component imported from ChartJS. It is used to display all transactions associated with the given budget.
Parameters:
| Name | Type | Description |
|---|---|---|
props.incomes |
Array | Income values represented by integers. |
props.expenses |
Array | Expense values represented by integers. |
props.labels |
Array | Labels to be displayed represented by strings. |
Login()
Login-component which represents the login-page to be displayed on the /login path. It provides a form for the user to input its user credentials, and the functionality for forwarding the credentials to the server for authentication.
- Source:
MainSection()
MainSection component responsible for providing the correct page-components at the given route paths. The code is inspired from an example provided by Girts Strazdins at a lecture at NTNU Ålesund for the course IDATA2301 - Web Technologies.
- Source:
- See:
NavBar()
React component which represents the navbar in the website. It has icons which routes to different pages, and comes in two different modes.
The first mode is a disabled variant which is displayed when a user is not yet authenticated. The second mode is an enabled variant which lets an authenticated user maneouver throughout the website.
When it comes to code related to routing, the code is inspired from an example provided by Girts Strazdins at a lecture at NTNU Ålesund for the course IDATA2301 - Web Technologies.
- Source:
- See:
Register()
Register-component which represents the sign-up-page to be displayed on the /register path. It provides a form for the user to input its preferred user credentials, and the functionality for forwarding the credentials to the server for registration and authentication.
- Source:
RegisterForm()
Sign-up form component which provides the input fields for the user to write its preferred user credentials as well as buttons for signing up and to return to the login-page.
Parameters:
| Name | Type | Description |
|---|---|---|
props.getStrength |
The getStrength function which is used to determine password strength. |
|
props.handleSignup |
The handleSignUp function which is used to send a sign-up request. |
- Source:
Slider()
Slider component which is imported from fseehawer. It is used to adjust the upper boundary of budget spendings.
- Source:
- See:
getExpensesAsDateList() → {Array}
Returns an array containing the sum of expenses made on each date which a transaction has been made.
- Source:
Returns:
List containing the sum of expenses made on each transaction-date.
- Type
- Array
getExpensesAsDateObject() → {Object}
Returns an object which consists a list of all expenses made, and a list with the corresponding dates of the expenses.
- Source:
Returns:
Object containing all expenses and corresponding dates.
- Type
- Object
getIncomesAsDateList() → {Array}
Returns an array containing the sum of incomes made on each date which a transaction has been made.
- Source:
Returns:
List containing the sum of incomes made on each transaction-date.
- Type
- Array
getIncomesAsDateObject() → {Object}
Returns an object which consists a list of all incomes made, and a list with the corresponding dates of the incomes.
- Source:
Returns:
Object containing all incomes and corresponding dates.
- Type
- Object
getTransactionDatesList() → {Array}
Returns a list of all dates which a transaction has been made in ascending order.
- Source:
Returns:
List of transaction dates.
- Type
- Array