Skip to content

Commit 48ba3e0

Browse files
WantClueWantClue
committed
clean up pool page to tab view
1 parent 33dff51 commit 48ba3e0

File tree

3 files changed

+135
-72
lines changed

3 files changed

+135
-72
lines changed

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

Lines changed: 79 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -3,80 +3,87 @@
33
<div class="card">
44
<h5>Pool Configuration</h5>
55
<form [formGroup]="form" *ngIf="form != null">
6-
<div class="field grid p-fluid">
7-
<label htmlFor="stratumURL" class="col-12 mb-2 md:col-2 md:mb-0">Stratum Host:</label>
8-
<div class="col-12 md:col-10">
9-
<input pInputText id="stratumURL" type="text" formControlName="stratumURL" />
10-
<div>
11-
<small>Do not include 'stratum+tcp://' or port.</small>
12-
</div>
13-
</div>
14-
</div>
15-
<div class="field grid p-fluid">
16-
<label htmlFor="stratumPort" class="col-12 mb-2 md:col-2 md:mb-0">Stratum Port:</label>
17-
<div class="col-12 md:col-10">
18-
<input pInputText id="stratumPort" formControlName="stratumPort" type="number" />
19-
</div>
20-
</div>
21-
<div class="field grid p-fluid">
22-
<label htmlFor="stratumUser" class="col-12 mb-2 md:col-2 md:mb-0">Stratum User:</label>
23-
<div class="col-12 md:col-10">
24-
<input pInputText id="stratumUser" formControlName="stratumUser" type="text" />
25-
</div>
26-
</div>
27-
<div class="field grid p-fluid">
28-
<label htmlFor="stratumPassword" class="col-12 mb-2 md:col-2 md:mb-0">Stratum Password:</label>
29-
<div class="col-12 md:col-10 p-input-icon-right">
30-
<i *ngIf="form.get('stratumPassword')?.dirty" class="pi"
31-
[ngClass]="{'pi-eye': !showStratumPassword, 'pi-eye-slash': showStratumPassword}"
32-
(click)="toggleStratumPasswordVisibility()" style="cursor: pointer;"></i>
33-
<input pInputText id="stratumPassword" formControlName="stratumPassword"
34-
[type]="showStratumPassword ? 'text' : 'password'"
35-
placeholder="Enter stratum password" />
36-
</div>
37-
</div>
38-
<div class="field grid p-fluid">
39-
<label htmlFor="fallbackStratumURL" class="col-12 mb-2 md:col-2 md:mb-0">Fallback Stratum Host:</label>
40-
<div class="col-12 md:col-10">
41-
<input pInputText id="fallbackStratumURL" type="text" formControlName="fallbackStratumURL" />
42-
<div>
43-
<small>Do not include 'stratum+tcp://' or port.</small>
44-
</div>
45-
</div>
46-
</div>
47-
<div class="field grid p-fluid">
48-
<label htmlFor="fallbackStratumPort" class="col-12 mb-2 md:col-2 md:mb-0">Fallback Stratum Port:</label>
49-
<div class="col-12 md:col-10">
50-
<input pInputText id="fallbackStratumPort" formControlName="fallbackStratumPort" type="number" />
51-
</div>
52-
</div>
53-
<div class="field grid p-fluid">
54-
<label htmlFor="fallbackStratumUser" class="col-12 mb-2 md:col-2 md:mb-0">Fallback Stratum User:</label>
55-
<div class="col-12 md:col-10">
56-
<input pInputText id="fallbackStratumUser" formControlName="fallbackStratumUser" type="text" />
57-
</div>
58-
</div>
59-
<div class="field grid p-fluid">
60-
<label htmlFor="fallbackStratumPassword" class="col-12 mb-2 md:col-2 md:mb-0">Fallback Stratum Password:</label>
61-
<div class="col-12 md:col-10 p-input-icon-right">
62-
<i *ngIf="form.get('fallbackStratumPassword')?.dirty" class="pi"
63-
[ngClass]="{'pi-eye': !showFallbackStratumPassword, 'pi-eye-slash': showFallbackStratumPassword}"
64-
(click)="toggleFallbackStratumPasswordVisibility()" style="cursor: pointer;"></i>
65-
<input pInputText id="fallbackStratumPassword" formControlName="fallbackStratumPassword"
66-
[type]="showFallbackStratumPassword ? 'text' : 'password'"
67-
placeholder="Enter fallback stratum password" />
68-
</div>
69-
</div>
6+
<p-tabView>
7+
<p-tabPanel header="Main Pool" leftIcon="pi pi-server">
8+
<div class="field grid p-fluid">
9+
<label htmlFor="stratumURL" class="col-12 mb-2 md:col-2 md:mb-0">Stratum Host:</label>
10+
<div class="col-12 md:col-10">
11+
<input pInputText id="stratumURL" type="text" formControlName="stratumURL" />
12+
<div>
13+
<small>Do not include 'stratum+tcp://' or port.</small>
14+
</div>
15+
</div>
16+
</div>
17+
<div class="field grid p-fluid">
18+
<label htmlFor="stratumPort" class="col-12 mb-2 md:col-2 md:mb-0">Stratum Port:</label>
19+
<div class="col-12 md:col-10">
20+
<input pInputText id="stratumPort" formControlName="stratumPort" type="number" />
21+
</div>
22+
</div>
23+
<div class="field grid p-fluid">
24+
<label htmlFor="stratumUser" class="col-12 mb-2 md:col-2 md:mb-0">Stratum User:</label>
25+
<div class="col-12 md:col-10">
26+
<input pInputText id="stratumUser" formControlName="stratumUser" type="text" />
27+
</div>
28+
</div>
29+
<div class="field grid p-fluid">
30+
<label htmlFor="stratumPassword" class="col-12 mb-2 md:col-2 md:mb-0">Stratum Password:</label>
31+
<div class="col-12 md:col-10 p-input-icon-right">
32+
<i *ngIf="form.get('stratumPassword')?.dirty" class="pi"
33+
[ngClass]="{'pi-eye': !showStratumPassword, 'pi-eye-slash': showStratumPassword}"
34+
(click)="toggleStratumPasswordVisibility()" style="cursor: pointer;"></i>
35+
<input pInputText id="stratumPassword" formControlName="stratumPassword"
36+
[type]="showStratumPassword ? 'text' : 'password'"
37+
placeholder="Enter stratum password" />
38+
</div>
39+
</div>
40+
</p-tabPanel>
7041

71-
<div class="mt-2">
72-
<button pButton [disabled]="!form.dirty || form.invalid" (click)="updateSystem()"
73-
class="btn btn-primary mr-2">Save</button>
74-
<b style="line-height: 34px;">You must restart this device after saving for changes to take effect.</b>
75-
</div>
42+
<p-tabPanel header="Fallback Pool" leftIcon="pi pi-shield">
43+
<div class="field grid p-fluid">
44+
<label htmlFor="fallbackStratumURL" class="col-12 mb-2 md:col-2 md:mb-0">Stratum Host:</label>
45+
<div class="col-12 md:col-10">
46+
<input pInputText id="fallbackStratumURL" type="text" formControlName="fallbackStratumURL" />
47+
<div>
48+
<small>Do not include 'stratum+tcp://' or port.</small>
49+
</div>
50+
</div>
51+
</div>
52+
<div class="field grid p-fluid">
53+
<label htmlFor="fallbackStratumPort" class="col-12 mb-2 md:col-2 md:mb-0">Stratum Port:</label>
54+
<div class="col-12 md:col-10">
55+
<input pInputText id="fallbackStratumPort" formControlName="fallbackStratumPort" type="number" />
56+
</div>
57+
</div>
58+
<div class="field grid p-fluid">
59+
<label htmlFor="fallbackStratumUser" class="col-12 mb-2 md:col-2 md:mb-0">Stratum User:</label>
60+
<div class="col-12 md:col-10">
61+
<input pInputText id="fallbackStratumUser" formControlName="fallbackStratumUser" type="text" />
62+
</div>
63+
</div>
64+
<div class="field grid p-fluid">
65+
<label htmlFor="fallbackStratumPassword" class="col-12 mb-2 md:col-2 md:mb-0">Stratum Password:</label>
66+
<div class="col-12 md:col-10 p-input-icon-right">
67+
<i *ngIf="form.get('fallbackStratumPassword')?.dirty" class="pi"
68+
[ngClass]="{'pi-eye': !showFallbackStratumPassword, 'pi-eye-slash': showFallbackStratumPassword}"
69+
(click)="toggleFallbackStratumPasswordVisibility()" style="cursor: pointer;"></i>
70+
<input pInputText id="fallbackStratumPassword" formControlName="fallbackStratumPassword"
71+
[type]="showFallbackStratumPassword ? 'text' : 'password'"
72+
placeholder="Enter fallback stratum password" />
73+
</div>
74+
</div>
75+
</p-tabPanel>
76+
</p-tabView>
7677

77-
<div class="mt-2">
78-
<button pButton [disabled]="!savedChanges" (click)="restart()">Restart</button>
79-
</div>
78+
<div class="mt-2">
79+
<button pButton [disabled]="!form.dirty || form.invalid" (click)="updateSystem()"
80+
class="btn btn-primary mr-2">Save</button>
81+
<b style="line-height: 34px;">You must restart this device after saving for changes to take effect.</b>
82+
</div>
83+
84+
<div class="mt-2">
85+
<button pButton [disabled]="!savedChanges" (click)="restart()">Restart</button>
86+
</div>
8087
</form>
8188
</div>
8289
</div>

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

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,60 @@
7979
}
8080
}
8181

82+
// TabView Styling
83+
::ng-deep .p-tabview {
84+
.p-tabview-nav-container {
85+
margin-bottom: 1.5rem;
86+
}
87+
88+
.p-tabview-nav {
89+
background: transparent;
90+
border: none;
91+
border-bottom: 2px solid var(--card-border);
92+
gap: 0.5rem;
93+
94+
li {
95+
.p-tabview-nav-link {
96+
background: transparent;
97+
border: none;
98+
border-bottom: 2px solid transparent;
99+
color: var(--text-secondary);
100+
font-weight: 500;
101+
padding: 0.75rem 1.25rem;
102+
margin-bottom: -2px;
103+
transition: all 0.3s ease;
104+
gap: 0.5rem;
105+
106+
.p-tabview-left-icon {
107+
margin-right: 0.5rem;
108+
}
109+
110+
&:hover {
111+
color: var(--text-primary);
112+
background: rgba(99, 102, 241, 0.05);
113+
border-bottom-color: rgba(99, 102, 241, 0.3);
114+
}
115+
116+
&:focus {
117+
box-shadow: none;
118+
}
119+
}
120+
121+
&.p-highlight .p-tabview-nav-link {
122+
background: transparent;
123+
color: #6366f1;
124+
border-bottom-color: #6366f1;
125+
}
126+
}
127+
}
128+
129+
.p-tabview-panels {
130+
background: transparent;
131+
padding: 1.5rem 0 0;
132+
border: none;
133+
}
134+
}
135+
82136
// Form Elements
83137
.field {
84138
margin-bottom: 1.5rem;

‎main/http_server/axe-os/src/app/prime-ng.module.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { InputGroupAddonModule } from 'primeng/inputgroupaddon';
99
import { InputTextModule } from 'primeng/inputtext';
1010
import { SidebarModule } from 'primeng/sidebar';
1111
import { SliderModule } from 'primeng/slider';
12+
import { TabViewModule } from 'primeng/tabview';
1213

1314
const primeNgModules = [
1415
SidebarModule,
@@ -21,6 +22,7 @@ const primeNgModules = [
2122
ChartModule,
2223
InputGroupModule,
2324
InputGroupAddonModule,
25+
TabViewModule,
2426
];
2527

2628
@NgModule({

0 commit comments

Comments
 (0)
⚡