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

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

@ -2,14 +2,21 @@
max-width: 1400px; max-width: 1400px;
padding-bottom: 0; padding-bottom: 0;
} }
.container-xl.widget {
padding-left: 0px;
}
.container { .container {
max-width: 100%; max-width: 100%;
} }
.row { td {
padding-top: 15px; padding-top: 0.7rem !important;
padding-bottom: 15px; padding-bottom: 0.7rem !important;
}
.clear-link {
color: white;
} }
.disabled { .disabled {
@ -21,6 +28,16 @@
background-color: #2d3348; background-color: #2d3348;
} }
.pool {
width: 17%;
}
.pool.widget {
width: 40%;
@media (max-width: 576px) {
padding-left: 30px;
width: 60%;
}
}
.pool-name { .pool-name {
display: inline-block; display: inline-block;
vertical-align: text-top; vertical-align: text-top;
@ -33,6 +50,12 @@
width: 10%; width: 10%;
} }
} }
.height.widget {
width: 20%;
@media (max-width: 576px) {
width: 10%;
}
}
.timestamp { .timestamp {
@media (max-width: 900px) { @media (max-width: 900px) {
@ -52,7 +75,13 @@
@media (max-width: 1100px) { @media (max-width: 1100px) {
padding-right: 10px; padding-right: 10px;
} }
@media (max-width: 800px) { @media (max-width: 875px) {
display: none;
}
}
.txs.widget {
padding-right: 0;
@media (max-width: 650px) {
display: none; display: none;
} }
} }
@ -62,9 +91,8 @@
display: none; display: none;
} }
} }
.fees.widget {
.pool { width: 20%;
width: 17%;
} }
.reward { .reward {
@ -73,6 +101,13 @@
padding-right: 30px; padding-right: 30px;
} }
} }
.reward.widget {
width: 20%;
@media (max-width: 576px) {
width: 30%;
padding-right: 0;
}
}
.size { .size {
width: 12%; 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 { BehaviorSubject, Observable, timer } from 'rxjs';
import { delayWhen, map, retryWhen, switchMap, tap } from 'rxjs/operators'; import { delayWhen, map, retryWhen, switchMap, tap } from 'rxjs/operators';
import { BlockExtended } from 'src/app/interfaces/node-api.interface'; import { BlockExtended } from 'src/app/interfaces/node-api.interface';
@ -12,6 +12,8 @@ import { StateService } from 'src/app/services/state.service';
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
}) })
export class BlocksList implements OnInit { export class BlocksList implements OnInit {
@Input() widget: boolean = false;
blocks$: Observable<BlockExtended[]> = undefined blocks$: Observable<BlockExtended[]> = undefined
isLoading = true; isLoading = true;
@ -20,17 +22,18 @@ export class BlocksList implements OnInit {
page = 1; page = 1;
blocksCount: number; blocksCount: number;
fromHeightSubject: BehaviorSubject<number> = new BehaviorSubject(this.fromBlockHeight); fromHeightSubject: BehaviorSubject<number> = new BehaviorSubject(this.fromBlockHeight);
skeletonLines: number[] = [];
constructor( constructor(
private apiService: ApiService, private apiService: ApiService,
public stateService: StateService, public stateService: StateService,
) { ) {
} }
ngOnInit(): void { ngOnInit(): void {
this.skeletonLines = this.widget === true ? [...Array(5).keys()] : [...Array(15).keys()];
this.paginationMaxSize = window.matchMedia('(max-width: 670px)').matches ? 3 : 5; this.paginationMaxSize = window.matchMedia('(max-width: 670px)').matches ? 3 : 5;
this.blocks$ = this.fromHeightSubject.pipe( this.blocks$ = this.fromHeightSubject.pipe(
switchMap(() => { switchMap(() => {
this.isLoading = true; this.isLoading = true;
@ -48,6 +51,9 @@ export class BlocksList implements OnInit {
block.extras.pool.logo = `./resources/mining-pools/` + block.extras.pool.logo = `./resources/mining-pools/` +
block.extras.pool.name.toLowerCase().replace(' ', '').replace('.', '') + '.svg'; block.extras.pool.name.toLowerCase().replace(' ', '').replace('.', '') + '.svg';
} }
if (this.widget) {
return blocks.slice(0, 5);
}
return blocks; return blocks;
}), }),
retryWhen(errors => errors.pipe(delayWhen(() => timer(1000)))) 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> </div>
<!-- pool dominance --> <!-- pool dominance -->
<div class="col"> <!-- <div class="col">
<div class="card" style="height: 385px"> <div class="card" style="height: 385px">
<div class="card-body"> <div class="card-body">
<h5 class="card-title"> <h5 class="card-title">
@ -106,6 +106,20 @@
more &raquo;</a></div> more &raquo;</a></div>
</div> </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>
<div class="col"> <div class="col">
@ -115,7 +129,7 @@
Adjustments Adjustments
</h5> </h5>
<app-difficulty-adjustments-table></app-difficulty-adjustments-table> <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> &raquo;</a></div>
</div> </div>
</div> </div>