From 7843a87fd68df57ef4ae3414565e993e8518d46e Mon Sep 17 00:00:00 2001 From: piratefinn Date: Wed, 15 Nov 2017 15:36:45 +0000 Subject: [PATCH] working modals added --- src/app/dashboard/dashboard.module.ts | 2 ++ src/app/dashboard/trail-map-2.component.html | 13 ++++++++++++- src/app/dashboard/trail-map-2.component.ts | 17 ++++++++++++++--- 3 files changed, 28 insertions(+), 4 deletions(-) diff --git a/src/app/dashboard/dashboard.module.ts b/src/app/dashboard/dashboard.module.ts index e2c051a..2d4f415 100644 --- a/src/app/dashboard/dashboard.module.ts +++ b/src/app/dashboard/dashboard.module.ts @@ -7,6 +7,7 @@ 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'; @@ -51,6 +52,7 @@ import { environment } from '../../environments/environment'; BsDropdownModule, NgxPaginationModule, DashboardRoutingModule, + ModalModule.forRoot(), ], declarations: [ DashboardComponent, diff --git a/src/app/dashboard/trail-map-2.component.html b/src/app/dashboard/trail-map-2.component.html index d927f7f..f5835e7 100644 --- a/src/app/dashboard/trail-map-2.component.html +++ b/src/app/dashboard/trail-map-2.component.html @@ -29,10 +29,21 @@ [latitude]="m.latitude" [longitude]="m.longitude" [openInfoWindow]="false" - (markerClick)="onMarkerClick(m)"> + (markerClick)="onMarkerClick(m, template)"> + + + + diff --git a/src/app/dashboard/trail-map-2.component.ts b/src/app/dashboard/trail-map-2.component.ts index 185d656..0019f16 100644 --- a/src/app/dashboard/trail-map-2.component.ts +++ b/src/app/dashboard/trail-map-2.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 TrailMapComponent2 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 TrailMapComponent2 implements OnInit { constructor( private api: ApiService, - ) { } + private modalService: BsModalService, + ) {} ngOnInit(): void { } @@ -28,8 +33,14 @@ export class TrailMapComponent2 implements OnInit { this.map = map; } - public onMarkerClick(clickedMarker) { + 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() {