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

add skeleton

Browse Source
This commit is contained in:
liangping 2022-04-12 17:01:23 +08:00
parent 9ff56778ca
commit c9b890f2da
1 changed files with 71 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

123
src/views/Uptime.vue
View File

@ -34,67 +34,82 @@
/> />
</b-input-group> </b-input-group>
</b-card> </b-card>
<b-row> <b-skeleton-wrapper :loading="loading">
<b-col <template #loading>
v-for="(x,index) in uptime" <b-row>
:key="index" <b-col
sm="12" v-for="index in 100"
md="4" :key="index"
class="text-truncate" sm="12"
> md="4"
<div class="d-flex justify-content-between">
<b-form-checkbox
v-model="pinned"
:value="`${chain}#${x.address}`"
class="custom-control-warning text-truncate"
@change="pinValidator(`${chain}#${x.address}`)"
><span class="d-inline-block text-truncate font-weight-bold align-bottom">{{ index+1 }} {{ x.validator.moniker }}</span>
</b-form-checkbox>
<span
v-if="missing[x.address]"
> >
<b-badge <b-skeleton width="100%" />
v-if="missing[x.address].missed_blocks_counter > 0" </b-col>
v-b-tooltip.hover.v-danger </b-row>
variant="light-danger" </template>
:title="`${missing[x.address].missed_blocks_counter} missed blocks`" <b-row>
class="text-danger text-bolder" <b-col
v-for="(x,index) in uptime"
:key="index"
sm="12"
md="4"
class="text-truncate"
>
<div class="d-flex justify-content-between">
<b-form-checkbox
v-model="pinned"
:value="`${chain}#${x.address}`"
class="custom-control-warning text-truncate"
@change="pinValidator(`${chain}#${x.address}`)"
><span class="d-inline-block text-truncate font-weight-bold align-bottom">{{ index+1 }} {{ x.validator.moniker }}</span>
</b-form-checkbox>
<span
v-if="missing[x.address]"
> >
{{ missing[x.address].missed_blocks_counter }} <b-badge
</b-badge> v-if="missing[x.address].missed_blocks_counter > 0"
<b-badge v-b-tooltip.hover.v-danger
v-else variant="light-danger"
v-b-tooltip.hover.v-success :title="`${missing[x.address].missed_blocks_counter} missed blocks`"
variant="light-success" class="text-danger text-bolder"
title="Perfect! No missed blocks" >
> {{ missing[x.address].missed_blocks_counter }}
0 </b-badge>
</b-badge> <b-badge
</span> v-else
</div> v-b-tooltip.hover.v-success
<div class="d-flex justify-content-between align-self-stretch flex-wrap"> variant="light-success"
<div title="Perfect! No missed blocks"
v-for="(b,i) in blocks" >
:key="i" 0
style="width:1.5%;" </b-badge>
><router-link :to="`./blocks/${b.height}`"> </span>
<div
v-b-tooltip.hover.v-second
:title="b.height"
:class="b.sigs && b.sigs[x.address] ? b.sigs[x.address] : 'bg-light-success'"
class="m-auto"
>&nbsp;</div>
</router-link>
</div> </div>
</div> <div class="d-flex justify-content-between align-self-stretch flex-wrap">
</b-col> <div
</b-row> v-for="(b,i) in blocks"
:key="i"
style="width:1.5%;"
><router-link :to="`./blocks/${b.height}`">
<div
v-b-tooltip.hover.v-second
:title="b.height"
:class="b.sigs && b.sigs[x.address] ? b.sigs[x.address] : 'bg-light-success'"
class="m-auto"
>&nbsp;</div>
</router-link>
</div>
</div>
</b-col>
</b-row>
</b-skeleton-wrapper>
</b-card> </b-card>
</div> </div>
</template> </template>
<script> <script>
import { import {
BSkeleton, BSkeletonWrapper,
BRow, BCol, VBTooltip, BFormInput, BCard, BAlert, BFormCheckbox, BButton, BBadge, BInputGroup, BInputGroupPrepend, BRow, BCol, VBTooltip, BFormInput, BCard, BAlert, BFormCheckbox, BButton, BBadge, BInputGroup, BInputGroupPrepend,
} from 'bootstrap-vue' } from 'bootstrap-vue'
@ -114,6 +129,8 @@ export default {
BBadge, BBadge,
BFormCheckbox, BFormCheckbox,
BInputGroup, BInputGroup,
BSkeleton,
BSkeletonWrapper,
BInputGroupPrepend, BInputGroupPrepend,
}, },
directives: { directives: {
@ -123,6 +140,7 @@ export default {
const { chain } = this.$route.params const { chain } = this.$route.params
const pinned = localStorage.getItem('pinned') ? localStorage.getItem('pinned').split(',') : '' const pinned = localStorage.getItem('pinned') ? localStorage.getItem('pinned').split(',') : ''
return { return {
loading: true,
missedFilter: false, missedFilter: false,
pinned, pinned,
chain, chain,
@ -207,6 +225,7 @@ export default {
this.blocks = blocks this.blocks = blocks
this.timer = setInterval(this.fetch_latest, 6000) this.timer = setInterval(this.fetch_latest, 6000)
this.loading = false
}) })
}, },
initColor() { initColor() {