diff --git a/src/app/dashboard/add-data.component.ts b/src/app/dashboard/add-data.component.ts
index 359c294..c894a84 100644
--- a/src/app/dashboard/add-data.component.ts
+++ b/src/app/dashboard/add-data.component.ts
@@ -32,7 +32,7 @@ export class AddDataComponent implements OnInit {
organisationPostcode: string;
amount: number;
transactionAdditionType = 1;
- storeList;
+ storeList = [];
showAddStore = false;
submitReceipt = false;
transactionFormInvalid = true;
@@ -108,7 +108,7 @@ export class AddDataComponent implements OnInit {
}
// handle the case when the storelist is empty
if (this.storeList.length < 1) {
- this.storeList = null;
+ this.storeList = [];
this.showAddStore = true;
this.transactionAdditionType = 3;
}
@@ -135,7 +135,7 @@ export class AddDataComponent implements OnInit {
const val = ev.target.value;
// Filter the store list so search seems quicker
- if (val && val.trim() !== '' && this.storeList !== null) {
+ if (val && val.trim() !== '' && this.storeList.length > 0) {
this.storeList = this.storeList.filter(
(item) => {
return ( item.name.toLowerCase().indexOf( val.toLowerCase() ) > -1 );
@@ -237,7 +237,7 @@ export class AddDataComponent implements OnInit {
town: '',
postcode: '',
};
- this.storeList = null;
+ this.storeList = [];
this.amount = null;
this.transactionFormInvalid = true;
this.showAddStore = false;
diff --git a/src/app/dashboard/dashboard.module.ts b/src/app/dashboard/dashboard.module.ts
index a8c59b0..341e833 100644
--- a/src/app/dashboard/dashboard.module.ts
+++ b/src/app/dashboard/dashboard.module.ts
@@ -5,6 +5,7 @@ import { ChartsModule } from 'ng2-charts/ng2-charts';
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { NgxPaginationModule } from 'ngx-pagination';
import { AgmCoreModule, GoogleMapsAPIWrapper } from '@agm/core';
+import { AgmJsMarkerClustererModule } from '@agm/js-marker-clusterer';
import { CurrencyPipe } from '@angular/common';
@@ -15,6 +16,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 +28,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';
@@ -40,6 +43,7 @@ import { environment } from '../../environments/environment';
AgmCoreModule.forRoot({
apiKey: environment.mapApiKey
}),
+ AgmJsMarkerClustererModule,
BsDropdownModule,
NgxPaginationModule,
DashboardRoutingModule,
@@ -55,6 +59,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..9794cfe 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,19 @@ 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' },
+ canActivate: [CustomerGuard],
+ },
{
path: 'transaction-log',
component: TransactionLogComponent,
@@ -53,8 +60,7 @@ const routes: Routes = [
{
path: 'map',
component: MapComponent,
- data: { title: 'Supplier Map' },
- canActivate: [OrgGuard],
+ data: { title: 'Purchase Map' },
},
{
path: 'payroll-log',
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 @@
+
+
+
+
+
+
+
+
+
+
+
+
+ | Position |
+ Value |
+ Purchase 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/dashboard/map.component.html b/src/app/dashboard/map.component.html
index 1c408a4..bcff523 100644
--- a/src/app/dashboard/map.component.html
+++ b/src/app/dashboard/map.component.html
@@ -3,7 +3,7 @@
@@ -22,16 +22,18 @@
[zoom]="zoom"
[scaleControl]="true"
(idle)="viewBoundsChanged($event)">
-
+
+
-
- {{m.name}}
-
-
+
+ {{m.name}}
+
+
+
diff --git a/src/app/layouts/full-layout.component.html b/src/app/layouts/full-layout.component.html
index 4fc7f4c..959ef60 100644
--- a/src/app/layouts/full-layout.component.html
+++ b/src/app/layouts/full-layout.component.html
@@ -40,9 +40,14 @@
Enter Feedback
-
+
- Supplier Map
+ Purchase Map
+
+
+
+
+ Leaderboard
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 {
+ }
+}