Skip to content

Commit

Permalink
web-ui: Updated the nodes page ui
Browse files Browse the repository at this point in the history
  • Loading branch information
vhurryharry committed Sep 3, 2020
1 parent 28c8c1c commit f6ec40b
Show file tree
Hide file tree
Showing 32 changed files with 756 additions and 100 deletions.
2 changes: 1 addition & 1 deletion web-ui/src/app/app.component.html
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<app-navbar></app-navbar>
<div class="tab-container">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1 col-12">
<div class="col-lg-10 col-lg-offset-1 col-md-12">
<router-outlet></router-outlet>
</div>
</div>
Expand Down
17 changes: 11 additions & 6 deletions web-ui/src/app/app.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ export class AppComponent implements OnInit {
'TPoS': 'Trustless Proof of Stake',

// messages
'message.unavailable': 'Unavailable',
'message.unavailable': '-',
'message.serverUnavailable': 'The server unavailable, please try again in a minute',
'message.unknownErrors': 'Unknown error, please try again in a minute',
'message.transactionNotFound': 'Transaction not found',
Expand Down Expand Up @@ -126,10 +126,12 @@ export class AppComponent implements OnInit {
'label.masternodeROI': 'Masternode ROI',
'label.stakingROI': 'Staking ROI',
'label.coinsInMasternodes': 'Coins in Masternodes',
'label.tposNodes': 'TPoS nodes',
'label.coinsStaking': 'Coins staking',
'label.tposNodes': 'TPoS Nodes',
'label.coinsStaking': 'Coins Staking',
'label.coinsTrustlesslyStaking': 'Coins Trustlessly Staking',

'label.address': 'Address',
'label.ip': 'IP',
'label.balance': 'Balance',
'label.available': 'Available',
'label.received': 'Received',
Expand Down Expand Up @@ -181,12 +183,15 @@ export class AppComponent implements OnInit {
'label.protocol': 'Protocol',
'label.status': 'Status',
'label.lastSeen': 'Last seen',
'label.payee': 'Payee',
'label.active': 'Active',
'label.payee': 'Payee Address',
'label.active': 'Active Since',
'label.details': 'Details',
'label.raw': 'Raw',
'label.date': 'Date',
'label.more': 'More'
'label.more': 'More',
'label.enabled': 'Enabled',
'label.distributedAcross': 'Distributed Across',
'label.protocols': 'Protocols'
};
}
}
2 changes: 2 additions & 0 deletions web-ui/src/app/app.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ import { AppComponent } from './app.component';
import { TrezorConnectComponent } from './components/trezor-connect/trezor-connect.component';
import { SharedModule } from './components/shared/shared.module';
import { PipesModule } from './pipes/pipes.module';
import { TposnodesService } from './services/tposnodes.service';

@NgModule({
declarations: [
Expand All @@ -51,6 +52,7 @@ import { PipesModule } from './pipes/pipes.module';
ErrorService,
LanguageService,
MasternodesService,
TposnodesService,
NavigatorService,
NotificationService,
TickerService,
Expand Down
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<div class="tab-content row">
<div class="page-title col-sm-3 col-12">
<div class="page-title col-sm-3 col-xs-12">
{{'label.blocks' | translate}}
</div>
<div class="col-sm-9 col-12 text-label">
<div class="col-sm-9 col-xs-12 text-label">
<div class="blocks-info">
<div>
{{'label.height' | translate | uppercase}}: <span class="text-highlight">1551778</span>
Expand Down
19 changes: 0 additions & 19 deletions web-ui/src/app/components/home/home/home.component.css
Original file line number Diff line number Diff line change
Expand Up @@ -2,25 +2,6 @@
padding: 15px;
}

@media (max-width:991px) {

.no-left,
.no-right {
padding-left: 0;
padding-right: 0;
}
}

@media (min-width:992px) {
.no-left {
padding-left: 0;
}

.no-right {
padding-right: 0;
}
}

.show-more {
float: right;
padding: 9px 18px 7px;
Expand Down
16 changes: 8 additions & 8 deletions web-ui/src/app/components/home/home/home.component.html
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
<div class="row">
<app-ticker class="col-12"></app-ticker>
<app-ticker class="col-xs-12"></app-ticker>

<div class="home-table-container col-12 col-md-6 no-left">
<div class="home-table-container col-xs-12 col-md-6 no-left">
<div class="tab-content">
<div class="page-title col-sm-3 col-12">
<div class="page-title col-sm-3 col-xs-12">
{{'label.blocks' | translate}}
</div>
<div class="col-sm-9 col-12">
<div class="col-sm-9 col-xs-12">
<a class="show-more text-primary" routerLink="/blocks">
{{'label.showMore' | translate | uppercase}}
</a>
Expand All @@ -15,17 +15,17 @@
</div>
</div>

<div class="home-table-container col-12 col-md-6 no-right">
<div class="home-table-container col-xs-12 col-md-6 no-right">
<div class="tab-content">
<div class="page-title col-sm-3 col-12">
<div class="page-title col-sm-3 col-xs-12">
{{'label.transactions' | translate}}
</div>
<div class="col-sm-9 col-12">
<div class="col-sm-9 col-xs-12">
<a class="show-more text-primary" routerLink="/transactions">
{{'label.showMore' | translate | uppercase}}
</a>
</div>
<app-transaction-table class="col-12" [hideBlockHash]="true"></app-transaction-table>
<app-transaction-table class="col-xs-12" [hideBlockHash]="true"></app-transaction-table>
</div>
</div>
</div>
23 changes: 3 additions & 20 deletions web-ui/src/app/components/home/ticker/ticker.component.css
Original file line number Diff line number Diff line change
Expand Up @@ -5,21 +5,8 @@
align-items: stretch;
justify-content: space-between;
flex-wrap: wrap;
}

.panel-body {
display: flex;
flex-direction: row;
align-items: stretch;
justify-content: space-between;
flex-wrap: wrap;
margin-left: 0;
margin-right: 0;
}

.panel-body>div {
padding-left: 0;
padding-right: 0;
margin-left: -30px;
margin-right: -30px;
}

span.help {
Expand All @@ -29,10 +16,6 @@ span.help {
float: right;
}

.panel {
background-color: transparent;
}

div.data {
font-size: 18px;
color: #FFFFFF;
Expand All @@ -43,7 +26,7 @@ div.data {

div.lbl-bottom {
font-size: 12px;
color: #8192DB;
color: #989DCC;
letter-spacing: 0.9px;
margin-bottom: 5px;
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@
</span>

<span *ngIf="ticker != null && ticker.masternodes != null">
{{ticker.masternodes}}
{{ticker.tposnodes}}
</span>
</div>
</div>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,36 +1,32 @@
<div class="tab-content row">
<div class="row visible-xs">
<h2 class="col-xs-12">{{'label.masternodes' | translate}}</h2>
</div>

<div class="masternodes-container">
<div class="table-responsive">
<table class="table table-condensed table-borderless table-striped table-hover">
<table class="table table-borderless table-striped table-hover">
<thead>
<tr>
<tr class="row">
<th class="col-xs-1">#</th>
<th class="col-xs-1">{{'label.address' | translate}}</th>
<th class="col-xs-1">{{'label.protocol' | translate}}</th>
<th class="col-xs-2">{{'label.ip' | translate | uppercase}}</th>
<th class="col-xs-2">{{'label.protocol' | translate | uppercase}}</th>
<!-- TODO: Display status when the WATCHDOG_EXPIRED bug is fixed.
<th class="col-xs-2 col-sm-2 col-md-1 col-lg-1">{{'label.status' | translate}}</th>
-->
<th class="col-xs-2 col-md-1">{{'label.active' | translate}}</th>
<th class="col-xs-2">{{'label.lastSeen' | translate}}</th>
<th class="col-xs-2 col-md-1">{{'label.payee' | translate}}</th>
<th class="col-xs-2">{{'label.active' | translate | uppercase}}</th>
<th class="col-xs-2">{{'label.lastSeen' | translate | uppercase}}</th>
<th class="col-xs-3 right-align">{{'label.payee' | translate | uppercase}}</th>
</tr>
</thead>

<tbody>
<tr *ngFor="let index = index; let item of asyncItems | async | paginate: { id: 'masternodes', itemsPerPage: pageSize, currentPage: currentPage, totalItems: total }">
<td>{{(currentPage - 1) * pageSize + index + 1}}</td>
<td>{{item.ip}}</td>
<td>{{item.protocol}}</td>
<td class="text-primary">{{(currentPage - 1) * pageSize + index + 1}}</td>
<td class="text-primary">{{item.ip}}</td>
<td class="text-primary">{{item.protocol}}</td>
<!-- TODO: Display status when the WATCHDOG_EXPIRED bug is fixed.
<td>{{item.status}}</td>
-->
<td>{{Math.max(item.activeSeconds, 0) | amDuration:'seconds'}}</td>
<td>{{item.lastSeen * 1000 | amTimeAgo}}</td>
<td>
<a routerLink="/addresses/{{item.payee}}">{{item.payee}}</a>
<td class="text-primary">{{Math.max(item.activeSeconds, 0) | amDuration:'seconds'}}</td>
<td class="text-primary">{{amAgo(item.lastSeen)}}</td>
<td class="right-align">
<a class="text-highlight" routerLink="/addresses/{{item.payee}}">{{item.payee}}</a>
</td>
</tr>
</tbody>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ import { Masternode } from '../../../models/masternode';
import { MasternodesService } from '../../../services/masternodes.service';
import { ErrorService } from '../../../services/error.service';

import { amAgo } from '../../../utils';

@Component({
selector: 'app-masternodes',
templateUrl: './masternodes.component.html',
Expand All @@ -24,6 +26,8 @@ export class MasternodesComponent implements OnInit {
pageSize = 10;
asyncItems: Observable<Masternode[]>;

amAgo = amAgo;

constructor(
private masternodesService: MasternodesService,
private errorService: ErrorService) { }
Expand Down
20 changes: 20 additions & 0 deletions web-ui/src/app/components/nodes/node-list/node-list.component.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
.block-table-wrapper {
width: 100%;
padding: 0;
margin-top: 15px;
}

.blocks-info {
float: right;
background-color: #1C202E;
border-radius: 20px;
display: flex;
flex-direction: row;
align-items: center;
padding: 2px 6px;
font-size: 12px;
}

.blocks-info>div {
margin: 10px;
}
21 changes: 21 additions & 0 deletions web-ui/src/app/components/nodes/node-list/node-list.component.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
<div class="row">
<app-node-ticker class="col-xs-12"></app-node-ticker>

<div class="node-table-container col-xs-12 col-md-6 no-left">
<div class="tab-content">
<div class="page-title col-xs-12">
{{'label.masternodes' | translate}}
</div>
<app-masternodes></app-masternodes>
</div>
</div>

<div class="node-table-container col-xs-12 col-md-6 no-right">
<div class="tab-content">
<div class="page-title col-xs-12">
{{'label.tposNodes' | translate}}
</div>
<app-tposnodes></app-tposnodes>
</div>
</div>
</div>
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { TranslateModule } from '@ngx-translate/core';

import { NodeListComponent } from './node-list.component';

import { NO_ERRORS_SCHEMA, } from '@angular/core';

describe('NodeListComponent', () => {
let component: NodeListComponent;
let fixture: ComponentFixture<NodeListComponent>;

beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [
NodeListComponent
],
imports: [
TranslateModule.forRoot()
],
schemas: [NO_ERRORS_SCHEMA],
providers: [
]
})
.compileComponents();
}));

beforeEach(() => {
fixture = TestBed.createComponent(NodeListComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});

it('should create', () => {
expect(component).toBeTruthy();
});
});
14 changes: 14 additions & 0 deletions web-ui/src/app/components/nodes/node-list/node-list.component.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import { Component, OnInit } from '@angular/core';

@Component({
selector: 'app-node-list',
templateUrl: './node-list.component.html',
styleUrls: ['./node-list.component.css']
})
export class NodeListComponent implements OnInit {

constructor() { }

ngOnInit() {
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
.ticker-container
{
display: flex;
flex-direction: row;
align-items: stretch;
justify-content: space-between;
flex-wrap: wrap;
margin-left: -30px;
margin-right: -30px;
}

div.data {
font-size: 18px;
color: #FFFFFF;
letter-spacing: 0;
margin-bottom: 10px;
font-weight: 300;
}

div.lbl-bottom {
font-size: 12px;
color: #989DCC;
letter-spacing: 0.9px;
margin-bottom: 5px;
}
Loading

0 comments on commit f6ec40b

Please sign in to comment.