Map page added with map

This commit is contained in:
piratefinn 2017-09-26 17:31:40 +01:00
parent 67bb904770
commit 40bd7459b5
6 changed files with 70 additions and 0 deletions

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 } 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,6 +55,7 @@ import { PayrollResultComponent } from '../shared/payroll-result.component';
TransactionResultComponent, TransactionResultComponent,
PayrollLogComponent, PayrollLogComponent,
PayrollResultComponent, PayrollResultComponent,
MapComponent,
FeedbackComponent, FeedbackComponent,
GraphWidget, GraphWidget,
OrgBarSnippetComponent, OrgBarSnippetComponent,

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,19 @@
<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 class="card-block">
<!-- 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 [latitude]="lat" [longitude]="lng">
<agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
</agm-map>
</div>
</div>
</div>
</div><!--/.row-->
</div>

View file

@ -0,0 +1,24 @@
import { Component, OnInit } 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;
constructor(
private http: Http,
private api: ApiService,
) { }
ngOnInit(): void {
}
}

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-envelope-letter"></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

@ -14,6 +14,12 @@
background-color: #0f81a8; background-color: #0f81a8;
color: #e8ebed; color: #e8ebed;
} }
// Map styling
agm-map {
height: 300px;
}
// 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;