Web app leaderboard done

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

src/app/dashboard/leaderboard.component.html

@@ -7,15 +7,17 @@
           <small>By default this loads the page with your position.</small>
         </div>
         <div *ngIf="!noLeaderboardList" class="card-block">
-          <div class="dropdown">
+          <div class="input-group mb-3">
-            <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            <select type="text" [(ngModel)]="listType" (ngModelChange)="changeLeaderboard($event)">
-              Choose Leaderboard type
+              <option value="daily_total">Yesterday Total</option>
-            </button>
+              <option value="daily_count">Yesterday Count</option>
-            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+              <option value="weekly_total" selected>Last Week Total</option>
-              <a class="dropdown-item">Action</a>
+              <option value="weekly_count">Last Week Count</option>
-              <a class="dropdown-item">Another action</a>
+              <option value="monthly_total">Last Month Total</option>
-              <a class="dropdown-item">Something else here</a>
+              <option value="monthly_count">Last Month Count</option>
-            </div>
+              <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>
@@ -26,7 +28,7 @@
               </tr>
             </thead>
             <tbody>
-              <tr transaction-result *ngFor="let leaderboard of leaderboardList | paginate: paginateConfig" [leaderboard]="leaderboard"></tr>
+              <tr leaderboard-result *ngFor="let leaderboard of leaderboardList | paginate: paginateConfig" [leaderboard]="leaderboard" [listType]="listType"></tr>
             </tbody>
           </table>
           <pagination-template #p="paginationApi"

src/app/dashboard/leaderboard.component.ts

@@ -13,7 +13,7 @@ import 'rxjs/add/operator/map';
 })
 export class LeaderboardComponent implements OnInit {
 
-  transactionList;
+  leaderboardList;
   noLeaderboardList = false;
   public p: any;
 
@@ -31,10 +31,7 @@ export class LeaderboardComponent implements OnInit {
   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);
@@ -51,22 +48,22 @@ export class LeaderboardComponent implements OnInit {
   // }
 
   public changeLeaderboard(event) {
-    this.loadLeaderboard();
+    this.loadLeaderboard(0);
   }
 
 
   loadLeaderboard(leadPage: number) {
-    console.log(leadPage, listType);
+    console.log(leadPage, this.listType);
-    this.api.leaderboard_fetch(listType,leadPage).subscribe(
+    this.api.leaderboard_fetch(this.listType,leadPage).subscribe(
       result => {
-        if (result.transactions.length > 0) {
+        if (result.leaderboard.length > 0) {
-          this.transactionList = result.transactions;
+          this.leaderboardList = result.leaderboard;
           // TODO Rename in server
-          this.paginateConfig.totalItems = result.page_no;
+          this.paginateConfig.totalItems = result.count;
           this.paginateConfig.currentPage = result.page;
           this.noLeaderboardList = false;
         } else {
-        // handle the case when the transactionList is empty
+        // handle the case when the leaderboardList is empty
           this.leaderboardList = null;
           this.noLeaderboardList = true;
         }

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

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

@@ -1,9 +1,9 @@
 import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 
 interface LeaderboardData {
-  seller: number;
+  position: number;
+  display_name: number,
   value: number;
-  purchase_time: string;
 }
 
 @Component({
@@ -12,7 +12,8 @@ interface LeaderboardData {
   templateUrl: 'leaderboard-result.component.html',
 })
 export class LeaderboardResultComponent implements OnInit {
-  @Input() public leaderboard: leaderboardData;
+  @Input() public leaderboard: LeaderboardData;
+  @Input() public listType: string;
 
   ngOnInit(): void {
   }