pd maps tooltipe directive changes
This commit is contained in:
parent
bafcea1556
commit
25b0c058ff
@ -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>
|
||||
|
||||
@ -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();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -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%',
|
||||
|
||||
@ -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> -->
|
||||
|
||||
|
||||
|
||||
@ -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();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -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]);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user