Web app leaderboard done
This commit is contained in:
parent
faea82d2cc
commit
c4a9790eb8
5 changed files with 29 additions and 28 deletions
|
@ -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
|
||||
|
|
|
@ -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">
|
||||
<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 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>
|
||||
|
@ -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"
|
||||
|
|
|
@ -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);
|
||||
this.api.leaderboard_fetch(listType,leadPage).subscribe(
|
||||
console.log(leadPage, this.listType);
|
||||
this.api.leaderboard_fetch(this.listType,leadPage).subscribe(
|
||||
result => {
|
||||
if (result.transactions.length > 0) {
|
||||
this.transactionList = result.transactions;
|
||||
if (result.leaderboard.length > 0) {
|
||||
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;
|
||||
}
|
||||
|
|
|
@ -1,3 +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>
|
||||
<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>
|
||||
|
|
|
@ -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 {
|
||||
}
|
||||
|
|
Reference in a new issue