diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index a65cca3..bf5f12c 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -3,6 +3,7 @@ import { RouterModule, Routes } from '@angular/router'; import { DashboardComponent } from './components/dashboard/dashboard.component'; import { SplashComponent } from './components/splash/splash.component'; +import { WorkerGroupComponent } from './components/worker-group/worker-group.component'; import { WorkerComponent } from './components/worker/worker.component'; import { AppLayoutComponent } from './layout/app.layout.component'; @@ -23,9 +24,19 @@ const routes: Routes = [ component: DashboardComponent, }, { - path: ':workerId', - component: WorkerComponent + path: ':workerName', + children: [ + { + path: '', + component: WorkerGroupComponent + }, + { + path: ':workerId', + component: WorkerComponent + } + ] } + ] } ] diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 91d1b8d..13578cd 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -13,6 +13,8 @@ import { SplashComponent } from './components/splash/splash.component'; import { WorkerComponent } from './components/worker/worker.component'; import { AppLayoutModule } from './layout/app.layout.module'; import { NumberSuffixPipe } from './pipes/number-suffix.pipe'; +import { DateAgoPipe } from './pipes/date-ago.pipe'; +import { WorkerGroupComponent } from './components/worker-group/worker-group.component'; @@ -22,7 +24,9 @@ import { NumberSuffixPipe } from './pipes/number-suffix.pipe'; SplashComponent, DashboardComponent, WorkerComponent, - NumberSuffixPipe + NumberSuffixPipe, + DateAgoPipe, + WorkerGroupComponent ], imports: [ CommonModule, diff --git a/src/app/components/dashboard/dashboard.component.html b/src/app/components/dashboard/dashboard.component.html index 9f1bf6f..1add0f9 100644 --- a/src/app/components/dashboard/dashboard.component.html +++ b/src/app/components/dashboard/dashboard.component.html @@ -2,23 +2,58 @@
- + + + Name - ID + Session ID Hash Rate - Best Luck + Best Difficulty + Uptime - - - {{worker.name}} - {{worker.id}} - {{worker.hashRate}} Gh/s + + + + + + + + {{worker.name}} + + + + {{getSessionCount(worker.name, clientInfo.workers)}} Sessions + + + {{getTotalHashRate(worker.name, clientInfo.workers)}} GH/s + + + {{getBestDifficulty(worker.name, clientInfo.workers) | numberSuffix}} + + + {{getTotalUptime(worker.name, clientInfo.workers) | dateAgo}} (cumulative) + + + + + + + + + {{worker.sessionId}} + {{worker.hashRate}} GH/s {{worker.bestDifficulty | numberSuffix}} + {{worker.startTime | dateAgo}} + + diff --git a/src/app/components/dashboard/dashboard.component.scss b/src/app/components/dashboard/dashboard.component.scss index e69de29..7d826a7 100644 --- a/src/app/components/dashboard/dashboard.component.scss +++ b/src/app/components/dashboard/dashboard.component.scss @@ -0,0 +1,3 @@ +.worker-name { + line-height: 42px; +} \ No newline at end of file diff --git a/src/app/components/dashboard/dashboard.component.ts b/src/app/components/dashboard/dashboard.component.ts index 69a1216..133dd12 100644 --- a/src/app/components/dashboard/dashboard.component.ts +++ b/src/app/components/dashboard/dashboard.component.ts @@ -20,4 +20,39 @@ export class DashboardComponent { } + + + public getSessionCount(name: string, workers: any[]) { + const workersByName = workers.filter(w => w.name == name); + return workersByName.length; + } + + public getTotalHashRate(name: string, workers: any[]) { + const workersByName = workers.filter(w => w.name == name); + const sum = workersByName.reduce((pre, cur, idx, arr) => { + return pre += cur.hashRate; + }, 0); + return Math.floor(sum); + } + + public getBestDifficulty(name: string, workers: any[]) { + const workersByName = workers.filter(w => w.name == name); + const best = workersByName.reduce((pre, cur, idx, arr) => { + if (cur.bestDifficulty > pre) { + return cur.bestDifficulty; + } + return pre; + }, 0); + + return best; + } + + public getTotalUptime(name: string, workers: any[]) { + const now = new Date().getTime(); + const workersByName = workers.filter(w => w.name == name); + const sum = workersByName.reduce((pre, cur, idx, arr) => { + return pre += now - new Date(cur.startTime).getTime(); + }, 0); + return new Date(now - sum); + } } diff --git a/src/app/components/worker-group/worker-group.component.html b/src/app/components/worker-group/worker-group.component.html new file mode 100644 index 0000000..74a0b40 --- /dev/null +++ b/src/app/components/worker-group/worker-group.component.html @@ -0,0 +1,75 @@ +
+ +
+
+
+
+ ID +
{{workerInfo.name}}
+
+
+ +
+
+ + {{workerInfo.sessionId}} +
+
+
+
+
+
+ Best Difficulty +
{{workerInfo.bestDifficulty | numberSuffix}} +
+
+
+ +
+
+ {{workerInfo.bestDifficulty | number}} +
+
+
+
+
+
+ Uptime +
{{workerInfo.startTime | dateAgo}}
+
+
+ +
+
+ + Since {{workerInfo.startTime | date : 'short'}} +
+
+ +
+ + +
+
+ +
+
+
\ No newline at end of file diff --git a/src/app/components/worker-group/worker-group.component.scss b/src/app/components/worker-group/worker-group.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/components/worker-group/worker-group.component.spec.ts b/src/app/components/worker-group/worker-group.component.spec.ts new file mode 100644 index 0000000..fa7ab55 --- /dev/null +++ b/src/app/components/worker-group/worker-group.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { WorkerGroupComponent } from './worker-group.component'; + +describe('WorkerGroupComponent', () => { + let component: WorkerGroupComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ WorkerGroupComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(WorkerGroupComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/worker-group/worker-group.component.ts b/src/app/components/worker-group/worker-group.component.ts new file mode 100644 index 0000000..7b3a2c9 --- /dev/null +++ b/src/app/components/worker-group/worker-group.component.ts @@ -0,0 +1,92 @@ +import { Component } from '@angular/core'; +import { ActivatedRoute } from '@angular/router'; +import { map, Observable, shareReplay } from 'rxjs'; + +import { WorkerService } from '../../services/worker.service'; + +@Component({ + selector: 'app-worker-group', + templateUrl: './worker-group.component.html', + styleUrls: ['./worker-group.component.scss'] +}) +export class WorkerGroupComponent { + + public workerInfo$: Observable; + + public chartData$: Observable; + + public chartOptions: any; + + constructor(private workerService: WorkerService, private route: ActivatedRoute) { + const documentStyle = getComputedStyle(document.documentElement); + const textColor = documentStyle.getPropertyValue('--text-color'); + const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary'); + const surfaceBorder = documentStyle.getPropertyValue('--surface-border'); + + this.workerInfo$ = this.workerService.getWorkerInfo(this.route.snapshot.params['address'], this.route.snapshot.params['workerName'], this.route.snapshot.params['workerId']).pipe( + shareReplay({ bufferSize: 1, refCount: true }) + ) + + this.chartData$ = this.workerInfo$.pipe( + map((workerInfo: any) => { + + return { + labels: workerInfo.chartData.map((d: any) => d.label), + datasets: [ + { + label: workerInfo.name, + data: workerInfo.chartData.map((d: any) => d.data), + fill: false, + backgroundColor: documentStyle.getPropertyValue('--bluegray-700'), + borderColor: documentStyle.getPropertyValue('--bluegray-700'), + tension: .4 + } + ] + } + }) + ); + + + + this.chartOptions = { + plugins: { + legend: { + labels: { + color: textColor + } + } + }, + scales: { + x: { + type: 'time', + time: { + unit: 'minute', // Set the unit to 'minute' + stepSize: 10, // Set the desired interval between labels in minutes + + }, + ticks: { + color: textColorSecondary + }, + grid: { + color: surfaceBorder, + drawBorder: false + } + }, + y: { + ticks: { + color: textColorSecondary, + callback: (value: number) => value + ' GH/s', + }, + grid: { + color: surfaceBorder, + drawBorder: false + } + } + } + }; + } + + + + +} diff --git a/src/app/components/worker/worker.component.html b/src/app/components/worker/worker.component.html index e8fc9fa..74a0b40 100644 --- a/src/app/components/worker/worker.component.html +++ b/src/app/components/worker/worker.component.html @@ -13,14 +13,14 @@
- {{workerInfo.id}} + {{workerInfo.sessionId}}
- Best Luck + Best Difficulty
{{workerInfo.bestDifficulty | numberSuffix}}
@@ -32,23 +32,23 @@ {{workerInfo.bestDifficulty | number}}
- + Since {{workerInfo.startTime | date : 'short'}}
- 520 - newly registered - -
+