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..ba776f2 100644 --- a/src/app/dashboard/dashboard.routing.ts +++ b/src/app/dashboard/dashboard.routing.ts @@ -38,13 +38,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..7eee607 --- /dev/null +++ b/src/app/dashboard/leaderboard.component.html @@ -0,0 +1,59 @@ +
+
+
+
+
+ Leaderboard + By default this loads the page with your position. +
+
+
+ +
+ Action + Another action + Something else here +
+
+ + + + + + + + + + + +
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..7940056 --- /dev/null +++ b/src/app/dashboard/leaderboard.component.ts @@ -0,0 +1,113 @@ +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-log.component.html', +}) +export class LeaderboardComponent implements OnInit { + + transactionList; + 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, + ) { + this.myDate = moment().format('YYYY-MM-DD[T]HH:mm'); + // this.myDate = new Date().toISOString().slice(0, 16); + } + + 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(); + } + + + loadLeaderboard(leadPage: number) { + console.log(leadPage, listType); + this.api.leaderboard_fetch(listType,leadPage).subscribe( + result => { + if (result.transactions.length > 0) { + this.transactionList = result.transactions; + // TODO Rename in server + this.paginateConfig.totalItems = result.page_no; + this.paginateConfig.currentPage = result.page; + this.noLeaderboardList = false; + } else { + // handle the case when the transactionList 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..8a728ba --- /dev/null +++ b/src/app/shared/leaderboard-result.component.html @@ -0,0 +1,3 @@ +{{ item.position }} +{{ item.display_name }} +{{ listType.includes('total') ? (item.value | currency:'GBP':true:'1.2-2') : (item.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..53fce68 --- /dev/null +++ b/src/app/shared/leaderboard-result.component.ts @@ -0,0 +1,19 @@ +import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; + +interface LeaderboardData { + seller: number; + value: number; + purchase_time: string; +} + +@Component({ + // tslint:disable-next-line + selector: '[leaderboard-result]', + templateUrl: 'leaderboard-result.component.html', +}) +export class LeaderboardResultComponent implements OnInit { + @Input() public leaderboard: leaderboardData; + + ngOnInit(): void { + } +}