user agents

src/app/components/splash/splash.component.html

@@ -62,6 +62,28 @@
 
         </div>
 
+
+        <div class="col-12" *ngIf="userAgents$ | async as userAgents">
+            <div class="card">
+                <h4 style="text-align: center;">Devices</h4>
+                <p-table [value]="userAgents">
+                    <ng-template pTemplate="header">
+                        <tr>
+                            <th>Device</th>
+                            <th>Currently Working</th>
+                        </tr>
+                    </ng-template>
+                    <ng-template pTemplate="body" let-userAgent>
+                        <tr>
+                            <td>{{ userAgent.userAgent }}</td>
+                            <td>{{ userAgent.count }}</td>
+                        </tr>
+                    </ng-template>
+                </p-table>
+
+            </div>
+        </div>
+
         <div class="col-12" *ngIf="blockData$ | async as blockData">
             <div class="card">
                 <h4 style="text-align: center;"> Found Blocks</h4>

src/app/components/splash/splash.component.ts

@@ -17,6 +17,7 @@ export class SplashComponent {
 
   public chartData$: Observable<any>;
   public blockData$: Observable<any>;
+  public userAgents$: Observable<any>;
 
   public chartOptions: any;
 
@@ -24,6 +25,7 @@ export class SplashComponent {
 
     const info$ = this.appService.getInfo().pipe(shareReplay({ refCount: true, bufferSize: 1 }));
     this.blockData$ = info$.pipe(map(info => info.blockData));
+    this.userAgents$ = info$.pipe(map(info => info.userAgents));
     this.chartData$ = info$.pipe(
       map((info: any) => {
         return {