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

Home page redesign - Closes #859 #866

Merged
merged 2 commits into from
Dec 19, 2018
Merged

Home page redesign - Closes #859 #866

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
995ae68
Home page redesign
Dec 18, 2018
8b4264a
Home page spacing fix
Dec 19, 2018
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
10 changes: 9 additions & 1 deletion src/assets/styles/common.css
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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