Map page added with map
This commit is contained in:
parent
67bb904770
commit
40bd7459b5
6 changed files with 70 additions and 0 deletions
|
@ -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,
|
||||||
|
|
|
@ -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,
|
||||||
|
|
19
src/app/dashboard/map.component.html
Normal file
19
src/app/dashboard/map.component.html
Normal 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>
|
24
src/app/dashboard/map.component.ts
Normal file
24
src/app/dashboard/map.component.ts
Normal 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 {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -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
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Reference in a new issue