swarm table and css

.vscode/settings.json

@@ -1,6 +1,6 @@
 {
     "idf.flashType": "UART",
-    "idf.portWin": "COM36",
+    "idf.portWin": "COM30",
     "idf.adapterTargetName": "esp32s3",
     "idf.openOcdConfigs": [
         "interface/ftdi/esp32_devkitj_v1.cfg",

main/http_server/axe-os/src/app/components/swarm/swarm.component.html

@@ -3,12 +3,29 @@
     <input formControlName="ip" type="text">
     <button style="margin-left: 15px;" class="btn btn-primary" (click)="add()">Add</button>
 </form>
-<div class="card">
-    <ng-container *ngIf="swarm$ | async as swarm">
-        <div *ngFor="let axeOs$ of swarm">
-            <div class="row" *ngIf="axeOs$ | async as axe">
-                {{axe.ip}}: {{axe.hashRate | number: '1.2-2'}}
-            </div>
-        </div>
-    </ng-container>
+<div>
+    <table cellspacing="0" cellpadding="0" *ngIf="swarm$ | async as swarm">
+        <tr>
+            <th>IP</th>
+            <th>Hash Rate</th>
+            <th>Uptime</th>
+            <th>Accepted</th>
+            <th>Power</th>
+            <th>Temp</th>
+            <th>Best Difficulty</th>
+            <th>Remove</th>
+        </tr>
+        <ng-container *ngFor="let axeOs$ of swarm">
+            <tr *ngIf="axeOs$ | async as axe">
+                <td>{{axe.ip}}</td>
+                <td>{{axe.hashRate | number: '1.2-2'}} <small>Gh/s</small></td>
+                <td>{{axe.uptimeSeconds | dateAgo}}</td>
+                <td>{{axe.sharesAccepted}}</td>
+                <td>{{axe.power | number: '1.2-2'}} <small>W</small> </td>
+                <td>{{axe.temp}} <small>C</small></td>
+                <td>{{axe.bestDiff}}</td>
+                <td><button class="btn btn-secondary" (click)="remove(axe)">X</button></td>
+            </tr>
+        </ng-container>
+    </table>
 </div>

main/http_server/axe-os/src/app/components/swarm/swarm.component.scss

@@ -2,8 +2,21 @@ form {
     margin-bottom: 20px;
 }
 
-.row {
-    height: 20px;
+table {
     width: 100%;
-    border: 1px solid white
+    margin-top: 40px;
+    margin-bottom: 40px;
+    border: 1px solid #304562;
+}
+
+th {
+    text-align: left;
+    background-color: #1f2d40;
+}
+
+
+th,
+td {
+    padding: 1rem 1rem;
+    border-bottom: 1px solid #304562;
 }

main/http_server/axe-os/src/app/components/swarm/swarm.component.ts

@@ -37,7 +37,7 @@ export class SwarmComponent {
               };
             }),
             catchError(error => {
-              return of(null);
+              return of({ ip, error: true });
             })
           );
         });
@@ -58,6 +58,7 @@ export class SwarmComponent {
     ).subscribe({
       next: () => {
         this.toastr.success('Success!', 'Saved.');
+        window.location.reload();
       },
       error: (err) => {
         this.toastr.error('Error.', `Could not save. ${err.message}`);
@@ -69,4 +70,23 @@ export class SwarmComponent {
 
   }
 
+  public remove(axe: any) {
+    this.systemService.getSwarmInfo().pipe(
+      switchMap((swarm: any) => {
+        return this.systemService.updateSwarm(swarm.filter((s: any) => s.ip != axe.ip))
+      })
+    ).subscribe({
+      next: () => {
+        this.toastr.success('Success!', 'Saved.');
+        window.location.reload();
+      },
+      error: (err) => {
+        this.toastr.error('Error.', `Could not save. ${err.message}`);
+      },
+      complete: () => {
+        this.form.reset();
+      }
+    });
+  }
+
 }