diff --git a/src/app/dashboard/dashboard.module.ts b/src/app/dashboard/dashboard.module.ts index a8c59b0..941f8ab 100644 --- a/src/app/dashboard/dashboard.module.ts +++ b/src/app/dashboard/dashboard.module.ts @@ -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, diff --git a/src/app/dashboard/dashboard.routing.ts b/src/app/dashboard/dashboard.routing.ts index f28c65e..d0e56fe 100644 --- a/src/app/dashboard/dashboard.routing.ts +++ b/src/app/dashboard/dashboard.routing.ts @@ -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, diff --git a/src/app/dashboard/leaderboard.component.html b/src/app/dashboard/leaderboard.component.html new file mode 100644 index 0000000..34345f3 --- /dev/null +++ b/src/app/dashboard/leaderboard.component.html @@ -0,0 +1,61 @@ +
+
+
+
+
+ Leaderboard + By default this loads the page with your position. +
+
+
+ +
+ + + + + + + + + + + +
PositionValuePurchase Time
+ + + +
+
+ No Leaderboard available. +
+
+
+
+
diff --git a/src/app/dashboard/leaderboard.component.ts b/src/app/dashboard/leaderboard.component.ts new file mode 100644 index 0000000..ebc669c --- /dev/null +++ b/src/app/dashboard/leaderboard.component.ts @@ -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; + 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"; + // } + +} diff --git a/src/app/layouts/full-layout.component.html b/src/app/layouts/full-layout.component.html index 4fc7f4c..5dc056b 100644 --- a/src/app/layouts/full-layout.component.html +++ b/src/app/layouts/full-layout.component.html @@ -40,11 +40,16 @@ Enter Feedback -
  • +
  • Supplier Map
    • +
  • + + Leaderboard + +
  • Transaction Log diff --git a/src/app/providers/api-service.ts b/src/app/providers/api-service.ts index 378035b..bb7f2ad 100644 --- a/src/app/providers/api-service.ts +++ b/src/app/providers/api-service.ts @@ -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() ); } diff --git a/src/app/shared/leaderboard-result.component.html b/src/app/shared/leaderboard-result.component.html new file mode 100644 index 0000000..76e4d3c --- /dev/null +++ b/src/app/shared/leaderboard-result.component.html @@ -0,0 +1,3 @@ +{{ leaderboard.position }} +{{ leaderboard.display_name }} +{{ listType.includes('total') ? (leaderboard.value | currency:'GBP':true:'1.2-2') : (leaderboard.value | number:'1.0-0') }} diff --git a/src/app/shared/leaderboard-result.component.ts b/src/app/shared/leaderboard-result.component.ts new file mode 100644 index 0000000..925f331 --- /dev/null +++ b/src/app/shared/leaderboard-result.component.ts @@ -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 { + } +}