Pear-Trading/FoodLoop-Web
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

fixed modals to use new endpoint and scrapped old pages

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/app/dashboard/dashboard.module.ts
View file

@ -21,7 +21,6 @@ import { PayrollLogComponent } from './payroll-log.component';
import { LeaderboardComponent } from './leaderboard.component';
import { MapComponent } from './map.component';
import { TrailMapComponent } from './trail-map.component';
import { TrailMapComponent2 } from './trail-map-2.component';
import { GraphWidget } from '../widgets/graph-widget.component';
import { OrgBarSnippetComponent } from '../snippets/org-snippet-bar.component';
@ -69,7 +68,6 @@ import { environment } from '../../environments/environment';
LeaderboardResultComponent,
MapComponent,
TrailMapComponent,
TrailMapComponent2,
FeedbackComponent,
GraphWidget,
OrgBarSnippetComponent,

6
src/app/dashboard/dashboard.routing.ts
View file

@ -16,7 +16,6 @@ import { PayrollLogComponent } from './payroll-log.component';
import { LeaderboardComponent } from './leaderboard.component';
import { MapComponent } from './map.component';
import { TrailMapComponent } from './trail-map.component';
import { TrailMapComponent2 } from './trail-map-2.component';
// Using child path to allow for FullLayout theming
const routes: Routes = [
@ -69,11 +68,6 @@ const routes: Routes = [
component: TrailMapComponent,
data: { title: 'Story Trail' },
},
{
path: 'story-trail-2',
component: TrailMapComponent2,
data: { title: 'Story Trail 2' },
},
{
path: 'payroll-log',
component: PayrollLogComponent,

2
src/app/dashboard/map.component.ts
View file

@ -52,7 +52,7 @@ export class MapComponent implements OnInit {
this.markers = result.suppliers;
},
error => {
// this.dataReceived = 'no';
this.dataReceived = 'no';
console.log('Retrieval Error');
console.log( error._body );
}

52
src/app/dashboard/trail-map-2.component.html
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>

79
src/app/dashboard/trail-map-2.component.ts
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 );
}
);
}
}

26
src/app/dashboard/trail-map.component.html
View file

@ -27,18 +27,26 @@
*ngFor="let m of markers"
[iconUrl]="'/assets/img/map-pin-lis.png'"
[latitude]="m.latitude"
[longitude]="m.longitude">
<agm-snazzy-info-window
[maxWidth]="500"
[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>
[longitude]="m.longitude"
[openInfoWindow]="false"
(markerClick)="onMarkerClick(m, template)">
</agm-marker>
</agm-marker-cluster>
</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>

25
src/app/dashboard/trail-map.component.ts
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 { 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({
@ -11,6 +13,8 @@ export class TrailMapComponent implements OnInit {
lat: number = 54.0466;
lng: number = -2.8007;
zoom: number = 12;
public modalRef: BsModalRef;
clickedMarker: any;
dataReceived: string = 'yes';
@ -20,7 +24,8 @@ export class TrailMapComponent implements OnInit {
constructor(
private api: ApiService,
) { }
private modalService: BsModalService,
) {}
ngOnInit(): void { }
@ -28,6 +33,16 @@ export class TrailMapComponent implements OnInit {
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();
@ -46,13 +61,13 @@ export class TrailMapComponent implements OnInit {
longitude: resp.getSouthWest().lng()
},
}
this.api.getMapData(mapData).subscribe(
this.api.getLisData(mapData).subscribe(
result => {
this.dataReceived = 'yes';
this.markers = result.suppliers;
this.markers = result.locations;
},
error => {
// this.dataReceived = 'no';
this.dataReceived = 'no';
console.log('Retrieval Error');
console.log( error._body );
}

5
src/app/layouts/full-layout.component.html
View file

@ -50,11 +50,6 @@
<i class="icon-map"></i> Story Trail
</a>
</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">
<a class="nav-link" routerLinkActive="active" [routerLink]="['/leaderboard']">
<i class="icon-basket"></i> Leaderboard

9
src/app/providers/api-service.ts
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
public basicStats() {
const key = this.sessionKey;

BIN
src/assets/img/lis_logo.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 260 KiB

4
src/scss/_custom.scss
View file

@ -20,6 +20,10 @@ agm-map {
height: 75vh;
}
.w-15 {
width: 15%;
}
// white title font variant on type-2 as defined in _widgets.css
.horizontal-bars {
padding: 0;