forked from cerc-io/cosmos-explorer
add home page
This commit is contained in:
liangping
parent
1483115de0
commit
c8822a2869
@ -25,6 +25,7 @@ async function refetchVersion(chain) {
|
||||
const version = sdk.match(re)
|
||||
return version[0]
|
||||
})
|
||||
.catch(e => console.error(e))
|
||||
}
|
||||
|
||||
const chainAPI = class ChainFetch {
|
||||
|
||||
@ -17,6 +17,7 @@ const router = new VueRouter({
|
||||
name: 'home',
|
||||
component: () => import('@/views/Home.vue'),
|
||||
meta: {
|
||||
layout: 'full',
|
||||
pageTitle: 'Home',
|
||||
breadcrumb: [
|
||||
{
|
||||
|
||||
@ -200,7 +200,6 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
getList() {
|
||||
// this.$http.setup(this.$route)
|
||||
this.$http.getGovernanceList().then(res => {
|
||||
const voting = res.filter(i => i.status === 2)
|
||||
if (voting.length > 0) {
|
||||
@ -221,38 +220,6 @@ export default {
|
||||
})
|
||||
},
|
||||
},
|
||||
// asyncComputed: {
|
||||
// proposals: {
|
||||
// get() {
|
||||
// const api = new ChainAPI(this.$route)
|
||||
// api.setup(this.$route)
|
||||
// return api.getGovernanceList().then(res => {
|
||||
// const voting = res.filter(i => i.status === 2)
|
||||
// if (voting.length > 0) {
|
||||
// let i = 0
|
||||
// Promise.all(voting.reverse().map(p => api.getGovernanceTally(p.id, p.tally.total))).then(update => {
|
||||
// this.proposals.map(x => {
|
||||
// if (x.status === 2) {
|
||||
// const xh = x
|
||||
// xh.tally = update[i]
|
||||
// i += 1
|
||||
// return xh
|
||||
// }
|
||||
// return x
|
||||
// })
|
||||
// })
|
||||
// }
|
||||
// return res.reverse()
|
||||
// })
|
||||
// },
|
||||
// // default: 'loading...',
|
||||
// },
|
||||
// },
|
||||
// watch: {
|
||||
// proposals(val, newdata) {
|
||||
// console.log('In watch', val, newdata)
|
||||
// },
|
||||
// },
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@ -1,34 +1,148 @@
|
||||
<template>
|
||||
<div>
|
||||
<b-card title="Kick start your project 🚀">
|
||||
<b-card-text>All the best for your new project.</b-card-text>
|
||||
<b-card-text>Please make sure to read our <b-link
|
||||
href="https://pixinvent.com/demo/vuexy-vuejs-admin-dashboard-template/documentation/"
|
||||
target="_blank"
|
||||
>
|
||||
Template Documentation
|
||||
</b-link> to understand where to go from here and how to use our template.</b-card-text>
|
||||
</b-card>
|
||||
<div class="text-center container-lg">
|
||||
<b-link>
|
||||
<div class="mb-3 mt-3">
|
||||
<vuexy-logo />
|
||||
|
||||
<b-card title="Want to integrate JWT? 🔒">
|
||||
<b-card-text>We carefully crafted JWT flow so you can implement JWT with ease and with minimum efforts.</b-card-text>
|
||||
<b-card-text>Please read our JWT Documentation to get more out of JWT authentication.</b-card-text>
|
||||
</b-card>
|
||||
<h1 class="brand-text text-primary mt-2">
|
||||
Ping Explorer
|
||||
</h1>
|
||||
</div>
|
||||
</b-link>
|
||||
<h2 class="mb-1">
|
||||
Cosmos Ecosystem Blockchains 🛠
|
||||
</h2>
|
||||
|
||||
<p class="mb-3">
|
||||
If you want add your chain to our explorer, be free to contact us.
|
||||
</p>
|
||||
|
||||
<div>
|
||||
<b-row class="match-height">
|
||||
<b-col
|
||||
v-for="(data,index) in chains"
|
||||
:key="index"
|
||||
md="4"
|
||||
sm="6"
|
||||
>
|
||||
<b-card
|
||||
v-if="data"
|
||||
no-body
|
||||
>
|
||||
<b-card-header>
|
||||
<h4 class="mb-0 text-uppercase">
|
||||
{{ data.chain_name }}
|
||||
</h4>
|
||||
<b-card-text class="mb-0">
|
||||
Updated on {{ data.time }}
|
||||
</b-card-text>
|
||||
</b-card-header>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
</b-col>
|
||||
|
||||
<!-- no result found -->
|
||||
<b-col
|
||||
v-show="!chains"
|
||||
cols="12"
|
||||
class="text-center"
|
||||
>
|
||||
<h4 class="mt-4">
|
||||
No blockchain found!!
|
||||
</h4>
|
||||
</b-col>
|
||||
<!--/ no result found -->
|
||||
</b-row>
|
||||
</div>
|
||||
</div>
|
||||
<!-- / Under maintenance-->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { BCard, BCardText, BLink } from 'bootstrap-vue'
|
||||
/* eslint-disable global-require */
|
||||
import {
|
||||
BLink, BImg, BRow, BCol, BCard, BCardText, BCardHeader,
|
||||
} from 'bootstrap-vue'
|
||||
import VuexyLogo from '@core/layouts/components/Logo.vue'
|
||||
import store from '@/store/index'
|
||||
import { toDay } from '@/libs/data'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
BLink,
|
||||
BImg,
|
||||
BRow,
|
||||
BCol,
|
||||
BCard,
|
||||
BCardText,
|
||||
BLink,
|
||||
BCardHeader,
|
||||
VuexyLogo,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chains: [],
|
||||
downImg: require('@/assets/images/pages/under-maintenance.svg'),
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
imgUrl() {
|
||||
if (store.state.appConfig.layout.skin === 'dark') {
|
||||
// eslint-disable-next-line vue/no-side-effects-in-computed-properties
|
||||
this.downImg = require('@/assets/images/pages/under-maintenance-dark.svg')
|
||||
return this.downImg
|
||||
}
|
||||
return this.downImg
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.chains = JSON.parse(localStorage.getItem('chains'))
|
||||
this.timer = setInterval(this.fetch, 12000)
|
||||
},
|
||||
beforeDestroy() {
|
||||
clearInterval(this.timer)
|
||||
},
|
||||
methods: {
|
||||
fetch() {
|
||||
Object.keys(this.chains).forEach(k => {
|
||||
const chain = this.chains[k]
|
||||
fetch(`${chain.api}/blocks/latest`).then(res => res.json()).then(b => {
|
||||
console.log(b.block.header)
|
||||
const { header } = b.block
|
||||
this.$set(chain, 'height', header.height)
|
||||
this.$set(chain, 'time', toDay(header.time))
|
||||
})
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user