Merge pull request #27 from Pear-Trading/finn/leaderboard
Web App Leaderboard added
This commit is contained in:
commit
356aeae974
8 changed files with 217 additions and 5 deletions
|
@ -15,6 +15,7 @@ import { AddDataComponent } from './add-data.component';
|
|||
import { FeedbackComponent } from './feedback.component';
|
||||
import { TransactionLogComponent } from './transaction-log.component';
|
||||
import { PayrollLogComponent } from './payroll-log.component';
|
||||
import { LeaderboardComponent } from './leaderboard.component';
|
||||
import { MapComponent } from './map.component';
|
||||
|
||||
import { GraphWidget } from '../widgets/graph-widget.component';
|
||||
|
@ -26,6 +27,7 @@ import { OrgResultComponent } from '../shared/org-result.component';
|
|||
import { OrgTableComponent } from '../shared/org-table.component';
|
||||
import { TransactionResultComponent } from '../shared/transaction-result.component';
|
||||
import { PayrollResultComponent } from '../shared/payroll-result.component';
|
||||
import { LeaderboardResultComponent } from '../shared/leaderboard-result.component';
|
||||
|
||||
// API key env variable import
|
||||
import { environment } from '../../environments/environment';
|
||||
|
@ -55,6 +57,8 @@ import { environment } from '../../environments/environment';
|
|||
TransactionResultComponent,
|
||||
PayrollLogComponent,
|
||||
PayrollResultComponent,
|
||||
LeaderboardComponent,
|
||||
LeaderboardResultComponent,
|
||||
MapComponent,
|
||||
FeedbackComponent,
|
||||
GraphWidget,
|
||||
|
|
|
@ -13,6 +13,7 @@ import { AddDataComponent } from './add-data.component';
|
|||
import { FeedbackComponent } from './feedback.component';
|
||||
import { TransactionLogComponent } from './transaction-log.component';
|
||||
import { PayrollLogComponent } from './payroll-log.component';
|
||||
import { LeaderboardComponent } from './leaderboard.component';
|
||||
import { MapComponent } from './map.component';
|
||||
|
||||
// Using child path to allow for FullLayout theming
|
||||
|
@ -38,13 +39,18 @@ const routes: Routes = [
|
|||
{
|
||||
path: 'account-edit',
|
||||
component: AccountEditComponent,
|
||||
data: { title: 'Leaderboards' },
|
||||
data: { title: 'Edit Account' },
|
||||
},
|
||||
{
|
||||
path: 'add-data',
|
||||
component: AddDataComponent,
|
||||
data: { title: 'Add Transaction' },
|
||||
},
|
||||
{
|
||||
path: 'leaderboard',
|
||||
component: LeaderboardComponent,
|
||||
data: { title: 'Leaderboards' },
|
||||
},
|
||||
{
|
||||
path: 'transaction-log',
|
||||
component: TransactionLogComponent,
|
||||
|
|
61
src/app/dashboard/leaderboard.component.html
Normal file
61
src/app/dashboard/leaderboard.component.html
Normal file
|
@ -0,0 +1,61 @@
|
|||
<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="input-group mb-3">
|
||||
<select type="text" [(ngModel)]="listType" (ngModelChange)="changeLeaderboard($event)">
|
||||
<option value="daily_total">Yesterday Total</option>
|
||||
<option value="daily_count">Yesterday Count</option>
|
||||
<option value="weekly_total" selected>Last Week Total</option>
|
||||
<option value="weekly_count">Last Week Count</option>
|
||||
<option value="monthly_total">Last Month Total</option>
|
||||
<option value="monthly_count">Last Month Count</option>
|
||||
<option value="all_time_total">All Time Total</option>
|
||||
<option value="all_time_count">All Time Count</option>
|
||||
</select>
|
||||
</div>
|
||||
<table class="table table-striped table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Position</th>
|
||||
<th>Value</th>
|
||||
<th>Purchase Time</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr leaderboard-result *ngFor="let leaderboard of leaderboardList | paginate: paginateConfig" [leaderboard]="leaderboard" [listType]="listType"></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>
|
110
src/app/dashboard/leaderboard.component.ts
Normal file
110
src/app/dashboard/leaderboard.component.ts
Normal file
|
@ -0,0 +1,110 @@
|
|||
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
|
||||
import { Http, Response } from '@angular/http';
|
||||
import { ApiService } from '../providers/api-service';
|
||||
// import { PaginatePipe } from 'ngx-pagination';
|
||||
import {PaginationInstance} from 'ngx-pagination';
|
||||
// import { PaginationControlsComponent } from 'ngx-pagination';
|
||||
// import { PaginationControlsDirective } from 'ngx-pagination';
|
||||
// import { TransactionResultComponent } from '../shared/transaction-result.component';
|
||||
import 'rxjs/add/operator/map';
|
||||
|
||||
@Component({
|
||||
templateUrl: 'leaderboard.component.html',
|
||||
})
|
||||
export class LeaderboardComponent implements OnInit {
|
||||
|
||||
leaderboardList;
|
||||
noLeaderboardList = false;
|
||||
public p: any;
|
||||
|
||||
leaderboardData: Array<any>;
|
||||
currentPos: number;
|
||||
listType: any = 'weekly_total';
|
||||
|
||||
public paginateConfig: PaginationInstance = {
|
||||
id: 'leadpaginate',
|
||||
itemsPerPage: 10,
|
||||
currentPage: 1,
|
||||
totalItems: 0
|
||||
};
|
||||
|
||||
constructor(
|
||||
private http: Http,
|
||||
private api: ApiService,
|
||||
) { }
|
||||
|
||||
ngOnInit(): void {
|
||||
this.loadLeaderboard(0);
|
||||
}
|
||||
|
||||
// private fetchLeaderboard() {
|
||||
// this.peopleService.leaderboard(this.listType)
|
||||
// .subscribe(
|
||||
// result => {
|
||||
// this.leaderboardData = result.leaderboard;
|
||||
// this.currentPos = result.user_position;
|
||||
// }
|
||||
// );
|
||||
// }
|
||||
|
||||
public changeLeaderboard(event) {
|
||||
this.loadLeaderboard(0);
|
||||
}
|
||||
|
||||
|
||||
loadLeaderboard(leadPage: number) {
|
||||
console.log(leadPage, this.listType);
|
||||
this.api.leaderboard_fetch(this.listType,leadPage).subscribe(
|
||||
result => {
|
||||
if (result.leaderboard.length > 0) {
|
||||
this.leaderboardList = result.leaderboard;
|
||||
// TODO Rename in server
|
||||
this.paginateConfig.totalItems = result.count;
|
||||
this.paginateConfig.currentPage = result.page;
|
||||
this.noLeaderboardList = false;
|
||||
} else {
|
||||
// handle the case when the leaderboardList is empty
|
||||
this.leaderboardList = null;
|
||||
this.noLeaderboardList = true;
|
||||
}
|
||||
},
|
||||
error => {
|
||||
console.log(error);
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
// // dynamically changes the row style based on player's position
|
||||
// // for instance, top three player and the player him/herself should
|
||||
// // be hightlighted
|
||||
// public getClass(item) {
|
||||
// if( item.position < 4 ) {
|
||||
// return "topThree";
|
||||
// } else if( item.position == this.currentPos ) {
|
||||
// return "user";
|
||||
// }
|
||||
// return "otherUsers";
|
||||
// }
|
||||
//
|
||||
// // show changes by using icon, trending up and trending down or no trend.
|
||||
// public getTrendIcon(item){
|
||||
// if( item.trend < 0 ){
|
||||
// return "md-trending-up";
|
||||
// } else if( item.trend > 0 ){
|
||||
// return "md-trending-down";
|
||||
// }
|
||||
// return "md-remove";
|
||||
// }
|
||||
//
|
||||
// // need to merge this function with getIcon
|
||||
// // this function shows different icon color based on the direction of the position shifted
|
||||
// public getTrendIconColor(item){
|
||||
// if( item.trend < 0 ) {
|
||||
// return "secondary";
|
||||
// } else if( item.trend > 0 ){
|
||||
// return "danger";
|
||||
// }
|
||||
// return "dark";
|
||||
// }
|
||||
|
||||
}
|
|
@ -40,11 +40,16 @@
|
|||
<i class="icon-envelope-letter"></i> Enter Feedback
|
||||
</a>
|
||||
</li>
|
||||
<li *ngIf="accountType == 'organisation'" class="nav-item">
|
||||
<li *ngIf="accountType == 'customer'" class="nav-item">
|
||||
<a class="nav-link" routerLinkActive="active" [routerLink]="['/map']">
|
||||
<i class="icon-map"></i> Supplier Map
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" routerLinkActive="active" [routerLink]="['/leaderboard']">
|
||||
<i class="icon-basket"></i> Leaderboard
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" routerLinkActive="active" [routerLink]="['/transaction-log']">
|
||||
<i class="icon-basket"></i> Transaction Log
|
||||
|
|
|
@ -253,13 +253,16 @@ export class ApiService {
|
|||
|
||||
// Leaderboard Api
|
||||
|
||||
public leaderboard_fetch(data) {
|
||||
public leaderboard_fetch(
|
||||
type: string,
|
||||
page: number) {
|
||||
const key = this.sessionKey;
|
||||
return this.http.post(
|
||||
this.apiUrl + '/stats/leaderboard',
|
||||
this.apiUrl + '/stats/leaderboard/paged',
|
||||
{
|
||||
session_key : key,
|
||||
type : data
|
||||
type : type,
|
||||
page: page,
|
||||
}
|
||||
).map( response => response.json() );
|
||||
}
|
||||
|
|
3
src/app/shared/leaderboard-result.component.html
Normal file
3
src/app/shared/leaderboard-result.component.html
Normal file
|
@ -0,0 +1,3 @@
|
|||
<td>{{ leaderboard.position }}</td>
|
||||
<td class="text-truncate">{{ leaderboard.display_name }}</td>
|
||||
<td>{{ listType.includes('total') ? (leaderboard.value | currency:'GBP':true:'1.2-2') : (leaderboard.value | number:'1.0-0') }}</td>
|
20
src/app/shared/leaderboard-result.component.ts
Normal file
20
src/app/shared/leaderboard-result.component.ts
Normal file
|
@ -0,0 +1,20 @@
|
|||
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
|
||||
|
||||
interface LeaderboardData {
|
||||
position: number;
|
||||
display_name: number,
|
||||
value: number;
|
||||
}
|
||||
|
||||
@Component({
|
||||
// tslint:disable-next-line
|
||||
selector: '[leaderboard-result]',
|
||||
templateUrl: 'leaderboard-result.component.html',
|
||||
})
|
||||
export class LeaderboardResultComponent implements OnInit {
|
||||
@Input() public leaderboard: LeaderboardData;
|
||||
@Input() public listType: string;
|
||||
|
||||
ngOnInit(): void {
|
||||
}
|
||||
}
|
Reference in a new issue