Retropex/Ordisrespector-pool-ui
1
0
Fork 0
mirror of https://github.com/Retropex/Ordisrespector-pool-ui.git synced 2025-05-28 19:42:30 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

adding some loading indicators

Browse Source
This commit is contained in:
Ben Wilson 2023-08-09 17:25:36 -04:00
parent 690458b270
commit 4a4ece124f
4 changed files with 217 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

217
src/app/components/dashboard/dashboard.component.html
View File

@ -1,4 +1,4 @@
<ng-container *ngIf="clientInfo$ | async as clientInfo"> <ng-container>
<div class="grid"> <div class="grid">
<div class="col-12 lg:col-6 xl:col-3"> <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 <span class="block text-500 font-medium mb-3">Your Best Difficulty <i
class="pi pi-question-circle ml-2" 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> 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> </div>
<div class="flex align-items-center justify-content-center bg-orange-100 border-round" <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> <i class="pi pi-star text-orange-500 text-xl"></i>
</div> </div>
</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>
</div> </div>
<ng-container *ngIf="networkInfo$ | async as networkInfo"> <ng-container>
<div class="col-12 lg:col-6 xl:col-3"> <div class="col-12 lg:col-6 xl:col-3">
<div class="card mb-4"> <div class="card mb-4">
<div class="flex justify-content-between mb-3"> <div class="flex justify-content-between mb-3">
<div> <div>
<span class="block text-500 font-medium mb-3">Network Difficulty</span> <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> </div>
<!-- <div class="flex align-items-center justify-content-center bg-orange-100 border-round" <!-- <div class="flex align-items-center justify-content-center bg-orange-100 border-round"
[ngStyle]="{width: '2.5rem', height: '2.5rem'}"> [ngStyle]="{width: '2.5rem', height: '2.5rem'}">
<i class="pi pi-star text-orange-500 text-xl"></i> <i class="pi pi-star text-orange-500 text-xl"></i>
</div> --> </div> -->
</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> </div>
<div class="col-12 lg:col-6 xl:col-3"> <div class="col-12 lg:col-6 xl:col-3">
@ -44,7 +68,10 @@
<div class="flex justify-content-between mb-3"> <div class="flex justify-content-between mb-3">
<div> <div>
<span class="block text-500 font-medium mb-3">Network Hash Rate </span> <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> </div>
<!-- <div class="flex align-items-center justify-content-center bg-orange-100 border-round" <!-- <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 class="flex justify-content-between mb-3">
<div> <div>
<span class="block text-500 font-medium mb-3">Block Height</span> <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> </div>
<!-- <div class="flex align-items-center justify-content-center bg-orange-100 border-round" <!-- <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> <i class="pi pi-star text-orange-500 text-xl"></i>
</div> --> </div> -->
</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>
</div> </div>
</ng-container> </ng-container>
</div> </div>
<div class="card"> <div class="card">
<p-table #dataTable [rowHover]="true" groupRowsBy="name" dataKey="name" rowGroupMode="subheader" <ng-container *ngIf="clientInfo$ | async as clientInfo; else loadingTable">
[value]="clientInfo.workers" [expandedRowKeys]="expandedRows$ | async" <p-table #dataTable [rowHover]="true" groupRowsBy="name" dataKey="name" rowGroupMode="subheader"
[tableStyle]="{ 'min-width': '50rem' }"> [value]="clientInfo.workers" [expandedRowKeys]="expandedRows$ | async"
[tableStyle]="{ 'min-width': '50rem' }">
<ng-template pTemplate="header"> <ng-template pTemplate="header">
<tr> <tr>
<th>Name</th> <th>Name</th>
<th>Session ID</th> <th>Session ID</th>
<th>Hash Rate</th> <th>Hash Rate</th>
<th>Session Best Difficulty</th> <th>Session Best Difficulty</th>
<th>Uptime</th> <th>Uptime</th>
<th>Last Seen</th> <th>Last Seen</th>
</tr> </tr>
</ng-template> </ng-template>
<ng-template pTemplate="groupheader" let-worker let-rowIndex="rowIndex" let-expanded="expanded"> <ng-template pTemplate="groupheader" let-worker let-rowIndex="rowIndex" let-expanded="expanded">
<tr [routerLink]="[worker.name]"> <tr [routerLink]="[worker.name]">
<td> <td>
<button (click)="$event.stopImmediatePropagation()" type="button" pButton pRipple <button (click)="$event.stopImmediatePropagation()" type="button" pButton pRipple
[pRowToggler]="worker" class="p-button-text p-button-rounded p-button-plain mr-2" [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> [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>
<td> <td>
{{getSessionCount(worker.name, clientInfo.workers)}} Sessions {{getSessionCount(worker.name, clientInfo.workers)}} Sessions
</td> </td>
<td> <td>
{{getTotalHashRate(worker.name, clientInfo.workers) | hashSuffix}} {{getTotalHashRate(worker.name, clientInfo.workers) | hashSuffix}}
</td> </td>
<td> <td>
{{getBestDifficulty(worker.name, clientInfo.workers) | numberSuffix}} {{getBestDifficulty(worker.name, clientInfo.workers) | numberSuffix}}
</td> </td>
<td> <td>
</td> </td>
<td></td> <td></td>
</tr> </tr>
</ng-template> </ng-template>
<ng-template pTemplate="rowexpansion" let-worker> <ng-template pTemplate="rowexpansion" let-worker>
<tr [routerLink]="[worker.name, worker.sessionId]"> <tr [routerLink]="[worker.name, worker.sessionId]">
<td></td> <td></td>
<td>{{worker.sessionId}}</td> <td>{{worker.sessionId}}</td>
<td>{{worker.hashRate | hashSuffix}}</td> <td>{{worker.hashRate | hashSuffix}}</td>
<td>{{worker.bestDifficulty | numberSuffix}}</td> <td>{{worker.bestDifficulty | numberSuffix}}</td>
<td>{{worker.startTime | dateAgo}}</td> <td>{{worker.startTime | dateAgo}}</td>
<td>{{worker.lastSeen | dateAgo}}</td> <td>{{worker.lastSeen | dateAgo}}</td>
</tr> </tr>
</ng-template> </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>
<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> <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> </div>
</ng-container> </ng-container>

4
src/app/components/dashboard/dashboard.component.ts
View File

@ -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.address = this.route.snapshot.params['address'];
this.clientInfo$ = this.clientService.getClientInfo(this.address).pipe( this.clientInfo$ = this.clientService.getClientInfo(this.address).pipe(

78
src/app/components/splash/splash.component.html
View File

@ -58,43 +58,73 @@
<div class="col-12"> <div class="col-12">
<div *ngIf="chartData$ | async as chartData"> <div>
<div class="card chart"> <div class="card chart">
<div class="text-center mb-2">Uptime: {{uptime$ | async | dateAgo}}</div> <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>
</div> </div>
<div class="col-12" *ngIf="userAgents$ | async as userAgents"> <div class="col-12">
<div class="card"> <div class="card">
<h4 style="text-align: center;">Online Devices</h4> <h4 style="text-align: center;">Online Devices</h4>
<p-table [value]="userAgents"> <ng-container *ngIf="userAgents$ | async as userAgents">
<ng-template pTemplate="header"> <p-table [value]="userAgents">
<tr> <ng-template pTemplate="header">
<th>Device</th> <tr>
<th>Currently Working</th> <th>Device</th>
<th>Total Hash Rate</th> <th>Currently Working</th>
<th>Best Difficulty <i class="pi pi-question-circle ml-2" <th>Total Hash Rate</th>
pTooltip="If you find a solution with a difficulty higher than the network difficulty, you've found a block."></i> <th>Best Difficulty <i class="pi pi-question-circle ml-2"
</th> pTooltip="If you find a solution with a difficulty higher than the network difficulty, you've found a block."></i>
</tr> </th>
</ng-template> </tr>
<ng-template pTemplate="body" let-userAgent> </ng-template>
<tr> <ng-template pTemplate="body" let-userAgent>
<td>{{ userAgent.userAgent | userAgent }}</td> <tr></tr>
<td>{{ userAgent.count }}</td> <tr>
<td>{{ userAgent.totalHashRate | hashSuffix }}</td> <td>{{ userAgent.userAgent | userAgent }}</td>
<td>{{ userAgent.bestDifficulty | numberSuffix}}</td> <td>{{ userAgent.count }}</td>
</tr> <td>{{ userAgent.totalHashRate | hashSuffix }}</td>
</ng-template> <td>{{ userAgent.bestDifficulty | numberSuffix}}</td>
</p-table> </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>
</div> </div>

4
src/prime-ng.module.ts
View File

@ -3,6 +3,7 @@ import { ConfirmationService, MessageService } from 'primeng/api';
import { ButtonModule } from 'primeng/button'; import { ButtonModule } from 'primeng/button';
import { ChartModule } from 'primeng/chart'; import { ChartModule } from 'primeng/chart';
import { InputSwitchModule } from 'primeng/inputswitch'; import { InputSwitchModule } from 'primeng/inputswitch';
import { SkeletonModule } from 'primeng/skeleton';
import { TableModule } from 'primeng/table'; import { TableModule } from 'primeng/table';
import { TooltipModule } from 'primeng/tooltip'; import { TooltipModule } from 'primeng/tooltip';
@ -16,7 +17,8 @@ const primeNgModules = [
ChartModule, ChartModule,
InputSwitchModule, InputSwitchModule,
ButtonModule, ButtonModule,
TooltipModule TooltipModule,
SkeletonModule
// DropdownModule, // DropdownModule,
// ToastModule, // ToastModule,
// CheckboxModule, // CheckboxModule,