Skip to content
This repository has been archived by the owner on Jan 14, 2022. It is now read-only.

Commit

Permalink
Merge pull request #866 from LiskHQ/859-new-home-page
Browse files Browse the repository at this point in the history 
Home page redesign - Closes #859
  • Loading branch information
@MichalTuleja
MichalTuleja committed Dec 19, 2018
2 parents 5690405 + 8b4264a commit 97ad72c
Show file tree
Hide file tree
Showing 3 changed files with 85 additions and 95 deletions.
10 changes: 9 additions & 1 deletion src/assets/styles/common.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -209,7 +209,7 @@ h1 {

@media (max-width: 769px) {
h1 {
padding: 30px 12px 0px;
padding: 30px 12px 12px;
font-size: 2em;
}
}
Expand Down Expand Up @@ -1633,3 +1633,11 @@ li.dropdown.disabled a {
border-style: solid solid solid none;
}

.home .stats {
margin-top: 20px;
}

.home .latest-transactions-box {
margin-top: 40px;
}

43 changes: 35 additions & 8 deletions src/components/home/home.component.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,34 +24,61 @@ const HomeConstructor = function ($scope, $http, $interval) {
tx.hrefRecipient = `/address/${tx.recipientId}`;
};

// Blocks
vm.getLastBlocks = () => {
$http.get('/api/getLastBlocks').then((resp) => {
if (resp.data.success) {
vm.blocks = resp.data.blocks.splice(0, 5);
if (resp.data.success && Array.isArray(resp.data.blocks)) {
resp.data.blocks.sort((a, b) => b.height > a.height);
vm.lastBlock = resp.data.blocks.slice(0, 1)[0];
vm.latestBlocks = resp.data.blocks.slice(1, 5);
}
});
};

vm.blocksInterval = $interval(() => {
vm.getLastBlocks();
}, 30000);

}, 10000);
vm.getLastBlocks();

// Transactions
vm.getLastTransactions = () => {
$http.get('/api/getLastTransactions').then((resp) => {
if (resp.data.success) {
vm.txs = resp.data.transactions.splice(0, 5);
vm.txs = resp.data.transactions.splice(0, 10);
vm.txs.map(setHref);
}
});
};

vm.transactionsInterval = $interval(() => {
vm.getLastTransactions();
}, 30000);

vm.getLastTransactions();

// Peers
vm.getPeers = () => {
$http.get('/api/statistics/getPeers').then((resp) => {
if (resp.data.success) {
vm.peers = resp.data.list;
}
});
};
vm.getPeersInterval = $interval(() => {
vm.getLastTransactions();
}, 30000);
vm.getPeers();

// Delegates
vm.getDelegates = () => {
$http.get('/api/delegates/getActive').then((resp) => {
if (resp.data.success) {
vm.activeDelegates = resp.data.delegates;
vm.delegatesCount = resp.data.totalCount;
}
});
};
vm.getDelegatesInterval = $interval(() => {
vm.getLastTransactions();
}, 30000);
vm.getDelegates();
};

AppHome.component('home', {
Expand Down
127 changes: 41 additions & 86 deletions src/components/home/home.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,131 +18,86 @@
<div class="alert alert-danger" data-ng-if="flashMessage">
{{$root.flashMessage}}
</div>
<section>
<section class="home">
<h1>
Lisk Blockchain Explorer
</h1>
<div class="top-pb row horizontal-padding-xs horizontal-padding-s horizontal-padding-m horizontal-padding-l">
<div class="col-xs-12 col-md-6">
<div class="top-pb row horizontal-padding-xs horizontal-padding-s horizontal-padding-m horizontal-padding-l stats">
<div class="col-xs-12">
<div class="row">
<div class="col-xs-6 col-sm-5">
<div class="col-xs-6 col-sm-3">
<div class="row big-info">
<div class="col-xs-12">
<div class="pull-left delegates">
<p class="small-title">Delegates</p>
<p class="big-details">
<span class="total-delegates">{{vm.totalDelegates || 0}}</span>
<p>
<span class="total-delegates">{{vm.activeDelegates.length || 0}} active delegates</span><br>
<span class="total-delegates">of all {{vm.delegatesCount || 0}} delegates</span>
</p>
<p class="text-muted total-active">{{vm.totalActive || 0}} active delegates</p>
<p class="text-muted total-standby">{{vm.totalStandby || 0}} delegates on standby</p>
<p class="text-muted disconnected-peers">{{vm.delegatesCount - vm.activeDelegates.length || 0}} inactive delegates</p>
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-5">

<div class="col-xs-6 col-sm-3">
<div class="row big-info">
<div class="col-xs-12">
<div class="pull-left last-block">
<p class="small-title">Last Block By</p>
<p class="big-details" data-ng-switch="!!vm.lastBlock">
<a data-account-href="vm.lastBlock.delegate" data-type="delegate" data-ng-switch-when="true">{{vm.lastBlock.delegate.username}}</a>
<span class="text-muted" data-ng-switch-when="false">N/A</span>
</p>
<p class="text-muted" data-ng-switch="!!vm.lastBlock">
<a data-ng-href="/block/{{vm.lastBlock.id}}" data-ng-switch-when="true">{{vm.lastBlock.id}}</a>
<span class="text-muted" data-ng-switch-when="false">N/A</span>
</p>
<p class="text-muted">
<span class="lisk">{{vm.lastBlock.totalForged || 0 | currency:$root.currency:$root.decimalPlaces}} {{$root.currency.symbol}} forged</span>
<span class="num-trans">from {{vm.lastBlock.numberOfTransactions || 0}} transactions</span>
<div class="pull-left active-nodes">
<p class="small-title">Peers</p>
<p>
<span class="connected-peers">{{vm.peers.connected.length || 0}} connected peers</span><br>
<span class="total-peers">{{vm.peers.disconnected.length || 0}} disconnected peers</span>
</p>
<p class="text-muted disconnected-peers">{{vm.peers.connected.length + vm.peers.disconnected.length || 0}} peers in total</p>
</div>
</div>
</div>
</div>

<div class="col-xs-6 col-sm-5">
<div class="col-xs-6 col-sm-3">
<div class="row big-info">
<div class="col-xs-12">
<div class="pull-left active-nodes">
<p class="small-title">Connected Peers</p>
<p class="big-details">
<span class="connected-peers">{{vm.counter.connected || 0}}</span>
<span class="text-muted">&nbsp;/&nbsp;</span>
<span class="total-peers">{{vm.counter.total || 0}}</span>
<div class="pull-left last-block">
<p class="small-title">Last Block</p>
<p data-ng-switch="!!vm.lastBlock">
<span><a data-ng-href="/block/{{vm.lastBlock.id}}" data-ng-switch-when="true">{{vm.lastBlock.id}}</a></span>
<span class="text-muted" data-ng-switch-when="false">N/A</span>
<br>
Forged by <a data-account-href="vm.lastBlock.delegate" data-type="delegate" data-ng-switch-when="true">{{vm.lastBlock.delegate.username}}</a>
<span class="text-muted" data-ng-switch-when="false">N/A</span>
</p>
<p class="text-muted">
<span class="lisk">{{vm.lastBlock.totalForged || 0 | currency:$root.currency:$root.decimalPlaces}} {{$root.currency.symbol}} forged</span><br>
<span class="num-trans">from {{vm.lastBlock.numberOfTransactions || 0}} transactions</span>
</p>
<p class="text-muted disconnected-peers">{{vm.counter.disconnected || 0}} disconnected peers</p>
</div>
</div>
</div>
</div>

<div class="col-xs-6 col-sm-5">
<div class="col-xs-6 col-sm-3">
<div class="row big-info">
<div class="col-xs-12">
<div class="pull-left volume">
<p class="small-title">Volume <span class="text-muted">({{$root.currency.symbol}})</span></p>

<p class="big-details">
<span class="volume-amount">{{vm.volume.amount || 0 | currency:$root.currency:$root.decimalPlaces}}</span>
</p>
<div data-ng-if="!vm.volume.amount">
<p class="text-muted">waiting for transactions <i class="fa fa-spinner fa-spin"></i></p>
</div>
<div data-ng-if="vm.volume.amount">
<p class="text-muted vol-timespan">transferred within {{vm.volume.beginning | timeSpan:volume.end}}</p>
<p class="text-muted vol-blocks">from {{vm.volume.txs || 0}} transactions in {{vm.volume.withTxs || 0}} / {{vm.volume.blocks ||
0}} blocks</p>
</div>
<div class="big-info">
<p class="small-title">Latest blocks</p>
</div>
<p class="left-padding-xs left-padding-s left-padding-m left-padding-l double" colspan="7" data-ng-if="!vm.latestBlocks">Waiting for blocks...</p>
<p>
<span data-ng-repeat="b in vm.latestBlocks track by $index">
<a href="/block/{{b.id}}" title="Block height {{b.height}}">{{b.id}}</a>
<!-- (<a class="" href="/address/{{b.generator}}">{{b.delegate.username || b.generator | middleEllipsis:10}}</a>) -->
</span>
</p>
<a href="/blocks/">more&nbsp;blocks</span><small><span class="glyphicon glyphicon-chevron-right"></span></small></a>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-md-6">
<div class="big-info">
<p class="small-title">Latest blocks<a href="/blocks/" class="pull-right">More<span class="hidden-xs"> blocks</span><span class="glyphicon glyphicon-chevron-right"></span></a></p>
</div>

<div class="table-responsive">
<table class="table table-hover table-striped latest-blocks">
<thead>
<tr>
<th class="left-padding-s left-padding-m left-padding-l double">Id</th>
<th class="left-padding-xs text-right"><span>Height</span></th>
<!-- <th class="text-right">Timestamp</th> -->
<th class="right-padding-s text-right hidden-xs"><span class="">Txs.</span></th>
<th class="right-padding-xs right-padding-s text-right">Gen. by</th>
<!-- <th class="text-right hidden-xs">Amount</th> -->
<!-- <th class="right-padding-m right-padding-l double text-right">Forged</th> -->
</tr>
</thead>
<tbody>
<tr data-ng-if="!vm.blocks.length">
<td class="left-padding-xs left-padding-s left-padding-m left-padding-l double" colspan="7">Waiting for blocks...</td>
</tr>
<tr data-ng-repeat='b in vm.blocks track by $index'>
<td class="left-padding-s left-padding-m left-padding-l double"><a class="ellipsis" href="/block/{{b.id}}">{{b.id}}</a></td>
<td class="left-padding-xs">
<span class="ellipsis text-right">{{b.height}}</span>
<!-- <a class="ellipsis pull-left visible-xs" href="/block/{{b.id}}">{{b.height}}</a> -->
</td>
<!-- <td class="text-right hidden-xs hidden-sm"><span class="ellipsis">{{b.timestamp | timestamp}}</span></td> -->
<td class="right-padding-s text-right hidden-xs">{{b.transactionsCount}}</td>
<td class="right-padding-xs right-padding-s text-right">
<a class="" href="/address/{{b.generator}}">{{b.delegate.username || b.generator | middleEllipsis:10}}</a>
</td>
<!-- <td class="text-right">{{b.totalAmount | currency:$root.currency:$root.decimalPlaces}} {{$root.currency.symbol}}</td> -->
<!-- <td class="right-padding-m right-padding-l double text-right">{{b.totalForged | currencyFee:$root.currency:$root.decimalPlaces}} {{$root.currency.symbol}}</td> -->
</tr>
</tbody>
</table>
</div>
</div>
</div>

<div class="top-pb row horizontal-padding-xs horizontal-padding-s horizontal-padding-m horizontal-padding-l">
<div class="top-pb row horizontal-padding-xs horizontal-padding-s horizontal-padding-m horizontal-padding-l latest-transactions-box">
<div class="col-xs-12">
<div class="big-info">
<p class="small-title">Latest transactions<a href="/txs/" class="pull-right">More<span class="hidden-xs"> transactions</span><span class="glyphicon glyphicon-chevron-right"></span></a></p>
Expand Down

0 comments on commit 97ad72c

Please sign in to comment.