Pear-Trading/FoodLoop-Web
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Leaderboard pages added and routing sorted

Browse source
This commit is contained in:
piratefinn 2017-11-10 17:15:11 +00:00
parent f5239a3822
commit 8a5236ad3a
8 changed files with 216 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

59
src/app/dashboard/leaderboard.component.html Normal file
View file

@ -0,0 +1,59 @@
<div class="animated fadeIn">
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-header">
<strong>Leaderboard</strong>
<small>By default this loads the page with your position.</small>
</div>
<div *ngIf="!noLeaderboardList" class="card-block">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Choose Leaderboard type
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item">Action</a>
<a class="dropdown-item">Another action</a>
<a class="dropdown-item">Something else here</a>
</div>
</div>
<table class="table table-striped table-hover">
<thead>
<tr>
<th>Position</th>
<th>Value</th>
<th>Purchase Time</th>
</tr>
</thead>
<tbody>
<tr transaction-result *ngFor="let leaderboard of leaderboardList | paginate: paginateConfig" [leaderboard]="leaderboard"></tr>
</tbody>
</table>
<pagination-template #p="paginationApi"
[id]="paginateConfig.id"
(pageChange)="loadLeaderboard($event)">
<ul class="pagination">
<li class="page-item" [class.disabled]="p.isFirstPage()">
<a class="page-link clickable" *ngIf="!p.isFirstPage()" (click)="p.previous()">Prev</a>
</li>
<li *ngFor="let page of p.pages" class="page-item" [class.active]="p.getCurrent() === page.value">
<a class="page-link clickable" (click)="p.setCurrent(page.value)" *ngIf="p.getCurrent() !== page.value">
<span>{{ page.label }}</span>
</a>
<div class="page-link" *ngIf="p.getCurrent() === page.value">
<span>{{ page.label }}</span>
</div>
</li>
<li class="page-item" [class.disabled]="p.isLastPage()">
<a class="page-link clickable" *ngIf="!p.isLastPage()" (click)="p.next()">Next</a>
</li>
</ul>
</pagination-template>
</div>
<div *ngIf="noLeaderboardList" class="card-block">
No Leaderboard available.
</div>
</div>
</div>
</div>
</div>