FoodLoop-Web/src/app/dashboard/leaderboard.component.html

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