Merge pull request #30 from Pear-Trading/Release-v0.0.3

Release v0.0.3

CHANGELOG.md

@@ -2,6 +2,17 @@
 
 # Next Release
 
+# v0.0.3
+
+* Customer Leaderboards added
+* Map made available to Customers
+* Clustering added to Map
+* Map renamed from "Supplier Map" to "Purchase Map" to fall in line with
+previous change
+* Added placeholder while password reset is not present
+* Fixed error on store list during a transaction
+
+
 # v0.0.2
 
 * Supplier map added to organisation view

bin/build-releases

@@ -2,19 +2,24 @@
 
 VERSION=`git describe --tags`
 
+if [ ! -d ../WebApp-Releases ]; then
+  echo "Making new Releases Directory"
+  mkdir ../WebApp-Releases
+fi
+
 echo "Building releases for $VERSION"
 
 echo "Building Prod Release..."
 
 ng build --prod
 
-tar -czf ../LocalLoop-Web-prod-$VERSION.tar.gz dist
+tar -czf ../WebApp-Releases/LocalLoop-Web-prod-$VERSION.tar.gz dist
 
 echo "Building Dev Release..."
 
 ng build --dev
 
-tar -cvzf ../LocalLoop-Web-dev-$VERSION.tar.gz dist
+tar -czf ../WebApp-Releases/LocalLoop-Web-dev-$VERSION.tar.gz dist
 
 echo "Cleaning up build artefacts..."
 

e2e/login.e2e-spec.ts

@@ -12,9 +12,9 @@ describe('Login Page', () => {
     expect(page.getLoginHeaderText()).toEqual('Login');
   });
 
-  it('should have a username box of type text', () => {
+  it('should have a username box of type email', () => {
     expect(page.isUsernameFieldPresent()).toBeTruthy();
-    expect(page.getUsernameFieldType()).toBe('text');
+    expect(page.getUsernameFieldType()).toEqual('email');
   });
 
   it('should have a password box of type password', () => {

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "localloop-web",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -9,6 +9,11 @@
       "resolved": "https://registry.npmjs.org/@agm/core/-/core-1.0.0-beta.1.tgz",
       "integrity": "sha512-IVwQGmcaE42SmYY2e5QwqOC0vrSXZCW8BhATY0Vpy3NjbiydSXi9T81hVqKLvuKaB3ves1sv3W++SB1Wj+5B6A=="
     },
+    "@agm/js-marker-clusterer": {
+      "version": "1.0.0-beta.2",
+      "resolved": "https://registry.npmjs.org/@agm/js-marker-clusterer/-/js-marker-clusterer-1.0.0-beta.2.tgz",
+      "integrity": "sha512-sQzNo+2NwjgVAiy/AU3deYvemoH3CHtYvh+aH/3jq9yIK+2ZiuwhZ2oKmoBsVPEMzLjOqF07FhDLowrAAZfVRw=="
+    },
     "@angular-devkit/build-optimizer": {
       "version": "0.0.13",
       "resolved": "https://registry.npmjs.org/@angular-devkit/build-optimizer/-/build-optimizer-0.0.13.tgz",
@@ -4650,6 +4655,11 @@
       "integrity": "sha1-8OgK4DmkvWVLXygfyT8EqRSn/M4=",
       "dev": true
     },
+    "js-marker-clusterer": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/js-marker-clusterer/-/js-marker-clusterer-1.0.0.tgz",
+      "integrity": "sha1-yUvoWuiJaBnlHBMfiR3StVVY3Rc="
+    },
     "js-tokens": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "localloop-web",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "LocalLoop Web - Web interface for LocalLoop app",
   "author": "",
   "url": "http://www.peartrade.org",
@@ -19,6 +19,7 @@
   "private": true,
   "dependencies": {
     "@agm/core": "^1.0.0-beta.1",
+    "@agm/js-marker-clusterer": "^1.0.0-beta.2",
     "@angular/common": "4.0.3",
     "@angular/compiler": "4.0.3",
     "@angular/core": "4.0.3",
@@ -32,6 +33,7 @@
     "angular-in-memory-web-api": "^0.3.1",
     "chart.js": "2.5.0",
     "core-js": "2.4.1",
+    "js-marker-clusterer": "^1.0.0",
     "moment": "^2.18.1",
     "ng2-charts": "1.6.0",
     "ng2-validation-manager": "^0.3.1",

src/app/auth/login.component.html

@@ -10,7 +10,7 @@
                 <form [formGroup]="signin" (ngSubmit)="onSubmit()">
                   <div class="input-group mb-3">
                     <span class="input-group-addon">@</span>
-                    <input id="username" type="text" class="form-control" formControlName="email" placeholder="Email">
+                    <input id="username" type="email" class="form-control" formControlName="email" placeholder="Email">
                   </div>
                   <div class="input-group mb-4">
                     <span class="input-group-addon"><i class="icon-lock"></i></span>
@@ -31,8 +31,9 @@
                       <button type="submit" [disabled]="!signin.valid" class="btn btn-primary px-4">Login</button>
                     </div>
                     <div class="col-6 text-right">
-                      <button type="button" class="btn btn-link px-0">Forgot password?</button>
+                      <button type="button" class="btn btn-link px-0" disabled>Forgot password?</button>
                     </div>
+                    <label class="col-12"><strong>Password reset is currently in development and disabled in testing, please contact an administrator to reset your password.</strong></label>
                   </div>
                 </form>
             </div>

src/app/auth/register.component.html

@@ -40,7 +40,7 @@
 				<span class="input-group-addon"><i class="icon-people"></i></span>
           <select required class="form-control" type="text" formControlName="usertype">
             <option value=''>Please select</option>
-            <option value='organisation'>Organisation</option>
+            <option value='organisation'>Business/Organisation</option>
             <option value='customer'>Customer</option>
           </select>
       </div>

src/app/dashboard/add-data.component.html

@@ -31,7 +31,7 @@
               <span class="help-block">Enter the name of the organisation money was spent. Choose existing ones from below or if not found, enter the details below.</span>
             </div>
           </div>
-          <org-table *ngIf="storeList != null" [orgList]="storeList" (onClick)="addStore($event)"></org-table>
+          <org-table *ngIf="storeList.length > 0" [orgList]="storeList" (onClick)="addStore($event)"></org-table>
           <div *ngIf="showAddStore">
             <div class="form-group row">
               <label class="col-md-3 form-control-label" for="text-input"><strong>Organisation Street Name</strong></label>

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;

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,

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' },
+        data: { title: 'Purchase Map' },
-        canActivate: [OrgGuard],
       },
       {
         path: 'payroll-log',

src/app/dashboard/leaderboard.component.html

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

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

src/app/dashboard/map.component.html

@@ -3,7 +3,7 @@
     <div class="col-lg-12">
       <div class="card">
         <div class="card-header">
-          <strong>Supplier Map</strong>
+          <strong>Purchase Map</strong>
           <small>Required Data marked in <strong>bold</strong>.</small>
         </div>
         <div [ngSwitch]="dataReceived">
@@ -22,6 +22,7 @@
               [zoom]="zoom"
               [scaleControl]="true"
               (idle)="viewBoundsChanged($event)">
+              <agm-marker-cluster maxZoom="13" imagePath="https://raw.githubusercontent.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m">
                 <agm-marker
                     *ngFor="let m of markers"
                     [latitude]="m.latitude"
@@ -32,6 +33,7 @@
                     <strong>{{m.name}}</strong>
                   </agm-info-window>
                 </agm-marker>
+              </agm-marker-cluster>
             </agm-map>
           </div>
         </div>

src/app/layouts/full-layout.component.html

@@ -40,9 +40,14 @@
             <i class="icon-envelope-letter"></i> Enter Feedback
           </a>
         </li>
-        <li  *ngIf="accountType == 'organisation'" class="nav-item">
+        <li class="nav-item">
           <a class="nav-link" routerLinkActive="active" [routerLink]="['/map']">
-            <i class="icon-map"></i> Supplier Map
+            <i class="icon-map"></i> Purchase Map
+          </a>
+        </li>
+        <li *ngIf="accountType == 'customer'" class="nav-item">
+          <a class="nav-link" routerLinkActive="active" [routerLink]="['/leaderboard']">
+            <i class="icon-basket"></i> Leaderboard
           </a>
         </li>
         <li class="nav-item">

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

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

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

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