Pear-Trading/FoodLoop-Web
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

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

Browse source 
Web App Leaderboard added
This commit is contained in:
Finn 2017-11-13 11:48:42 +00:00 committed by GitHub
commit 97aa432c4e
8 changed files with 217 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/app/dashboard/dashboard.module.ts
View file

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

8
src/app/dashboard/dashboard.routing.ts
View file

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

61
src/app/dashboard/leaderboard.component.html Normal file
View file

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

110
src/app/dashboard/leaderboard.component.ts Normal file
View file

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

7
src/app/layouts/full-layout.component.html
View file

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

9
src/app/providers/api-service.ts
View file

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

3
src/app/shared/leaderboard-result.component.html Normal file
View file

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

20
src/app/shared/leaderboard-result.component.ts Normal file
View file

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