Merge pull request #22 from Pear-Trading/TBSliver/Maps

Added map for suppliers to trader portal

.angular-cli.json

@@ -24,9 +24,10 @@
       ],
       "environmentSource": "environments/environment.ts",
       "environments": {
-        "dev": "environments/environment.ts",
+        "dev": "environments/environment.dev.ts",
         "prod": "environments/environment.prod.ts",
-        "local": "environments/environment.local.ts"
+        "local": "environments/environment.local.ts",
+        "ci": "environments/environment.ci.ts"
       }
     }
   ],

.gitignore

@@ -43,6 +43,9 @@ testem.log
 
 # local env variable
 /src/environments/environment.local.ts
+/src/environments/environment.prod.ts
+/src/environments/environment.dev.ts
+/src/environments/environment.ci.ts
 
 # =========================
 # Operating System Files

.travis.yml

@@ -3,6 +3,8 @@ addons:
 language: node_js
 node_js:
   - 8
+before_install:
+  -  openssl aes-256-cbc -K $encrypted_9d2af3734b6c_key -iv $encrypted_9d2af3734b6c_iv -in src/environments/environment.ci.ts.enc -out src/environments/environment.ci.ts -d
 before_script:
   - export DISPLAY=:99.0
   - sh -e /etc/init.d/xvfb start

package-lock.json

@@ -1,9 +1,14 @@
 {
-  "name": "coreui-angular",
+  "name": "localloop-web",
-  "version": "1.0.0-alpha.5",
+  "version": "0.0.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
+    "@agm/core": {
+      "version": "1.0.0-beta.1",
+      "resolved": "https://registry.npmjs.org/@agm/core/-/core-1.0.0-beta.1.tgz",
+      "integrity": "sha512-IVwQGmcaE42SmYY2e5QwqOC0vrSXZCW8BhATY0Vpy3NjbiydSXi9T81hVqKLvuKaB3ves1sv3W++SB1Wj+5B6A=="
+    },
     "@angular-devkit/build-optimizer": {
       "version": "0.0.13",
       "resolved": "https://registry.npmjs.org/@angular-devkit/build-optimizer/-/build-optimizer-0.0.13.tgz",

package.json

@@ -10,13 +10,15 @@
     "start": "ng serve",
     "build": "ng build",
     "test": "ng test",
-    "test:once": "ng test --watch=false",
+    "test:ci": "ng test --watch=false --env=ci",
     "lint": "ng lint",
     "e2e": "ng e2e",
-    "ci": "npm run test:once && npm run e2e"
+    "e2e:ci": "ng e2e --env=ci",
+    "ci": "npm run test:ci && npm run e2e:ci"
   },
   "private": true,
   "dependencies": {
+    "@agm/core": "^1.0.0-beta.1",
     "@angular/common": "4.0.3",
     "@angular/compiler": "4.0.3",
     "@angular/core": "4.0.3",

src/app/dashboard/dashboard.module.ts

@@ -4,6 +4,7 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 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 { CurrencyPipe } from '@angular/common';
 
@@ -14,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 { MapComponent } from './map.component';
 
 import { GraphWidget } from '../widgets/graph-widget.component';
 import { OrgBarSnippetComponent } from '../snippets/org-snippet-bar.component';
@@ -25,6 +27,9 @@ import { OrgTableComponent } from '../shared/org-table.component';
 import { TransactionResultComponent } from '../shared/transaction-result.component';
 import { PayrollResultComponent } from '../shared/payroll-result.component';
 
+// API key env variable import
+import { environment } from '../../environments/environment';
+
 @NgModule({
   imports: [
     // Angular imports
@@ -32,6 +37,9 @@ import { PayrollResultComponent } from '../shared/payroll-result.component';
     FormsModule,
     ReactiveFormsModule,
     ChartsModule,
+    AgmCoreModule.forRoot({
+      apiKey: environment.mapApiKey
+    }),
     BsDropdownModule,
     NgxPaginationModule,
     DashboardRoutingModule,
@@ -47,13 +55,15 @@ import { PayrollResultComponent } from '../shared/payroll-result.component';
     TransactionResultComponent,
     PayrollLogComponent,
     PayrollResultComponent,
+    MapComponent,
     FeedbackComponent,
     GraphWidget,
     OrgBarSnippetComponent,
     GraphPanel,
   ],
   providers: [
-    CurrencyPipe
+    CurrencyPipe,
+    GoogleMapsAPIWrapper,
   ],
 })
 export class DashboardModule { }

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 { MapComponent } from './map.component';
 
 // Using child path to allow for FullLayout theming
 const routes: Routes = [
@@ -49,6 +50,12 @@ const routes: Routes = [
         component: TransactionLogComponent,
         data: { title: 'Transaction Log' },
       },
+      {
+        path: 'map',
+        component: MapComponent,
+        data: { title: 'Supplier Map' },
+        canActivate: [OrgGuard],
+      },
       {
         path: 'payroll-log',
         component: PayrollLogComponent,

src/app/dashboard/map.component.html

@@ -0,0 +1,41 @@
+<div class="animated fadeIn">
+  <div class="row">
+    <div class="col-lg-12">
+      <div class="card">
+        <div class="card-header">
+          <strong>Supplier Map</strong>
+          <small>Required Data marked in <strong>bold</strong>.</small>
+        </div>
+        <div [ngSwitch]="dataReceived">
+          <div *ngSwitchCase="'no'"class="card-block">
+            <div class="alert alert-danger" role="alert">
+              No map data received, check your connection.
+            </div>
+          </div>
+          <div *ngSwitchCase="'yes'">
+            <!-- this creates a google map on the page with the given lat/lng from -->
+            <!-- the component as the initial center of the map: -->
+            <agm-map
+            (mapReady)="onMapReady($event)"
+              [latitude]="lat"
+              [longitude]="lng"
+              [zoom]="zoom"
+              [scaleControl]="true"
+              (idle)="viewBoundsChanged($event)">
+              <agm-marker
+                  *ngFor="let m of markers"
+                  [latitude]="m.latitude"
+                  [longitude]="m.longitude"
+                  [label]="m.name[0]">
+
+                <agm-info-window>
+                  <strong>{{m.name}}</strong>
+                </agm-info-window>
+              </agm-marker>
+            </agm-map>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div><!--/.row-->
+</div>

src/app/dashboard/map.component.ts

@@ -0,0 +1,66 @@
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { Http, Response } from '@angular/http';
+import { ApiService } from '../providers/api-service';
+import { AgmCoreModule } from '@agm/core';
+import 'rxjs/add/operator/map';
+
+@Component({
+  templateUrl: 'map.component.html',
+})
+export class MapComponent implements OnInit {
+
+  lat: number = 54.0466;
+  lng: number = -2.8007;
+  zoom: number = 12;
+
+  dataReceived: string = 'yes';
+
+  markers: Array<{latitude: number, longitude: number, name: string}>;
+
+  map: any;
+
+  constructor(
+    private http: Http,
+    private api: ApiService,
+  ) { }
+
+  ngOnInit(): void { }
+
+  public onMapReady(map: any) {
+    this.map = map;
+  }
+
+  public viewBoundsChanged() {
+    console.log("finding bounds");
+    const resp = this.map.getBounds();
+    console.log("found bounds");
+    console.log(resp.getNorthEast().lat());
+    console.log(resp.getNorthEast().lng());
+    console.log(resp.getSouthWest().lat());
+    console.log(resp.getSouthWest().lng());
+    const mapData = {
+      north_east: {
+        latitude:  resp.getNorthEast().lat(),
+        longitude: resp.getNorthEast().lng()
+      },
+      south_west: {
+        latitude:  resp.getSouthWest().lat(),
+        longitude: resp.getSouthWest().lng()
+      },
+    }
+    this.api.getMapData(mapData).subscribe(
+      result => {
+        this.dataReceived = 'yes';
+        this.markers = result.suppliers;
+      },
+      error => {
+        // this.dataReceived = 'no';
+        console.log('Retrieval Error');
+        console.log( error._body );
+      }
+    );
+  }
+
+
+
+}

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

@@ -40,6 +40,11 @@
             <i class="icon-envelope-letter"></i> Enter Feedback
           </a>
         </li>
+        <li  *ngIf="accountType == 'organisation'" 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]="['/transaction-log']">
             <i class="icon-basket"></i> Transaction Log

src/app/providers/api-service.ts

@@ -264,6 +264,15 @@ export class ApiService {
     ).map( response => response.json() );
   }
 
+  // Initial Map Data
+  public getMapData(data) {
+    data.session_key = this.sessionKey;
+    return this.http.post(
+    this.apiUrl + '/v1/supplier/location',
+    data
+    ).map( response => response.json() );
+  }
+
   // Basic Customer User stats API
   public basicStats() {
     const key = this.sessionKey;

src/environments/environment.ci.ts.enc

@@ -0,0 +1,2 @@
+ײֶgװ<67><D7B0>^• f^ױ<>jA<6A>Fמ£†ֳ
₪י$<24>אQםhֿ0<D6BF>L•+l™<6C>Dבג)9;
+@¾&;q<>ƒט ©<C2A0>׀	iEֻײץֱװ0ו#ׂ¡<D782>ְְֵ<D6B0>׳bK<62>װס<D7B0>7<EFBFBD>U¦%¸x<C2B8>_x/6m‡=P<0C>?ףq‡›¶F™A$|װײ'Aט£½b1ױ<31>2א<32>~הג/,אd¡×זLֲ”P<05>¢>SL

src/environments/environment.prod.ts

@@ -1,4 +0,0 @@
-export const environment = {
-  production: true,
-  apiUrl: 'https://app.peartrade.org/api'
-};

src/environments/environment.ts

@@ -5,5 +5,6 @@
 
 export const environment = {
   production: false,
-  apiUrl: 'https://dev.peartrade.org/api'
+  apiUrl: 'https://dev.peartrade.org/api',
+  mapApiKey: 'CHANGEME',
 };

src/scss/_custom.scss

@@ -14,6 +14,12 @@
     background-color: #0f81a8;
     color: #e8ebed;
 }
+
+// Map styling
+agm-map {
+  height: 75vh;
+}
+
 // white title font variant on type-2 as defined in _widgets.css
 .horizontal-bars {
   padding: 0;