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

Added map for suppliers to trader portal
This commit is contained in:
Tom Bloor 2017-09-28 14:23:37 +01:00 committed by GitHub
commit e82c12d265
15 changed files with 168 additions and 12 deletions

View file

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

3
.gitignore vendored
View file

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

View file

@ -3,6 +3,8 @@ addons:
language: node_js language: node_js
node_js: node_js:
- 8 - 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: before_script:
- export DISPLAY=:99.0 - export DISPLAY=:99.0
- sh -e /etc/init.d/xvfb start - sh -e /etc/init.d/xvfb start

9
package-lock.json generated
View file

@ -1,9 +1,14 @@
{ {
"name": "coreui-angular", "name": "localloop-web",
"version": "1.0.0-alpha.5", "version": "0.0.1",
"lockfileVersion": 1, "lockfileVersion": 1,
"requires": true, "requires": true,
"dependencies": { "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": { "@angular-devkit/build-optimizer": {
"version": "0.0.13", "version": "0.0.13",
"resolved": "https://registry.npmjs.org/@angular-devkit/build-optimizer/-/build-optimizer-0.0.13.tgz", "resolved": "https://registry.npmjs.org/@angular-devkit/build-optimizer/-/build-optimizer-0.0.13.tgz",

View file

@ -10,13 +10,15 @@
"start": "ng serve", "start": "ng serve",
"build": "ng build", "build": "ng build",
"test": "ng test", "test": "ng test",
"test:once": "ng test --watch=false", "test:ci": "ng test --watch=false --env=ci",
"lint": "ng lint", "lint": "ng lint",
"e2e": "ng e2e", "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, "private": true,
"dependencies": { "dependencies": {
"@agm/core": "^1.0.0-beta.1",
"@angular/common": "4.0.3", "@angular/common": "4.0.3",
"@angular/compiler": "4.0.3", "@angular/compiler": "4.0.3",
"@angular/core": "4.0.3", "@angular/core": "4.0.3",

View file

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

View file

@ -13,6 +13,7 @@ import { AddDataComponent } from './add-data.component';
import { FeedbackComponent } from './feedback.component'; import { FeedbackComponent } from './feedback.component';
import { TransactionLogComponent } from './transaction-log.component'; import { TransactionLogComponent } from './transaction-log.component';
import { PayrollLogComponent } from './payroll-log.component'; import { PayrollLogComponent } from './payroll-log.component';
import { MapComponent } from './map.component';
// Using child path to allow for FullLayout theming // Using child path to allow for FullLayout theming
const routes: Routes = [ const routes: Routes = [
@ -49,6 +50,12 @@ const routes: Routes = [
component: TransactionLogComponent, component: TransactionLogComponent,
data: { title: 'Transaction Log' }, data: { title: 'Transaction Log' },
}, },
{
path: 'map',
component: MapComponent,
data: { title: 'Supplier Map' },
canActivate: [OrgGuard],
},
{ {
path: 'payroll-log', path: 'payroll-log',
component: PayrollLogComponent, component: PayrollLogComponent,

View file

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

View file

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

View file

@ -40,6 +40,11 @@
<i class="icon-envelope-letter"></i> Enter Feedback <i class="icon-envelope-letter"></i> Enter Feedback
</a> </a>
</li> </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"> <li class="nav-item">
<a class="nav-link" routerLinkActive="active" [routerLink]="['/transaction-log']"> <a class="nav-link" routerLinkActive="active" [routerLink]="['/transaction-log']">
<i class="icon-basket"></i> Transaction Log <i class="icon-basket"></i> Transaction Log

View file

@ -264,6 +264,15 @@ export class ApiService {
).map( response => response.json() ); ).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 // Basic Customer User stats API
public basicStats() { public basicStats() {
const key = this.sessionKey; const key = this.sessionKey;

View file

@ -0,0 +1,2 @@
ײֶ<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><32>~הג/,אd¡×זLֲ”P<05>¢>S L

View file

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

View file

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

View file

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