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

Polish mining page UI

Browse Source 
Make sure to wait for all mining pools queries before continuing
This commit is contained in:
nymkappa
2022-01-21 21:50:57 +09:00
parent 045141d16d
commit 1160baaf02
5 changed files with 99 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
frontend/src/app/components/pool-ranking/pool-ranking.component.html
View File

@@ -1,13 +1,12 @@
<div class="container-xl">
<!-- <app-difficulty [showProgress]=false [showHalving]=true></app-difficulty> -->
<app-difficulty style="display: none;" [showProgress]=false [showHalving]=true></app-difficulty>
<div style="height: 500px; margin-top: 30px;" echarts [initOpts]="chartInitOptions" [options]="chartOptions"></div>
<div class="hashrate-pie" echarts [initOpts]="chartInitOptions" [options]="chartOptions"></div>
<div class="text-center loadingGraphs" *ngIf="isLoading">
<div class="spinner-border text-light"></div>
</div>
<div class="card-header">
<div class="card-header mb-0 mb-lg-4">
<form [formGroup]="radioGroupForm" class="formRadioGroup">
<div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="dateSpan">
<label ngbButtonLabel class="btn-primary btn-sm">
@@ -44,30 +43,32 @@
</form>
</div>
<table class="table table-borderless" [alwaysCallback]="true" infiniteScroll [infiniteScrollDistance]="1.5" [infiniteScrollUpDistance]="1.5" [infiniteScrollThrottle]="50">
<table class="table table-borderless text-center pools-table" [alwaysCallback]="true" infiniteScroll [infiniteScrollDistance]="1.5" [infiniteScrollUpDistance]="1.5" [infiniteScrollThrottle]="50">
<thead>
<th class="d-none d-md-block" i18n="latest-blocks.height">Rank</th>
<th><!-- LOGO --></th>
<th i18n="latest-blocks.timestamp">Name</th>
<th *ngIf="this.poolsWindowPreference === '1d'" i18n="latest-blocks.timestamp">Hashrate</th>
<th i18n="latest-blocks.mined">Block Count (%)</th>
<th class="d-none d-md-block" i18n="latest-blocks.transactions">Empty Blocks (%)</th>
<tr>
<th class="d-none d-md-block" i18n="latest-blocks.height">Rank</th>
<th class=""></th>
<th class="" i18n="latest-blocks.poolName">Name</th>
<th class="" *ngIf="this.poolsWindowPreference === '1d'" i18n="latest-blocks.timestamp">Hashrate</th>
<th class="" i18n="latest-blocks.mined">Blocks</th>
<th class="d-none d-md-block" i18n="latest-blocks.transactions">Empty Blocks</th>
</tr>
</thead>
<tbody *ngIf="(miningStatsObservable$ | async) as miningStats">
<tr>
<td class="d-none d-md-block">-</td>
<td><!-- LOGO --></td>
<td>All miners</td>
<td *ngIf="this.poolsWindowPreference === '1d'">{{ miningStats.lastEstimatedHashrate}} {{ miningStats.miningUnits.hashrateUnit }}</td>
<td>{{ miningStats.blockCount }}</td>
<td class="text-right"><img width="25" height="25" src="./resources/mining-pools/default.svg"></td>
<td class="">All miners</td>
<td class="" *ngIf="this.poolsWindowPreference === '1d'">{{ miningStats.lastEstimatedHashrate}} {{ miningStats.miningUnits.hashrateUnit }}</td>
<td class="">{{ miningStats.blockCount }}</td>
<td class="d-none d-md-block">{{ miningStats.totalEmptyBlock }} ({{ miningStats.totalEmptyBlockRatio }}%)</td>
</tr>
<tr *ngFor="let pool of miningStats.pools">
<td class="d-none d-md-block">{{ pool.rank }}</td>
<td><img width="25" height="25" src="{{ pool.logo }}" onError="this.src = './resources/mining-pools/default.svg'"></td>
<td><a target="#" href="{{ pool.link }}">{{ pool.name }}</a></td>
<td *ngIf="this.poolsWindowPreference === '1d'">{{ pool.lastEstimatedHashrate }} {{ miningStats.miningUnits.hashrateUnit }}</td>
<td>{{ pool.blockCount }} ({{ pool.share }}%)</td>
<td class="text-right"><img width="25" height="25" src="{{ pool.logo }}" onError="this.src = './resources/mining-pools/default.svg'"></td>
<td class=""><a target="#" href="{{ pool.link }}">{{ pool.name }}</a></td>
<td class="" *ngIf="this.poolsWindowPreference === '1d'">{{ pool.lastEstimatedHashrate }} {{ miningStats.miningUnits.hashrateUnit }}</td>
<td class="">{{ pool['blockText'] }}</td>
<td class="d-none d-md-block">{{ pool.emptyBlocks }} ({{ pool.emptyBlockRatio }}%)</td>
</tr>
</tbody>