cerc-io/cosmos-explorer
16
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve UI

Browse Source
This commit is contained in:
liangping 2021-08-16 23:03:32 +08:00
parent 1ae8395fc6
commit 1bc87207b4
4 changed files with 187 additions and 158 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
src/views/GovernanceProposalView.vue
View File

@ -1,6 +1,8 @@
<template> <template>
<section> <section>
<b-card> <b-card
no-body
>
<b-card-header> <b-card-header>
<b-card-title> <b-card-title>
<b-badge <b-badge
@ -39,47 +41,58 @@
</b-card-title> </b-card-title>
</b-card-header> </b-card-header>
<b-card-body> <b-card-body>
<b-table-simple> <b-table-simple
<b-tr> stacked="sm"
<b-td style="width:200px"> hover
{{ $t('proposal_id') }} striped
</b-td><b-td>{{ proposal.id }}</b-td> >
</b-tr> <tbody>
<b-tr> <b-tr>
<b-td> <b-td
{{ $t('proposal_proposer') }} style="text-transform: capitalize; vertical-align: top; width:200px"
</b-td><b-td>{{ formatAddress(proposer.proposer) }} </b-td> >
</b-tr> {{ $t('proposal_id') }}
<b-tr> </b-td><b-td>{{ proposal.id }}</b-td>
<b-td> </b-tr>
{{ $t('proposal_total_deposit') }} <b-tr>
</b-td><b-td>{{ proposal.total_deposit }} </b-td> <b-td>
</b-tr> {{ $t('proposal_proposer') }}
<b-tr> </b-td><b-td>{{ formatAddress(proposer.proposer) }} </b-td>
<b-td> </b-tr>
{{ $t('proposal_submit_time') }} <b-tr>
</b-td><b-td>{{ proposal.submit_time }}</b-td> <b-td>
</b-tr> {{ $t('proposal_total_deposit') }}
<b-tr> </b-td><b-td>{{ proposal.total_deposit }} </b-td>
<b-td> </b-tr>
{{ $t('proposal_voting_start_time') }} <b-tr>
</b-td><b-td>{{ proposal.voting_start_time }}</b-td> <b-td>
</b-tr> {{ $t('proposal_submit_time') }}
<b-tr> </b-td><b-td>{{ proposal.submit_time }}</b-td>
<b-td> </b-tr>
{{ $t('proposal_voting_end_time') }} <b-tr>
</b-td><b-td>{{ proposal.voting_end_time }}</b-td> <b-td>
</b-tr> {{ $t('proposal_voting_start_time') }}
<b-tr> </b-td><b-td>{{ proposal.voting_start_time }}</b-td>
<b-td> </b-tr>
{{ $t('proposal_type') }} <b-tr>
</b-td><b-td>{{ proposal.type }}</b-td> <b-td>
</b-tr> {{ $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> </b-table-simple>
<object-field-component <div>
:tablefield="proposal.contents" <object-field-component
:small="false" :tablefield="proposal.contents"
/> :small="false"
/></div>
</b-card-body> </b-card-body>
<b-card-footer> <b-card-footer>
<router-link :to="`../gov`"> <router-link :to="`../gov`">
@ -99,7 +112,7 @@
</b-card-footer> </b-card-footer>
</b-card> </b-card>
<b-card> <b-card no-body>
<b-card-header> <b-card-header>
<b-card-title> <b-card-title>
Votes Votes
@ -158,12 +171,14 @@
{{ proposal.tally.abstain }}% voted Abstain {{ proposal.tally.abstain }}% voted Abstain
</b-tooltip> </b-tooltip>
<b-table <b-table
stacked="sm"
:fields="votes_fields" :fields="votes_fields"
:items="votes" :items="votes"
striped
/> />
</b-card-body> </b-card-body>
</b-card> </b-card>
<b-card> <b-card no-body>
<b-card-header> <b-card-header>
<b-card-title> <b-card-title>
Deposits ({{ proposal.total_deposit }}) Deposits ({{ proposal.total_deposit }})
@ -171,8 +186,10 @@
</b-card-header> </b-card-header>
<b-card-body> <b-card-body>
<b-table <b-table
stacked="sm"
:items="deposits" :items="deposits"
:fields="deposit_fields" :fields="deposit_fields"
striped
/> />
</b-card-body> </b-card-body>
<b-card-footer> <b-card-footer>

2
src/views/Home.vue
View File

@ -132,7 +132,7 @@ export default {
}, },
created() { created() {
this.chains = JSON.parse(localStorage.getItem('chains')) this.chains = JSON.parse(localStorage.getItem('chains'))
this.timer = setInterval(this.fetch, 12000) this.timer = setInterval(this.fetch, 120000)
}, },
beforeDestroy() { beforeDestroy() {
clearInterval(this.timer) clearInterval(this.timer)

105
src/views/ObjectFieldComponent.vue
View File

@ -4,63 +4,67 @@
hover hover
:small="small" :small="small"
striped striped
responsive stacked="sm"
responsive="sm"
> >
<b-tr <b-tbody>
v-for="(value, name) in tablefield" <b-tr
:key="name" v-for="(value, name) in tablefield"
> :key="name"
<b-td
style="text-transform: capitalize; vertical-align: top; width:200px"
> >
{{ name }} <b-td
</b-td> style="text-transform: capitalize; vertical-align: top;"
<b-td v-if="isTokenField(value)"> >
{{ formatTokens( value ) }} {{ name }}
</b-td> </b-td>
<b-td v-else-if="isArrayText(value)"> <b-td v-if="isTokenField(value)">
{{ value.join(', ') }} {{ formatTokens( value ) }}
</b-td> </b-td>
<b-td v-else-if="isHex(value)"> <b-td v-else-if="isArrayText(value)">
{{ formatHexAddress(value) }} {{ value.join(', ') }}
</b-td> </b-td>
<b-td v-else-if="Array.isArray(value)"> <b-td v-else-if="isHex(value)">
<array-field-component :tablefield="value" /> {{ formatHexAddress(value) }}
</b-td> </b-td>
<b-td <b-td v-else-if="Array.isArray(value)">
v-else-if="typeof (value) ==='object'" <array-field-component :tablefield="value" />
hover </b-td>
class="overflow-hidden" <b-td
> v-else-if="typeof (value) ==='object'"
<b-tabs> hover
<b-tab class="overflow-hidden"
v-for="key in Object.keys(value)" >
:key="key" <b-tabs pills>
:title="key" <b-tab
variant="danger" v-for="key in Object.keys(value)"
> :key="key"
<array-field-component :title="key"
v-if="Array.isArray(value[key])" class="pl-0 pr-0"
:tablefield="value[key]" title-item-class="bg-light-primary"
/> >
<object-field-component <array-field-component
v-else-if="typeof value[key] === 'object'" v-if="Array.isArray(value[key])"
:tablefield="value[key]" :tablefield="value[key]"
/> />
<span v-else>{{ formatText(value[key]) }} </span> <object-field-component
</b-tab> v-else-if="typeof value[key] === 'object'"
</b-tabs> :tablefield="value[key]"
</b-td> />
<b-td v-else> <span v-else>{{ formatText(value[key]) }} </span>
{{ value }} </b-tab>
</b-td> </b-tabs>
</b-tr> </b-td>
<b-td v-else>
{{ value }}
</b-td>
</b-tr>
</b-tbody>
</b-table-simple> </b-table-simple>
</template> </template>
<script> <script>
import { import {
BTableSimple, BTr, BTd, BTabs, BTab, BTableSimple, BTr, BTd, BTabs, BTab, BTbody,
} from 'bootstrap-vue' } from 'bootstrap-vue'
import { import {
abbr, getStakingValidatorByHex, isHexAddress, isStringArray, isToken, tokenFormatter, abbr, getStakingValidatorByHex, isHexAddress, isStringArray, isToken, tokenFormatter,
@ -75,6 +79,7 @@ export default {
BTd, BTd,
BTabs, BTabs,
BTab, BTab,
BTbody,
ArrayFieldComponent, ArrayFieldComponent,
}, },
props: { props: {

135
src/views/Transaction.vue
View File

@ -5,76 +5,83 @@
v-if="!tx.std" v-if="!tx.std"
:tablefield="tx.raw" :tablefield="tx.raw"
/> />
<b-table-simple v-else> <b-table-simple
<b-tr> v-else
<b-td style="width:200px"> striped
{{ 'txhash' }} stacked="sm"
</b-td><b-td>{{ tx.txhash }}</b-td> >
</b-tr> <tbody>
<b-tr> <b-tr>
<b-td> <b-td style="width:200px">
{{ 'status' }} {{ 'txhash' }}
</b-td><b-td> <b-badge </b-td><b-td>{{ tx.txhash }}</b-td>
v-if="tx.code===0" </b-tr>
variant="light-success" <b-tr>
> <b-td>
Success {{ 'status' }}
</b-badge><b-badge </b-td><b-td> <b-badge
v-else v-if="tx.code===0"
variant="light-danger" variant="light-success"
> >
Failed Success
</b-badge><b v-if="tx.code > 0"> {{ tx.raw_log }}</b> </b-td> </b-badge><b-badge
</b-tr> v-else
<b-tr> variant="light-danger"
<b-td> >
{{ 'height' }} Failed
</b-td><b-td> </b-badge><b v-if="tx.code > 0"> {{ tx.raw_log }}</b> </b-td>
<router-link :to="`../blocks/${tx.height}`"> </b-tr>
{{ tx.height }} <b-tr>
</router-link></b-td> <b-td>
</b-tr> {{ 'height' }}
<b-tr> </b-td><b-td>
<b-td> <router-link :to="`../blocks/${tx.height}`">
{{ 'timestamp' }} {{ tx.height }}
</b-td><b-td>{{ formatTime(tx.timestamp) }}</b-td> </router-link></b-td>
</b-tr> </b-tr>
<b-tr> <b-tr>
<b-td> <b-td>
{{ 'gas_used' }} {{ 'timestamp' }}
</b-td><b-td>{{ tx.gas_used }}</b-td> </b-td><b-td>{{ formatTime(tx.timestamp) }}</b-td>
</b-tr> </b-tr>
<b-tr> <b-tr>
<b-td> <b-td>
{{ 'gas_wanted' }} {{ 'gas_used' }}
</b-td><b-td>{{ tx.gas_wanted }}</b-td> </b-td><b-td>{{ tx.gas_used }}</b-td>
</b-tr> </b-tr>
<b-tr> <b-tr>
<b-td> <b-td>
{{ 'gas' }} {{ 'gas_wanted' }}
</b-td><b-td>{{ tx.tx.gas }}</b-td> </b-td><b-td>{{ tx.gas_wanted }}</b-td>
</b-tr> </b-tr>
<b-tr> <b-tr>
<b-td> <b-td>
{{ 'fee' }} {{ 'gas' }}
</b-td><b-td>{{ formattoken(tx.tx.fee) }}</b-td> </b-td><b-td>{{ tx.tx.gas }}</b-td>
</b-tr> </b-tr>
<b-tr> <b-tr>
<b-td> <b-td>
{{ 'memo' }} {{ 'fee' }}
</b-td><b-td>{{ tx.tx.memo }}</b-td> </b-td><b-td>{{ formattoken(tx.tx.fee) }}</b-td>
</b-tr> </b-tr>
<b-tr> <b-tr>
<b-td> <b-td>
{{ 'timeout_height' }} {{ 'memo' }}
</b-td><b-td>{{ tx.tx.timeout_height }}</b-td> </b-td><b-td>{{ tx.tx.memo }}</b-td>
</b-tr> </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-table-simple>
</b-card> </b-card>
<b-card <b-card
v-if="tx.tx.messages" v-if="tx.tx.messages"
:title="`Messages (total: ${tx.tx.messages.length})`" :title="`Messages (total: ${tx.tx.messages.length})`"
no-body
> >
<b-card-body <b-card-body
v-for="(item, i) in tx.tx.messages " v-for="(item, i) in tx.tx.messages "