133 lines
8.6 KiB
HTML
133 lines
8.6 KiB
HTML
<app-indexing-progress *ngIf="!widget"></app-indexing-progress>
|
|
|
|
<div class="container-xl" style="min-height: 335px" [ngClass]="{'widget': widget, 'full-height': !widget, 'legacy': !indexingAvailable}">
|
|
<h1 *ngIf="!widget" class="float-left" i18n="master-page.blocks">Blocks</h1>
|
|
<div *ngIf="!widget && isLoading" class="spinner-border ml-3" role="status"></div>
|
|
|
|
<div class="clearfix"></div>
|
|
|
|
<div style="min-height: 295px">
|
|
<table class="table table-borderless">
|
|
<thead>
|
|
<th class="height text-left" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}" i18n="latest-blocks.height">Height</th>
|
|
<th *ngIf="indexingAvailable" class="pool text-left" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}" i18n="mining.pool-name"
|
|
i18n-ngbTooltip="mining.pool-name" ngbTooltip="Pool" placement="bottom" #miningpool [disableTooltip]="!isEllipsisActive(miningpool)">Pool</th>
|
|
<th class="timestamp" i18n="latest-blocks.timestamp" *ngIf="!widget" [class]="indexingAvailable ? '' : 'legacy'">Timestamp</th>
|
|
<th class="mined" i18n="latest-blocks.mined" *ngIf="!widget" [class]="indexingAvailable ? '' : 'legacy'">Mined</th>
|
|
<th *ngIf="auditAvailable" class="health text-right" i18n="latest-blocks.health" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}"
|
|
i18n-ngbTooltip="latest-blocks.health" ngbTooltip="Health" placement="bottom" #health [disableTooltip]="!isEllipsisActive(health)">Health</th>
|
|
<th *ngIf="indexingAvailable" class="reward text-right" i18n="latest-blocks.reward" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}"
|
|
i18n-ngbTooltip="latest-blocks.reward" ngbTooltip="Reward" placement="bottom" #reward [disableTooltip]="!isEllipsisActive(reward)">Reward</th>
|
|
<th *ngIf="indexingAvailable && !widget" class="fees text-right" i18n="latest-blocks.fees" [class]="indexingAvailable ? '' : 'legacy'">Fees</th>
|
|
<th *ngIf="indexingAvailable" class="txs text-right" i18n="dashboard.txs" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}"
|
|
i18n-ngbTooltip="dashboard.txs" ngbTooltip="TXs" placement="bottom" #txs [disableTooltip]="!isEllipsisActive(txs)">TXs</th>
|
|
<th *ngIf="!indexingAvailable" class="txs text-right" i18n="dashboard.txs" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}">Transactions</th>
|
|
<th class="size" i18n="latest-blocks.size" *ngIf="!widget" [class]="indexingAvailable ? '' : 'legacy'">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 class="text-left" [class]="widget ? 'widget' : ''">
|
|
<a [routerLink]="['/block' | relativeUrl, block.id]" [state]="{ data: { block: block } }">{{ block.height }}</a>
|
|
</td>
|
|
<td *ngIf="indexingAvailable" class="pool text-left" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}">
|
|
<div class="tooltip-custom">
|
|
<a class="clear-link" [routerLink]="['/mining/pool' | relativeUrl, block.extras.pool.slug]">
|
|
<img width="22" height="22" src="{{ block.extras.pool['logo'] }}"
|
|
onError="this.src = '/resources/mining-pools/default.svg'" [alt]="'Logo of ' + block.extras.pool.name + ' mining pool'">
|
|
<span class="pool-name">{{ block.extras.pool.name }}</span>
|
|
</a>
|
|
<span *ngIf="!widget" class="tooltiptext badge badge-secondary scriptmessage">{{ block.extras.coinbaseRaw | hex2ascii }}</span>
|
|
</div>
|
|
</td>
|
|
<td class="timestamp" *ngIf="!widget" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}">
|
|
‎{{ block.timestamp * 1000 | date:'yyyy-MM-dd HH:mm' }}
|
|
</td>
|
|
<td class="mined" *ngIf="!widget" [class]="indexingAvailable ? '' : 'legacy'">
|
|
<app-time-since [time]="block.timestamp" [fastRender]="true"></app-time-since>
|
|
</td>
|
|
<td *ngIf="auditAvailable" class="health text-right" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}">
|
|
<a
|
|
class="health-badge badge"
|
|
[class.badge-success]="auditScores[block.id] >= 99"
|
|
[class.badge-warning]="auditScores[block.id] >= 75 && auditScores[block.id] < 99"
|
|
[class.badge-danger]="auditScores[block.id] < 75"
|
|
[routerLink]="auditScores[block.id] != null ? ['/block/' | relativeUrl, block.id] : null"
|
|
[state]="{ data: { block: block } }"
|
|
*ngIf="auditScores[block.id] != null; else nullHealth"
|
|
>{{ auditScores[block.id] }}%</a>
|
|
<ng-template #nullHealth>
|
|
<ng-container *ngIf="!loadingScores; else loadingHealth">
|
|
<span class="health-badge badge badge-secondary" i18n="unknown">Unknown</span>
|
|
</ng-container>
|
|
</ng-template>
|
|
<ng-template #loadingHealth>
|
|
<span class="skeleton-loader" style="max-width: 60px"></span>
|
|
</ng-template>
|
|
</td>
|
|
<td *ngIf="indexingAvailable" class="reward text-right" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}">
|
|
<app-amount [satoshis]="block.extras.reward" [noFiat]="true" digitsInfo="1.2-2"></app-amount>
|
|
</td>
|
|
<td *ngIf="indexingAvailable && !widget" class="fees text-right" [class]="indexingAvailable ? '' : 'legacy'">
|
|
<app-amount [satoshis]="block.extras.totalFees" [noFiat]="true" digitsInfo="1.2-2"></app-amount>
|
|
</td>
|
|
<td class="txs text-right" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}">
|
|
{{ block.tx_count | number }}
|
|
</td>
|
|
<td class="size" *ngIf="!widget" [class]="indexingAvailable ? '' : 'legacy'">
|
|
<div class="progress">
|
|
<div class="progress-bar progress-mempool" role="progressbar"
|
|
[ngStyle]="{'width': (block.weight / stateService.env.BLOCK_WEIGHT_UNITS)*100 + '%' }"></div>
|
|
<div class="progress-text" [innerHTML]="block.size | bytes: 2"></div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<ng-template #skeleton>
|
|
<tbody>
|
|
<tr *ngFor="let item of skeletonLines">
|
|
<td class="height text-left" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}">
|
|
<span class="skeleton-loader" style="max-width: 75px"></span>
|
|
</td>
|
|
<td *ngIf="indexingAvailable" class="pool text-left" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}">
|
|
<img width="1" height="25" style="opacity: 0">
|
|
<span class="skeleton-loader" style="max-width: 125px"></span>
|
|
</td>
|
|
<td class="timestamp" *ngIf="!widget" [class]="indexingAvailable ? '' : 'legacy'">
|
|
<span class="skeleton-loader" style="max-width: 150px"></span>
|
|
</td>
|
|
<td class="mined" *ngIf="!widget" [class]="indexingAvailable ? '' : 'legacy'">
|
|
<span class="skeleton-loader" style="max-width: 125px"></span>
|
|
</td>
|
|
<td *ngIf="auditAvailable" class="health text-left" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}">
|
|
<span class="skeleton-loader" style="max-width: 75px"></span>
|
|
</td>
|
|
<td *ngIf="indexingAvailable" class="reward text-right" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}">
|
|
<span class="skeleton-loader" style="max-width: 75px"></span>
|
|
</td>
|
|
<td *ngIf="indexingAvailable && !widget" class="fees text-right" [class]="indexingAvailable ? '' : 'legacy'">
|
|
<span class="skeleton-loader" style="max-width: 75px"></span>
|
|
</td>
|
|
<td class="txs text-right" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}">
|
|
<span class="skeleton-loader" style="max-width: 75px"></span>
|
|
</td>
|
|
<td class="size" *ngIf="!widget" [class]="indexingAvailable ? '' : 'legacy'">
|
|
<span class="skeleton-loader"></span>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</ng-template>
|
|
</table>
|
|
|
|
<ngb-pagination *ngIf="!widget" class="pagination-container float-right mt-2" [class]="isLoading ? 'disabled' : ''"
|
|
[collectionSize]="blocksCount" [rotate]="true" [maxSize]="maxSize" [pageSize]="15" [(page)]="page"
|
|
(pageChange)="pageChange(page)" [boundaryLinks]="true" [ellipses]="false">
|
|
</ngb-pagination>
|
|
|
|
<ng-template [ngIf]="!widget">
|
|
<div class="clearfix"></div>
|
|
<br>
|
|
</ng-template>
|
|
</div>
|
|
|
|
</div>
|