提升UI
This commit is contained in:
liangping
parent
c5bdbb123f
commit
64711bd99a
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<layout-vertical>
|
||||
|
||||
<router-view :key="$route.fullPath" />
|
||||
<router-view :key="$route.params.chain" />
|
||||
|
||||
<template #navbar="{ toggleVerticalMenuActive }">
|
||||
<navbar :toggle-vertical-menu-active="toggleVerticalMenuActive" />
|
||||
|
||||
@ -12,12 +12,24 @@ export function percent(num) {
|
||||
return parseFloat((num * 100).toFixed(2))
|
||||
}
|
||||
|
||||
export function isToken(value) {
|
||||
let is = false
|
||||
if (Array.isArray(value)) {
|
||||
is = value.findIndex(x => Object.keys(x).includes('denom')) > -1
|
||||
}
|
||||
return is
|
||||
}
|
||||
|
||||
export function formatToken(token) {
|
||||
let denom = token.denom.toUpperCase()
|
||||
if (denom.charAt(0) === 'U') {
|
||||
denom = denom.substring(1)
|
||||
}
|
||||
return `${(token.amount / 1000000).toFixed()} ${denom}`
|
||||
const amount = token.amount / 1000000
|
||||
if (amount > 10) {
|
||||
return `${amount.toFixed()} ${denom}`
|
||||
}
|
||||
return `${amount} ${denom}`
|
||||
}
|
||||
|
||||
const COUNT_ABBRS = ['', 'K', 'M', 'G', 'T', 'P', 'E', 'Z', 'Y']
|
||||
|
||||
57
src/views/ArrayFieldComponent.vue
Normal file
57
src/views/ArrayFieldComponent.vue
Normal file
@ -0,0 +1,57 @@
|
||||
<template>
|
||||
<b-table
|
||||
:items="tablefield"
|
||||
:sticky-header="true"
|
||||
:no-border-collapse="true"
|
||||
responsive
|
||||
>
|
||||
<template #cell()="data">
|
||||
<span v-if="isTokenField(data.value)">{{ formatTokens(data.value) }}</span>
|
||||
<array-field-component
|
||||
v-else-if="isArrayText(data.value)"
|
||||
:tablefield="eval_value(data.value)"
|
||||
/>
|
||||
<span v-else>{{ data.value }}</span>
|
||||
</template>
|
||||
</b-table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { BTable } from 'bootstrap-vue'
|
||||
// import fetch from 'node-fetch'
|
||||
|
||||
import { isToken, tokenFormatter } from '@/libs/data/data'
|
||||
// import { Proposal, Proposer } from '@/libs/data'
|
||||
// import { formatToken } from '@/libs/data/data'
|
||||
|
||||
export default {
|
||||
name: 'ArrayFieldComponent',
|
||||
components: {
|
||||
BTable,
|
||||
},
|
||||
props: {
|
||||
tablefield: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
eval_value(value) {
|
||||
if (typeof (value) === 'string') {
|
||||
return JSON.parse(value)
|
||||
}
|
||||
return value
|
||||
},
|
||||
isTokenField(value) {
|
||||
return isToken(value)
|
||||
},
|
||||
isArrayText(value) {
|
||||
const has = String(value).startsWith('[')
|
||||
return has
|
||||
},
|
||||
formatTokens(value) {
|
||||
return tokenFormatter(value)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@ -1,162 +1,172 @@
|
||||
<template>
|
||||
<section>
|
||||
<b-card
|
||||
<b-row class="match-height">
|
||||
<b-col
|
||||
v-for="p in proposals"
|
||||
:key="p.id"
|
||||
lg="6"
|
||||
md="12"
|
||||
>
|
||||
<b-card-title class="mb-0">
|
||||
<b-badge
|
||||
v-if="p.status == 1"
|
||||
pill
|
||||
variant="light-info"
|
||||
class="text-right"
|
||||
<b-card>
|
||||
<b-card-title
|
||||
class="mb-0"
|
||||
style="height:40px;"
|
||||
>
|
||||
Deposit
|
||||
</b-badge>
|
||||
<b-badge
|
||||
v-if="p.status == 2"
|
||||
pill
|
||||
variant="light-primary"
|
||||
class="text-right"
|
||||
>
|
||||
Voting
|
||||
</b-badge>
|
||||
<b-badge
|
||||
v-if="p.status == 3"
|
||||
pill
|
||||
variant="light-success"
|
||||
class="text-right"
|
||||
>
|
||||
Passed
|
||||
</b-badge>
|
||||
<b-badge
|
||||
v-if="p.status == 4"
|
||||
pill
|
||||
variant="light-danger"
|
||||
class="text-right"
|
||||
>
|
||||
Rejected
|
||||
</b-badge>
|
||||
#{{ p.id }}. <a :href="`./gov/${p.id}`">{{ p.title }}</a>
|
||||
</b-card-title>
|
||||
<b-card-body md="12">
|
||||
<div class="gov-wrapper">
|
||||
<div class="gov">
|
||||
<p class="card-text mb-25">
|
||||
Start Date
|
||||
</p>
|
||||
<h6 class="mb-0">
|
||||
{{ p.voting_start_time }}
|
||||
</h6>
|
||||
<b-badge
|
||||
v-if="p.status == 1"
|
||||
pill
|
||||
variant="light-info"
|
||||
class="text-right"
|
||||
>
|
||||
Deposit
|
||||
</b-badge>
|
||||
<b-badge
|
||||
v-if="p.status == 2"
|
||||
pill
|
||||
variant="light-primary"
|
||||
class="text-right"
|
||||
>
|
||||
Voting
|
||||
</b-badge>
|
||||
<b-badge
|
||||
v-if="p.status == 3"
|
||||
pill
|
||||
variant="light-success"
|
||||
class="text-right"
|
||||
>
|
||||
Passed
|
||||
</b-badge>
|
||||
<b-badge
|
||||
v-if="p.status == 4"
|
||||
pill
|
||||
variant="light-danger"
|
||||
class="text-right"
|
||||
>
|
||||
Rejected
|
||||
</b-badge>
|
||||
#{{ p.id }}.
|
||||
<router-link
|
||||
:to="`./gov/${p.id}`"
|
||||
>
|
||||
{{ p.title }}
|
||||
</router-link></b-card-title>
|
||||
<b-card-body md="12">
|
||||
<div class="gov-wrapper">
|
||||
<div class="gov">
|
||||
<p class="card-text mb-25">
|
||||
Start Date
|
||||
</p>
|
||||
<h6 class="mb-0">
|
||||
{{ p.voting_start_time }}
|
||||
</h6>
|
||||
</div>
|
||||
<div class="gov">
|
||||
<p class="card-text mb-25">
|
||||
End Date
|
||||
</p>
|
||||
<h6 class="mb-0">
|
||||
{{ p.voting_end_time }}
|
||||
</h6>
|
||||
</div>
|
||||
<div class="gov">
|
||||
<p class="card-text mb-25">
|
||||
Deposit
|
||||
</p>
|
||||
<h6 class="mb-0">
|
||||
{{ p.total_deposit }}
|
||||
</h6>
|
||||
</div>
|
||||
<div class="gov">
|
||||
<p class="card-text mb-25">
|
||||
Turnout
|
||||
</p>
|
||||
<h6 class="mb-0">
|
||||
{{ p.tally.turnout }}%
|
||||
</h6>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gov">
|
||||
<p class="card-text mb-25">
|
||||
End Date
|
||||
</p>
|
||||
<h6 class="mb-0">
|
||||
{{ p.voting_end_time }}
|
||||
</h6>
|
||||
</div>
|
||||
<div class="gov">
|
||||
<p class="card-text mb-25">
|
||||
Deposit
|
||||
</p>
|
||||
<h6 class="mb-0">
|
||||
{{ p.total_deposit }}
|
||||
</h6>
|
||||
</div>
|
||||
<div class="gov">
|
||||
<p class="card-text mb-25">
|
||||
Turnout
|
||||
</p>
|
||||
<h6 class="mb-0">
|
||||
{{ p.tally.turnout }}%
|
||||
</h6>
|
||||
</div>
|
||||
</div>
|
||||
</b-card-body>
|
||||
</b-card-body>
|
||||
|
||||
<b-progress
|
||||
:max="100"
|
||||
height="2rem"
|
||||
class="mb-2"
|
||||
show-progress
|
||||
>
|
||||
<b-progress-bar
|
||||
:id="'vote-yes'+p.id"
|
||||
variant="success"
|
||||
:value="p.tally.yes"
|
||||
<b-progress
|
||||
:max="100"
|
||||
height="2rem"
|
||||
class="mb-2"
|
||||
show-progress
|
||||
/>
|
||||
<b-progress-bar
|
||||
:id="'vote-no'+p.id"
|
||||
variant="warning"
|
||||
:value="p.tally.no"
|
||||
show-progress
|
||||
/>
|
||||
<b-progress-bar
|
||||
:id="'vote-veto'+p.id"
|
||||
variant="danger"
|
||||
:value="p.tally.veto"
|
||||
show-progress
|
||||
/>
|
||||
<b-progress-bar
|
||||
:id="'vote-abstain'+p.id"
|
||||
variant="info"
|
||||
:value="p.tally.abstain"
|
||||
show-progress
|
||||
/>
|
||||
</b-progress>
|
||||
<b-tooltip
|
||||
:target="'vote-yes'+p.id"
|
||||
>
|
||||
{{ p.tally.yes }}% voted Yes
|
||||
</b-tooltip>
|
||||
<b-tooltip
|
||||
:target="'vote-no'+p.id"
|
||||
>
|
||||
{{ p.tally.no }}% voted No
|
||||
</b-tooltip>
|
||||
<b-tooltip
|
||||
:target="'vote-veto'+p.id"
|
||||
>
|
||||
{{ p.tally.veto }}% voted No With Veta
|
||||
</b-tooltip>
|
||||
<b-tooltip
|
||||
:target="'vote-abstain'+p.id"
|
||||
>
|
||||
{{ p.tally.abstain }}% voted Abstain
|
||||
</b-tooltip>
|
||||
<b-card-footer>
|
||||
<router-link
|
||||
v-ripple.400="'rgba(113, 102, 240, 0.15)'"
|
||||
:to="`./gov/${p.id}`"
|
||||
variant="outline-primary"
|
||||
class="btn"
|
||||
>
|
||||
<b-button
|
||||
<b-progress-bar
|
||||
:id="'vote-yes'+p.id"
|
||||
variant="success"
|
||||
:value="p.tally.yes"
|
||||
show-progress
|
||||
/>
|
||||
<b-progress-bar
|
||||
:id="'vote-no'+p.id"
|
||||
variant="warning"
|
||||
:value="p.tally.no"
|
||||
show-progress
|
||||
/>
|
||||
<b-progress-bar
|
||||
:id="'vote-veto'+p.id"
|
||||
variant="danger"
|
||||
:value="p.tally.veto"
|
||||
show-progress
|
||||
/>
|
||||
<b-progress-bar
|
||||
:id="'vote-abstain'+p.id"
|
||||
variant="info"
|
||||
:value="p.tally.abstain"
|
||||
show-progress
|
||||
/>
|
||||
</b-progress>
|
||||
<b-tooltip
|
||||
:target="'vote-yes'+p.id"
|
||||
>
|
||||
{{ p.tally.yes }}% voted Yes
|
||||
</b-tooltip>
|
||||
<b-tooltip
|
||||
:target="'vote-no'+p.id"
|
||||
>
|
||||
{{ p.tally.no }}% voted No
|
||||
</b-tooltip>
|
||||
<b-tooltip
|
||||
:target="'vote-veto'+p.id"
|
||||
>
|
||||
{{ p.tally.veto }}% voted No With Veta
|
||||
</b-tooltip>
|
||||
<b-tooltip
|
||||
:target="'vote-abstain'+p.id"
|
||||
>
|
||||
{{ p.tally.abstain }}% voted Abstain
|
||||
</b-tooltip>
|
||||
<b-card-footer class="pb-0">
|
||||
<router-link
|
||||
v-ripple.400="'rgba(113, 102, 240, 0.15)'"
|
||||
:href="`./gov/${p.id}`"
|
||||
:to="`./gov/${p.id}`"
|
||||
variant="outline-primary"
|
||||
>
|
||||
{{ $t('btn_detail') }}
|
||||
<b-button
|
||||
v-ripple.400="'rgba(113, 102, 240, 0.15)'"
|
||||
:href="`./gov/${p.id}`"
|
||||
variant="outline-primary"
|
||||
>
|
||||
{{ $t('btn_detail') }}
|
||||
</b-button>
|
||||
</router-link>
|
||||
<b-button
|
||||
:disabled="p.status!=2"
|
||||
variant="primary"
|
||||
class="btn float-right mg-2"
|
||||
>
|
||||
{{ $t('btn_vote') }}
|
||||
</b-button>
|
||||
</router-link>
|
||||
<b-button
|
||||
:disabled="p.status!=2"
|
||||
variant="primary"
|
||||
class="btn float-right mg-2"
|
||||
>
|
||||
{{ $t('btn_vote') }}
|
||||
</b-button>
|
||||
</b-card-footer>
|
||||
</b-card>
|
||||
</section>
|
||||
</b-card-footer>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
BCard, BCardTitle, BCardBody, BCardFooter, BButton, BProgressBar, BProgress, BBadge, BTooltip,
|
||||
BCard, BCardTitle, BCardBody, BCardFooter, BButton, BProgressBar, BProgress, BBadge, BTooltip, BRow, BCol,
|
||||
} from 'bootstrap-vue'
|
||||
import Ripple from 'vue-ripple-directive'
|
||||
import { Proposal } from '@/libs/data'
|
||||
@ -172,6 +182,8 @@ export default {
|
||||
BCardTitle,
|
||||
BTooltip,
|
||||
BCardBody,
|
||||
BRow,
|
||||
BCol,
|
||||
},
|
||||
directives: {
|
||||
Ripple,
|
||||
|
||||
63
src/views/ObjectFieldComponent.vue
Normal file
63
src/views/ObjectFieldComponent.vue
Normal file
@ -0,0 +1,63 @@
|
||||
<template>
|
||||
<b-table-simple>
|
||||
<b-tr
|
||||
v-for="(value, name) in tablefield"
|
||||
:key="name"
|
||||
>
|
||||
<b-td
|
||||
style="text-transform: capitalize; vertical-align: top; width:200px"
|
||||
>
|
||||
{{ name.replaceAll('_',' ') }}
|
||||
</b-td>
|
||||
<b-td v-if="isTokenField(value)">
|
||||
{{ formatTokens( value ) }}
|
||||
</b-td>
|
||||
<b-td v-else-if="Array.isArray(value)">
|
||||
<array-field-component :tablefield="value" />
|
||||
</b-td>
|
||||
<b-td v-else>
|
||||
{{ value }}
|
||||
</b-td>
|
||||
</b-tr>
|
||||
</b-table-simple>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
BTableSimple, BTr, BTd,
|
||||
} from 'bootstrap-vue'
|
||||
import { isToken, tokenFormatter } from '@/libs/data'
|
||||
import ArrayFieldComponent from './ArrayFieldComponent.vue'
|
||||
// import fetch from 'node-fetch'
|
||||
|
||||
// import { tokenFormatter } from '@/libs/data/data'
|
||||
// import { Proposal, Proposer } from '@/libs/data'
|
||||
// import { formatToken } from '@/libs/data/data'
|
||||
|
||||
export default {
|
||||
name: 'ObjectFieldComponent',
|
||||
components: {
|
||||
BTableSimple,
|
||||
BTr,
|
||||
BTd,
|
||||
ArrayFieldComponent,
|
||||
},
|
||||
props: {
|
||||
tablefield: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
eval_value(value) {
|
||||
return Array.from(value)
|
||||
},
|
||||
isTokenField(value) {
|
||||
return isToken(value)
|
||||
},
|
||||
formatTokens(value) {
|
||||
return tokenFormatter(value)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@ -41,7 +41,7 @@
|
||||
<b-card-body>
|
||||
<b-table-simple>
|
||||
<b-tr>
|
||||
<b-td lg="2">
|
||||
<b-td style="width:200px">
|
||||
{{ $t('proposal_id') }}
|
||||
</b-td><b-td>{{ proposal.id }}</b-td>
|
||||
</b-tr>
|
||||
@ -75,39 +75,8 @@
|
||||
{{ $t('proposal_type') }}
|
||||
</b-td><b-td>{{ proposal.type }}</b-td>
|
||||
</b-tr>
|
||||
<b-tr
|
||||
v-for="(value, name) in proposal.contents"
|
||||
:key="name"
|
||||
>
|
||||
<b-td style="text-transform: capitalize; vertical-align: top;">
|
||||
{{ name.replaceAll('_',' ') }}
|
||||
</b-td>
|
||||
<b-td v-if="!Array.isArray(value)">
|
||||
{{ value }}
|
||||
</b-td>
|
||||
<b-td v-if="Array.isArray(value) && name === 'amount'">
|
||||
<span
|
||||
v-for="token in value"
|
||||
:key="token.amount"
|
||||
>
|
||||
{{ token.amount }} {{ token.denom }}
|
||||
</span>
|
||||
</b-td>
|
||||
<b-td v-if="Array.isArray(value) && name != 'amount'">
|
||||
<b-table :items="value">
|
||||
<!-- A custom formatted column -->
|
||||
<template #cell(amount)="data">
|
||||
<span
|
||||
v-for="token in data.value"
|
||||
:key="token.amount"
|
||||
>
|
||||
{{ token.amount }} {{ token.denom }}
|
||||
</span>
|
||||
</template>
|
||||
</b-table>
|
||||
</b-td>
|
||||
</b-tr>
|
||||
</b-table-simple>
|
||||
<object-field-component :tablefield="proposal.contents" />
|
||||
</b-card-body>
|
||||
<b-card-footer>
|
||||
<router-link :to="`../gov`">
|
||||
@ -232,6 +201,7 @@ import {
|
||||
|
||||
import { tokenFormatter } from '@/libs/data/data'
|
||||
import { Proposal, Proposer } from '@/libs/data'
|
||||
import ObjectFieldComponent from './ObjectFieldComponent.vue'
|
||||
// import { formatToken } from '@/libs/data/data'
|
||||
|
||||
export default {
|
||||
@ -250,6 +220,7 @@ export default {
|
||||
BProgress,
|
||||
BTooltip,
|
||||
BBadge,
|
||||
ObjectFieldComponent,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
@ -28,16 +28,16 @@
|
||||
</b-media-aside>
|
||||
<b-media-body>
|
||||
<h6 class="transaction-title">
|
||||
{{ d.amount }}
|
||||
{{ formatNumber(d.amount) }}
|
||||
</h6>
|
||||
<small>{{ d.denom }} </small>
|
||||
</b-media-body>
|
||||
</b-media>
|
||||
<div
|
||||
class="font-weight-bolder text-success d-none d-md-block hidden-md-down "
|
||||
<small
|
||||
class="text-success d-none d-xl-block "
|
||||
>
|
||||
Reward
|
||||
</div>
|
||||
</small>
|
||||
</div>
|
||||
<div
|
||||
v-for="d in data.val_commission"
|
||||
@ -59,16 +59,16 @@
|
||||
</b-media-aside>
|
||||
<b-media-body>
|
||||
<h6 class="transaction-title">
|
||||
{{ d.amount }}
|
||||
{{ formatNumber(d.amount) }}
|
||||
</h6>
|
||||
<small>{{ d.denom }}</small>
|
||||
</b-media-body>
|
||||
</b-media>
|
||||
<div
|
||||
class="font-weight-bolder text-primary hidden-sm hidden-md"
|
||||
<small
|
||||
class="text-primary d-none d-xl-block"
|
||||
>
|
||||
Commission
|
||||
</div>
|
||||
</small>
|
||||
</div>
|
||||
</b-card-body>
|
||||
</b-card>
|
||||
@ -142,5 +142,10 @@ export default {
|
||||
],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
formatNumber(value) {
|
||||
return Number(value).toFixed(2)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -202,21 +202,18 @@
|
||||
<template>
|
||||
<b-row class="match-height">
|
||||
<b-col
|
||||
xl="4"
|
||||
lg="4"
|
||||
md="12"
|
||||
>
|
||||
<staking-commission-component :data="validator.commission" />
|
||||
</b-col>
|
||||
<b-col
|
||||
xl="4"
|
||||
lg="4"
|
||||
md="12"
|
||||
>
|
||||
<staking-reward-component :data="distribution" />
|
||||
</b-col>
|
||||
<b-col
|
||||
xl="4"
|
||||
lg="4"
|
||||
md="12"
|
||||
>
|
||||
@ -243,6 +240,15 @@
|
||||
class="btn-icon mb-25 mr-25"
|
||||
> </b-button>
|
||||
</b-card-body>
|
||||
<b-card-footer>
|
||||
<router-link :to="`../staking`">
|
||||
<b-button
|
||||
variant="outline-primary"
|
||||
>
|
||||
{{ $t('btn_back_list') }}
|
||||
</b-button>
|
||||
</router-link>
|
||||
</b-card-footer>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user