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 d8e986996f
commit 123af53de2
No known key found for this signature in database
GPG Key ID: E155910B16E8BD04
4 changed files with 102 additions and 43 deletions
Show Stats 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>

49
frontend/src/app/components/blocks-list/blocks-list.component.scss
View File

@ -2,14 +2,21 @@
max-width: 1400px;
padding-bottom: 0;
}
.container-xl.widget {
padding-left: 0px;
}
.container {
max-width: 100%;
}
.row {
padding-top: 15px;
padding-bottom: 15px;
td {
padding-top: 0.7rem !important;
padding-bottom: 0.7rem !important;
}
.clear-link {
color: white;
}
.disabled {
@ -21,6 +28,16 @@
background-color: #2d3348;
}
.pool {
width: 17%;
}
.pool.widget {
width: 40%;
@media (max-width: 576px) {
padding-left: 30px;
width: 60%;
}
}
.pool-name {
display: inline-block;
vertical-align: text-top;
@ -33,6 +50,12 @@
width: 10%;
}
}
.height.widget {
width: 20%;
@media (max-width: 576px) {
width: 10%;
}
}
.timestamp {
@media (max-width: 900px) {
@ -52,7 +75,13 @@
@media (max-width: 1100px) {
padding-right: 10px;
}
@media (max-width: 800px) {
@media (max-width: 875px) {
display: none;
}
}
.txs.widget {
padding-right: 0;
@media (max-width: 650px) {
display: none;
}
}
@ -62,9 +91,8 @@
display: none;
}
}
.pool {
width: 17%;
.fees.widget {
width: 20%;
}
.reward {
@ -73,6 +101,13 @@
padding-right: 30px;
}
}
.reward.widget {
width: 20%;
@media (max-width: 576px) {
width: 30%;
padding-right: 0;
}
}
.size {
width: 12%;

12
frontend/src/app/components/blocks-list/blocks-list.component.ts
View File

@ -1,4 +1,4 @@
import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
import { Component, OnInit, ChangeDetectionStrategy, Input } from '@angular/core';
import { BehaviorSubject, Observable, timer } from 'rxjs';
import { delayWhen, map, retryWhen, switchMap, tap } from 'rxjs/operators';
import { BlockExtended } from 'src/app/interfaces/node-api.interface';
@ -12,6 +12,8 @@ import { StateService } from 'src/app/services/state.service';
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class BlocksList implements OnInit {
@Input() widget: boolean = false;
blocks$: Observable<BlockExtended[]> = undefined
isLoading = true;
@ -20,17 +22,18 @@ export class BlocksList implements OnInit {
page = 1;
blocksCount: number;
fromHeightSubject: BehaviorSubject<number> = new BehaviorSubject(this.fromBlockHeight);
skeletonLines: number[] = [];
constructor(
private apiService: ApiService,
public stateService: StateService,
) {
}
ngOnInit(): void {
this.skeletonLines = this.widget === true ? [...Array(5).keys()] : [...Array(15).keys()];
this.paginationMaxSize = window.matchMedia('(max-width: 670px)').matches ? 3 : 5;
this.blocks$ = this.fromHeightSubject.pipe(
switchMap(() => {
this.isLoading = true;
@ -48,6 +51,9 @@ export class BlocksList implements OnInit {
block.extras.pool.logo = `./resources/mining-pools/` +
block.extras.pool.name.toLowerCase().replace(' ', '').replace('.', '') + '.svg';
}
if (this.widget) {
return blocks.slice(0, 5);
}
return blocks;
}),
retryWhen(errors => errors.pipe(delayWhen(() => timer(1000))))

18
frontend/src/app/components/mining-dashboard/mining-dashboard.component.html
View File

@ -95,7 +95,7 @@
</div>
<!-- pool dominance -->
<div class="col">
<!-- <div class="col">
<div class="card" style="height: 385px">
<div class="card-body">
<h5 class="card-title">
@ -106,6 +106,20 @@
more &raquo;</a></div>
</div>
</div>
</div> -->
<!-- Latest blocks -->
<div class="col">
<div class="card" style="height: 385px">
<div class="card-body">
<h5 class="card-title">
Latest blocks
</h5>
<app-blocks-list [widget]=true></app-blocks-list>
<div><a [routerLink]="['/mining/blocks' | relativeUrl]" i18n="dashboard.view-more">View
more &raquo;</a></div>
</div>
</div>
</div>
<div class="col">
@ -115,7 +129,7 @@
Adjustments
</h5>
<app-difficulty-adjustments-table></app-difficulty-adjustments-table>
<div class="mt-1"><a [routerLink]="['/mining/hashrate' | relativeUrl]" i18n="dashboard.view-more">View more
<div><a [routerLink]="['/mining/hashrate' | relativeUrl]" i18n="dashboard.view-more">View more
&raquo;</a></div>
</div>
</div>