Merge pull request #22 from Pear-Trading/TBSliver/Maps
Added map for suppliers to trader portal
This commit is contained in:
commit
e82c12d265
15 changed files with 168 additions and 12 deletions
|
@ -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
3
.gitignore
vendored
|
@ -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
|
||||||
|
|
|
@ -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
9
package-lock.json
generated
|
@ -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",
|
||||||
|
|
|
@ -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",
|
||||||
|
|
|
@ -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 { }
|
||||||
|
|
|
@ -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,
|
||||||
|
|
41
src/app/dashboard/map.component.html
Normal file
41
src/app/dashboard/map.component.html
Normal 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>
|
66
src/app/dashboard/map.component.ts
Normal file
66
src/app/dashboard/map.component.ts
Normal 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 );
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
|
@ -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
|
||||||
|
|
|
@ -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;
|
||||||
|
|
2
src/environments/environment.ci.ts.enc
Normal file
2
src/environments/environment.ci.ts.enc
Normal file
|
@ -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
|
|
@ -1,4 +0,0 @@
|
||||||
export const environment = {
|
|
||||||
production: true,
|
|
||||||
apiUrl: 'https://app.peartrade.org/api'
|
|
||||||
};
|
|
|
@ -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',
|
||||||
};
|
};
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Reference in a new issue