From 0fb3f5174880449b73acda694d5560db27629b23 Mon Sep 17 00:00:00 2001 From: piratefinn Date: Mon, 27 Nov 2017 16:56:09 +0000 Subject: [PATCH] Fixes made and info window usage revamped with modals --- .angular-cli.json | 3 +- package-lock.json | 5 -- package.json | 1 - src/app/dashboard/dashboard.module.ts | 2 - src/app/dashboard/map.component.html | 84 +++++++++++++------- src/app/dashboard/map.component.ts | 29 +++++-- src/app/dashboard/trail-map.component.html | 92 +++++++++++++--------- src/app/dashboard/trail-map.component.ts | 14 ++-- 8 files changed, 146 insertions(+), 84 deletions(-) diff --git a/.angular-cli.json b/.angular-cli.json index 6c77403..f7b4f9c 100644 --- a/.angular-cli.json +++ b/.angular-cli.json @@ -20,8 +20,7 @@ "../node_modules/moment/min/moment.min.js" ], "styles": [ - "scss/style.scss", - "../node_modules/snazzy-info-window/dist/snazzy-info-window.css" + "scss/style.scss" ], "environmentSource": "environments/environment.ts", "environments": { diff --git a/package-lock.json b/package-lock.json index 3403c5f..9d4db09 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 7d14e2a..4556313 100644 --- a/package.json +++ b/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", diff --git a/src/app/dashboard/dashboard.module.ts b/src/app/dashboard/dashboard.module.ts index e312843..0e5302b 100644 --- a/src/app/dashboard/dashboard.module.ts +++ b/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, diff --git a/src/app/dashboard/map.component.html b/src/app/dashboard/map.component.html index 4888c18..58af5cd 100644 --- a/src/app/dashboard/map.component.html +++ b/src/app/dashboard/map.component.html @@ -6,36 +6,66 @@ Purchase Map Required Data marked in bold. -
-
-
diff --git a/src/app/dashboard/map.component.ts b/src/app/dashboard/map.component.ts index 5af9c41..374aa66 100644 --- a/src/app/dashboard/map.component.ts +++ b/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) { + this.modalRef = this.modalService.show(template); + } + + public onMarkerClick(clickedMarker, template: TemplateRef) { + 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 => { diff --git a/src/app/dashboard/trail-map.component.html b/src/app/dashboard/trail-map.component.html index d457e99..bac8cf4 100644 --- a/src/app/dashboard/trail-map.component.html +++ b/src/app/dashboard/trail-map.component.html @@ -6,49 +6,67 @@ Purchase Map Required Data marked in bold. -
-
- -
-
- - - - - - - - - -
- lis logo

{{clickedMarker.name}}

-
-
-
Located at:
-
{{clickedMarker.street_name}}
-
{{clickedMarker.town}}
-
{{clickedMarker.postcode}}
+
+
+
+ +
+
+ +
+
- +
+ + + + + + + + + +
+ lis logo

{{clickedMarker.name}}

+ +
+
+
Located at:
+
{{clickedMarker.street_name}}
+
{{clickedMarker.town}}
+
{{clickedMarker.postcode}}
+
+ diff --git a/src/app/dashboard/trail-map.component.ts b/src/app/dashboard/trail-map.component.ts index b6d2c8b..b3ce8a0 100644 --- a/src/app/dashboard/trail-map.component.ts +++ b/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 => {