machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added latest block on mining dashboard

Browse Source
This commit is contained in:
nymkappa
2022-03-11 17:09:13 +01:00
parent 112880f332
commit 8cac6a2888
4 changed files with 102 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
frontend/src/app/components/blocks-list/blocks-list.component.html
View File

@@ -1,48 +1,50 @@
<div class="container-xl">
<h1 class="float-left" i18n="latest-blocks.blocks">Blocks</h1>
<br>
<div class="container-xl" [class]="widget ? 'widget' : ''">
<h1 *ngIf="!widget" class="float-left" i18n="latest-blocks.blocks">Blocks</h1>
<div class="clearfix"></div>
<table class="table table-borderless">
<thead>
<th class="height" i18n="latest-blocks.height">Height</th>
<th class="pool" i18n="latest-blocks.mined-by">Pool</th>
<th class="timestamp" i18n="latest-blocks.timestamp">Timestamp</th>
<th class="mined" i18n="latest-blocks.mined">Mined</th>
<th class="reward text-right" i18n="latest-blocks.reward">Reward</th>
<th class="fees text-right" i18n="latest-blocks.fees">Fees</th>
<th class="txs text-right" i18n="latest-blocks.transactions">Txs</th>
<th class="size" i18n="latest-blocks.size">Size</th>
<th class="height" [class]="widget ? 'widget' : ''" i18n="latest-blocks.height">Height</th>
<th class="pool text-left" [class]="widget ? 'widget' : ''" i18n="latest-blocks.mined-by">
Pool</th>
<th class="timestamp" i18n="latest-blocks.timestamp" *ngIf="!widget">Timestamp</th>
<th class="mined" i18n="latest-blocks.mined" *ngIf="!widget">Mined</th>
<th class="reward text-right" i18n="latest-blocks.reward" [class]="widget ? 'widget' : ''">
Reward</th>
<th class="fees text-right" i18n="latest-blocks.fees" *ngIf="!widget">Fees</th>
<th class="txs text-right" i18n="latest-blocks.transactions" [class]="widget ? 'widget' : ''">Txs</th>
<th class="size" i18n="latest-blocks.size" *ngIf="!widget">Size</th>
</thead>
<tbody *ngIf="blocks$ | async as blocks; else skeleton" [style]="isLoading ? 'opacity: 0.75' : ''">
<tr *ngFor="let block of blocks; let i= index; trackBy: trackByBlock">
<td>
<td class="height "[class]="widget ? 'widget' : ''">
<a [routerLink]="['/block' | relativeUrl, block.id]" [state]="{ data: { block: block } }">{{ block.height
}}</a>
</td>
<td>
<td class="pool text-left" [class]="widget ? 'widget' : ''">
<img width="25" height="25" src="{{ block.extras.pool['logo'] }}"
onError="this.src = './resources/mining-pools/default.svg'">
<span class="pool-name"><a [routerLink]="[('/mining/pool/' + block.extras.pool.id) | relativeUrl]">{{
<span class="pool-name"><a class="clear-link"
[routerLink]="[('/mining/pool/' + block.extras.pool.id) | relativeUrl]">{{
block.extras.pool.name }}</a></span>
</td>
<td class="timestamp">
<td class="timestamp" *ngIf="!widget">
&lrm;{{ block.timestamp * 1000 | date:'yyyy-MM-dd HH:mm' }}
</td>
<td class="mined">
<td class="mined" *ngIf="!widget">
<app-time-since [time]="block.timestamp" [fastRender]="true"></app-time-since>
</td>
<td class="reward text-right">
<td class="reward text-right" [class]="widget ? 'widget' : ''">
<app-amount [satoshis]="block.extras.reward" digitsInfo="1.2-2"></app-amount>
</td>
<td class="fees text-right">
<td class="fees text-right" *ngIf="!widget">
<app-amount [satoshis]="block.extras.totalFees" digitsInfo="1.2-2"></app-amount>
</td>
<td class="txs text-right">
<td class="txs text-right" [class]="widget ? 'widget' : ''">
{{ block.tx_count | number }}
</td>
<td class="size">
<td class="size" *ngIf="!widget">
<div class="progress">
<div class="progress-bar progress-mempool" role="progressbar"
[ngStyle]="{'width': (block.weight / stateService.env.BLOCK_WEIGHT_UNITS)*100 + '%' }"></div>
@@ -53,29 +55,30 @@
</tbody>
<ng-template #skeleton>
<tbody>
<tr *ngFor="let item of [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]">
<td>
<tr *ngFor="let item of skeletonLines">
<td class="height" [class]="widget ? 'widget' : ''">
<span class="skeleton-loader"></span>
</td>
<td class="timestamp">
<td class="pool text-left" [class]="widget ? 'widget' : ''">
<img width="0" height="25" style="opacity: 0">
<span class="skeleton-loader"></span>
</td>
<td class="mined">
<td class="timestamp" *ngIf="!widget">
<span class="skeleton-loader"></span>
</td>
<td>
<td class="mined" *ngIf="!widget">
<span class="skeleton-loader"></span>
</td>
<td class="reward text-right">
<td class="reward text-right" [class]="widget ? 'widget' : ''">
<span class="skeleton-loader"></span>
</td>
<td class="fees text-right">
<td class="fees text-right" *ngIf="!widget">
<span class="skeleton-loader"></span>
</td>
<td class="txs text-right">
<td class="txs text-right" [class]="widget ? 'widget' : ''">
<span class="skeleton-loader"></span>
</td>
<td class="size">
<td class="size" *ngIf="!widget">
<span class="skeleton-loader"></span>
</td>
</tr>
@@ -83,8 +86,9 @@
</ng-template>
</table>
<ngb-pagination class="pagination-container float-right mt-3" [class]="isLoading ? 'disabled' : ''" [collectionSize]="blocksCount" [rotate]="true" [maxSize]="5"
[pageSize]="15" [(page)]="page" (pageChange)="pageChange(page)" [boundaryLinks]="true" [ellipses]="false">
<ngb-pagination *ngIf="!widget" class="pagination-container float-right mt-3 mb-3 mb-lg-0"
[class]="isLoading ? 'disabled' : ''" [collectionSize]="blocksCount" [rotate]="true" [maxSize]="5" [pageSize]="15"
[(page)]="page" (pageChange)="pageChange(page)" [boundaryLinks]="true" [ellipses]="false">
</ngb-pagination>
</div>