Merge pull request #458 from mrv777/swarm-mobile-1

fix: Better mobile styles for swarm
skot · Nov 12, 2024 · 93b2e30 · 93b2e30
2 parents 45170b2 + 20eac23
commit 93b2e30
Show file tree

Hide file tree

Showing 6 changed files with 77 additions and 16 deletions.
diff --git a/main/http_server/axe-os/src/app/components/home/home.component.ts b/main/http_server/axe-os/src/app/components/home/home.component.ts
@@ -40,8 +40,6 @@ export class HomeComponent {
     const surfaceBorder = documentStyle.getPropertyValue('--surface-border');
     const primaryColor = documentStyle.getPropertyValue('--primary-color');
 
-    console.log(primaryColor)
-
     this.chartData = {
       labels: [],
       datasets: [

diff --git a/main/http_server/axe-os/src/app/components/swarm/swarm.component.html b/main/http_server/axe-os/src/app/components/swarm/swarm.component.html
@@ -14,18 +14,28 @@
 
     </form>
 </div>
-<button style="margin-right: 1rem;" pButton (click)="scanNetwork()" [disabled]="scanning">{{scanning ? 'Scanning...' : 'Automatic Scan'}}</button>
-<button pButton  severity="secondary" (click)="refreshList()" [disabled]="scanning">Refresh List ({{refreshIntervalTime}})</button>
-<div>
-    <table cellspacing="0" cellpadding="0" >
+<div class="flex gap-3 justify-content-between">
+    <div class="flex gap-1 sm:gap-3 text-sm md:text-base">
+        <button pButton (click)="scanNetwork()" [disabled]="scanning">{{scanning ? 'Scanning...' : 'Automatic Scan'}}</button>
+        <button pButton severity="secondary" (click)="refreshList()" [disabled]="scanning || isRefreshing">
+            {{isRefreshing ? 'Refreshing...' : 'Refresh List (' + refreshIntervalTime + ')'}}
+        </button>
+    </div>
+    <div class="text-sm md:text-base">
+        Total Hash Rate: <span class="text-primary">{{totalHashRate * 1000000000 | hashSuffix}}</span>
+    </div>
+</div>
+
+<div class="table-container">
+    <table cellspacing="0" cellpadding="0" class="text-sm md:text-base">
         <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>Best Diff</th>
             <th>Version</th>
             <th>Edit</th>
             <th>Restart</th>
@@ -40,8 +50,8 @@
                 <td>{{axe.hashRate * 1000000000 | hashSuffix}}</td>
                 <td>{{axe.uptimeSeconds | dateAgo}}</td>
                 <td>{{axe.sharesAccepted | number: '1.0-0'}}</td>
-                <td>{{axe.power | number: '1.2-2'}} <small>W</small> </td>
-                <td>{{axe.temp}}°<small>C</small></td>
+                <td>{{axe.power | number: '1.1-1'}} <small>W</small> </td>
+                <td [ngClass]="{'text-orange-500': axe.temp > 65}">{{axe.temp | number: '1.0-1'}}°<small>C</small></td>
                 <td>{{axe.bestDiff}}</td>
                 <td>{{axe.version}}</td>
              <td><p-button icon="pi pi-pencil" pp-button (click)="edit(axe)"></p-button></td>

diff --git a/main/http_server/axe-os/src/app/components/swarm/swarm.component.scss b/main/http_server/axe-os/src/app/components/swarm/swarm.component.scss
@@ -52,4 +52,24 @@ a {
     right: 20px;
     top: 20px;
     cursor: pointer;
+}
+
+.table-container {
+    width: 100%;
+    overflow-x: auto;
+    margin: 1rem 0;
+
+    table {
+        min-width: 100%;
+        white-space: nowrap;
+
+        th, td {
+            padding: 0.75rem;
+            text-align: left;
+
+            @media (max-width: 1150px) {
+                padding: 0.5rem;
+            }
+        }
+    }
 }
diff --git a/main/http_server/axe-os/src/app/components/swarm/swarm.component.ts b/main/http_server/axe-os/src/app/components/swarm/swarm.component.ts
@@ -26,6 +26,10 @@ export class SwarmComponent implements OnInit, OnDestroy {
   public refreshIntervalRef!: number;
   public refreshIntervalTime = REFRESH_TIME_SECONDS;
 
+  public totalHashRate: number = 0;
+
+  public isRefreshing = false;
+
   constructor(
     private fb: FormBuilder,
     private systemService: SystemService,
@@ -48,12 +52,15 @@ export class SwarmComponent implements OnInit, OnDestroy {
       //this.swarm$ = this.scanNetwork('192.168.1.23', '255.255.255.0').pipe(take(1));
     } else {
       this.swarm = swarmData;
+      this.calculateTotalHashRate();
     }
 
     this.refreshIntervalRef = window.setInterval(() => {
-      this.refreshIntervalTime --;
-      if(this.refreshIntervalTime <= 0){
-        this.refreshList();
+      if (!this.isRefreshing) {
+        this.refreshIntervalTime--;
+        if (this.refreshIntervalTime <= 0) {
+          this.refreshList();
+        }
       }
     }, 1000);
   }
@@ -111,6 +118,7 @@ export class SwarmComponent implements OnInit, OnDestroy {
         const newItems = result.filter(item => !existingIps.has(item.IP));
         this.swarm = [...this.swarm, ...newItems].sort(this.sortByIp.bind(this));
         this.localStorageService.setObject(SWARM_DATA, this.swarm);
+        this.calculateTotalHashRate();
       },
       complete: () => {
         this.scanning = false;
@@ -132,6 +140,7 @@ export class SwarmComponent implements OnInit, OnDestroy {
         this.swarm.push({ IP: newIp, ...res });
         this.swarm = this.swarm.sort(this.sortByIp.bind(this));
         this.localStorageService.setObject(SWARM_DATA, this.swarm);
+        this.calculateTotalHashRate();
       }
     });
   }
@@ -157,11 +166,13 @@ export class SwarmComponent implements OnInit, OnDestroy {
   public remove(axeOs: any) {
     this.swarm = this.swarm.filter(axe => axe.IP != axeOs.IP);
     this.localStorageService.setObject(SWARM_DATA, this.swarm);
+    this.calculateTotalHashRate();
   }
 
   public refreshList() {
     this.refreshIntervalTime = REFRESH_TIME_SECONDS;
     const ips = this.swarm.map(axeOs => axeOs.IP);
+    this.isRefreshing = true;
 
     from(ips).pipe(
       mergeMap(ipAddr =>
@@ -174,8 +185,21 @@ export class SwarmComponent implements OnInit, OnDestroy {
           }),
           timeout(5000),
           catchError(error => {
-            this.toastr.error('Error', 'Failed to get info from ' + ipAddr + ' - ' + error);
-            return of(this.swarm.find(axeOs => axeOs.IP == ipAddr));
+            const errorMessage = error?.message || error?.statusText || error?.toString() || 'Unknown error';
+            this.toastr.error('Failed to get info from ' + ipAddr, errorMessage);
+            // Return existing device with zeroed stats instead of the previous state
+            const existingDevice = this.swarm.find(axeOs => axeOs.IP === ipAddr);
+            return of({
+              ...existingDevice,
+              hashRate: 0,
+              sharesAccepted: 0,
+              power: 0,
+              voltage: 0,
+              temp: 0,
+              bestDiff: 0,
+              version: 0,
+              uptimeSeconds: 0,
+            });
           })
         ),
         128 // Limit concurrency to avoid overload
@@ -185,15 +209,21 @@ export class SwarmComponent implements OnInit, OnDestroy {
       next: (result) => {
         this.swarm = result.sort(this.sortByIp.bind(this));
         this.localStorageService.setObject(SWARM_DATA, this.swarm);
+        this.calculateTotalHashRate();
+        this.isRefreshing = false;
       },
       complete: () => {
+        this.isRefreshing = false;
       }
     });
-
   }
 
   private sortByIp(a: any, b: any): number {
     return this.ipToInt(a.IP) - this.ipToInt(b.IP);
   }
 
+  private calculateTotalHashRate() {
+    this.totalHashRate = this.swarm.reduce((sum, axe) => sum + (axe.hashRate || 0), 0);
+  }
+
 }
diff --git a/main/http_server/axe-os/src/app/layout/styles/layout/_content.scss b/main/http_server/axe-os/src/app/layout/styles/layout/_content.scss
@@ -5,6 +5,10 @@
     justify-content: space-between;
     padding: 7rem 2rem 2rem 4rem;
     transition: margin-left $transitionDuration;
+
+    @media (max-width: 768px) {
+        padding: 7rem 1rem 1rem 1rem;
+    }
 }
 
 .layout-main {

diff --git a/main/http_server/axe-os/src/app/layout/styles/layout/_responsive.scss b/main/http_server/axe-os/src/app/layout/styles/layout/_responsive.scss
@@ -63,7 +63,6 @@
     .layout-wrapper {
         .layout-main-container {
             margin-left: 0;
-            padding-left: 2rem;
         }
 
         .layout-sidebar {