Improve UI
This commit is contained in:
liangping
parent
1ae8395fc6
commit
1bc87207b4
@ -1,6 +1,8 @@
|
||||
<template>
|
||||
<section>
|
||||
<b-card>
|
||||
<b-card
|
||||
no-body
|
||||
>
|
||||
<b-card-header>
|
||||
<b-card-title>
|
||||
<b-badge
|
||||
@ -39,47 +41,58 @@
|
||||
</b-card-title>
|
||||
</b-card-header>
|
||||
<b-card-body>
|
||||
<b-table-simple>
|
||||
<b-tr>
|
||||
<b-td style="width:200px">
|
||||
{{ $t('proposal_id') }}
|
||||
</b-td><b-td>{{ proposal.id }}</b-td>
|
||||
</b-tr>
|
||||
<b-tr>
|
||||
<b-td>
|
||||
{{ $t('proposal_proposer') }}
|
||||
</b-td><b-td>{{ formatAddress(proposer.proposer) }} </b-td>
|
||||
</b-tr>
|
||||
<b-tr>
|
||||
<b-td>
|
||||
{{ $t('proposal_total_deposit') }}
|
||||
</b-td><b-td>{{ proposal.total_deposit }} </b-td>
|
||||
</b-tr>
|
||||
<b-tr>
|
||||
<b-td>
|
||||
{{ $t('proposal_submit_time') }}
|
||||
</b-td><b-td>{{ proposal.submit_time }}</b-td>
|
||||
</b-tr>
|
||||
<b-tr>
|
||||
<b-td>
|
||||
{{ $t('proposal_voting_start_time') }}
|
||||
</b-td><b-td>{{ proposal.voting_start_time }}</b-td>
|
||||
</b-tr>
|
||||
<b-tr>
|
||||
<b-td>
|
||||
{{ $t('proposal_voting_end_time') }}
|
||||
</b-td><b-td>{{ proposal.voting_end_time }}</b-td>
|
||||
</b-tr>
|
||||
<b-tr>
|
||||
<b-td>
|
||||
{{ $t('proposal_type') }}
|
||||
</b-td><b-td>{{ proposal.type }}</b-td>
|
||||
</b-tr>
|
||||
<b-table-simple
|
||||
stacked="sm"
|
||||
hover
|
||||
striped
|
||||
>
|
||||
<tbody>
|
||||
<b-tr>
|
||||
<b-td
|
||||
style="text-transform: capitalize; vertical-align: top; width:200px"
|
||||
>
|
||||
{{ $t('proposal_id') }}
|
||||
</b-td><b-td>{{ proposal.id }}</b-td>
|
||||
</b-tr>
|
||||
<b-tr>
|
||||
<b-td>
|
||||
{{ $t('proposal_proposer') }}
|
||||
</b-td><b-td>{{ formatAddress(proposer.proposer) }} </b-td>
|
||||
</b-tr>
|
||||
<b-tr>
|
||||
<b-td>
|
||||
{{ $t('proposal_total_deposit') }}
|
||||
</b-td><b-td>{{ proposal.total_deposit }} </b-td>
|
||||
</b-tr>
|
||||
<b-tr>
|
||||
<b-td>
|
||||
{{ $t('proposal_submit_time') }}
|
||||
</b-td><b-td>{{ proposal.submit_time }}</b-td>
|
||||
</b-tr>
|
||||
<b-tr>
|
||||
<b-td>
|
||||
{{ $t('proposal_voting_start_time') }}
|
||||
</b-td><b-td>{{ proposal.voting_start_time }}</b-td>
|
||||
</b-tr>
|
||||
<b-tr>
|
||||
<b-td>
|
||||
{{ $t('proposal_voting_end_time') }}
|
||||
</b-td><b-td>{{ proposal.voting_end_time }}</b-td>
|
||||
</b-tr>
|
||||
<b-tr>
|
||||
<b-td>
|
||||
{{ $t('proposal_type') }}
|
||||
</b-td><b-td>
|
||||
{{ proposal.type }}
|
||||
</b-td>
|
||||
</b-tr>
|
||||
</tbody>
|
||||
</b-table-simple>
|
||||
<object-field-component
|
||||
:tablefield="proposal.contents"
|
||||
:small="false"
|
||||
/>
|
||||
<div>
|
||||
<object-field-component
|
||||
:tablefield="proposal.contents"
|
||||
:small="false"
|
||||
/></div>
|
||||
</b-card-body>
|
||||
<b-card-footer>
|
||||
<router-link :to="`../gov`">
|
||||
@ -99,7 +112,7 @@
|
||||
</b-card-footer>
|
||||
</b-card>
|
||||
|
||||
<b-card>
|
||||
<b-card no-body>
|
||||
<b-card-header>
|
||||
<b-card-title>
|
||||
Votes
|
||||
@ -158,12 +171,14 @@
|
||||
{{ proposal.tally.abstain }}% voted Abstain
|
||||
</b-tooltip>
|
||||
<b-table
|
||||
stacked="sm"
|
||||
:fields="votes_fields"
|
||||
:items="votes"
|
||||
striped
|
||||
/>
|
||||
</b-card-body>
|
||||
</b-card>
|
||||
<b-card>
|
||||
<b-card no-body>
|
||||
<b-card-header>
|
||||
<b-card-title>
|
||||
Deposits ({{ proposal.total_deposit }})
|
||||
@ -171,8 +186,10 @@
|
||||
</b-card-header>
|
||||
<b-card-body>
|
||||
<b-table
|
||||
stacked="sm"
|
||||
:items="deposits"
|
||||
:fields="deposit_fields"
|
||||
striped
|
||||
/>
|
||||
</b-card-body>
|
||||
<b-card-footer>
|
||||
|
||||
@ -132,7 +132,7 @@ export default {
|
||||
},
|
||||
created() {
|
||||
this.chains = JSON.parse(localStorage.getItem('chains'))
|
||||
this.timer = setInterval(this.fetch, 12000)
|
||||
this.timer = setInterval(this.fetch, 120000)
|
||||
},
|
||||
beforeDestroy() {
|
||||
clearInterval(this.timer)
|
||||
|
||||
@ -4,63 +4,67 @@
|
||||
hover
|
||||
:small="small"
|
||||
striped
|
||||
responsive
|
||||
stacked="sm"
|
||||
responsive="sm"
|
||||
>
|
||||
<b-tr
|
||||
v-for="(value, name) in tablefield"
|
||||
:key="name"
|
||||
>
|
||||
<b-td
|
||||
style="text-transform: capitalize; vertical-align: top; width:200px"
|
||||
<b-tbody>
|
||||
<b-tr
|
||||
v-for="(value, name) in tablefield"
|
||||
:key="name"
|
||||
>
|
||||
{{ name }}
|
||||
</b-td>
|
||||
<b-td v-if="isTokenField(value)">
|
||||
{{ formatTokens( value ) }}
|
||||
</b-td>
|
||||
<b-td v-else-if="isArrayText(value)">
|
||||
{{ value.join(', ') }}
|
||||
</b-td>
|
||||
<b-td v-else-if="isHex(value)">
|
||||
{{ formatHexAddress(value) }}
|
||||
</b-td>
|
||||
<b-td v-else-if="Array.isArray(value)">
|
||||
<array-field-component :tablefield="value" />
|
||||
</b-td>
|
||||
<b-td
|
||||
v-else-if="typeof (value) ==='object'"
|
||||
hover
|
||||
class="overflow-hidden"
|
||||
>
|
||||
<b-tabs>
|
||||
<b-tab
|
||||
v-for="key in Object.keys(value)"
|
||||
:key="key"
|
||||
:title="key"
|
||||
variant="danger"
|
||||
>
|
||||
<array-field-component
|
||||
v-if="Array.isArray(value[key])"
|
||||
:tablefield="value[key]"
|
||||
/>
|
||||
<object-field-component
|
||||
v-else-if="typeof value[key] === 'object'"
|
||||
:tablefield="value[key]"
|
||||
/>
|
||||
<span v-else>{{ formatText(value[key]) }} </span>
|
||||
</b-tab>
|
||||
</b-tabs>
|
||||
</b-td>
|
||||
<b-td v-else>
|
||||
{{ value }}
|
||||
</b-td>
|
||||
</b-tr>
|
||||
<b-td
|
||||
style="text-transform: capitalize; vertical-align: top;"
|
||||
>
|
||||
{{ name }}
|
||||
</b-td>
|
||||
<b-td v-if="isTokenField(value)">
|
||||
{{ formatTokens( value ) }}
|
||||
</b-td>
|
||||
<b-td v-else-if="isArrayText(value)">
|
||||
{{ value.join(', ') }}
|
||||
</b-td>
|
||||
<b-td v-else-if="isHex(value)">
|
||||
{{ formatHexAddress(value) }}
|
||||
</b-td>
|
||||
<b-td v-else-if="Array.isArray(value)">
|
||||
<array-field-component :tablefield="value" />
|
||||
</b-td>
|
||||
<b-td
|
||||
v-else-if="typeof (value) ==='object'"
|
||||
hover
|
||||
class="overflow-hidden"
|
||||
>
|
||||
<b-tabs pills>
|
||||
<b-tab
|
||||
v-for="key in Object.keys(value)"
|
||||
:key="key"
|
||||
:title="key"
|
||||
class="pl-0 pr-0"
|
||||
title-item-class="bg-light-primary"
|
||||
>
|
||||
<array-field-component
|
||||
v-if="Array.isArray(value[key])"
|
||||
:tablefield="value[key]"
|
||||
/>
|
||||
<object-field-component
|
||||
v-else-if="typeof value[key] === 'object'"
|
||||
:tablefield="value[key]"
|
||||
/>
|
||||
<span v-else>{{ formatText(value[key]) }} </span>
|
||||
</b-tab>
|
||||
</b-tabs>
|
||||
</b-td>
|
||||
<b-td v-else>
|
||||
{{ value }}
|
||||
</b-td>
|
||||
</b-tr>
|
||||
</b-tbody>
|
||||
</b-table-simple>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
BTableSimple, BTr, BTd, BTabs, BTab,
|
||||
BTableSimple, BTr, BTd, BTabs, BTab, BTbody,
|
||||
} from 'bootstrap-vue'
|
||||
import {
|
||||
abbr, getStakingValidatorByHex, isHexAddress, isStringArray, isToken, tokenFormatter,
|
||||
@ -75,6 +79,7 @@ export default {
|
||||
BTd,
|
||||
BTabs,
|
||||
BTab,
|
||||
BTbody,
|
||||
ArrayFieldComponent,
|
||||
},
|
||||
props: {
|
||||
|
||||
@ -5,76 +5,83 @@
|
||||
v-if="!tx.std"
|
||||
:tablefield="tx.raw"
|
||||
/>
|
||||
<b-table-simple v-else>
|
||||
<b-tr>
|
||||
<b-td style="width:200px">
|
||||
{{ 'txhash' }}
|
||||
</b-td><b-td>{{ tx.txhash }}</b-td>
|
||||
</b-tr>
|
||||
<b-tr>
|
||||
<b-td>
|
||||
{{ 'status' }}
|
||||
</b-td><b-td> <b-badge
|
||||
v-if="tx.code===0"
|
||||
variant="light-success"
|
||||
>
|
||||
Success
|
||||
</b-badge><b-badge
|
||||
v-else
|
||||
variant="light-danger"
|
||||
>
|
||||
Failed
|
||||
</b-badge><b v-if="tx.code > 0"> {{ tx.raw_log }}</b> </b-td>
|
||||
</b-tr>
|
||||
<b-tr>
|
||||
<b-td>
|
||||
{{ 'height' }}
|
||||
</b-td><b-td>
|
||||
<router-link :to="`../blocks/${tx.height}`">
|
||||
{{ tx.height }}
|
||||
</router-link></b-td>
|
||||
</b-tr>
|
||||
<b-tr>
|
||||
<b-td>
|
||||
{{ 'timestamp' }}
|
||||
</b-td><b-td>{{ formatTime(tx.timestamp) }}</b-td>
|
||||
</b-tr>
|
||||
<b-tr>
|
||||
<b-td>
|
||||
{{ 'gas_used' }}
|
||||
</b-td><b-td>{{ tx.gas_used }}</b-td>
|
||||
</b-tr>
|
||||
<b-tr>
|
||||
<b-td>
|
||||
{{ 'gas_wanted' }}
|
||||
</b-td><b-td>{{ tx.gas_wanted }}</b-td>
|
||||
</b-tr>
|
||||
<b-tr>
|
||||
<b-td>
|
||||
{{ 'gas' }}
|
||||
</b-td><b-td>{{ tx.tx.gas }}</b-td>
|
||||
</b-tr>
|
||||
<b-tr>
|
||||
<b-td>
|
||||
{{ 'fee' }}
|
||||
</b-td><b-td>{{ formattoken(tx.tx.fee) }}</b-td>
|
||||
</b-tr>
|
||||
<b-tr>
|
||||
<b-td>
|
||||
{{ 'memo' }}
|
||||
</b-td><b-td>{{ tx.tx.memo }}</b-td>
|
||||
</b-tr>
|
||||
<b-tr>
|
||||
<b-td>
|
||||
{{ 'timeout_height' }}
|
||||
</b-td><b-td>{{ tx.tx.timeout_height }}</b-td>
|
||||
</b-tr>
|
||||
<b-table-simple
|
||||
v-else
|
||||
striped
|
||||
stacked="sm"
|
||||
>
|
||||
<tbody>
|
||||
<b-tr>
|
||||
<b-td style="width:200px">
|
||||
{{ 'txhash' }}
|
||||
</b-td><b-td>{{ tx.txhash }}</b-td>
|
||||
</b-tr>
|
||||
<b-tr>
|
||||
<b-td>
|
||||
{{ 'status' }}
|
||||
</b-td><b-td> <b-badge
|
||||
v-if="tx.code===0"
|
||||
variant="light-success"
|
||||
>
|
||||
Success
|
||||
</b-badge><b-badge
|
||||
v-else
|
||||
variant="light-danger"
|
||||
>
|
||||
Failed
|
||||
</b-badge><b v-if="tx.code > 0"> {{ tx.raw_log }}</b> </b-td>
|
||||
</b-tr>
|
||||
<b-tr>
|
||||
<b-td>
|
||||
{{ 'height' }}
|
||||
</b-td><b-td>
|
||||
<router-link :to="`../blocks/${tx.height}`">
|
||||
{{ tx.height }}
|
||||
</router-link></b-td>
|
||||
</b-tr>
|
||||
<b-tr>
|
||||
<b-td>
|
||||
{{ 'timestamp' }}
|
||||
</b-td><b-td>{{ formatTime(tx.timestamp) }}</b-td>
|
||||
</b-tr>
|
||||
<b-tr>
|
||||
<b-td>
|
||||
{{ 'gas_used' }}
|
||||
</b-td><b-td>{{ tx.gas_used }}</b-td>
|
||||
</b-tr>
|
||||
<b-tr>
|
||||
<b-td>
|
||||
{{ 'gas_wanted' }}
|
||||
</b-td><b-td>{{ tx.gas_wanted }}</b-td>
|
||||
</b-tr>
|
||||
<b-tr>
|
||||
<b-td>
|
||||
{{ 'gas' }}
|
||||
</b-td><b-td>{{ tx.tx.gas }}</b-td>
|
||||
</b-tr>
|
||||
<b-tr>
|
||||
<b-td>
|
||||
{{ 'fee' }}
|
||||
</b-td><b-td>{{ formattoken(tx.tx.fee) }}</b-td>
|
||||
</b-tr>
|
||||
<b-tr>
|
||||
<b-td>
|
||||
{{ 'memo' }}
|
||||
</b-td><b-td>{{ tx.tx.memo }}</b-td>
|
||||
</b-tr>
|
||||
<b-tr>
|
||||
<b-td>
|
||||
{{ 'timeout_height' }}
|
||||
</b-td><b-td>{{ tx.tx.timeout_height }}</b-td>
|
||||
</b-tr>
|
||||
</tbody>
|
||||
</b-table-simple>
|
||||
</b-card>
|
||||
|
||||
<b-card
|
||||
v-if="tx.tx.messages"
|
||||
:title="`Messages (total: ${tx.tx.messages.length})`"
|
||||
no-body
|
||||
>
|
||||
<b-card-body
|
||||
v-for="(item, i) in tx.tx.messages "
|
||||
|
||||
Loading…
Reference in New Issue
Block a user