fixed modals to use new endpoint and scrapped old pages

src/app/dashboard/dashboard.module.ts

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

src/app/dashboard/dashboard.routing.ts

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

src/app/dashboard/map.component.ts

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

src/app/dashboard/trail-map-2.component.html

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

src/app/dashboard/trail-map-2.component.ts

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

src/app/dashboard/trail-map.component.html

@@ -27,18 +27,26 @@
                     *ngFor="let m of markers"
                     [iconUrl]="'/assets/img/map-pin-lis.png'"
                     [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-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>

src/app/dashboard/trail-map.component.ts

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

src/app/layouts/full-layout.component.html

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

src/app/providers/api-service.ts

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

src/scss/_custom.scss

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