mirror of
https://github.com/firefly-iii/firefly-iii.git
synced 2025-11-17 07:08:19 +00:00
Update vue
This commit is contained in:
James Cole
@@ -19,165 +19,238 @@
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div class="row">
|
||||
<div class="col-md-3 col-sm-6 col-12">
|
||||
<div class="info-box">
|
||||
<span class="info-box-icon"><i class="far fa-bookmark text-info"></i></span>
|
||||
<div class="row">
|
||||
<div class="col-md-3 col-sm-6 col-12">
|
||||
<div class="info-box">
|
||||
<span class="info-box-icon"><i class="far fa-bookmark text-info"></i></span>
|
||||
|
||||
<div class="info-box-content">
|
||||
<span class="info-box-text">{{ $t("firefly.balance") }}</span>
|
||||
<!-- TODO dont take the first, take default currency OR first -->
|
||||
<span class="info-box-number" v-if="balances.length > 0">{{ balances[0].value_parsed }}</span>
|
||||
<div class="info-box-content">
|
||||
<span class="info-box-text">{{ $t("firefly.balance") }}</span>
|
||||
<!-- only preferred currency -->
|
||||
<span class="info-box-number" v-for="balance in prefCurrencyBalances" :title="balance.sub_title">{{ balance.value_parsed }}</span>
|
||||
|
||||
<div class="progress bg-info">
|
||||
<div class="progress-bar" style="width: 0"></div>
|
||||
</div>
|
||||
<span class="progress-description">
|
||||
<span v-for="balance in balances">{{ balance.sub_title }}<br></span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-sm-6 col-md-3">
|
||||
<div class="info-box">
|
||||
<span class="info-box-icon"><i class="far fa-calendar-alt text-teal"></i></span>
|
||||
|
||||
<div class="info-box-content">
|
||||
<span class="info-box-text"><span>{{ $t('firefly.bills_to_pay') }}</span></span>
|
||||
<!-- TODO dont take the first, take default currency OR first -->
|
||||
<span class="info-box-number" v-if="1 === billsUnpaid.length && billsPaid.length > 0">{{ billsUnpaid[0].value_parsed }}</span>
|
||||
|
||||
<div class="progress bg-teal">
|
||||
<div class="progress-bar" style="width: 0"></div>
|
||||
</div>
|
||||
<span class="progress-description">
|
||||
<!-- TODO dont take the first, take default currency OR first -->
|
||||
<span v-if="1 === billsUnpaid.length && 1 === billsPaid.length">{{ $t('firefly.paid') }}: {{ billsPaid[0].value_parsed }}</span>
|
||||
<span v-if="billsUnpaid.length > 1">
|
||||
<span v-for="(bill, index) in billsUnpaid" :key="bill.key">
|
||||
{{ bill.value_parsed }}<span v-if="index+1 !== billsUnpaid.length">, </span>
|
||||
</span>
|
||||
<div class="progress bg-info">
|
||||
<div class="progress-bar" style="width: 0"></div>
|
||||
</div>
|
||||
<!-- all others -->
|
||||
<span class="progress-description">
|
||||
<span v-for="(balance, index) in notPrefCurrencyBalances" :title="balance.sub_title">
|
||||
{{ balance.value_parsed }}<span v-if="index+1 !== notPrefCurrencyBalances.length">, </span>
|
||||
</span>
|
||||
<span v-if="0===notPrefCurrencyBalances.length"> </span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- altijd iets in bold -->
|
||||
<!-- subtitle verschilt -->
|
||||
<!-- fix for small devices only -->
|
||||
<div class="clearfix hidden-md-up"></div>
|
||||
|
||||
<!-- left to spend -->
|
||||
<div class="col-12 col-sm-6 col-md-3">
|
||||
<div class="info-box">
|
||||
<span class="info-box-icon"><i class="fas fa-money-bill text-success"></i></span>
|
||||
|
||||
<div class="info-box-content">
|
||||
<span class="info-box-text"><span>{{ $t('firefly.left_to_spend') }}</span></span>
|
||||
<!-- TODO dont take the first, take default currency OR first -->
|
||||
<!-- TODO change color if negative -->
|
||||
<span class="info-box-number" v-if="leftToSpend.length > 0">{{ leftToSpend[0].value_parsed }}</span>
|
||||
|
||||
<div class="progress bg-success">
|
||||
<div class="progress-bar" style="width: 0"></div>
|
||||
</div>
|
||||
<span class="progress-description">
|
||||
<!-- TODO list all EXCEPT default currency -->
|
||||
<span v-for="(spent, index) in leftToSpend" :key="spent.key">
|
||||
{{ spent.value_parsed }}<span v-if="index+1 !== leftToSpend.length">, </span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- net worth -->
|
||||
<div class="col-12 col-sm-6 col-md-3">
|
||||
<div class="info-box">
|
||||
<span class="info-box-icon"><i class="fas fa-money-bill text-success"></i></span>
|
||||
|
||||
<div class="info-box-content">
|
||||
<span class="info-box-text"><span>{{ $t('firefly.net_worth') }}</span></span>
|
||||
<!-- TODO dont take the first, take default currency OR first -->
|
||||
<span class="info-box-number" v-if="netWorth.length > 0">{{ netWorth[0].value_parsed }}</span>
|
||||
|
||||
<div class="progress bg-success">
|
||||
<div class="progress-bar" style="width: 0"></div>
|
||||
</div>
|
||||
<span class="progress-description">
|
||||
<!-- TODO list all EXCEPT default currency -->
|
||||
<span v-for="(net, index) in netWorth" :key="net.key">
|
||||
{{ net.value_parsed }}<span v-if="index+1 !== netWorth.length">, </span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-sm-6 col-md-3">
|
||||
<div class="info-box">
|
||||
<span class="info-box-icon"><i class="far fa-calendar-alt text-teal"></i></span>
|
||||
|
||||
<div class="info-box-content">
|
||||
<span class="info-box-text"><span>{{ $t('firefly.bills_to_pay') }}</span></span>
|
||||
|
||||
<!-- only preferred currencies -->
|
||||
<span class="info-box-number" v-for="balance in prefBillsUnpaid">{{ balance.value_parsed }}</span>
|
||||
|
||||
<div class="progress bg-teal">
|
||||
<div class="progress-bar" style="width: 0"></div>
|
||||
</div>
|
||||
<!-- all others -->
|
||||
<span class="progress-description">
|
||||
<span v-for="(bill, index) in notPrefBillsUnpaid">
|
||||
{{ bill.value_parsed }}<span v-if="index+1 !== notPrefBillsUnpaid.length">, </span>
|
||||
</span>
|
||||
<span v-if="0===notPrefBillsUnpaid.length"> </span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- altijd iets in bold -->
|
||||
<!-- subtitle verschilt -->
|
||||
<!-- fix for small devices only -->
|
||||
<div class="clearfix hidden-md-up"></div>
|
||||
|
||||
<!-- left to spend -->
|
||||
<div class="col-12 col-sm-6 col-md-3">
|
||||
<div class="info-box">
|
||||
<span class="info-box-icon"><i class="fas fa-money-bill text-success"></i></span>
|
||||
|
||||
<div class="info-box-content">
|
||||
<span class="info-box-text"><span>{{ $t('firefly.left_to_spend') }}</span></span>
|
||||
<span class="info-box-number" v-for="left in prefLeftToSpend" :title="left.sub_title">{{ left.value_parsed }}</span>
|
||||
|
||||
<div class="progress bg-success">
|
||||
<div class="progress-bar" style="width: 0"></div>
|
||||
</div>
|
||||
<!-- others-->
|
||||
<span class="progress-description">
|
||||
<span v-for="(left, index) in notPrefLeftToSpend">
|
||||
{{ left.value_parsed }}<span v-if="index+1 !== notPrefLeftToSpend.length">, </span>
|
||||
</span>
|
||||
<span v-if="0===notPrefLeftToSpend.length"> </span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- net worth -->
|
||||
<div class="col-12 col-sm-6 col-md-3">
|
||||
<div class="info-box">
|
||||
<span class="info-box-icon"><i class="fas fa-money-bill text-success"></i></span>
|
||||
|
||||
<div class="info-box-content">
|
||||
<span class="info-box-text"><span>{{ $t('firefly.net_worth') }}</span></span>
|
||||
<span class="info-box-number" v-for="nw in prefNetWorth" :title="nw.sub_title">{{ nw.value_parsed }}</span>
|
||||
|
||||
<div class="progress bg-success">
|
||||
<div class="progress-bar" style="width: 0"></div>
|
||||
</div>
|
||||
<span class="progress-description">
|
||||
<span v-for="(nw, index) in notPrefNetWorth">
|
||||
{{ nw.value_parsed }}<span v-if="index+1 !== notPrefNetWorth.length">, </span>
|
||||
</span>
|
||||
<span v-if="0===notPrefNetWorth.length"> </span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "TopBoxes",
|
||||
data() {
|
||||
return {
|
||||
summary: [],
|
||||
balances: [],
|
||||
billsPaid: [],
|
||||
billsUnpaid: [],
|
||||
leftToSpend: [],
|
||||
netWorth: [],
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.prepareComponent();
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* Prepare the component.
|
||||
*/
|
||||
prepareComponent() {
|
||||
axios.get('./api/v1/summary/basic?start=' + window.sessionStart + '&end=' + window.sessionEnd)
|
||||
.then(response => {
|
||||
this.summary = response.data;
|
||||
this.buildComponent();
|
||||
});
|
||||
},
|
||||
buildComponent() {
|
||||
this.getBalanceEntries();
|
||||
this.getBillsEntries();
|
||||
this.getLeftToSpend();
|
||||
this.getNetWorth();
|
||||
},
|
||||
getBalanceEntries() {
|
||||
this.balances = this.getKeyedEntries('balance-in-');
|
||||
},
|
||||
getNetWorth() {
|
||||
this.netWorth = this.getKeyedEntries('net-worth-in-');
|
||||
},
|
||||
getLeftToSpend() {
|
||||
this.leftToSpend = this.getKeyedEntries('left-to-spend-in-');
|
||||
},
|
||||
getBillsEntries() {
|
||||
this.billsPaid = this.getKeyedEntries('bills-paid-in-');
|
||||
this.billsUnpaid = this.getKeyedEntries('bills-unpaid-in-');
|
||||
},
|
||||
getKeyedEntries(expected) {
|
||||
let result = [];
|
||||
for (const key in this.summary) {
|
||||
if (this.summary.hasOwnProperty(key)) {
|
||||
if (expected === key.substr(0, expected.length)) {
|
||||
result.push(this.summary[key]);
|
||||
}
|
||||
}
|
||||
}
|
||||
return result;
|
||||
}
|
||||
}
|
||||
export default {
|
||||
name: "TopBoxes",
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
currencyPreference: {},
|
||||
summary: [],
|
||||
balances: [],
|
||||
billsPaid: [],
|
||||
billsUnpaid: [],
|
||||
leftToSpend: [],
|
||||
netWorth: [],
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
// contains only balances with preferred currency.
|
||||
prefCurrencyBalances: function () {
|
||||
return this.filterOnCurrency(this.balances);
|
||||
},
|
||||
notPrefCurrencyBalances: function () {
|
||||
return this.filterOnNotCurrency(this.balances);
|
||||
},
|
||||
// contains only bills unpaid in preferred currency or first one.
|
||||
prefBillsUnpaid: function () {
|
||||
return this.filterOnCurrency(this.billsUnpaid);
|
||||
},
|
||||
notPrefBillsUnpaid: function () {
|
||||
return this.filterOnNotCurrency(this.billsUnpaid);
|
||||
},
|
||||
// left to spend
|
||||
prefLeftToSpend: function () {
|
||||
return this.filterOnCurrency(this.leftToSpend);
|
||||
},
|
||||
notPrefLeftToSpend: function () {
|
||||
return this.filterOnNotCurrency(this.leftToSpend);
|
||||
},
|
||||
// net worth
|
||||
prefNetWorth: function () {
|
||||
return this.filterOnCurrency(this.netWorth);
|
||||
},
|
||||
notPrefNetWorth: function () {
|
||||
return this.filterOnNotCurrency(this.netWorth);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.prepareComponent();
|
||||
this.currencyPreference = localStorage.currencyPreference ? JSON.parse(localStorage.currencyPreference) : {};
|
||||
},
|
||||
methods: {
|
||||
filterOnCurrency(array) {
|
||||
let ret = [];
|
||||
for (const key in array) {
|
||||
if (array.hasOwnProperty(key)) {
|
||||
if (array[key].currency_id === this.currencyPreference.id) {
|
||||
ret.push(array[key]);
|
||||
}
|
||||
}
|
||||
}
|
||||
// or just the first one:
|
||||
if (0 === ret.length && array.hasOwnProperty(0)) {
|
||||
ret.push(array[0]);
|
||||
}
|
||||
return ret;
|
||||
},
|
||||
filterOnNotCurrency(array) {
|
||||
let ret = [];
|
||||
for (const key in array) {
|
||||
if (array.hasOwnProperty(key)) {
|
||||
if (array[key].currency_id !== this.currencyPreference.id) {
|
||||
ret.push(array[key]);
|
||||
}
|
||||
}
|
||||
}
|
||||
return ret;
|
||||
},
|
||||
/**
|
||||
* Prepare the component.
|
||||
*/
|
||||
prepareComponent() {
|
||||
axios.get('./api/v1/summary/basic?start=' + window.sessionStart + '&end=' + window.sessionEnd)
|
||||
.then(response => {
|
||||
this.summary = response.data;
|
||||
this.buildComponent();
|
||||
});
|
||||
},
|
||||
buildComponent() {
|
||||
this.getBalanceEntries();
|
||||
this.getBillsEntries();
|
||||
this.getLeftToSpend();
|
||||
this.getNetWorth();
|
||||
},
|
||||
|
||||
hasCurrency: function (array) {
|
||||
for (const key in array) {
|
||||
if (array.hasOwnProperty(key)) {
|
||||
if (array[key].currency_id === this.currencyPreference.id) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
return false;
|
||||
},
|
||||
|
||||
getBalanceEntries() {
|
||||
this.balances = this.getKeyedEntries('balance-in-');
|
||||
},
|
||||
getNetWorth() {
|
||||
this.netWorth = this.getKeyedEntries('net-worth-in-');
|
||||
},
|
||||
getLeftToSpend() {
|
||||
this.leftToSpend = this.getKeyedEntries('left-to-spend-in-');
|
||||
},
|
||||
getBillsEntries() {
|
||||
this.billsPaid = this.getKeyedEntries('bills-paid-in-');
|
||||
this.billsUnpaid = this.getKeyedEntries('bills-unpaid-in-');
|
||||
},
|
||||
getKeyedEntries(expected) {
|
||||
let result = [];
|
||||
for (const key in this.summary) {
|
||||
if (this.summary.hasOwnProperty(key)) {
|
||||
if (expected === key.substr(0, expected.length)) {
|
||||
result.push(this.summary[key]);
|
||||
}
|
||||
}
|
||||
}
|
||||
return result;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
Reference in New Issue
Block a user