Merge pull request #47 from Pear-Trading/finn/trailchoicechange

Changed from dropdown to modal
This commit is contained in:
Finn 2017-12-08 20:39:33 +00:00 committed by GitHub
commit 7e69c111e7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 40 additions and 5 deletions

View file

@ -2,6 +2,8 @@
# Next Release # Next Release
* Changed Story Trail choosing to modals
# v0.0.7 # v0.0.7
* Added ESTA to Story Trail * Added ESTA to Story Trail

View file

@ -4,11 +4,39 @@
<div class="card"> <div class="card">
<div class="card-header"> <div class="card-header">
<strong>Story Trail</strong> <strong>Story Trail</strong>
<small>Click a marker to get location details.</small> <div class="row">
<select type="text" [(ngModel)]="assocMap" (ngModelChange)="viewBoundsChanged()">
<option value="lis" selected>Lancaster Independent Story</option> <div class="col-12 col-sm-6 mb-3">
<option value="esta">ESTA</option> <small>Select a Story Trail to see all the businesses in that story on the map.<br>
</select> Click an icon on the map to get more information.</small>
</div>
<div class="col-12 col-sm-6 order-12">
<button type="button" class="btn btn-outline-info btn-lg float-right" (click)="openModalAssoc(templateAssoc)">Select Story Trail</button>
</div>
</div>
<ng-template #templateAssoc>
<div class="modal-header">
<h4 class="modal-title pull-left">Select View</h4>
<button type="button" class="close pull-right" aria-label="Close" (click)="modalRef2.hide()">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-12 col-sm-6 text-center">
<img src="assets/img/association/lis-logo.png" class="w-50" alt="lis logo"><br>
<button type="button" class="btn btn-success mt-3" (click)="modalRef2.hide(); assocMap = 'lis'">Lancaster Independent Story</button>
</div>
<div class="col-12 col-sm-6 text-center">
<img src="assets/img/association/esta-logo.png" class="w-50" alt="lis logo"><br>
<button type="button" class="btn btn-success mt-3" (click)="modalRef2.hide(); assocMap = 'esta'">ESTA Association</button>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" (click)="modalRef2.hide()">Close</button>
</div>
</ng-template>
</div> </div>
<div class="modal fade" bsModal #statusModal="bs-modal" [config]="{backdrop: false, animated: false}" <div class="modal fade" bsModal #statusModal="bs-modal" [config]="{backdrop: false, animated: false}"
tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true"> tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">

View file

@ -14,6 +14,7 @@ export class TrailMapComponent implements OnInit, AfterViewInit {
lng: number = -2.8007; lng: number = -2.8007;
zoom: number = 12; zoom: number = 12;
public modalRef: BsModalRef; public modalRef: BsModalRef;
public modalRef2: BsModalRef;
clickedMarker: any; clickedMarker: any;
assocMap = 'lis'; assocMap = 'lis';
assocLogo: string; assocLogo: string;
@ -45,6 +46,10 @@ export class TrailMapComponent implements OnInit, AfterViewInit {
this.modalRef = this.modalService.show(template); this.modalRef = this.modalService.show(template);
} }
openModalAssoc(templateAssoc: TemplateRef<any>) {
this.modalRef2 = this.modalService.show(templateAssoc);
}
public onMarkerClick(clickedMarker, template: TemplateRef<any>) { public onMarkerClick(clickedMarker, template: TemplateRef<any>) {
console.log(clickedMarker); console.log(clickedMarker);
this.clickedMarker = clickedMarker; this.clickedMarker = clickedMarker;

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 19 KiB