mirror of
https://github.com/benjamin-wilson/public-pool-ui.git
synced 2025-03-17 21:32:54 +01:00
adding some loading indicators
This commit is contained in:
Ben Wilson
parent
690458b270
commit
4a4ece124f
src
app/components
prime-ng.module.ts@ -1,4 +1,4 @@
|
||||
<ng-container *ngIf="clientInfo$ | async as clientInfo">
|
||||
<ng-container>
|
||||
<div class="grid">
|
||||
<div class="col-12 lg:col-6 xl:col-3">
|
||||
|
||||
@ -8,7 +8,14 @@
|
||||
<span class="block text-500 font-medium mb-3">Your Best Difficulty <i
|
||||
class="pi pi-question-circle ml-2"
|
||||
pTooltip="If you find a solution with a difficulty higher than the network difficulty, you've found a block."></i></span>
|
||||
<div class="text-900 font-medium text-xl">{{clientInfo.bestDifficulty | numberSuffix}}
|
||||
<div class="text-900 font-medium text-xl">
|
||||
|
||||
<ng-container
|
||||
*ngIf="clientInfo$ | async as clientInfo; else loading">{{clientInfo.bestDifficulty |
|
||||
numberSuffix}}</ng-container>
|
||||
<ng-template #loading>
|
||||
<p-skeleton></p-skeleton>
|
||||
</ng-template>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex align-items-center justify-content-center bg-orange-100 border-round"
|
||||
@ -16,27 +23,44 @@
|
||||
<i class="pi pi-star text-orange-500 text-xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-green-500 font-medium">{{clientInfo.bestDifficulty | number}}</span>
|
||||
<span class="text-green-500 font-medium">
|
||||
|
||||
<ng-container *ngIf="clientInfo$ | async as clientInfo; else loading">{{clientInfo.bestDifficulty |
|
||||
number}}</ng-container>
|
||||
<ng-template #loading>
|
||||
<p-skeleton></p-skeleton>
|
||||
</ng-template>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<ng-container *ngIf="networkInfo$ | async as networkInfo">
|
||||
<ng-container>
|
||||
<div class="col-12 lg:col-6 xl:col-3">
|
||||
<div class="card mb-4">
|
||||
<div class="flex justify-content-between mb-3">
|
||||
<div>
|
||||
<span class="block text-500 font-medium mb-3">Network Difficulty</span>
|
||||
<div class="text-900 font-medium text-xl">{{networkInfo.difficulty | numberSuffix}}
|
||||
<div class="text-900 font-medium text-xl">
|
||||
<ng-container
|
||||
*ngIf="networkInfo$ | async as networkInfo; else loading">{{networkInfo.difficulty |
|
||||
numberSuffix}}</ng-container>
|
||||
<ng-template #loading><p-skeleton></p-skeleton></ng-template>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- <div class="flex align-items-center justify-content-center bg-orange-100 border-round"
|
||||
[ngStyle]="{width: '2.5rem', height: '2.5rem'}">
|
||||
<i class="pi pi-star text-orange-500 text-xl"></i>
|
||||
</div> -->
|
||||
</div>
|
||||
<span class="text-green-500 font-medium">{{networkInfo.difficulty | number}}</span>
|
||||
<span class="text-green-500 font-medium">
|
||||
<ng-container *ngIf="networkInfo$ | async as networkInfo; else loading">
|
||||
{{networkInfo.difficulty
|
||||
| number}}</ng-container>
|
||||
<ng-template #loading><p-skeleton></p-skeleton></ng-template>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 lg:col-6 xl:col-3">
|
||||
@ -44,7 +68,10 @@
|
||||
<div class="flex justify-content-between mb-3">
|
||||
<div>
|
||||
<span class="block text-500 font-medium mb-3">Network Hash Rate </span>
|
||||
<div class="text-900 font-medium text-xl">{{networkInfo.networkhashps | hashSuffix}}
|
||||
<div class="text-900 font-medium text-xl">
|
||||
<ng-container *ngIf="networkInfo$ | async as networkInfo; else loading">
|
||||
{{networkInfo.networkhashps | hashSuffix}}</ng-container>
|
||||
<ng-template #loading><p-skeleton></p-skeleton></ng-template>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="flex align-items-center justify-content-center bg-orange-100 border-round"
|
||||
@ -60,7 +87,10 @@
|
||||
<div class="flex justify-content-between mb-3">
|
||||
<div>
|
||||
<span class="block text-500 font-medium mb-3">Block Height</span>
|
||||
<div class="text-900 font-medium text-xl">{{networkInfo.blocks}}
|
||||
<div class="text-900 font-medium text-xl">
|
||||
<ng-container *ngIf="networkInfo$ | async as networkInfo; else loading">
|
||||
{{networkInfo.blocks}}</ng-container>
|
||||
<ng-template #loading><p-skeleton></p-skeleton></ng-template>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="flex align-items-center justify-content-center bg-orange-100 border-round"
|
||||
@ -68,69 +98,133 @@
|
||||
<i class="pi pi-star text-orange-500 text-xl"></i>
|
||||
</div> -->
|
||||
</div>
|
||||
<span class="text-green-500 font-medium">Weight: {{networkInfo.currentblockweight | number}}</span>
|
||||
<span class="text-green-500 font-medium">Weight:
|
||||
<ng-container *ngIf="networkInfo$ | async as networkInfo; else loading">
|
||||
{{networkInfo.currentblockweight | number}}</ng-container>
|
||||
<ng-template #loading><p-skeleton></p-skeleton></ng-template>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
<div class="card">
|
||||
<p-table #dataTable [rowHover]="true" groupRowsBy="name" dataKey="name" rowGroupMode="subheader"
|
||||
[value]="clientInfo.workers" [expandedRowKeys]="expandedRows$ | async"
|
||||
[tableStyle]="{ 'min-width': '50rem' }">
|
||||
<ng-container *ngIf="clientInfo$ | async as clientInfo; else loadingTable">
|
||||
<p-table #dataTable [rowHover]="true" groupRowsBy="name" dataKey="name" rowGroupMode="subheader"
|
||||
[value]="clientInfo.workers" [expandedRowKeys]="expandedRows$ | async"
|
||||
[tableStyle]="{ 'min-width': '50rem' }">
|
||||
|
||||
|
||||
<ng-template pTemplate="header">
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Session ID</th>
|
||||
<th>Hash Rate</th>
|
||||
<th>Session Best Difficulty</th>
|
||||
<th>Uptime</th>
|
||||
<th>Last Seen</th>
|
||||
</tr>
|
||||
</ng-template>
|
||||
<ng-template pTemplate="header">
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Session ID</th>
|
||||
<th>Hash Rate</th>
|
||||
<th>Session Best Difficulty</th>
|
||||
<th>Uptime</th>
|
||||
<th>Last Seen</th>
|
||||
</tr>
|
||||
</ng-template>
|
||||
|
||||
|
||||
<ng-template pTemplate="groupheader" let-worker let-rowIndex="rowIndex" let-expanded="expanded">
|
||||
<tr [routerLink]="[worker.name]">
|
||||
<td>
|
||||
<button (click)="$event.stopImmediatePropagation()" type="button" pButton pRipple
|
||||
[pRowToggler]="worker" class="p-button-text p-button-rounded p-button-plain mr-2"
|
||||
[icon]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'"></button>
|
||||
<ng-template pTemplate="groupheader" let-worker let-rowIndex="rowIndex" let-expanded="expanded">
|
||||
<tr [routerLink]="[worker.name]">
|
||||
<td>
|
||||
<button (click)="$event.stopImmediatePropagation()" type="button" pButton pRipple
|
||||
[pRowToggler]="worker" class="p-button-text p-button-rounded p-button-plain mr-2"
|
||||
[icon]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'"></button>
|
||||
|
||||
<span class="worker-name font-bold ml-2">{{worker.name}} </span>
|
||||
<span class="worker-name font-bold ml-2">{{worker.name}} </span>
|
||||
|
||||
</td>
|
||||
<td>
|
||||
{{getSessionCount(worker.name, clientInfo.workers)}} Sessions
|
||||
</td>
|
||||
<td>
|
||||
{{getTotalHashRate(worker.name, clientInfo.workers) | hashSuffix}}
|
||||
</td>
|
||||
<td>
|
||||
{{getBestDifficulty(worker.name, clientInfo.workers) | numberSuffix}}
|
||||
</td>
|
||||
<td>
|
||||
</td>
|
||||
<td>
|
||||
{{getSessionCount(worker.name, clientInfo.workers)}} Sessions
|
||||
</td>
|
||||
<td>
|
||||
{{getTotalHashRate(worker.name, clientInfo.workers) | hashSuffix}}
|
||||
</td>
|
||||
<td>
|
||||
{{getBestDifficulty(worker.name, clientInfo.workers) | numberSuffix}}
|
||||
</td>
|
||||
<td>
|
||||
|
||||
</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
|
||||
|
||||
<ng-template pTemplate="rowexpansion" let-worker>
|
||||
<tr [routerLink]="[worker.name, worker.sessionId]">
|
||||
<td></td>
|
||||
<td>{{worker.sessionId}}</td>
|
||||
<td>{{worker.hashRate | hashSuffix}}</td>
|
||||
<td>{{worker.bestDifficulty | numberSuffix}}</td>
|
||||
<td>{{worker.startTime | dateAgo}}</td>
|
||||
<td>{{worker.lastSeen | dateAgo}}</td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
<ng-template pTemplate="rowexpansion" let-worker>
|
||||
<tr [routerLink]="[worker.name, worker.sessionId]">
|
||||
<td></td>
|
||||
<td>{{worker.sessionId}}</td>
|
||||
<td>{{worker.hashRate | hashSuffix}}</td>
|
||||
<td>{{worker.bestDifficulty | numberSuffix}}</td>
|
||||
<td>{{worker.startTime | dateAgo}}</td>
|
||||
<td>{{worker.lastSeen | dateAgo}}</td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
|
||||
|
||||
</p-table>
|
||||
</p-table>
|
||||
</ng-container>
|
||||
<ng-template #loadingTable>
|
||||
<p-table #dataTable [rowHover]="true" groupRowsBy="loading" dataKey="loading" rowGroupMode="subheader"
|
||||
[value]="[{loading: 'loading'}]" [expandedRowKeys]="{loading: true}"
|
||||
[tableStyle]="{ 'min-width': '50rem' }">
|
||||
|
||||
|
||||
<ng-template pTemplate="header">
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Session ID</th>
|
||||
<th>Hash Rate</th>
|
||||
<th>Session Best Difficulty</th>
|
||||
<th>Uptime</th>
|
||||
<th>Last Seen</th>
|
||||
</tr>
|
||||
</ng-template>
|
||||
|
||||
|
||||
<ng-template pTemplate="groupheader" let-worker let-rowIndex="rowIndex" let-expanded="expanded">
|
||||
<tr>
|
||||
<td>
|
||||
<button (click)="$event.stopImmediatePropagation()" type="button" pButton pRipple
|
||||
[pRowToggler]="worker" class="p-button-text p-button-rounded p-button-plain mr-2"
|
||||
[icon]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'"></button>
|
||||
|
||||
<span class="worker-name font-bold ml-2">{{worker.name}} </span>
|
||||
|
||||
</td>
|
||||
<td>
|
||||
<p-skeleton></p-skeleton>
|
||||
</td>
|
||||
<td>
|
||||
<p-skeleton></p-skeleton>
|
||||
<td>
|
||||
<p-skeleton></p-skeleton>
|
||||
</td>
|
||||
<td>
|
||||
|
||||
</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
|
||||
|
||||
<ng-template pTemplate="rowexpansion" let-worker>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td><p-skeleton></p-skeleton></td>
|
||||
<td><p-skeleton></p-skeleton></td>
|
||||
<td><p-skeleton></p-skeleton></td>
|
||||
<td><p-skeleton></p-skeleton></td>
|
||||
<td><p-skeleton></p-skeleton></td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
|
||||
|
||||
</p-table>
|
||||
</ng-template>
|
||||
|
||||
|
||||
|
||||
@ -139,11 +233,14 @@
|
||||
|
||||
</div>
|
||||
|
||||
<div *ngIf="chartData$ | async as chartData">
|
||||
<div class="card">
|
||||
|
||||
<div class="card">
|
||||
<ng-container *ngIf="chartData$ | async as chartData; else loadingChart">
|
||||
<p-chart [data]="chartData" [options]="chartOptions"></p-chart>
|
||||
</div>
|
||||
</ng-container>
|
||||
<ng-template #loadingChart>
|
||||
<p-skeleton width="100%" height="40vh"></p-skeleton>
|
||||
</ng-template>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</ng-container>
|
||||
@ -37,7 +37,9 @@ export class DashboardComponent implements AfterViewInit {
|
||||
|
||||
|
||||
|
||||
this.networkInfo$ = this.appService.getNetworkInfo();
|
||||
this.networkInfo$ = this.appService.getNetworkInfo().pipe(
|
||||
shareReplay({ refCount: true, bufferSize: 1 })
|
||||
);
|
||||
|
||||
this.address = this.route.snapshot.params['address'];
|
||||
this.clientInfo$ = this.clientService.getClientInfo(this.address).pipe(
|
||||
|
||||
@ -58,43 +58,73 @@
|
||||
<div class="col-12">
|
||||
|
||||
|
||||
<div *ngIf="chartData$ | async as chartData">
|
||||
<div>
|
||||
<div class="card chart">
|
||||
|
||||
<div class="text-center mb-2">Uptime: {{uptime$ | async | dateAgo}}</div>
|
||||
|
||||
<ng-container *ngIf="chartData$ | async as chartData; else loadingChart">
|
||||
<p-chart [responsive]="true" type="line" [data]="chartData" [options]="chartOptions"></p-chart>
|
||||
|
||||
<p-chart [responsive]="true" type="line" [data]="chartData" [options]="chartOptions"></p-chart>
|
||||
</ng-container>
|
||||
<ng-template #loadingChart>
|
||||
<p-skeleton width="100%" height="40vh"></p-skeleton>
|
||||
</ng-template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12" *ngIf="userAgents$ | async as userAgents">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<h4 style="text-align: center;">Online Devices</h4>
|
||||
<p-table [value]="userAgents">
|
||||
<ng-template pTemplate="header">
|
||||
<tr>
|
||||
<th>Device</th>
|
||||
<th>Currently Working</th>
|
||||
<th>Total Hash Rate</th>
|
||||
<th>Best Difficulty <i class="pi pi-question-circle ml-2"
|
||||
pTooltip="If you find a solution with a difficulty higher than the network difficulty, you've found a block."></i>
|
||||
</th>
|
||||
</tr>
|
||||
</ng-template>
|
||||
<ng-template pTemplate="body" let-userAgent>
|
||||
<tr>
|
||||
<td>{{ userAgent.userAgent | userAgent }}</td>
|
||||
<td>{{ userAgent.count }}</td>
|
||||
<td>{{ userAgent.totalHashRate | hashSuffix }}</td>
|
||||
<td>{{ userAgent.bestDifficulty | numberSuffix}}</td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
</p-table>
|
||||
|
||||
<ng-container *ngIf="userAgents$ | async as userAgents">
|
||||
<p-table [value]="userAgents">
|
||||
<ng-template pTemplate="header">
|
||||
<tr>
|
||||
<th>Device</th>
|
||||
<th>Currently Working</th>
|
||||
<th>Total Hash Rate</th>
|
||||
<th>Best Difficulty <i class="pi pi-question-circle ml-2"
|
||||
pTooltip="If you find a solution with a difficulty higher than the network difficulty, you've found a block."></i>
|
||||
</th>
|
||||
</tr>
|
||||
</ng-template>
|
||||
<ng-template pTemplate="body" let-userAgent>
|
||||
<tr></tr>
|
||||
<tr>
|
||||
<td>{{ userAgent.userAgent | userAgent }}</td>
|
||||
<td>{{ userAgent.count }}</td>
|
||||
<td>{{ userAgent.totalHashRate | hashSuffix }}</td>
|
||||
<td>{{ userAgent.bestDifficulty | numberSuffix}}</td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
</p-table>
|
||||
</ng-container>
|
||||
<ng-template #loadingTable>
|
||||
<p-table [value]="[{},{},{}]">
|
||||
<ng-template pTemplate="header">
|
||||
<tr>
|
||||
<th>Device</th>
|
||||
<th>Currently Working</th>
|
||||
<th>Total Hash Rate</th>
|
||||
<th>Best Difficulty <i class="pi pi-question-circle ml-2"
|
||||
pTooltip="If you find a solution with a difficulty higher than the network difficulty, you've found a block."></i>
|
||||
</th>
|
||||
</tr>
|
||||
</ng-template>
|
||||
<ng-template pTemplate="body" let-row>
|
||||
<tr></tr>
|
||||
<tr>
|
||||
<td><p-skeleton></p-skeleton></td>
|
||||
<td><p-skeleton></p-skeleton></td>
|
||||
<td><p-skeleton></p-skeleton></td>
|
||||
<td><p-skeleton></p-skeleton></td>
|
||||
</tr>
|
||||
</ng-template>
|
||||
</p-table>
|
||||
</ng-template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -3,6 +3,7 @@ import { ConfirmationService, MessageService } from 'primeng/api';
|
||||
import { ButtonModule } from 'primeng/button';
|
||||
import { ChartModule } from 'primeng/chart';
|
||||
import { InputSwitchModule } from 'primeng/inputswitch';
|
||||
import { SkeletonModule } from 'primeng/skeleton';
|
||||
import { TableModule } from 'primeng/table';
|
||||
import { TooltipModule } from 'primeng/tooltip';
|
||||
|
||||
@ -16,7 +17,8 @@ const primeNgModules = [
|
||||
ChartModule,
|
||||
InputSwitchModule,
|
||||
ButtonModule,
|
||||
TooltipModule
|
||||
TooltipModule,
|
||||
SkeletonModule
|
||||
// DropdownModule,
|
||||
// ToastModule,
|
||||
// CheckboxModule,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user