Fixes made and info window usage revamped with modals

.angular-cli.json

@@ -20,8 +20,7 @@
         "../node_modules/moment/min/moment.min.js"
       ],
       "styles": [
-        "scss/style.scss",
+        "scss/style.scss"
-        "../node_modules/snazzy-info-window/dist/snazzy-info-window.css"
       ],
       "environmentSource": "environments/environment.ts",
       "environments": {

package-lock.json

@@ -14,11 +14,6 @@
       "resolved": "https://registry.npmjs.org/@agm/js-marker-clusterer/-/js-marker-clusterer-1.0.0-beta.2.tgz",
       "integrity": "sha512-sQzNo+2NwjgVAiy/AU3deYvemoH3CHtYvh+aH/3jq9yIK+2ZiuwhZ2oKmoBsVPEMzLjOqF07FhDLowrAAZfVRw=="
     },
-    "@agm/snazzy-info-window": {
-      "version": "1.0.0-beta.2",
-      "resolved": "https://registry.npmjs.org/@agm/snazzy-info-window/-/snazzy-info-window-1.0.0-beta.2.tgz",
-      "integrity": "sha512-YboKYJ2IzxY27XzGun4rHDw7I8BcHqfEgmzMR7bqSo1UH+JlgSNbuWfEQ2UvKqPlmW0bNm0o6xK8SfbE531QZA=="
-    },
     "@angular-devkit/core": {
       "version": "0.0.20",
       "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-0.0.20.tgz",

package.json

@@ -20,7 +20,6 @@
   "dependencies": {
     "@agm/core": "1.0.0-beta.2",
     "@agm/js-marker-clusterer": "1.0.0-beta.2",
-    "@agm/snazzy-info-window": "1.0.0-beta.2",
     "@angular/common": "5.0.1",
     "@angular/compiler": "5.0.1",
     "@angular/core": "5.0.1",

src/app/dashboard/dashboard.module.ts

@@ -6,7 +6,6 @@ import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { NgxPaginationModule } from 'ngx-pagination';
 import { AgmCoreModule, GoogleMapsAPIWrapper } from '@agm/core';
 import { AgmJsMarkerClustererModule } from '@agm/js-marker-clusterer';
-import { AgmSnazzyInfoWindowModule } from '@agm/snazzy-info-window';
 import { ModalModule } from 'ngx-bootstrap/modal';
 
 import { CurrencyPipe } from '@angular/common';
@@ -47,7 +46,6 @@ import { environment } from '../../environments/environment';
       apiKey: environment.mapApiKey
     }),
     AgmJsMarkerClustererModule,
-    AgmSnazzyInfoWindowModule,
     BsDropdownModule,
     NgxPaginationModule,
     DashboardRoutingModule,

src/app/dashboard/map.component.html

@@ -6,17 +6,36 @@
           <strong>Purchase Map</strong>
           <small>Required Data marked in <strong>bold</strong>.</small>
         </div>
+        <div class="modal fade" bsModal #statusModal="bs-modal" [config]="{backdrop: false, animated: false}"
+             tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
+          <div class="modal-dialog modal-sm h-100 d-flex flex-column justify-content-center my-0">
+            <div class="modal-content">
+              <div class="modal-header">
+                <h4 class="modal-title pull-left">Status</h4>
+                <button type="button" class="close pull-right" aria-label="Close" (click)="statusModal.hide()">
+                  <span aria-hidden="true">&times;</span>
+                </button>
+              </div>
+              <div class="modal-body">
                 <div [ngSwitch]="dataReceived">
-          <div *ngSwitchCase="'no'"class="card-block">
+                  <div *ngSwitchCase="'no'">
                     <div class="alert alert-danger" role="alert">
                       No map data received, check your connection.
                     </div>
                   </div>
-          <div *ngSwitchCase="'yes'">
+                  <div *ngSwitchCase="'loading'">
+                    <div class="alert alert-warning" role="alert">
+                      Map loading, please wait.
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
         <!-- 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
+        <agm-map (mapReady)="onMapReady($event)"
-            (mapReady)="onMapReady($event)"
           [latitude]="lat"
           [longitude]="lng"
           [zoom]="zoom"
@@ -27,15 +46,26 @@
                 *ngFor="let m of markers"
                 [latitude]="m.latitude"
                 [longitude]="m.longitude"
-                    [label]="m.name[0]">
+                [label]="m.name[0]"
-                  <agm-info-window>
+                [openInfoWindow]="false"
-                    <strong>{{m.name}}</strong>
+                (markerClick)="onMarkerClick(m, template)">
-                  </agm-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><!--/.row-->

src/app/dashboard/map.component.ts

@@ -1,18 +1,22 @@
-import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { Component, OnInit, AfterViewInit, Input, Output, EventEmitter, ViewChild, TemplateRef } from '@angular/core';
 import { ApiService } from '../providers/api-service';
 import { AgmCoreModule } from '@agm/core';
+import { BsModalService, ModalDirective } from 'ngx-bootstrap/modal';
+import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';
 import 'rxjs/add/operator/map';
 
 @Component({
   templateUrl: 'map.component.html',
 })
-export class MapComponent implements OnInit {
+export class MapComponent implements OnInit, AfterViewInit {
-
+  @ViewChild('statusModal') myStatusModal: ModalDirective;
   lat: number = 54.0466;
   lng: number = -2.8007;
   zoom: number = 12;
+  public modalRef: BsModalRef;
+  clickedMarker: any;
 
-  dataReceived: string = 'yes';
+  dataReceived: string = 'loading';
 
   markers: Array<{latitude: number, longitude: number, name: string}>;
 
@@ -20,14 +24,29 @@ export class MapComponent implements OnInit {
 
   constructor(
     private api: ApiService,
+    private modalService: BsModalService,
   ) { }
 
   ngOnInit(): void { }
 
+  ngAfterViewInit() {
+    this.myStatusModal.show();
+  }
+
   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();
@@ -48,7 +67,7 @@ export class MapComponent implements OnInit {
     }
     this.api.getMapData(mapData).subscribe(
       result => {
-        this.dataReceived = 'yes';
+        this.myStatusModal.hide();
         this.markers = result.suppliers;
       },
       error => {

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

@@ -6,13 +6,33 @@
           <strong>Purchase Map</strong>
           <small>Required Data marked in <strong>bold</strong>.</small>
         </div>
+        <div class="modal fade" bsModal #statusModal="bs-modal" [config]="{backdrop: false, animated: false}"
+             tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
+          <div class="modal-dialog modal-sm h-100 d-flex flex-column justify-content-center my-0">
+            <div class="modal-content">
+              <div class="modal-header">
+                <h4 class="modal-title pull-left">Status</h4>
+                <button type="button" class="close pull-right" aria-label="Close" (click)="statusModal.hide()">
+                  <span aria-hidden="true">&times;</span>
+                </button>
+              </div>
+              <div class="modal-body">
                 <div [ngSwitch]="dataReceived">
-          <div *ngSwitchCase="'no'"class="card-block">
+                  <div *ngSwitchCase="'no'">
                     <div class="alert alert-danger" role="alert">
                       No map data received, check your connection.
                     </div>
                   </div>
-          <div *ngSwitchCase="'yes'">
+                  <div *ngSwitchCase="'loading'">
+                    <div class="alert alert-warning" role="alert">
+                      Map loading, please wait.
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
         <!-- 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
@@ -49,7 +69,5 @@
         </ng-template>
       </div>
     </div>
-      </div>
-    </div>
   </div><!--/.row-->
 </div>

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

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, Output, EventEmitter, TemplateRef } from '@angular/core';
+import { Component, OnInit, AfterViewInit, Input, Output, EventEmitter, ViewChild, TemplateRef } from '@angular/core';
 import { ApiService } from '../providers/api-service';
 import { AgmCoreModule } from '@agm/core';
 import { BsModalService } from 'ngx-bootstrap/modal';
@@ -8,15 +8,15 @@ import 'rxjs/add/operator/map';
 @Component({
   templateUrl: 'trail-map.component.html',
 })
-export class TrailMapComponent implements OnInit {
+export class TrailMapComponent implements OnInit, AfterViewInit {
-
+  @ViewChild('statusModal') myStatusModal: ModalDirective;
   lat: number = 54.0466;
   lng: number = -2.8007;
   zoom: number = 12;
   public modalRef: BsModalRef;
   clickedMarker: any;
 
-  dataReceived: string = 'yes';
+  dataReceived: string = 'loading';
 
   markers: Array<{latitude: number, longitude: number, name: string}>;
 
@@ -29,6 +29,10 @@ export class TrailMapComponent implements OnInit {
 
   ngOnInit(): void { }
 
+  ngAfterViewInit() {
+    this.myStatusModal.show();
+  }
+
   public onMapReady(map: any) {
     this.map = map;
   }
@@ -63,7 +67,7 @@ export class TrailMapComponent implements OnInit {
     }
     this.api.getLisData(mapData).subscribe(
       result => {
-        this.dataReceived = 'yes';
+        this.myStatusModal.hide();
         this.markers = result.locations;
       },
       error => {