frequi_origin/src/components/ftbot/Balance.vue

55 lines
1.4 KiB
Vue
Raw Normal View History

2020-05-14 05:15:18 +00:00
<template>
2020-05-22 18:04:27 +00:00
<div>
<div class="mb-2">
<label class="mr-auto h3">Balance</label>
2020-07-02 18:05:20 +00:00
<b-button class="float-right" size="sm" @click="getBalance">&#x21bb;</b-button>
</div>
2020-05-22 18:04:27 +00:00
<div>
2020-05-14 05:22:27 +00:00
<p v-if="balance.note">
<strong>{{ balance.note }}</strong>
</p>
2020-06-04 18:06:58 +00:00
<b-table class="table-sm" :items="balance.currencies" :fields="tableFields">
2020-05-14 05:15:18 +00:00
<template slot="bottom-row">
2020-05-14 05:16:07 +00:00
<td><strong>Total</strong></td>
2020-05-14 05:15:18 +00:00
<td></td>
<!-- this is a computed prop that adds up all the expenses in the visible rows -->
2020-05-14 05:16:07 +00:00
<td>
<strong>{{ formatCurrency(balance.total) }}</strong>
</td>
2020-05-14 05:15:18 +00:00
</template>
</b-table>
</div>
</div>
</template>
2020-08-09 13:07:09 +00:00
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { namespace } from 'vuex-class';
2020-08-29 09:23:39 +00:00
import { BalanceInterface } from '@/types';
2020-08-09 13:07:09 +00:00
const ftbot = namespace('ftbot');
@Component({})
export default class Balance extends Vue {
@ftbot.Action getBalance;
@ftbot.State balance!: BalanceInterface;
get tableFields() {
return [
{ key: 'currency', label: 'Currency' },
{ key: 'free', label: 'Available', formatter: 'formatCurrency' },
{ key: 'est_stake', label: `in ${this.balance.stake}`, formatter: 'formatCurrency' },
];
}
2020-05-14 05:15:18 +00:00
2020-05-17 18:43:19 +00:00
mounted() {
this.getBalance();
2020-08-09 13:07:09 +00:00
}
formatCurrency(value) {
return value ? value.toFixed(5) : '';
}
}
2020-05-14 05:15:18 +00:00
</script>