fixed modals to use new endpoint and scrapped old pages

This commit is contained in:
piratefinn 2017-11-23 17:16:46 +00:00
parent 7843a87fd6
commit 4a331a3475
11 changed files with 51 additions and 159 deletions

View file

@ -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,

View file

@ -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,

View file

@ -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 );
} }

View file

@ -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">&times;</span>
</button>
</div>
<div class="modal-body">
This is a modal.
</div>
</ng-template>
</div>
</div>
</div>
</div>
</div><!--/.row-->
</div>

View file

@ -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 );
}
);
}
}

View file

@ -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">&times;</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>

View file

@ -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,7 +24,8 @@ 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 );
} }

View file

@ -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

View file

@ -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

Binary file not shown.

After

Width:  |  Height:  |  Size: 260 KiB

View file

@ -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;