Initial commit with modules and routing

This commit is contained in:
piratefinn 2017-11-14 12:47:28 +00:00
parent cc38618b03
commit 5af0e1e35c
5 changed files with 122 additions and 0 deletions

View file

@ -18,6 +18,7 @@ import { TransactionLogComponent } from './transaction-log.component';
import { PayrollLogComponent } from './payroll-log.component'; import { PayrollLogComponent } from './payroll-log.component';
import { LeaderboardComponent } from './leaderboard.component'; import { LeaderboardComponent } from './leaderboard.component';
import { MapComponent } from './map.component'; import { MapComponent } from './map.component';
import { TrailMapComponent } from './trail-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';
@ -62,6 +63,7 @@ import { environment } from '../../environments/environment';
LeaderboardComponent, LeaderboardComponent,
LeaderboardResultComponent, LeaderboardResultComponent,
MapComponent, MapComponent,
TrailMapComponent,
FeedbackComponent, FeedbackComponent,
GraphWidget, GraphWidget,
OrgBarSnippetComponent, OrgBarSnippetComponent,

View file

@ -15,6 +15,7 @@ import { TransactionLogComponent } from './transaction-log.component';
import { PayrollLogComponent } from './payroll-log.component'; import { PayrollLogComponent } from './payroll-log.component';
import { LeaderboardComponent } from './leaderboard.component'; import { LeaderboardComponent } from './leaderboard.component';
import { MapComponent } from './map.component'; import { MapComponent } from './map.component';
import { TrailMapComponent } from './trail-map.component';
// Using child path to allow for FullLayout theming // Using child path to allow for FullLayout theming
const routes: Routes = [ const routes: Routes = [
@ -62,6 +63,11 @@ const routes: Routes = [
component: MapComponent, component: MapComponent,
data: { title: 'Purchase Map' }, data: { title: 'Purchase Map' },
}, },
{
path: 'story-trail',
component: TrailMapComponent,
data: { title: 'Story Trail' },
},
{ {
path: 'payroll-log', path: 'payroll-log',
component: PayrollLogComponent, component: PayrollLogComponent,

View file

@ -0,0 +1,43 @@
<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"
[latitude]="m.latitude"
[longitude]="m.longitude"
[label]="m.name[0]">
<agm-info-window>
<strong>{{m.name}}</strong>
</agm-info-window>
</agm-marker>
</agm-marker-cluster>
</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 TrailMapComponent 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

@ -45,6 +45,11 @@
<i class="icon-map"></i> Purchase Map <i class="icon-map"></i> Purchase Map
</a> </a>
</li> </li>
<li class="nav-item">
<a class="nav-link" routerLinkActive="active" [routerLink]="['/story-trail']">
<i class="icon-map"></i> Story Trail
</a>
</li>
<li *ngIf="accountType == 'customer'" class="nav-item"> <li *ngIf="accountType == 'customer'" class="nav-item">
<a class="nav-link" routerLinkActive="active" [routerLink]="['/leaderboard']"> <a class="nav-link" routerLinkActive="active" [routerLink]="['/leaderboard']">
<i class="icon-basket"></i> Leaderboard <i class="icon-basket"></i> Leaderboard