Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Better mobile styles for swarm #458

Merged
merged 6 commits into from
Nov 12, 2024
Merged

fix: Better mobile styles for swarm #458

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
77ed819
fix: Better mobile styles for swarm
mrv777 Nov 5, 2024
8c5fe50
Merge branch 'master' into swarm-mobile-1
mrv777 Nov 9, 2024
9731bd4
Merge branch 'master' into swarm-mobile-1
mrv777 Nov 9, 2024
0f4030b
chore: clean up console log
mrv777 Nov 9, 2024
13ad7c7
fix: Show total hashrate & color temps when high
mrv777 Nov 9, 2024
20eac23
fix: Disable btn while refreshing, better error handling
mrv777 Nov 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 0 additions & 2 deletions main/http_server/axe-os/src/app/components/home/home.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: [
Expand Down
24 changes: 17 additions & 7 deletions main/http_server/axe-os/src/app/components/swarm/swarm.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nit: 66 and above feels a bit too aggressive for me, maybe 68 instead?
image

<td>{{axe.bestDiff}}</td>
<td>{{axe.version}}</td>
<td><p-button icon="pi pi-pencil" pp-button (click)="edit(axe)"></p-button></td>
Expand Down
20 changes: 20 additions & 0 deletions main/http_server/axe-os/src/app/components/swarm/swarm.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
}
}
42 changes: 36 additions & 6 deletions main/http_server/axe-os/src/app/components/swarm/swarm.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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);
}
Expand Down Expand Up @@ -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;
Expand All @@ -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();
}
});
}
Expand All @@ -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 =>
Expand All @@ -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
Expand All @@ -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);
}

}
4 changes: 4 additions & 0 deletions main/http_server/axe-os/src/app/layout/styles/layout/_content.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
1 change: 0 additions & 1 deletion main/http_server/axe-os/src/app/layout/styles/layout/_responsive.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,6 @@
.layout-wrapper {
.layout-main-container {
margin-left: 0;
padding-left: 2rem;
}

.layout-sidebar {
Expand Down