Leaderboard pages added and routing sorted

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,

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,

src/app/dashboard/leaderboard.component.html

@@ -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>

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<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,
+  ) {
+    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";
+  // }
+
+}

src/app/layouts/full-layout.component.html

@@ -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

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() );
   }

src/app/shared/leaderboard-result.component.html

@@ -0,0 +1,3 @@
+<td>{{ item.position }}</td>
+<td class="text-truncate">{{ item.display_name }}</td>
+<td>{{ listType.includes('total') ? (item.value  | currency:'GBP':true:'1.2-2') : (item.value | number:'1.0-0') }}</td>

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 {
+  }
+}