Merge pull request #27 from Pear-Trading/finn/leaderboard

Web App Leaderboard added

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

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

src/app/dashboard/leaderboard.component.html

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

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

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

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