pd maps tooltipe directive changes

This commit is contained in:
gandhimathi 2019-02-07 15:29:39 +05:30
parent bafcea1556
commit 25b0c058ff
8 changed files with 131 additions and 46 deletions

View File

@ -13,8 +13,17 @@
<div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="50" fxFlex.lg="60" fxFlex.xl="60">
<mat-card>
<mat-card-content>
<agm-map [latitude]="lat" [longitude]="lng">
<agm-marker *ngFor="let getMap of mapDetails" [latitude]="getMap.lat" [longitude]="getMap.lng"></agm-marker>
<agm-map [latitude]="lat" [longitude]="lng" [zoom]="10" #gm>
<agm-marker *ngFor="let getMap of mapDetails" [latitude]="getMap.geometry.location.lat" [longitude]="getMap.geometry.location.lng" (mouseOver)="onMouseOver(infoWindow,gm)">
<agm-info-window [disableAutoPan]="false" #infoWindow>
<div>
<p><strong>{{getMap.applicant_details | titlecase}}</strong></p>
</div>
<div>
<p>{{getMap.lender_details}}</p>
</div>
</agm-info-window>
</agm-marker>
</agm-map>
</mat-card-content>
</mat-card>

View File

@ -31,7 +31,9 @@ export class AllocationViewMoreComponent implements OnInit {
if (response.status == 'OK') {
this.lat = response.results[0].geometry.location.lat;
this.lng = response.results[0].geometry.location.lng;
this.mapDetails.push(response.results[0].geometry.location)
response.results[0].applicant_details = element.applicant_name + ' ( Id:'+element.pd_id+')';
response.results[0].lender_details = element.lender_short_name + '( Id:'+element.lender_applicant_id+')';
this.mapDetails.push(response.results[0])
}
// else if (response.status == 'ZERO_RESULTS') {
// console.log('geocodingAPIService', 'ZERO_RESULTS', response.status);
@ -40,9 +42,19 @@ export class AllocationViewMoreComponent implements OnInit {
// }
});
}
});
}
// this is for map tooltip open
onMouseOver(infoWindow, gm) {
if (gm.lastOpen != null) {
gm.lastOpen.close();
}
gm.lastOpen = infoWindow;
infoWindow.open();
}
}

View File

@ -27,7 +27,6 @@
</div>
<div *ngFor="let details of dataSource.connect() | async">
<div *ngIf="(details.pd_status=='TRIGGERED' || details.pd_status=='ALLOCATED') && details.fk_pd_type !='3' ">
<mat-card [ngStyle]="{'border-left':'5px solid','border-left-color': getColor(details.fk_pd_type)}">
<mat-card-title *ngIf="details.applicat_details" style="margin-bottom: 0px;">
@ -75,8 +74,18 @@
</div>
<div fxFlex.xs="70" fxFlex.sm="70" fxFlex.md="70" fxFlex.lg="70" fxFlex.xl="70">
<mat-card class="mb-2" *ngIf="pdList.length > 0">
<agm-map [latitude]="lat" [longitude]="lng">
<agm-marker *ngFor="let getMap of mapDetails" [latitude]="getMap.lat" [longitude]="getMap.lng"></agm-marker>
<agm-map [latitude]="lat" [longitude]="lng" #gm>
<agm-marker *ngFor="let getMap of mapDetails" [latitude]="getMap.geometry.location.lat" [longitude]="getMap.geometry.location.lng" (mouseOver)="onMouseOver(infoWindow,gm)">
<agm-info-window [disableAutoPan]="false" #infoWindow>
<div>
<p><strong>{{getMap.applicant_details | titlecase}}</strong></p>
</div>
<div>
<p>{{getMap.lender_details}}</p>
</div>
</agm-info-window>
</agm-marker>
</agm-map>
</mat-card>
</div>

View File

@ -60,32 +60,43 @@ pdList:any[] = [];
ngOnInit() {
this.ListPdComponent.showListView(false);
this.recordStatus=false
this.loadPdDetails();
this.loadPdDetails(this.pdStatusCheck.TRIGGERED,this.pdStatusCheck.ALLOCATED);
}
ngAfterViewInit() {
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
}
loadPdDetails(){
this._pd.getPdDetails()
.subscribe(
data => {
if (data.status == 200) {
let filterdList = data.records.filter(item=>item.pd_status!=this.pdStatusCheck.DRAFT)
this.pdList = filterdList;
this.pdListData = filterdList;
this.dataLength = filterdList.length;
loadPdDetails(triStatus,allocStatus){
this._pd.getPdMapList(triStatus,allocStatus).subscribe(responseList => {
if(responseList.length>0){
if(responseList[0].dataStatus===true){
let filterValue=responseList[0].records.filter(val=>val.fk_pd_type !='3')
this.pdList= this.pdList.concat.apply(this.pdList, filterValue);
}
if(responseList[1].dataStatus===true){
let filterValue=responseList[1].records.filter(val=>val.fk_pd_type !='3')
this.pdList= this.pdList.concat.apply(this.pdList, filterValue);
}
if(this.pdList.length>0){
this.pdListData = this.pdList;
this.dataLength = this.pdList.length;
this.dataSource.data = this.pdListData;
this.getMapViewLocations(this.pdList);
}
else{
this.pdList=[];
this.dataLength = null;
this.recordStatus=true;
}
}, error => this.errorMessage = <any> error);
}
else {
this.pdList=[];
this.dataLength = null;
this.recordStatus=true;
}
}
else {
this.pdList=[];
this.dataLength = null;
this.recordStatus=true;
}
},error => this.errorMessage = <any> error);
}
@ -97,7 +108,9 @@ pdList:any[] = [];
if (response.status == 'OK') {
this.lat = response.results[0].geometry.location.lat;
this.lng = response.results[0].geometry.location.lng;
this.mapDetails.push(response.results[0].geometry.location)
response.results[0].applicant_details = element.applicant_name + ' ( Id:'+element.pd_id+')';
response.results[0].lender_details = element.lender_short_name + '( Id:'+element.lender_applicant_id+')';
this.mapDetails.push(response.results[0]);
}
// else if (response.status == 'ZERO_RESULTS') {
// console.log('geocodingAPIService', 'ZERO_RESULTS', response.status);
@ -133,7 +146,7 @@ pdList:any[] = [];
dialogRef.afterClosed()
.subscribe(dataresult => {
// this.notifier.notify('success', 'Successfully allocated.!');
this.loadPdDetails();
this.loadPdDetails(this.pdStatusCheck.TRIGGERED,this.pdStatusCheck.ALLOCATED);
});
}
else if(pdData.fk_pd_type == 2){
@ -146,8 +159,8 @@ pdList:any[] = [];
dialogRef.afterClosed()
.subscribe(dataresult => {
// this.notifier.notify('success', 'Successfully allocated.!');
this.loadPdDetails();
});
this.loadPdDetails(this.pdStatusCheck.TRIGGERED,this.pdStatusCheck.ALLOCATED);
});
}
else if(pdData.fk_pd_type == 3){
const dialogRef = this.dialog.open(TelePdAllocationComponent, {
@ -160,7 +173,7 @@ pdList:any[] = [];
.subscribe(dataresult => {
// this.notifier.notify('success', 'Successfully allocated.!');
this.loadPdDetails();
this.loadPdDetails(this.pdStatusCheck.TRIGGERED,this.pdStatusCheck.ALLOCATED);
});
}
@ -177,7 +190,7 @@ pdList:any[] = [];
dialogSchedule.afterClosed()
.subscribe(dataresult => {
// this.notifier.notify('success', 'Successfully allocated.!');
this.loadPdDetails();
this.loadPdDetails(this.pdStatusCheck.TRIGGERED,this.pdStatusCheck.ALLOCATED);
});
}
ngOnDestroy(): void {
@ -190,5 +203,16 @@ pdList:any[] = [];
filterValue = filterValue.toLowerCase(); // Datasource defaults to lowercase matches
this.dataSource.filter = filterValue;
}
// this is for map tooltip open
onMouseOver(infoWindow, gm) {
if (gm.lastOpen != null) {
gm.lastOpen.close();
}
gm.lastOpen = infoWindow;
infoWindow.open();
}
}

View File

@ -27,10 +27,12 @@ export class PdLocatedMapViewDirective {
this._geolocation.findLocations(this.value.addressline1,this.value.pincode,this.value.state_name,this.value.city_name)
.subscribe(response => {
if (response.status == 'OK') {
let address_content: string = this.value.addressline1.toUpperCase() + ','+this.value.city_name.toUpperCase()+ ','+this.value.state_name.toUpperCase();
address_content = this.value.pincode_id=='1' ? address_content+'-'+this.value.other_pincode : address_content+'-'+this.value.pincode
this.lat = response.results[0].geometry.location.lat;
this.lang = response.results[0].geometry.location.lng;
const dialogRef = this.dialog.open(ViewLocationComponent, {
data: {"lat": this.lat, "lang":this.lang},
data: {"lat": this.lat, "lang":this.lang,"content":address_content},
disableClose: false,
minWidth:'30%',
maxWidth:'30%',

View File

@ -1,6 +1,6 @@
<h2 mat-dialog-title>
<div fxFlex="70" align="left">
PD Location
PD Address
</div>
<div fxFlex="30" align="end">
<button class="mr-1 mb-1" mat-mini-fab color="primary" type="button" mat-dialog-close><mat-icon>close</mat-icon></button>
@ -9,18 +9,22 @@
<mat-dialog-content>
<div fxLayout="row wrap">
<div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="100" fxFlex.lg="100" fxFlex.xl="100">
<mat-card>
<mat-card-content>
<agm-map [latitude]="data.lat" [longitude]="data.lang">
<agm-marker [latitude]="data.lat" [longitude]="data.lang"></agm-marker>
<agm-map [latitude]="data.lat" [longitude]="data.lang" [zoom]="15" #gm>
<agm-marker [latitude]="data.lat" [longitude]="data.lang" (mouseOver)="onMouseOver(infoWindow,gm)">
<agm-info-window [disableAutoPan]="false" #infoWindow>
<!-- <mat-list>
<mat-list-item>
<mat-icon matListIcon color="primary">location_on</mat-icon>
<h3 matLine> {{message_content}} </h3>
</mat-list-item>
</mat-list> -->
<p><strong>{{message_content}}</strong></p>
</agm-info-window>
</agm-marker>
</agm-map>
</mat-card-content>
</mat-card>
</div>
</div>
</mat-dialog-content>
<!-- <mat-dialog-actions align="end">
<button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" type="button" matTooltip="Close" matTooltipPosition="above" mat-dialog-close><mat-icon>close</mat-icon></button>
</mat-dialog-actions> -->

View File

@ -7,10 +7,24 @@ import { MatDialog, MatDialogRef, MAT_DIALOG_DATA , DialogPosition} from '@angul
styleUrls: ['./view-location.component.scss']
})
export class ViewLocationComponent implements OnInit {
constructor(@Inject(MAT_DIALOG_DATA) public data: any, private dialogRef: MatDialogRef<ViewLocationComponent>) { }
message_content: String;
constructor(@Inject(MAT_DIALOG_DATA) public data: any, private dialogRef: MatDialogRef<ViewLocationComponent>) {
this.message_content=this.data.content;
}
ngOnInit() {
}
// this is for map tooltip open
onMouseOver(infoWindow, gm) {
if (gm.lastOpen != null) {
gm.lastOpen.close();
}
gm.lastOpen = infoWindow;
infoWindow.open();
}
}

View File

@ -3,7 +3,7 @@ import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';//for Datatables
import { HttpClient, HttpParams } from '@angular/common/http';
import { catchError, map } from 'rxjs/operators';
import { of } from 'rxjs';
import { of, forkJoin } from 'rxjs';
/** Imported Service Files Are., */
import { AwsService } from '../../AwsService/aws.service';
@ -566,6 +566,17 @@ export class PdTrigerService {
catchError(this.handleError('operation', []))
)
}
// this is for pd map details only for triggered/ allocated status
getPdMapList(triggeredStatus, allocatedStatus): Observable<any> {
const firstStatus = triggeredStatus ?
{ params: new HttpParams().set('status', triggeredStatus) } : {};
let response1 = this._http.get<any[]>(this.apiUrl + "listLessPDDetails/get", firstStatus);
const secondStatus = allocatedStatus ?
{ params: new HttpParams().set('status', allocatedStatus) } : {};
let response2 = this._http.get<any[]>(this.apiUrl + "listLessPDDetails/get", secondStatus);
return forkJoin([response1, response2]);
}
}