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

finish blocks

Browse Source
This commit is contained in:
liangping 2021-08-05 18:27:12 +08:00
parent c8822a2869
commit d7fbe18858
3 changed files with 183 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/router/index.js
View File

@ -111,6 +111,20 @@ const router = new VueRouter({
], ],
}, },
}, },
{
path: '/:chain/blocks',
name: 'blocks',
component: () => import('@/views/Blocks.vue'),
meta: {
pageTitle: 'Block',
breadcrumb: [
{
text: 'Blocks',
active: true,
},
],
},
},
{ {
path: '/:chain/block/:height', path: '/:chain/block/:height',
name: 'block', name: 'block',

124
src/views/Blocks.vue Normal file
View File

@ -0,0 +1,124 @@
<template>
<div>
<b-card
no-body
>
<b-card-header>
<b-card-title>
Blocks
</b-card-title>
</b-card-header>
<b-table
:items="blocks"
:fields="list_fields"
:sort-desc="true"
sort-by="tokens"
striped
hover
responsive="sm"
>
<!-- Column: Height -->
<template #cell(height)="data">
<router-link :to="`./block/${data.item.block.header.height}`">
#{{ data.item.block.header.height }}
</router-link>
</template>
<template #cell(hash)="data">
{{ data.item.block_id.hash }}
</template>
<template #cell(time)="data">
{{ formatTime(data.item.block.header.time) }}
</template>
<template #cell(proposer)="data">
{{ data.item.block.header.proposer_address }}
</template>
<template #cell(txs)="data">
{{ length(data.item.block.data.txs) }}
</template>
</b-table>
</b-card>
</div>
</template>
<script>
import {
BTable, BCard, BCardHeader, BCardTitle, VBTooltip,
} from 'bootstrap-vue'
import {
toDay,
} from '@/libs/data'
// import fetch from 'node-fetch'
export default {
components: {
BCard,
BTable,
BCardHeader,
BCardTitle,
},
directives: {
'b-tooltip': VBTooltip,
},
data() {
return {
islive: true,
blocks: [],
list_fields: [
{ key: 'height', sortable: true },
{
key: 'hash',
tdClass: 'text-truncate',
},
{
key: 'proposer',
tdClass: 'text-truncate',
},
{
key: 'txs',
// formatter: (value, i, data) => this.apr(value, i, data),
tdClass: 'text-right',
thClass: 'text-right',
},
{ key: 'time' },
],
}
},
created() {
this.$http.getLatestBlock().then(res => {
this.blocks.push(res)
const list = []
const { height } = res.block.header
for (let i = 1; i < 20; i += 1) {
list.push(height - i)
}
console.log(height, list)
let promise = Promise.resolve()
list.forEach(item => {
promise = promise.then(() => new Promise(resolve => {
this.$http.getBlockByHeight(item).then(b => {
resolve()
this.blocks.push(b)
})
}))
})
this.timer = setInterval(this.fetch, 6000)
})
},
beforeDestroy() {
this.islive = false
clearInterval(this.timer)
},
methods: {
length: v => (Array.isArray(v) ? v.length : 0),
formatTime: v => toDay(v),
fetch() {
this.$http.getLatestBlock().then(b => {
const has = this.blocks.findIndex(x => x.block.header.height === b.block.header.height)
if (has < 0) this.blocks.unshift(b)
if (this.blocks.length > 200) this.blocks.pop()
})
},
},
}
</script>

87
src/views/Home.vue
View File

@ -25,50 +25,53 @@
md="4" md="4"
sm="6" sm="6"
> >
<b-card <router-link :to="data.chain_name">
v-if="data" <b-card
no-body v-if="data"
> no-body
<b-card-header> hover
<h4 class="mb-0 text-uppercase"> >
{{ data.chain_name }} <b-card-header>
</h4> <h4 class="mb-0 text-uppercase">
<b-card-text class="mb-0"> {{ data.chain_name }}
Updated on {{ data.time }} </h4>
</b-card-text> <b-card-text class="mb-0">
</b-card-header> Updated on {{ data.time }}
<b-img
:src="data.logo"
height="145"
class="mb-2"
/>
<b-row class="text-center mx-0">
<b-col
cols="6"
class="border-top border-right d-flex align-items-between flex-column py-1"
>
<b-card-text class="text-muted mb-0">
SDK Version
</b-card-text> </b-card-text>
<h3 class="font-weight-bolder mb-0"> </b-card-header>
{{ data.sdk_version }}
</h3>
</b-col>
<b-col <b-img
cols="6" :src="data.logo"
class="border-top d-flex align-items-between flex-column py-1" height="145"
> class="mb-2"
<b-card-text class="text-muted mb-0"> />
Height <b-row class="text-center mx-0">
</b-card-text> <b-col
<h3 class="font-weight-bolder mb-0"> cols="6"
{{ data.height }} class="border-top border-right d-flex align-items-between flex-column py-1"
</h3> >
</b-col> <b-card-text class="text-muted mb-0">
</b-row> SDK Version
</b-card> </b-card-text>
<h3 class="font-weight-bolder mb-0">
{{ data.sdk_version }}
</h3>
</b-col>
<b-col
cols="6"
class="border-top d-flex align-items-between flex-column py-1"
>
<b-card-text class="text-muted mb-0">
Height
</b-card-text>
<h3 class="font-weight-bolder mb-0">
{{ data.height }}
</h3>
</b-col>
</b-row>
</b-card>
</router-link>
</b-col> </b-col>
<!-- no result found --> <!-- no result found -->