Files
public-pool-ui/src/app/components/dashboard/dashboard.component.html
T
2023-07-23 00:15:42 -04:00

91 lines
3.3 KiB
HTML

<ng-container *ngIf="clientInfo$ | async as clientInfo">
<div class="grid">
<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">Best Difficulty</span>
<div class="text-900 font-medium text-xl">{{clientInfo.bestDifficulty | numberSuffix}}
</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">{{clientInfo.bestDifficulty | number}}</span>
</div>
</div>
</div>
<div class="card">
<p-table [rowHover]="true" groupRowsBy="name" dataKey="name" rowGroupMode="subheader"
[value]="clientInfo.workers" [tableStyle]="{ 'min-width': '50rem' }">
<ng-template pTemplate="header">
<tr>
<th>Name</th>
<th>Session ID</th>
<th>Hash Rate</th>
<th>Best Difficulty</th>
<th>Uptime</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>
<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>
{{getTotalUptime(worker.name, clientInfo.workers) | dateAgo}} (cumulative)
</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>
</tr>
</ng-template>
</p-table>
</div>
<div *ngIf="chartData$ | async as chartData">
<div class="card">
<p-chart [data]="chartData" [options]="chartOptions"></p-chart>
</div>
</div>
</ng-container>