Feat: Add summarize box

This commit is contained in:
Bertrand Benjamin 2018-11-30 18:36:30 +01:00
parent 84512969ad
commit e7d792e7ef
7 changed files with 198 additions and 14 deletions

71
config/postes.yml Normal file
View File

@ -0,0 +1,71 @@
---
postes:
total:
name: Tout
variant: info
icon: file-invoice-dollar
cash:
name: Cash
variant: info
icon: money-bill-wave
words:
- RETRAIT
CB:
name: CB
variant: info
icon: credit-card
words:
- PAIEMENT
other:
name: Autre
variant: info
icon: directions
invert: true
words:
- PAIEMENT
- RETRAIT
autoroute:
name: Autoroute
variant: danger
icon: road
words:
- AUTOROUTE
- APRR
essence:
name: Essence
variant: danger
icon: charging-station
words:
- CARBU
- TOTAL
- ESSFLO
- STATION
- AVIA
courses:
name: Courses
variant: warning
icon: shopping-cart
words:
- BIOCOOP
- LA VIE CLAIRE
- MAISON VITALE
- BOUCHERIE
- SALAISON CHALAM
- INTERMARCHE
- LA FERME DU COIN
bio:
name: Bio
variant: success
icon: shopping-basket
words:
- BIOCOOP
- LA VIE CLAIRE
- MAISON VITALE

View File

@ -1,9 +0,0 @@
---
postes:
autoroute:
- AUTOROUTE
- APRR
essence: [CARBU, TOTAL, ESSFLO, STATION, AVIA]
bouffe: [BIOCOOP, LA VIE CLAIRE, MAISON VITALE, BOUCHERIE, SALAISON CHALAM, INTERMARCHE, LA FERME DU COIN]
bio: [BIOCOOP, LA VIE CLAIRE, MAISON VITALE]

78
src/components/box.vue Normal file
View File

@ -0,0 +1,78 @@
<template>
<b-card :bg-variant="poste.variant"
text-variant="white"
class="text-center">
<p class="card-text">
<font-awesome-icon :icon="poste.icon" />
{{ poste.name }}
</br>
{{ total() }}
</p>
</b-card>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
name: 'box',
props: [
'postename',
'rows'
],
data () {
return {
empty_poste: {
variant: '',
icon: '',
name: ''
}
}
},
computed: {
...mapGetters('config', [
'postes'
]),
poste () {
if (this.postes) {
return this.postes[this.postename]
} else {
return this.empty_poste
}
}
},
methods: {
filter_rows () {
if (this.poste.words) {
if (this.poste.invert) {
return this.rows.filter(x => {
return this.poste.words.every(v => {
return x.Libellé.indexOf(v) < 0
})
})
} else {
return this.rows.filter(x => {
return this.poste.words.some(v => {
return x.Libellé.indexOf(v) >= 0
})
})
}
} else {
return this.rows
}
},
total () {
return Math.round(
-this.filter_rows()
.map(x => parseFloat(x.Montant))
.reduce((sum, x) => sum + x, 0)
)
},
count () {
}
},
}
</script>
<style scoped>
</style>

View File

@ -9,12 +9,18 @@ import 'bootstrap-vue/dist/bootstrap-vue.css'
import { library } from '@fortawesome/fontawesome-svg-core' import { library } from '@fortawesome/fontawesome-svg-core'
import { import {
faCar, faChargingStation, faUtensils, faFileInvoiceDollar faCar, faChargingStation, faRoad,
faUtensils, faDirections,
faFileInvoiceDollar, faMoneyBillWave, faCreditCard,
faShoppingCart, faShoppingBasket
} from '@fortawesome/free-solid-svg-icons' } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
library.add( library.add(
faCar, faChargingStation, faUtensils, faFileInvoiceDollar faCar, faChargingStation, faRoad,
faUtensils, faDirections,
faFileInvoiceDollar, faMoneyBillWave, faCreditCard,
faShoppingCart, faShoppingBasket
) )
Vue.component('font-awesome-icon', FontAwesomeIcon) Vue.component('font-awesome-icon', FontAwesomeIcon)

View File

@ -1,15 +1,43 @@
import { readFile } from 'fs'
import path from 'path'
import yaml from 'js-yaml'
export default { export default {
namespaced: true, namespaced: true,
state: { state: {
data_dir: '/home/lafrite/scripts/comptes/data/' data_dir: '/home/lafrite/scripts/comptes/data/',
postes_filename: 'postes.yml',
postes: {}
}, },
getters: { getters: {
data_dir: (state) => { data_dir: (state) => {
return state.data_dir return state.data_dir
},
postes_filename: (state) => {
return state.postes_filename
},
postes: (state) => {
return state.postes
} }
}, },
mutations: { mutations: {
SET_POSTES: (state, { postes }) => {
state.postes = postes
}
}, },
actions: { actions: {
async load_postes (context) {
readFile(path.join(context.getters.data_dir, context.getters.postes_filename), 'utf8', (err, content) => {
if (err) {
console.log(err)
} else {
var parseConfig = {
header: true
}
var parsed = yaml.safeLoad(content, parseConfig)
context.commit('SET_POSTES', { postes: parsed.postes })
}
})
}
} }
} }

View File

@ -1,4 +1,3 @@
import Vue from 'vue'
import { readdir, readFile } from 'fs' import { readdir, readFile } from 'fs'
import path from 'path' import path from 'path'
import Papa from 'papaparse' import Papa from 'papaparse'

View File

@ -12,12 +12,20 @@
</b-row> </b-row>
</b-container> </b-container>
<b-card-group deck class="mb-3">
<box postename="total" :rows="filter_rows"></box>
<box postename="cash" :rows="filter_rows"></box>
<box postename="CB" :rows="filter_rows"></box>
<box postename="other" :rows="filter_rows"></box>
</b-card-group>
<b-table striped hover :items="filter_rows" :fields='fields'></b-table> <b-table striped hover :items="filter_rows" :fields='fields'></b-table>
</div> </div>
</template> </template>
<script> <script>
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
import box from '../components/box'
var today = new Date() var today = new Date()
var monthAgo = new Date() var monthAgo = new Date()
@ -26,6 +34,7 @@ monthAgo.setMonth(monthAgo.getMonth() - 1)
export default { export default {
name: 'home', name: 'home',
components: { components: {
box: box
}, },
data () { data () {
return { return {
@ -50,12 +59,14 @@ export default {
} }
}, },
mounted: function () { mounted: function () {
this.$store.dispatch('config/load_postes')
this.$store.dispatch('datas/find_csv') this.$store.dispatch('datas/find_csv')
}, },
computed: { computed: {
...mapGetters({ ...mapGetters({
'csvs': 'datas/csvs', 'csvs': 'datas/csvs',
'rows': 'datas/rows' 'rows': 'datas/rows',
'postes': 'config/postes'
}), }),
filter_rows () { filter_rows () {
return this.filter_date(this.filter_spending(this.rows)) return this.filter_date(this.filter_spending(this.rows))