diff --git a/src/components/Budget/BudgetBox.vue b/src/components/Budget/BudgetBox.vue
index bf75574c9f70d67475b2ca3410c5a73661a9a600..d3b98521c14bb9b6197759d70201d96cd4f2aac5 100644
--- a/src/components/Budget/BudgetBox.vue
+++ b/src/components/Budget/BudgetBox.vue
@@ -3,7 +3,6 @@ import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter();
-
const props = defineProps({
title: {
type: String,
@@ -19,16 +18,26 @@ const props = defineProps({
}
})
+// Calculated balance variable
let balance = props.budget - props.expenses
-
+// Reactive variable for determining background color
const iRef = ref(null)
+/**
+ * Checks if the balance is positive, and depending on the value
+ * changes background color to green (positive) or red (negative)
+ */
onMounted(() => {
if (balance >= 0) {
+ // By default, the background is set to red
iRef.value.style.backgroundColor = 'rgba(34, 231, 50, 0.43)';
}
})
+// TODO consider store chosen budget in a pinia store
+/**
+ * Navigates to the pressed budget
+ */
const onBudgetContainerPressed = () => {
router.push('/budget')
}
diff --git a/src/components/Budget/ExpenseBox.vue b/src/components/Budget/ExpenseBox.vue
index 858d61179d6931f063859b0ca7e7f0a2664ffaa6..7cdcde51e5b7f1a53aeebe0ba1f3221d4e12ae46 100644
--- a/src/components/Budget/ExpenseBox.vue
+++ b/src/components/Budget/ExpenseBox.vue
@@ -1,5 +1,4 @@
<script setup lang="ts">
-
import Button1 from '@/components/Buttons/Button1.vue'
import { type CreateAppFunction, ref } from 'vue'
@@ -19,13 +18,23 @@ const props = defineProps({
}
})
+// Reactive variables for expense description and amount
let editDescription = ref('')
let editAmount = ref('')
+/**
+ * Emits an event to parent component with the type 'deleteEvent' to signalize
+ * that an expense with index 'index' must be removed.
+ */
const emitDeleteEvent = () => {
emit('deleteEvent', props.index)
}
+/**
+ * Emits an event to parent component with the type 'editEvent' to signalize
+ * that an expense with index 'index' is to be edited with the values 'editDescription'
+ * and 'editAmount'
+ */
const emitEditEvent = () => {
emit('editEvent', props.index, editDescription.value, editAmount.value)
}
diff --git a/src/views/BudgetOverview.vue b/src/views/BudgetOverview.vue
index 6fc66387dd8dec41a6376be2610a549a831cc9db..e58fb67ed304fcffc341f2baea40d1ace164c119 100644
--- a/src/views/BudgetOverview.vue
+++ b/src/views/BudgetOverview.vue
@@ -17,6 +17,7 @@ import BudgetBox from '@/components/Budget/BudgetBox.vue'
</div>
</div>
+ <!--TODO make this more generic-->
<ul class="budgetContainer">
<li><budget-box title="April 2024" budget="1000" expenses="908700"></budget-box></li>
<li><budget-box title="Mai 2024" budget="1000" expenses="87"></budget-box></li>
@@ -52,7 +53,6 @@ import BudgetBox from '@/components/Budget/BudgetBox.vue'
</template>
<style scoped>
-
.collapse-container {
align-content: center;
justify-content: center;
@@ -71,9 +71,4 @@ import BudgetBox from '@/components/Budget/BudgetBox.vue'
ul > li {
margin: 10px 0;
}
-
-#navbar {
-
-}
-
</style>
\ No newline at end of file
diff --git a/src/views/BudgetView.vue b/src/views/BudgetView.vue
index 706a9bfc0bfd02254cbd530ba2814e64355ff381..65265d0a57aa6419771757f6800517aa1b54db50 100644
--- a/src/views/BudgetView.vue
+++ b/src/views/BudgetView.vue
@@ -27,6 +27,7 @@ let expenseJSONObject = ref({
]
});
+// Initially updates the total expense display
for (let expense of expenseJSONObject.value.expenses) {
expenses.value += expense.value
}
@@ -36,9 +37,13 @@ let budgetTitle = ref('')
let budgetValue = ref()
let expenseDescription = ref('')
let expenseAmount = ref()
-
+// Reactive background variable
const iRef = ref()
+/**
+ * Checks the value of the balance and adjust background color depending
+ * on negative or positive value after rendering.
+ */
onMounted(() => {
if (balance.value >= 0) {
iRef.value.style.backgroundColor = 'rgba(34, 231, 50, 0.43)';
@@ -46,11 +51,16 @@ onMounted(() => {
balance.value = budget.value - expenses.value
})
+/**
+ * Updates the balance and background color based on the budget and expenses.
+ */
const updateBalance = () => {
+ // Resets expenses and then re-calculates it
expenses.value = 0
for (let expense of expenseJSONObject.value.expenses) {
expenses.value += expense.value
}
+ // Updates balance value and background
balance.value = budget.value - expenses.value
if (balance.value >= 0) {
iRef.value.style.backgroundColor = 'rgba(34, 231, 50, 0.43)';
@@ -59,11 +69,23 @@ const updateBalance = () => {
}
}
+/**
+ * Calculates a new budget and updates the balance.
+ *
+ * @param newBudget The new budget value.
+ */
const calculateNewBudget = (newBudget: number) => {
budget.value = newBudget
updateBalance()
}
+/**
+ * TODO update javadoc when backend integration is done
+ * Adds a new expense to the expense JSON object and updates the balance.
+ *
+ * @param expenseDescription The description of the expense.
+ * @param expenseValue The value of the expense.
+ */
const addNewExpense = (expenseDescription: string, expenseValue: number) => {
expenseJSONObject.value.expenses.push({
"title": expenseDescription,
@@ -72,15 +94,33 @@ const addNewExpense = (expenseDescription: string, expenseValue: number) => {
updateBalance()
}
+
+/**
+ * Updates the title of the budget.
+ *
+ * @param newTitle The new title for the budget.
+ */
const editBudgetTitle = (newTitle: string) => {
title.value = newTitle
}
+/**
+ * Deletes an expense from the list of expenses.
+ *
+ * @param index The index of the expense to delete.
+ */
const deleteExpense = (index: number) => {
expenseJSONObject.value.expenses.splice(index, 1);
updateBalance()
}
+/**
+ * Edits an existing expense in the list of expenses.
+ *
+ * @param index The index of the expense to edit.
+ * @param newDescription The new description for the expense.
+ * @param newAmount The new amount for the expense.
+ */
const editExpense = (index: number, newDescription: string, newAmount: number) => {
console.log('Reached')
expenseJSONObject.value.expenses[index].title = newDescription
@@ -186,8 +226,7 @@ const onDeleteBudgetPressed = () => {
:description="expense.title"
:amount="expense.value"
@deleteEvent="deleteExpense"
- @editEvent="editExpense"
- />
+ @editEvent="editExpense"/>
</div>
</div>
@@ -284,6 +323,5 @@ i {
overflow-y: auto;
overflow-x: hidden;
max-height: 100vh;
-}
</style>
\ No newline at end of file