Ordisrespector-pool-ui/src/app/components/splash/splash.component.html

146 lines
6.2 KiB
HTML

<div class="py-4 px-1 md:px4 lg:px-8 mx-0 lg:mx-8 main">
<div class="grid justify-content-center">
<div class="col-12">
<div class="card text-center">
<div class="col-12 text-center title">
<h1 class="text-900 font-normal">Ordisrespector Pool</h1>
</div>
<div class="mb-4">
<a class="ml-4 mr-4" href="https://twitter.com/leo_haf" target="_blank">
<i class="pi pi-twitter" style="font-size: 30pt; color: white;"></i>
</a>
</div>
<div>
<code>Ordisrespector Solo Bitcoin Mining Pool</code>
<br>
<br>
<div class="info mb-2 p-4 border-dashed border-1 border-round">
<code>stratum+tcp://mining.orangepill.ovh:3333</code>
<br>
<code>username: &lt;your BTC address&gt;.&lt;worker name&gt;, password: x</code>
</div>
<span><b>NO FEES</b></span>
<br>
<span>No second best.</span>
</div>
</div>
</div>
<div class="col-12">
<div class="card">
<h4>Login</h4>
<div class="field text-center">
<input [formControl]="address" placeholder="Address (bc1...)" pInputText id="address" type="text"
class="p-inputtext p-component p-element">
<button [disabled]="address.invalid" class="ml-3 mt-3" pButton label="My Workers"
[routerLink]="['app',address.value]"></button>
</div>
</div>
</div>
<div class="col-12">
<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>
</ng-container>
<ng-template #loadingChart>
<p-skeleton width="100%" height="40vh"></p-skeleton>
</ng-template>
</div>
</div>
<div class="col-12">
<div class="card">
<h4 style="text-align: center;">Online Devices</h4>
<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><app-user-agent-link [userAgent]="userAgent.userAgent"></app-user-agent-link></td>
<td>{{ userAgent.count }}</td>
<td>{{ userAgent.totalHashRate | hashSuffix }}</td>
<td>{{ userAgent.bestDifficulty | numberSuffix}}</td>
</tr>
</ng-template>
</p-table>
<div class="text-right mt-2">
<i class="pi pi-star-fill"></i> = Open Source Software & Hardware
</div>
</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 class="col-12" *ngIf="blockData$ | async as blockData">
<div class="card">
<h4 style="text-align: center;"> Found Blocks</h4>
<p-table [value]="blockData">
<ng-template pTemplate="header">
<tr>
<th>Height</th>
<th>Address</th>
<th>Worker</th>
<th>Session</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-block>
<tr>
<td>{{ block.height }}</td>
<td>{{ block.minerAddress }}</td>
<td>{{ block.worker }}</td>
<td>{{ block.sessionId }}</td>
</tr>
</ng-template>
</p-table>
</div>
</div>
</div>
</div>