fixed modals to use new endpoint and scrapped old pages
This commit is contained in:
parent
f261fce7f5
commit
fdd14c2fae
11 changed files with 51 additions and 159 deletions
|
@ -21,7 +21,6 @@ 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 { TrailMapComponent } from './trail-map.component';
|
||||||
import { TrailMapComponent2 } from './trail-map-2.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';
|
||||||
|
@ -69,7 +68,6 @@ import { environment } from '../../environments/environment';
|
||||||
LeaderboardResultComponent,
|
LeaderboardResultComponent,
|
||||||
MapComponent,
|
MapComponent,
|
||||||
TrailMapComponent,
|
TrailMapComponent,
|
||||||
TrailMapComponent2,
|
|
||||||
FeedbackComponent,
|
FeedbackComponent,
|
||||||
GraphWidget,
|
GraphWidget,
|
||||||
OrgBarSnippetComponent,
|
OrgBarSnippetComponent,
|
||||||
|
|
|
@ -16,7 +16,6 @@ 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 { TrailMapComponent } from './trail-map.component';
|
||||||
import { TrailMapComponent2 } from './trail-map-2.component';
|
|
||||||
|
|
||||||
// Using child path to allow for FullLayout theming
|
// Using child path to allow for FullLayout theming
|
||||||
const routes: Routes = [
|
const routes: Routes = [
|
||||||
|
@ -69,11 +68,6 @@ const routes: Routes = [
|
||||||
component: TrailMapComponent,
|
component: TrailMapComponent,
|
||||||
data: { title: 'Story Trail' },
|
data: { title: 'Story Trail' },
|
||||||
},
|
},
|
||||||
{
|
|
||||||
path: 'story-trail-2',
|
|
||||||
component: TrailMapComponent2,
|
|
||||||
data: { title: 'Story Trail 2' },
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
path: 'payroll-log',
|
path: 'payroll-log',
|
||||||
component: PayrollLogComponent,
|
component: PayrollLogComponent,
|
||||||
|
|
|
@ -52,7 +52,7 @@ export class MapComponent implements OnInit {
|
||||||
this.markers = result.suppliers;
|
this.markers = result.suppliers;
|
||||||
},
|
},
|
||||||
error => {
|
error => {
|
||||||
// this.dataReceived = 'no';
|
this.dataReceived = 'no';
|
||||||
console.log('Retrieval Error');
|
console.log('Retrieval Error');
|
||||||
console.log( error._body );
|
console.log( error._body );
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,52 +0,0 @@
|
||||||
<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(m, template)">
|
|
||||||
</agm-marker>
|
|
||||||
</agm-marker-cluster>
|
|
||||||
</agm-map>
|
|
||||||
<ng-template #template>
|
|
||||||
<div class="modal-header">
|
|
||||||
<h4 class="modal-title pull-left">{{clickedMarker.name}}</h4>
|
|
||||||
<button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
|
|
||||||
<span aria-hidden="true">×</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="modal-body">
|
|
||||||
This is a modal.
|
|
||||||
</div>
|
|
||||||
</ng-template>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div><!--/.row-->
|
|
||||||
</div>
|
|
|
@ -1,79 +0,0 @@
|
||||||
import { Component, OnInit, Input, Output, EventEmitter, TemplateRef } from '@angular/core';
|
|
||||||
import { ApiService } from '../providers/api-service';
|
|
||||||
import { AgmCoreModule } from '@agm/core';
|
|
||||||
import { BsModalService } from 'ngx-bootstrap/modal';
|
|
||||||
import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';
|
|
||||||
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;
|
|
||||||
public modalRef: BsModalRef;
|
|
||||||
clickedMarker: any;
|
|
||||||
|
|
||||||
dataReceived: string = 'yes';
|
|
||||||
|
|
||||||
markers: Array<{latitude: number, longitude: number, name: string}>;
|
|
||||||
|
|
||||||
map: any;
|
|
||||||
|
|
||||||
constructor(
|
|
||||||
private api: ApiService,
|
|
||||||
private modalService: BsModalService,
|
|
||||||
) {}
|
|
||||||
|
|
||||||
ngOnInit(): void { }
|
|
||||||
|
|
||||||
public onMapReady(map: any) {
|
|
||||||
this.map = map;
|
|
||||||
}
|
|
||||||
|
|
||||||
openModal(template: TemplateRef<any>) {
|
|
||||||
this.modalRef = this.modalService.show(template);
|
|
||||||
}
|
|
||||||
|
|
||||||
public onMarkerClick(clickedMarker, template: TemplateRef<any>) {
|
|
||||||
console.log(clickedMarker);
|
|
||||||
this.clickedMarker = clickedMarker;
|
|
||||||
this.openModal(template);
|
|
||||||
}
|
|
||||||
|
|
||||||
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 );
|
|
||||||
}
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
|
@ -27,18 +27,26 @@
|
||||||
*ngFor="let m of markers"
|
*ngFor="let m of markers"
|
||||||
[iconUrl]="'/assets/img/map-pin-lis.png'"
|
[iconUrl]="'/assets/img/map-pin-lis.png'"
|
||||||
[latitude]="m.latitude"
|
[latitude]="m.latitude"
|
||||||
[longitude]="m.longitude">
|
[longitude]="m.longitude"
|
||||||
<agm-snazzy-info-window
|
[openInfoWindow]="false"
|
||||||
[maxWidth]="500"
|
(markerClick)="onMarkerClick(m, template)">
|
||||||
[closeWhenOthersOpen]="true">
|
|
||||||
<ng-template>
|
|
||||||
<h4><strong>{{m.name}}</strong></h4>
|
|
||||||
<img src="assets/img/avatars/default.png" class="img-avatar" alt="avatar-image">
|
|
||||||
</ng-template>
|
|
||||||
</agm-snazzy-info-window>
|
|
||||||
</agm-marker>
|
</agm-marker>
|
||||||
</agm-marker-cluster>
|
</agm-marker-cluster>
|
||||||
</agm-map>
|
</agm-map>
|
||||||
|
<ng-template #template>
|
||||||
|
<div class="modal-header d-flex justify-content-between">
|
||||||
|
<img src="assets/img/lis_logo.png" class="w-15" alt="lis logo"><h4 class="modal-title">{{clickedMarker.name}}</h4>
|
||||||
|
<button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
|
||||||
|
<span aria-hidden="true">×</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body text-right">
|
||||||
|
<h5>Located at:</h5>
|
||||||
|
<h6>{{clickedMarker.street_name}}</h6>
|
||||||
|
<h6>{{clickedMarker.town}}</h6>
|
||||||
|
<h6>{{clickedMarker.postcode}}</h6>
|
||||||
|
</div>
|
||||||
|
</ng-template>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,6 +1,8 @@
|
||||||
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
|
import { Component, OnInit, Input, Output, EventEmitter, TemplateRef } from '@angular/core';
|
||||||
import { ApiService } from '../providers/api-service';
|
import { ApiService } from '../providers/api-service';
|
||||||
import { AgmCoreModule } from '@agm/core';
|
import { AgmCoreModule } from '@agm/core';
|
||||||
|
import { BsModalService } from 'ngx-bootstrap/modal';
|
||||||
|
import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';
|
||||||
import 'rxjs/add/operator/map';
|
import 'rxjs/add/operator/map';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
|
@ -11,6 +13,8 @@ export class TrailMapComponent implements OnInit {
|
||||||
lat: number = 54.0466;
|
lat: number = 54.0466;
|
||||||
lng: number = -2.8007;
|
lng: number = -2.8007;
|
||||||
zoom: number = 12;
|
zoom: number = 12;
|
||||||
|
public modalRef: BsModalRef;
|
||||||
|
clickedMarker: any;
|
||||||
|
|
||||||
dataReceived: string = 'yes';
|
dataReceived: string = 'yes';
|
||||||
|
|
||||||
|
@ -20,6 +24,7 @@ export class TrailMapComponent implements OnInit {
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
private api: ApiService,
|
private api: ApiService,
|
||||||
|
private modalService: BsModalService,
|
||||||
) {}
|
) {}
|
||||||
|
|
||||||
ngOnInit(): void { }
|
ngOnInit(): void { }
|
||||||
|
@ -28,6 +33,16 @@ export class TrailMapComponent implements OnInit {
|
||||||
this.map = map;
|
this.map = map;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
openModal(template: TemplateRef<any>) {
|
||||||
|
this.modalRef = this.modalService.show(template);
|
||||||
|
}
|
||||||
|
|
||||||
|
public onMarkerClick(clickedMarker, template: TemplateRef<any>) {
|
||||||
|
console.log(clickedMarker);
|
||||||
|
this.clickedMarker = clickedMarker;
|
||||||
|
this.openModal(template);
|
||||||
|
}
|
||||||
|
|
||||||
public viewBoundsChanged() {
|
public viewBoundsChanged() {
|
||||||
console.log("finding bounds");
|
console.log("finding bounds");
|
||||||
const resp = this.map.getBounds();
|
const resp = this.map.getBounds();
|
||||||
|
@ -46,13 +61,13 @@ export class TrailMapComponent implements OnInit {
|
||||||
longitude: resp.getSouthWest().lng()
|
longitude: resp.getSouthWest().lng()
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
this.api.getMapData(mapData).subscribe(
|
this.api.getLisData(mapData).subscribe(
|
||||||
result => {
|
result => {
|
||||||
this.dataReceived = 'yes';
|
this.dataReceived = 'yes';
|
||||||
this.markers = result.suppliers;
|
this.markers = result.locations;
|
||||||
},
|
},
|
||||||
error => {
|
error => {
|
||||||
// this.dataReceived = 'no';
|
this.dataReceived = 'no';
|
||||||
console.log('Retrieval Error');
|
console.log('Retrieval Error');
|
||||||
console.log( error._body );
|
console.log( error._body );
|
||||||
}
|
}
|
||||||
|
|
|
@ -50,11 +50,6 @@
|
||||||
<i class="icon-map"></i> Story Trail
|
<i class="icon-map"></i> Story Trail
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</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">
|
<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
|
||||||
|
|
|
@ -276,6 +276,15 @@ export class ApiService {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Load LIS Data
|
||||||
|
public getLisData(data) {
|
||||||
|
data.session_key = this.sessionKey;
|
||||||
|
return this.http.post<any>(
|
||||||
|
this.apiUrl + '/v1/supplier/location/lis',
|
||||||
|
data
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
// Basic Customer User stats API
|
// Basic Customer User stats API
|
||||||
public basicStats() {
|
public basicStats() {
|
||||||
const key = this.sessionKey;
|
const key = this.sessionKey;
|
||||||
|
|
BIN
src/assets/img/lis_logo.png
Normal file
BIN
src/assets/img/lis_logo.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 260 KiB |
|
@ -20,6 +20,10 @@ agm-map {
|
||||||
height: 75vh;
|
height: 75vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.w-15 {
|
||||||
|
width: 15%;
|
||||||
|
}
|
||||||
|
|
||||||
// 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