test page added
This commit is contained in:
parent
c85602f6e8
commit
83bc98ece5
5 changed files with 124 additions and 0 deletions
|
@ -20,6 +20,7 @@ import { PayrollLogComponent } from './payroll-log.component';
|
|||
import { LeaderboardComponent } from './leaderboard.component';
|
||||
import { MapComponent } from './map.component';
|
||||
import { TrailMapComponent } from './trail-map.component';
|
||||
import { TrailMapComponent2 } from './trail-map-2.component';
|
||||
|
||||
import { GraphWidget } from '../widgets/graph-widget.component';
|
||||
import { OrgBarSnippetComponent } from '../snippets/org-snippet-bar.component';
|
||||
|
@ -66,6 +67,7 @@ import { environment } from '../../environments/environment';
|
|||
LeaderboardResultComponent,
|
||||
MapComponent,
|
||||
TrailMapComponent,
|
||||
TrailMapComponent2,
|
||||
FeedbackComponent,
|
||||
GraphWidget,
|
||||
OrgBarSnippetComponent,
|
||||
|
|
|
@ -16,6 +16,7 @@ import { PayrollLogComponent } from './payroll-log.component';
|
|||
import { LeaderboardComponent } from './leaderboard.component';
|
||||
import { MapComponent } from './map.component';
|
||||
import { TrailMapComponent } from './trail-map.component';
|
||||
import { TrailMapComponent2 } from './trail-map-2.component';
|
||||
|
||||
// Using child path to allow for FullLayout theming
|
||||
const routes: Routes = [
|
||||
|
@ -68,6 +69,11 @@ const routes: Routes = [
|
|||
component: TrailMapComponent,
|
||||
data: { title: 'Story Trail' },
|
||||
},
|
||||
{
|
||||
path: 'story-trail-2',
|
||||
component: TrailMapComponent2,
|
||||
data: { title: 'Story Trail 2' },
|
||||
},
|
||||
{
|
||||
path: 'payroll-log',
|
||||
component: PayrollLogComponent,
|
||||
|
|
41
src/app/dashboard/trail-map-2.component.html
Normal file
41
src/app/dashboard/trail-map-2.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>Purchase 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-cluster maxZoom="13" imagePath="https://raw.githubusercontent.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m">
|
||||
<agm-marker
|
||||
*ngFor="let m of markers"
|
||||
[iconUrl]="'/assets/img/map-pin-lis.png'"
|
||||
[latitude]="m.latitude"
|
||||
[longitude]="m.longitude"
|
||||
[openInfoWindow]="false"
|
||||
(markerClick)="onMarkerClick($event)">
|
||||
</agm-marker>
|
||||
</agm-marker-cluster>
|
||||
</agm-map>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.row-->
|
||||
</div>
|
70
src/app/dashboard/trail-map-2.component.ts
Normal file
70
src/app/dashboard/trail-map-2.component.ts
Normal file
|
@ -0,0 +1,70 @@
|
|||
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: 'trail-map-2.component.html',
|
||||
})
|
||||
export class TrailMapComponent2 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 onMarkerClick() {
|
||||
|
||||
}
|
||||
|
||||
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 );
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
|
@ -50,6 +50,11 @@
|
|||
<i class="icon-map"></i> Story Trail
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" routerLinkActive="active" [routerLink]="['/story-trail-2']">
|
||||
<i class="icon-map"></i> Story Trail 2
|
||||
</a>
|
||||
</li>
|
||||
<li *ngIf="accountType == 'customer'" class="nav-item">
|
||||
<a class="nav-link" routerLinkActive="active" [routerLink]="['/leaderboard']">
|
||||
<i class="icon-basket"></i> Leaderboard
|
||||
|
|
Reference in a new issue