Skip to content

Commit b67b751

Browse files
committed
web-ui: Updated the nodes page ui
1 parent 53ef517 commit b67b751

32 files changed

Lines changed: 756 additions & 100 deletions

web-ui/src/app/app.component.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<app-navbar></app-navbar>
22
<div class="tab-container">
3-
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1 col-12">
3+
<div class="col-lg-10 col-lg-offset-1 col-md-12">
44
<router-outlet></router-outlet>
55
</div>
66
</div>

web-ui/src/app/app.component.ts

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ export class AppComponent implements OnInit {
7373
'TPoS': 'Trustless Proof of Stake',
7474

7575
// messages
76-
'message.unavailable': 'Unavailable',
76+
'message.unavailable': '-',
7777
'message.serverUnavailable': 'The server unavailable, please try again in a minute',
7878
'message.unknownErrors': 'Unknown error, please try again in a minute',
7979
'message.transactionNotFound': 'Transaction not found',
@@ -126,10 +126,12 @@ export class AppComponent implements OnInit {
126126
'label.masternodeROI': 'Masternode ROI',
127127
'label.stakingROI': 'Staking ROI',
128128
'label.coinsInMasternodes': 'Coins in Masternodes',
129-
'label.tposNodes': 'TPoS nodes',
130-
'label.coinsStaking': 'Coins staking',
129+
'label.tposNodes': 'TPoS Nodes',
130+
'label.coinsStaking': 'Coins Staking',
131+
'label.coinsTrustlesslyStaking': 'Coins Trustlessly Staking',
131132

132133
'label.address': 'Address',
134+
'label.ip': 'IP',
133135
'label.balance': 'Balance',
134136
'label.available': 'Available',
135137
'label.received': 'Received',
@@ -181,12 +183,15 @@ export class AppComponent implements OnInit {
181183
'label.protocol': 'Protocol',
182184
'label.status': 'Status',
183185
'label.lastSeen': 'Last seen',
184-
'label.payee': 'Payee',
185-
'label.active': 'Active',
186+
'label.payee': 'Payee Address',
187+
'label.active': 'Active Since',
186188
'label.details': 'Details',
187189
'label.raw': 'Raw',
188190
'label.date': 'Date',
189-
'label.more': 'More'
191+
'label.more': 'More',
192+
'label.enabled': 'Enabled',
193+
'label.distributedAcross': 'Distributed Across',
194+
'label.protocols': 'Protocols'
190195
};
191196
}
192197
}

web-ui/src/app/app.module.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ import { AppComponent } from './app.component';
2626
import { TrezorConnectComponent } from './components/trezor-connect/trezor-connect.component';
2727
import { SharedModule } from './components/shared/shared.module';
2828
import { PipesModule } from './pipes/pipes.module';
29+
import { TposnodesService } from './services/tposnodes.service';
2930

3031
@NgModule({
3132
declarations: [
@@ -51,6 +52,7 @@ import { PipesModule } from './pipes/pipes.module';
5152
ErrorService,
5253
LanguageService,
5354
MasternodesService,
55+
TposnodesService,
5456
NavigatorService,
5557
NotificationService,
5658
TickerService,

web-ui/src/app/components/blocks/block-list/block-list.component.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<div class="tab-content row">
2-
<div class="page-title col-sm-3 col-12">
2+
<div class="page-title col-sm-3 col-xs-12">
33
{{'label.blocks' | translate}}
44
</div>
5-
<div class="col-sm-9 col-12 text-label">
5+
<div class="col-sm-9 col-xs-12 text-label">
66
<div class="blocks-info">
77
<div>
88
{{'label.height' | translate | uppercase}}: <span class="text-highlight">1551778</span>

web-ui/src/app/components/home/home/home.component.css

Lines changed: 0 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -2,25 +2,6 @@
22
padding: 15px;
33
}
44

5-
@media (max-width:991px) {
6-
7-
.no-left,
8-
.no-right {
9-
padding-left: 0;
10-
padding-right: 0;
11-
}
12-
}
13-
14-
@media (min-width:992px) {
15-
.no-left {
16-
padding-left: 0;
17-
}
18-
19-
.no-right {
20-
padding-right: 0;
21-
}
22-
}
23-
245
.show-more {
256
float: right;
267
padding: 9px 18px 7px;
Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
<div class="row">
2-
<app-ticker class="col-12"></app-ticker>
2+
<app-ticker class="col-xs-12"></app-ticker>
33

4-
<div class="home-table-container col-12 col-md-6 no-left">
4+
<div class="home-table-container col-xs-12 col-md-6 no-left">
55
<div class="tab-content">
6-
<div class="page-title col-sm-3 col-12">
6+
<div class="page-title col-sm-3 col-xs-12">
77
{{'label.blocks' | translate}}
88
</div>
9-
<div class="col-sm-9 col-12">
9+
<div class="col-sm-9 col-xs-12">
1010
<a class="show-more text-primary" routerLink="/blocks">
1111
{{'label.showMore' | translate | uppercase}}
1212
</a>
@@ -15,17 +15,17 @@
1515
</div>
1616
</div>
1717

18-
<div class="home-table-container col-12 col-md-6 no-right">
18+
<div class="home-table-container col-xs-12 col-md-6 no-right">
1919
<div class="tab-content">
20-
<div class="page-title col-sm-3 col-12">
20+
<div class="page-title col-sm-3 col-xs-12">
2121
{{'label.transactions' | translate}}
2222
</div>
23-
<div class="col-sm-9 col-12">
23+
<div class="col-sm-9 col-xs-12">
2424
<a class="show-more text-primary" routerLink="/transactions">
2525
{{'label.showMore' | translate | uppercase}}
2626
</a>
2727
</div>
28-
<app-transaction-table class="col-12" [hideBlockHash]="true"></app-transaction-table>
28+
<app-transaction-table class="col-xs-12" [hideBlockHash]="true"></app-transaction-table>
2929
</div>
3030
</div>
3131
</div>

web-ui/src/app/components/home/ticker/ticker.component.css

Lines changed: 3 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -5,21 +5,8 @@
55
align-items: stretch;
66
justify-content: space-between;
77
flex-wrap: wrap;
8-
}
9-
10-
.panel-body {
11-
display: flex;
12-
flex-direction: row;
13-
align-items: stretch;
14-
justify-content: space-between;
15-
flex-wrap: wrap;
16-
margin-left: 0;
17-
margin-right: 0;
18-
}
19-
20-
.panel-body>div {
21-
padding-left: 0;
22-
padding-right: 0;
8+
margin-left: -30px;
9+
margin-right: -30px;
2310
}
2411

2512
span.help {
@@ -29,10 +16,6 @@ span.help {
2916
float: right;
3017
}
3118

32-
.panel {
33-
background-color: transparent;
34-
}
35-
3619
div.data {
3720
font-size: 18px;
3821
color: #FFFFFF;
@@ -43,7 +26,7 @@ div.data {
4326

4427
div.lbl-bottom {
4528
font-size: 12px;
46-
color: #8192DB;
29+
color: #989DCC;
4730
letter-spacing: 0.9px;
4831
margin-bottom: 5px;
4932
}

web-ui/src/app/components/home/ticker/ticker.component.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@
9595
</span>
9696

9797
<span *ngIf="ticker != null && ticker.masternodes != null">
98-
{{ticker.masternodes}}
98+
{{ticker.tposnodes}}
9999
</span>
100100
</div>
101101
</div>

web-ui/src/app/components/nodes/masternodes/masternodes.component.html

Lines changed: 15 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,32 @@
1-
<div class="tab-content row">
2-
<div class="row visible-xs">
3-
<h2 class="col-xs-12">{{'label.masternodes' | translate}}</h2>
4-
</div>
5-
1+
<div class="masternodes-container">
62
<div class="table-responsive">
7-
<table class="table table-condensed table-borderless table-striped table-hover">
3+
<table class="table table-borderless table-striped table-hover">
84
<thead>
9-
<tr>
5+
<tr class="row">
106
<th class="col-xs-1">#</th>
11-
<th class="col-xs-1">{{'label.address' | translate}}</th>
12-
<th class="col-xs-1">{{'label.protocol' | translate}}</th>
7+
<th class="col-xs-2">{{'label.ip' | translate | uppercase}}</th>
8+
<th class="col-xs-2">{{'label.protocol' | translate | uppercase}}</th>
139
<!-- TODO: Display status when the WATCHDOG_EXPIRED bug is fixed.
1410
<th class="col-xs-2 col-sm-2 col-md-1 col-lg-1">{{'label.status' | translate}}</th>
1511
-->
16-
<th class="col-xs-2 col-md-1">{{'label.active' | translate}}</th>
17-
<th class="col-xs-2">{{'label.lastSeen' | translate}}</th>
18-
<th class="col-xs-2 col-md-1">{{'label.payee' | translate}}</th>
12+
<th class="col-xs-2">{{'label.active' | translate | uppercase}}</th>
13+
<th class="col-xs-2">{{'label.lastSeen' | translate | uppercase}}</th>
14+
<th class="col-xs-3 right-align">{{'label.payee' | translate | uppercase}}</th>
1915
</tr>
2016
</thead>
2117

2218
<tbody>
2319
<tr *ngFor="let index = index; let item of asyncItems | async | paginate: { id: 'masternodes', itemsPerPage: pageSize, currentPage: currentPage, totalItems: total }">
24-
<td>{{(currentPage - 1) * pageSize + index + 1}}</td>
25-
<td>{{item.ip}}</td>
26-
<td>{{item.protocol}}</td>
20+
<td class="text-primary">{{(currentPage - 1) * pageSize + index + 1}}</td>
21+
<td class="text-primary">{{item.ip}}</td>
22+
<td class="text-primary">{{item.protocol}}</td>
2723
<!-- TODO: Display status when the WATCHDOG_EXPIRED bug is fixed.
2824
<td>{{item.status}}</td>
2925
-->
30-
<td>{{Math.max(item.activeSeconds, 0) | amDuration:'seconds'}}</td>
31-
<td>{{item.lastSeen * 1000 | amTimeAgo}}</td>
32-
<td>
33-
<a routerLink="/addresses/{{item.payee}}">{{item.payee}}</a>
26+
<td class="text-primary">{{Math.max(item.activeSeconds, 0) | amDuration:'seconds'}}</td>
27+
<td class="text-primary">{{amAgo(item.lastSeen)}}</td>
28+
<td class="right-align">
29+
<a class="text-highlight" routerLink="/addresses/{{item.payee}}">{{item.payee}}</a>
3430
</td>
3531
</tr>
3632
</tbody>

web-ui/src/app/components/nodes/masternodes/masternodes.component.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@ import { Masternode } from '../../../models/masternode';
99
import { MasternodesService } from '../../../services/masternodes.service';
1010
import { ErrorService } from '../../../services/error.service';
1111

12+
import { amAgo } from '../../../utils';
13+
1214
@Component({
1315
selector: 'app-masternodes',
1416
templateUrl: './masternodes.component.html',
@@ -24,6 +26,8 @@ export class MasternodesComponent implements OnInit {
2426
pageSize = 10;
2527
asyncItems: Observable<Masternode[]>;
2628

29+
amAgo = amAgo;
30+
2731
constructor(
2832
private masternodesService: MasternodesService,
2933
private errorService: ErrorService) { }

0 commit comments

Comments
 (0)