Annika/budgit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Analysis sidebar now shows relevant information for selected category

Browse Source
This commit is contained in:
Annika
2022-07-14 10:46:37 -06:00
parent c6a36f54a9
commit 01389630f8
6 changed files with 68 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
budgit.client/package-lock.json
Generated
+27
View File
@@ -13,9 +13,11 @@
"@popperjs/core": "^2.10.2",
"axios": "^0.23.0",
"bootstrap": "^5.1.3",
"chart.js": "^3.8.0",
"socket.io-client": "^4.1.2",
"sweetalert2": "^11.1.9",
"vue": "^3.2.11",
"vue-chartjs": "^4.1.1",
"vue-router": "^4.0.8"
},
"devDependencies": {
@@ -674,6 +676,11 @@
}
]
},
"node_modules/chart.js": {
"version": "3.8.0",
"resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.8.0.tgz",
"integrity": "sha512-cr8xhrXjLIXVLOBZPkBZVF6NDeiVIrPLHcMhnON7UufudL+CNeRrD+wpYanswlm8NpudMdrt3CHoLMQMxJhHRg=="
},
"node_modules/chokidar": {
"version": "3.5.3",
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
@@ -3493,6 +3500,15 @@
"@vue/shared": "3.2.20"
}
},
"node_modules/vue-chartjs": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/vue-chartjs/-/vue-chartjs-4.1.1.tgz",
"integrity": "sha512-rKIQ3jPrjhwxjKdNJppnYxRuBSrx4QeM3nNHsfIxEqjX6QS4Jq6e6vnZBxh2MDpURDC2uvuI2N0eIt1cWXbBVA==",
"peerDependencies": {
"chart.js": "^3.7.0",
"vue": "^3.0.0-0 || ^2.6.0"
}
},
"node_modules/vue-eslint-parser": {
"version": "7.11.0",
"resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.11.0.tgz",
@@ -4165,6 +4181,11 @@
"integrity": "sha512-ybhCrjNtkFji1/Wto6SSJKkWk6kZgVQsDq5QI83SafsF6FXv2JB4df9eEdH6g8sdGgqTXrFLjAxqBGgYoU3azQ==",
"dev": true
},
"chart.js": {
"version": "3.8.0",
"resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.8.0.tgz",
"integrity": "sha512-cr8xhrXjLIXVLOBZPkBZVF6NDeiVIrPLHcMhnON7UufudL+CNeRrD+wpYanswlm8NpudMdrt3CHoLMQMxJhHRg=="
},
"chokidar": {
"version": "3.5.3",
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
@@ -6144,6 +6165,12 @@
"@vue/shared": "3.2.20"
}
},
"vue-chartjs": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/vue-chartjs/-/vue-chartjs-4.1.1.tgz",
"integrity": "sha512-rKIQ3jPrjhwxjKdNJppnYxRuBSrx4QeM3nNHsfIxEqjX6QS4Jq6e6vnZBxh2MDpURDC2uvuI2N0eIt1cWXbBVA==",
"requires": {}
},
"vue-eslint-parser": {
"version": "7.11.0",
"resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.11.0.tgz",
budgit.client/package.json
+2
View File
@@ -12,9 +12,11 @@
"@popperjs/core": "^2.10.2",
"axios": "^0.23.0",
"bootstrap": "^5.1.3",
"chart.js": "^3.8.0",
"socket.io-client": "^4.1.2",
"sweetalert2": "^11.1.9",
"vue": "^3.2.11",
"vue-chartjs": "^4.1.1",
"vue-router": "^4.0.8"
},
"devDependencies": {
budgit.client/src/components/Analysis.vue
+15 -4
View File
@@ -1,8 +1,8 @@
<template>
<div class="component">
Analysis Container
<p>{{category.name}}</p>
<div class="component p-2">
<h3 :class="`text-3xl ${totalSpent() > category.budgeted ? 'text-red-400' : 'text-green-300'}`">{{category.name}}</h3>
<h4 class="text-2xl">Spent: ${{totalSpent()}}</h4>
<h4 class="text-2xl">Budgeted: ${{category.budgeted}}</h4>
</div>
</template>
@@ -11,9 +11,20 @@
import { computed, reactive, onMounted, ref, watchEffect } from "vue";
import { AppState } from '../AppState'
export default {
setup(){
return {
totalSpent() {
let total = 0;
if (!this.category.transactions) {
return 0
}
for (let t = 0; t < this.category.transactions.length; t++) {
total += this.category.transactions[t].amount // TODO count inflow and outflow seperately
}
return total
},
category: computed(() => AppState.activeCategory)
}
}
budgit.client/src/components/Category.vue
+1 -1
View File
@@ -30,7 +30,7 @@ export default {
return 0
}
for (let t = 0; t < props.category.transactions.length; t++) {
total += props.category.transactions[t].amount
total += props.category.transactions[t].amount // TODO count inflow and outflow seperately
}
return total
},
budgit.client/src/pages/OverviewPage.vue
+7 -1
View File
@@ -13,7 +13,7 @@
<Analysis />
</div>
<div class="md:w-8/12 md:mr-4">
<div class="flex justify-between bg-stone-700 text-green-300 hover:bg-green-200 hover:text-stone-900 mb-2 p-2 pr-0">
<div class="flex justify-between bg-stone-700 text-green-300 hover:bg-green-200 hover:text-stone-900 mb-2 p-2 pr-0" @click="viewOverview()">
<h3 class="text-2xl font-semibold">Category</h3>
<div class="flex">
<p class="w-16 font-semibold px-2 border-l-2 border-stone-900">Spent</p>
@@ -39,7 +39,10 @@ export default {
onMounted(async () => {
try {
// console.log(AppState.categories)
// console.log('onMounted call')
await categoriesService.getAll()
// AppState.activeCategory =
await categoriesService.getOverview()
// console.log(AppState.categories)
} catch (error) {
logger.log(error)
@@ -54,6 +57,9 @@ export default {
} catch (error) {
console.log(error)
}
},
async viewOverview() {
await categoriesService.getOverview()
}
}
}
budgit.client/src/services/CategoriesService.js
+16
View File
@@ -1,6 +1,7 @@
import { AppState } from "../AppState"
import { logger } from "../utils/Logger"
import { api } from "./AxiosService"
import { transactionsService } from "./TransactionsService"
class CategoriesService {
@@ -14,6 +15,21 @@ class CategoriesService {
const res = await api.post('api/categories', {name: newCatName})
AppState.categories.push(res.data)
}
async getOverview() {
// console.log('categories service call')
await transactionsService.getAll()
let overview = {
name: 'Overview',
budgeted: 0,
targetAmt: 0, // this should eventually do something
transactions: AppState.transactions
}
for (const c in AppState.categories) {
overview.budgeted += AppState.categories[c].budgeted
}
AppState.activeCategory = overview
}
}
export const categoriesService = new CategoriesService()