Dashboard Changes : ps
This commit is contained in:
venbatechnologies@gmail.com
parent
6615eb1498
commit
42b5537680
5
ng6-seed/package-lock.json
generated
5
ng6-seed/package-lock.json
generated
@ -7212,6 +7212,11 @@
|
||||
"resolved": "https://registry.npmjs.org/ngx-color-picker/-/ngx-color-picker-4.5.3.tgz",
|
||||
"integrity": "sha512-CJca1od05yf2j8OKUm5ar+mIVFB3n01+vbMpLeT+9/drKYCxgmtxxmmsgwWBNNXWYa2GNYB7PGH+mdKQkeypOg=="
|
||||
},
|
||||
"ngx-mat-daterange-picker": {
|
||||
"version": "1.1.4",
|
||||
"resolved": "https://registry.npmjs.org/ngx-mat-daterange-picker/-/ngx-mat-daterange-picker-1.1.4.tgz",
|
||||
"integrity": "sha512-bfIYGJicxwg58j6LZjUE5JPXqq7yJfremFhX5S/DnUYwQjgmDWN6PUOFEegEO7ua4QdgGWrhK04ElOw25aWrzQ=="
|
||||
},
|
||||
"ngx-mat-select-search": {
|
||||
"version": "1.3.1",
|
||||
"resolved": "https://registry.npmjs.org/ngx-mat-select-search/-/ngx-mat-select-search-1.3.1.tgz",
|
||||
|
||||
@ -52,6 +52,7 @@
|
||||
"ng2-toastr": "^4.1.2",
|
||||
"ng2-validation": "4.2.0",
|
||||
"ngx-color-picker": "^4.0.3",
|
||||
"ngx-mat-daterange-picker": "^1.1.4",
|
||||
"ngx-mat-select-search": "^1.3.1",
|
||||
"ngx-perfect-scrollbar": "5.0.0-7",
|
||||
"perfect-scrollbar": "^1.3.0",
|
||||
|
||||
@ -1,12 +1,107 @@
|
||||
|
||||
<!--<div fxLayout="row" fxLayoutWrap="wrap">
|
||||
<!-- <div fxFlex.gt-sm="50" fxFlex="100">
|
||||
<mat-form-field>
|
||||
<input matInput placeholder="Stateold" [matAutocomplete]="reactiveAuto" [formControl]="stateCtrl">
|
||||
</mat-form-field>
|
||||
</div> --
|
||||
<!-- <div fxFlex.gt-sm="50" fxFlex="100">
|
||||
<mat-form-field>
|
||||
<input matInput placeholder="Statenew" [matAutocomplete]="tdAuto" [(ngModel)]="currentState" #modelDir="ngModel"
|
||||
(ngModelChange)="this.tdStates = filterStates(currentState)" [disabled]="tdDisabled">
|
||||
</mat-form-field>
|
||||
</div> --
|
||||
</div>-->
|
||||
|
||||
<div class="pad-wrap">
|
||||
|
||||
<!-- doughnut -->
|
||||
<!-- <div fxFlex.gt-sm="33.33" fxFlex.gt-xs="50" fxFlex="100"> -->
|
||||
<div fxFlex.gt-sm="100" fxFlex.gt-xs="100" fxFlex="100">
|
||||
<mat-card>
|
||||
|
||||
|
||||
<mat-card-title>{{dashboardTitle}}</mat-card-title>
|
||||
<!-- Full Pd
|
||||
<mat-card>
|
||||
<mat-card-title>
|
||||
<div fxFlex.gt-sm="25" fxFlex="100">
|
||||
<div fxFlex.gt-sm="75" fxFlex="100">
|
||||
{{dashboardTitle}}
|
||||
</div>
|
||||
<div fxFlex.gt-sm="25" fxFlex="100">
|
||||
<ngx-mat-drp (selectedDateRangeChanged)="updateRange($event)" (change)="onChange($event,'One')" [options]="options" #dateRangePicker></ngx-mat-drp>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div fxFlex.gt-sm="25" fxFlex="100">
|
||||
</div>
|
||||
<div fxFlex.gt-sm="25" fxFlex="100">
|
||||
<!-- <mat-form-field >
|
||||
|
||||
<input matInput placeholder="Placeholder">
|
||||
<mat-icon matSuffix>sentiment_very_satisfied</mat-icon>
|
||||
<mat-hint>Hint</mat-hint>
|
||||
</mat-form-field> -->
|
||||
<!-- <mat-form-field appearance="outline"
|
||||
<mat-label>City</mat-label>
|
||||
<input type="text" placeholder="City" matInput [formControl]="myControl" [matAutocomplete]="auto" color="accent">
|
||||
<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
|
||||
<mat-option *ngFor="let option of filteredOptions | async" [value]="option">
|
||||
{{ option.name }} / {{option.state_name}}
|
||||
</mat-option>
|
||||
</mat-autocomplete>
|
||||
</mat-form-field> -->
|
||||
<mat-form-field class="example-full-width">
|
||||
<mat-select placeholder="City" [formControl]="myControl" multiple>
|
||||
<mat-select-trigger style="color:#fff;">
|
||||
{{myControl.value ? myControl.value[0].name : ''}}
|
||||
<span *ngIf="myControl.value?.length > 1" >
|
||||
(+{{myControl.value.length - 1}} {{myControl.value?.length === 2 ? 'other' : 'others'}})
|
||||
</span>
|
||||
</mat-select-trigger>
|
||||
<mat-option *ngFor="let cd of cityData" (onSelectionChange)="onChange($event,2)" [value]="cd">{{ cd.name }} / {{cd.state_name}} </mat-option>
|
||||
</mat-select>
|
||||
<!-- <mat-select placeholder="City" [formControl]="myControl" multiple>
|
||||
<!-- <mat-option *ngFor="let ld of lenderdatas" [value]="ld.entity_id" >{{ ld.short_name }} {{ ld.full_name }} </mat-option> --
|
||||
<mat-option *ngFor="let cd of cityData" [value]="cd.city_id">{{ cd.name }} / {{cd.state_name}} </mat-option>
|
||||
</mat-select> -->
|
||||
</mat-form-field>
|
||||
|
||||
</div>
|
||||
<div fxFlex.gt-sm="25" fxFlex="100">
|
||||
<!-- <mat-form-field appearance="outline" class="example-full-width">
|
||||
<mat-label>Lender</mat-label>
|
||||
<input type="text" placeholder="Lender" matInput [formControl]="myControl2" [matAutocomplete]="auto2" color="#000000">
|
||||
<mat-autocomplete #auto2="matAutocomplete" [displayWith]="displayFn2">
|
||||
<mat-option *ngFor="let option2 of filteredOptions2 | async" [value]="option2">
|
||||
{{ option2.full_name }} ({{option2.short_name}})
|
||||
</mat-option>
|
||||
</mat-autocomplete>
|
||||
</mat-form-field> -->
|
||||
<mat-form-field class="example-full-width">
|
||||
<mat-select placeholder="Lender" [formControl]="myControl2" multiple>
|
||||
<mat-select-trigger style="color:#fff;">
|
||||
{{myControl2.value ? myControl2.value[0].short_name : ''}}
|
||||
<span *ngIf="myControl2.value?.length > 1" >
|
||||
(+{{myControl2.value.length - 1}} {{myControl2.value?.length === 2 ? 'other' : 'others'}})
|
||||
</span>
|
||||
</mat-select-trigger>
|
||||
<!-- <mat-option #allSelected (click)="toggleAllSelection()" [value]="0">All</mat-option> -->
|
||||
<mat-option *ngFor="let ld of lenderData" (onSelectionChange)="onChange($event,3)" [value]="ld">{{ ld.full_name }} ({{ ld.short_name }})</mat-option>
|
||||
</mat-select>
|
||||
<!-- <mat-form-field class="example-full-width">
|
||||
<mat-select placeholder="Lender" [formControl]="myControl2" multiple>
|
||||
<mat-option *ngFor="let ld of lenderData" [value]="ld.entity_id" >{{ ld.full_name }} ({{ ld.short_name }})</mat-option>
|
||||
</mat-select> -->
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</mat-card-title>
|
||||
<!--<mat-form-field class="example-full-width">
|
||||
<input type="text" placeholder="City" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto">
|
||||
<mat-autocomplete #autoforcity="matAutocomplete">
|
||||
<mat-option *ngFor="let option of filteredOptionsforcity | async" [value]="option">
|
||||
{{option}}
|
||||
</mat-option>
|
||||
</mat-autocomplete>
|
||||
</mat-form-field>
|
||||
</form>
|
||||
|
||||
Full Pd
|
||||
{{doughnutChartDataForFullPD}} Length
|
||||
{{doughnutChartDataForFullPD.length}}
|
||||
Smart Pd
|
||||
@ -16,52 +111,61 @@
|
||||
{{doughnutChartDataForTelePD}} Length
|
||||
{{doughnutChartDataForTelePD.length}} -->
|
||||
<mat-card-content>
|
||||
<div fxFlex.gt-sm="33.33" fxFlex.gt-xs="40" fxFlex="90">
|
||||
<!--<div *ngIf="doughnutChartDataForFullPD.length != 0" style="text-align: center"><strong>Full - {{total1}}</strong></div>-->
|
||||
|
||||
<canvas baseChart class="chart "
|
||||
[data]="doughnutChartDataForFullPD"
|
||||
[labels]="doughnutChartLabels"
|
||||
[options]="doughnutOptionsFullPD"
|
||||
[colors]="doughnutChartColors"
|
||||
[legend]="false"
|
||||
[chartType]="doughnutChartType"></canvas>
|
||||
<div *ngIf="total1 != 0" class="donut-inner"><span>{{total1}}</span></div>
|
||||
</div>
|
||||
<div fxFlex.gt-sm="33.33" fxFlex.gt-xs="40" fxFlex="90">
|
||||
<!--<div *ngIf="doughnutChartDataForSmartPD.length != 0" style="text-align: center"><strong>Smart - {{total2}}</strong></div>-->
|
||||
<canvas baseChart class="chart"
|
||||
[data]="doughnutChartDataForSmartPD"
|
||||
[labels]="doughnutChartLabels"
|
||||
[options]="doughnutOptionsSmartPD"
|
||||
[colors]="doughnutChartColors"
|
||||
[legend]="false"
|
||||
[chartType]="doughnutChartType"></canvas>
|
||||
<div *ngIf="total2 != 0" class="donut-inner"><span>{{total2}}</span></div>
|
||||
</div>
|
||||
|
||||
<div fxFlex.gt-sm="33.33" fxFlex.gt-xs="40" fxFlex="90">
|
||||
<!--<div *ngIf="doughnutChartDataForTelePD.length != 0" style="text-align: center"> <strong>Tele - {{total3}}</strong></div>-->
|
||||
<canvas baseChart class="chart"
|
||||
[data]="doughnutChartDataForTelePD"
|
||||
[labels]="doughnutChartLabels"
|
||||
[options]="doughnutOptionsTelePD"
|
||||
[colors]="doughnutChartColors"
|
||||
[legend]="false"
|
||||
[chartType]="doughnutChartType"></canvas>
|
||||
<div *ngIf="total3 != 0" class="donut-inner"><span>{{total3}}</span></div>
|
||||
</div>
|
||||
<div *ngIf="legendArr">
|
||||
<ul class="clas">
|
||||
<li class="cla"><div class="oval" style="background-color:#c1c1c1"></div>Draft</li>
|
||||
<li class="cla"><div class="oval" style="background-color:#f44336"></div>Triggered</li>
|
||||
<li class="cla"><div class="oval" style="background-color:#ffa500"></div>Allocated</li>
|
||||
<li class="cla"><div class="oval" style="background-color:#ffeb3b"></div>Scheduled</li>
|
||||
<li class="cla"><div class="oval" style="background-color:#3f51b5"></div>InProgress</li>
|
||||
<li class="cla"><div class="oval" style="background-color:#00ff00"></div>Completed</li>
|
||||
<li class="cla"><div class="oval" style="background-color:#4caf50"></div>QC Completed</li>
|
||||
<div fxLayout="row">
|
||||
<div fxFlex.gt-sm="30" fxFlex="100">
|
||||
<canvas baseChart class="chart"
|
||||
height="280px" width="280px"
|
||||
[data]="doughnutChartDataForFullPD"
|
||||
[labels]="doughnutChartLabels"
|
||||
[options]="doughnutOptions"
|
||||
[colors]="doughnutChartColors"
|
||||
[legend]="false"
|
||||
[chartType]="doughnutChartType"></canvas>
|
||||
<div *ngIf="total1 != 0" class="donut-inner"><span>Full - {{total1}}</span></div>
|
||||
</div>
|
||||
<div fxFlex.gt-sm="5" fxFlex="100">
|
||||
</div>
|
||||
<div fxFlex.gt-sm="30" fxFlex="100">
|
||||
<canvas baseChart class="chart"
|
||||
height="280px" width="280px"
|
||||
[data]="doughnutChartDataForSmartPD"
|
||||
[labels]="doughnutChartLabels"
|
||||
[options]="doughnutOptions"
|
||||
[colors]="doughnutChartColors"
|
||||
[legend]="false"
|
||||
[chartType]="doughnutChartType"></canvas>
|
||||
<div *ngIf="total2 != 0" class="donut-inner"><span>Smart - {{total2}}</span></div>
|
||||
</div>
|
||||
<div fxFlex.gt-sm="5" fxFlex="100">
|
||||
</div>
|
||||
<div fxFlex.gt-sm="30" fxFlex="100">
|
||||
<canvas baseChart class="chart"
|
||||
height="280px" width="280px"
|
||||
[data]="doughnutChartDataForTelePD"
|
||||
[labels]="doughnutChartLabels"
|
||||
[options]="doughnutOptions"
|
||||
[colors]="doughnutChartColors"
|
||||
[legend]="false"
|
||||
[chartType]="doughnutChartType"></canvas>
|
||||
<div *ngIf="total3 != 0" class="donut-inner"><span>Tele - {{total3}}</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div fxLayout="row">
|
||||
<div fxFlex.gt-sm="100" fxFlex="100" >
|
||||
<br><br><br><br><br><br>
|
||||
|
||||
<ul class="lengend-list">
|
||||
<li class="lengend-element"><span class="oval" style="background-color:#c1c1c1"> </span> Draft</li>
|
||||
<li class="lengend-element"><span class="oval" style="background-color:#f44336"> </span> Triggered</li>
|
||||
<li class="lengend-element"><span class="oval" style="background-color:#ffa500"> </span> Allocated</li>
|
||||
<li class="lengend-element"><span class="oval" style="background-color:#ffeb3b"> </span> Scheduled</li>
|
||||
<li class="lengend-element"><span class="oval" style="background-color:#3f51b5"> </span> InProgress</li>
|
||||
<li class="lengend-element"><span class="oval" style="background-color:#00ff00"> </span> Completed</li>
|
||||
<li class="lengend-element"><span class="oval" style="background-color:#4caf50"> </span> QC Completed</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
@ -106,78 +210,3 @@
|
||||
</mat-card>
|
||||
</div>-->
|
||||
</div>
|
||||
|
||||
<div fxLayout="row">
|
||||
<div fxFlex="100">
|
||||
<mat-card>
|
||||
<mat-card-title><span fxFlex="80">Alert</span> <span fxFlex="20"><mat-icon> warning</mat-icon></span></mat-card-title>
|
||||
<mat-card-content>
|
||||
<mat-list>
|
||||
<ng-template let-item let-last="last" ngFor [ngForOf]="alertMessage">
|
||||
<!-- <ng-template *ngFor="let item of message" > -->
|
||||
<mat-list-item>
|
||||
<!--<img mat-list-avatar src="{{item.photo}}" alt="">-->
|
||||
<!--<h3 mat-line> {{item.applicantname}} </h3>
|
||||
<p mat-line> {{item.applicantid}}</p>
|
||||
<p mat-line> {{item.lendername}} - {{item.status}} </p> -->
|
||||
<h3 mat-line> {{item.applicant_name}} </h3>
|
||||
<p mat-line> {{item.lender_applicant_id}}</p>
|
||||
<p mat-line> {{item.entity_name}} - {{item.pd_status}} </p>
|
||||
</mat-list-item>
|
||||
</ng-template>
|
||||
</mat-list>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
|
||||
<!-- <div fxFlex="100"> -->
|
||||
<div fxFlex="100">
|
||||
<mat-card>
|
||||
<mat-card-title>Lenderwise</mat-card-title>
|
||||
|
||||
<mat-card-content>
|
||||
<mat-list>
|
||||
<!-- {{lenderpd}} -->
|
||||
<ng-template let-item let-last="last" ngFor [ngForOf]="lenderWisePD">
|
||||
<!-- <ng-template *ngFor="let item of lenderpd" > -->
|
||||
|
||||
<mat-list-item>
|
||||
<h3 mat-line>{{item.full_name}} / {{item.city_name}} </h3>
|
||||
<p mat-line> {{item.PDTYPE}} -{{item.count}} </p>
|
||||
<!-- <p mat-line>
|
||||
<div *ngIf="item.PDTYPE == FULL" > {{item.PDTYPE}} -{{item.count}} </div>
|
||||
<div *ngIf="item.PDTYPE == SMART" > {{item.PDTYPE}} -{{item.count}} </div>
|
||||
<div *ngIf="item.PDTYPE == TELE" > {{item.PDTYPE}} -{{item.count}} </div> -->
|
||||
|
||||
<!-- <h3 mat-line> {{item.lendername}} / {{item.billingaddr}} </h3>
|
||||
<p mat-line> Full -{{item.fullpd}} / Smart -{{item.smartpd}} / Tele - {{item.telepd}} </p> -->
|
||||
</mat-list-item>
|
||||
</ng-template>
|
||||
</mat-list>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
<!-- <div fxFlex="100"> -->
|
||||
<div fxFlex="100">
|
||||
<mat-card>
|
||||
<mat-card-title>CityWise</mat-card-title>
|
||||
<mat-card-content>
|
||||
<mat-list>
|
||||
|
||||
<ng-template let-item let-last="last" ngFor [ngForOf]="cityWisePD">
|
||||
<!-- <ng-template *ngFor="let item of citywisepd" > -->
|
||||
<mat-list-item>
|
||||
<h3 mat-line> {{item.city_name}} </h3>
|
||||
<!-- <h3 mat-line> item </h3> -->
|
||||
<p mat-line> {{item.PDTYPE}} -{{item.count}}
|
||||
<!-- <div *ngIf="item.PDTYPE == FULL" >{{item.PDTYPE}} -{{item.count}} </div> -->
|
||||
<!-- <div *ngIf="item.PDTYPE == SMART"> {{item.PDTYPE}} -{{item.count}} </div>
|
||||
<div *ngIf="item.PDTYPE == TELE"> {{item.PDTYPE}} -{{item.count}} </div> -->
|
||||
</p>
|
||||
</mat-list-item>
|
||||
</ng-template>
|
||||
</mat-list>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -5,49 +5,69 @@ $p: 12px;
|
||||
mat-card-title{
|
||||
background-color:#E00201 !important;
|
||||
color:#fff;
|
||||
padding-bottom: 1rem;
|
||||
margin-bottom: 0px;
|
||||
//padding-bottom: 1rem;
|
||||
//margin-bottom: 0px;
|
||||
}
|
||||
.mat-input-wrapper {
|
||||
background: #fff;
|
||||
}
|
||||
// .example-form {
|
||||
// min-width: 150px;
|
||||
// max-width: 500px;
|
||||
// width: 95%;
|
||||
// }
|
||||
li
|
||||
{
|
||||
display:block;
|
||||
float:left;
|
||||
}
|
||||
|
||||
::ng-deep {
|
||||
.mat-form-field-appearance-outline .mat-form-field-outline {
|
||||
color: white;
|
||||
}
|
||||
mat-form-field {
|
||||
.mat-hint, input, ::placeholder, .mat-form-field-label {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.example-full-width {
|
||||
width: 95%;
|
||||
}
|
||||
.oval {
|
||||
height: 13px;
|
||||
width: 25px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.clas {
|
||||
|
||||
.ngx-mat-drp-date-input[_ngcontent-c17] {
|
||||
text-overflow: ellipsis;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.lengend-list {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
text-align:justify;
|
||||
}
|
||||
.cla {
|
||||
font-size: 1rem;
|
||||
}
|
||||
.cla a {
|
||||
display: block;
|
||||
color: white;
|
||||
text-align: center;
|
||||
padding: 16px;
|
||||
text-decoration: none;
|
||||
}
|
||||
.cla a:hover {
|
||||
background-color: #111111;
|
||||
|
||||
.lengend-element {
|
||||
font-size: 1rem;
|
||||
padding-right: 3%;
|
||||
}
|
||||
|
||||
.donut-inner{
|
||||
//c - with chart lender
|
||||
//c margin-bottom: 154px;
|
||||
//c margin-top: -187px;
|
||||
//c margin-left: 145px;
|
||||
margin-bottom: 154px;
|
||||
margin-top: -152px;
|
||||
margin-left: 142px;
|
||||
margin-top: -171px;
|
||||
margin-left: 120px;
|
||||
//margin-bottom: 154px;
|
||||
//margin-top: -221px;
|
||||
//margin-left: 145px;
|
||||
|
||||
//margin-bottom: 197px;
|
||||
//margin-top: -251px;
|
||||
//margin-left: 188px;
|
||||
}
|
||||
|
||||
.donut-inner h5 {
|
||||
margin-bottom: 5px;
|
||||
margin-top: 0;
|
||||
@ -56,9 +76,6 @@ mat-card-title{
|
||||
.donut-inner span{
|
||||
font-size:1rems;
|
||||
}
|
||||
.chart{
|
||||
padding: 0rem !important;
|
||||
}
|
||||
|
||||
// .profile {
|
||||
// position: relative;
|
||||
@ -595,8 +612,10 @@ mat-card-title{
|
||||
// font-size: 50px;
|
||||
// display: inline-block;
|
||||
// }
|
||||
|
||||
|
||||
//.chart{
|
||||
// padding: 2rem;
|
||||
//}
|
||||
mat-card-content{
|
||||
min-height: 400px;
|
||||
}
|
||||
.chart{
|
||||
|
||||
padding: 0.8rem;
|
||||
}
|
||||
@ -1,10 +1,16 @@
|
||||
//import { Component } from '@angular/core';
|
||||
import {Component, NgModule, ElementRef, Inject, ViewChild} from '@angular/core'
|
||||
import {Component, NgModule, ElementRef, Inject, Injectable, ViewChild} from '@angular/core'
|
||||
import { FormBuilder, FormGroup, Validators , ValidatorFn, AbstractControl, FormControl} from '@angular/forms'
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import {BrowserModule} from '@angular/platform-browser'
|
||||
import {ChartsModule, Color} from 'ng2-charts';
|
||||
//import { MastersService } from './../service/masters/masters.service'
|
||||
import {Observable} from 'rxjs';
|
||||
import {map, startWith, debounceTime, distinctUntilChanged, switchMap} from 'rxjs/operators';
|
||||
import { MastersService } from '../settings/service/masters/masters.service';
|
||||
import { DashboardService } from './dashboard.service';
|
||||
import { NgxDrpOptions, PresetItem, Range } from 'ngx-mat-daterange-picker';
|
||||
import { BaseChartDirective } from 'ng2-charts/ng2-charts';
|
||||
//import { DatePipe } from '@angular/common';
|
||||
|
||||
@Component({
|
||||
selector: 'app-dashboard',
|
||||
@ -13,12 +19,22 @@ import { BaseChartDirective } from 'ng2-charts/ng2-charts';
|
||||
})
|
||||
|
||||
export class DashboardComponent {
|
||||
|
||||
dashboardTitle = 'Monthly Status';
|
||||
|
||||
@ViewChild('mycanvas')
|
||||
myChart: BaseChartDirective;
|
||||
canvas:ElementRef;
|
||||
/** Declaration Part Of DataRange Picker */
|
||||
range:Range = {fromDate:new Date(), toDate: new Date()};
|
||||
options:NgxDrpOptions;
|
||||
presets:Array<PresetItem> = [];
|
||||
|
||||
@ViewChild('dateRangePicker') dateRangePicker;
|
||||
/* RefLINK: https://www.npmjs.com/package/ngx-mat-daterange-picker */
|
||||
/** End Of Date Range Declaration */
|
||||
|
||||
dashboardTitle = 'PD Status';
|
||||
|
||||
/** Declaration Part Of Doughnut Chart */
|
||||
@ViewChild('mycanvas') canvas:ElementRef;
|
||||
//myChart: BaseChartDirective;
|
||||
|
||||
|
||||
doughnutChartType = 'doughnut';
|
||||
doughnutChartLabels: string[] = ['Draft','Triggered','Allocated','Scheduled','InProgress','Completed','QC Completed'];
|
||||
@ -34,106 +50,134 @@ export class DashboardComponent {
|
||||
total1: number = 0;
|
||||
total2: number = 0;
|
||||
total3: number = 0;
|
||||
|
||||
cityWisePD : any[];
|
||||
lenderWisePD :any[];
|
||||
alertMessage : any[];
|
||||
legendArr : any[] = [];
|
||||
|
||||
legendData: any;
|
||||
|
||||
total4: number = 0;
|
||||
total5: number = 0;
|
||||
total6: number = 0;
|
||||
flag : number = 0;
|
||||
|
||||
// doughnutChartColors: any[] = [{
|
||||
// backgroundColor: ['#f44336', '#3f51b5', '#ffeb3b', '#4caf50', '#2196f3','#673ab7']
|
||||
// backgroundColor: ['#c1c1c1','#f44336','#3f51b5','#ffeb3b','#4caf50','#2196f3','#673ab7']
|
||||
// }];
|
||||
|
||||
doughnutChartColors: any[] = [{
|
||||
|
||||
//backgroundColor: ['#c1c1c1','#f44336','#3f51b5','#ffeb3b','#4caf50','#2196f3','#673ab7']
|
||||
backgroundColor: ['#c1c1c1','#f44336','#ffa500','#ffeb3b','#3f51b5','#00ff00','#4caf50']
|
||||
|
||||
}];
|
||||
|
||||
// globalChartOptionsFullPD: any = {
|
||||
// responsive: false,
|
||||
// legend: {
|
||||
// display: false,
|
||||
// position: 'bottom'
|
||||
// }
|
||||
// };
|
||||
// globalChartOptionsSmartPD: any = {
|
||||
// responsive: false,
|
||||
// legend: {
|
||||
// display: false,
|
||||
// position: 'bottom'
|
||||
// }
|
||||
// };
|
||||
globalChartOptions: any = {
|
||||
responsive: false,
|
||||
legend: {
|
||||
display: true,
|
||||
position: 'bottom'
|
||||
}
|
||||
};
|
||||
|
||||
/** Declaration Part Of SubCard Section */
|
||||
|
||||
cityWisePD : any=[];
|
||||
lenderWisePD :any=[];
|
||||
alertMessage : any=[];
|
||||
|
||||
// title: {
|
||||
// display: true,
|
||||
// position: "bottom",
|
||||
// text: 'Upcoming Meetings'
|
||||
// },
|
||||
// legend: {
|
||||
// display: false
|
||||
// },
|
||||
// centertext: "123"
|
||||
globalChartOptions: any = {
|
||||
responsive: false,
|
||||
//legendCallback: this.getLegendCallback
|
||||
//legendCallback: function (chart) {
|
||||
// console.log(chart);
|
||||
// return 'a';
|
||||
// }
|
||||
legend: {
|
||||
display: true,
|
||||
position: 'bottom'
|
||||
}
|
||||
};
|
||||
//getColor(color) {
|
||||
//switch (country) {
|
||||
//case "#c1c1c1":
|
||||
//return '#c1c1c1';
|
||||
//case "#f44336":
|
||||
//return "#f44336";
|
||||
//case "#ffa500":
|
||||
//return "#ffa500";
|
||||
//case "#ffeb3b":
|
||||
//return "#ffeb3b";
|
||||
//case "#3f51b5":
|
||||
//return "#3f51b5";
|
||||
//case "#00ff00":
|
||||
//return "#00ff00";
|
||||
//case "#4caf50":
|
||||
//return "#4caf50";
|
||||
//}
|
||||
//}
|
||||
selectedCity : any=[];
|
||||
selectedLender : any=[];
|
||||
|
||||
constructor(private _dashboardService: DashboardService) {
|
||||
/** Declaration Part Of Title Form Section */
|
||||
myControl = new FormControl();
|
||||
myControl2 = new FormControl();
|
||||
myControl3 = new FormControl();
|
||||
|
||||
lenderData : any[];
|
||||
cityData : any[];
|
||||
|
||||
|
||||
constructor(private _dashboardService: DashboardService,
|
||||
private _masterService: MastersService) {
|
||||
|
||||
/** To Display The City Data For City DropDown */
|
||||
this._masterService.getAllCity().subscribe(
|
||||
dataresult => {
|
||||
if (dataresult.dataStatus == true) {
|
||||
this.cityData = dataresult.records;
|
||||
this.cityData = this.cityData.filter(city=>city.isactive == 1 );
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
/** To Display The Entities Data For Entities DropDown */
|
||||
this._masterService.getAllMasterData('ENTITY').subscribe(
|
||||
dataresult => {
|
||||
if (dataresult.dataStatus == true) {
|
||||
this.lenderData = dataresult.records;
|
||||
this.lenderData = this.lenderData.filter(entity=>entity.isactive == 1 );
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
// Doughnut
|
||||
//name: "DoughnutTextInside"
|
||||
|
||||
ngOnInit(){
|
||||
this.getPDSubCardData();
|
||||
this.getDoughnutChartData();
|
||||
let arr1 = this.doughnutChartLabels;
|
||||
let arr2 = this.doughnutChartColors["0"].backgroundColor;
|
||||
//console.log(arr1.length);
|
||||
//console.log(arr2.length);
|
||||
if(arr1.length == arr2.length){
|
||||
for(let i=0;i<arr1.length;i++ )
|
||||
{
|
||||
this.legendArr[i] = {'labelcolor':arr2[i],'labelname':arr1[i] };
|
||||
}
|
||||
}
|
||||
//console.log(this.legendArr);
|
||||
}
|
||||
|
||||
this.getDoughnutChartData();
|
||||
|
||||
// var DoughnutTextInsideChart = new Chart($('#myChart')[0].getContext('2d'));
|
||||
const today = new Date();
|
||||
const fromMin = new Date(today.getFullYear(), today.getMonth()-2, 1);
|
||||
const fromMax = new Date(today.getFullYear(), today.getMonth()+1, 0);
|
||||
const toMin = new Date(today.getFullYear(), today.getMonth()-1, 1);
|
||||
const toMax = new Date(today.getFullYear(), today.getMonth()+2, 0);
|
||||
|
||||
const resetRange = {fromDate: today, toDate: today};
|
||||
this.dateRangePicker.resetDates(resetRange); // will trigger selectedDateRangeChanged
|
||||
|
||||
|
||||
this.setupPresets();
|
||||
this.options = {
|
||||
presets: this.presets,
|
||||
format: 'mediumDate',
|
||||
range: {fromDate:today, toDate: today},
|
||||
applyLabel: "Submit",
|
||||
calendarOverlayConfig: {
|
||||
shouldCloseOnBackdropClick: false,
|
||||
hasBackdrop:false,
|
||||
},
|
||||
placeholder: "Date",
|
||||
cancelLabel: "Cancel",
|
||||
excludeWeekends:true,
|
||||
fromMinMax: {fromDate:fromMin, toDate:fromMax},
|
||||
toMinMax: {fromDate:toMin, toDate:toMax}
|
||||
};
|
||||
}
|
||||
|
||||
updateRange(range: Range){
|
||||
|
||||
this.range = range;
|
||||
this.onChange(this.range,1);
|
||||
}
|
||||
|
||||
setupPresets() {
|
||||
|
||||
const backDate = (numOfDays) => {
|
||||
const today = new Date();
|
||||
return new Date(today.setDate(today.getDate() - numOfDays));
|
||||
}
|
||||
|
||||
const today = new Date();
|
||||
const yesterday = backDate(1);
|
||||
const minus7 = backDate(7)
|
||||
const minus30 = backDate(30);
|
||||
const currMonthStart = new Date(today.getFullYear(), today.getMonth(), 1);
|
||||
const currMonthEnd = new Date(today.getFullYear(), today.getMonth()+1, 0);
|
||||
const lastMonthStart = new Date(today.getFullYear(), today.getMonth()-1, 1);
|
||||
const lastMonthEnd = new Date(today.getFullYear(), today.getMonth(), 0);
|
||||
|
||||
this.presets = [
|
||||
{presetLabel: "Yesterday", range:{ fromDate:yesterday, toDate:today }},
|
||||
{presetLabel: "Last 7 Days", range:{ fromDate: minus7, toDate:today }},
|
||||
{presetLabel: "Last 30 Days", range:{ fromDate: minus30, toDate:today }},
|
||||
{presetLabel: "This Month", range:{ fromDate: currMonthStart, toDate:currMonthEnd }},
|
||||
{presetLabel: "Last Month", range:{ fromDate: lastMonthStart, toDate:lastMonthEnd }}
|
||||
]
|
||||
}
|
||||
|
||||
/**
|
||||
* To Get and Display PD Details As Per
|
||||
@ -236,11 +280,18 @@ if(arr1.length == arr2.length){
|
||||
**/
|
||||
getDoughnutChartData(){
|
||||
|
||||
this._dashboardService.getPDDetailForDoughnut().subscribe(data => {
|
||||
let fromdate = '' ;
|
||||
let todate = '';
|
||||
let cityarr = '';
|
||||
let lenderarr = '';
|
||||
|
||||
this._dashboardService.getPDDetailForDoughnut(fromdate,todate,cityarr,lenderarr).subscribe(data => {
|
||||
this.flag = 1;
|
||||
console.log(' ***** Doughnut Chart Data *****');
|
||||
console.log('Whole Data',data);
|
||||
console.log('Monthly Status',data.records.current_month);
|
||||
|
||||
|
||||
let DraftIndexvalue = this.doughnutChartLabels.indexOf('Draft');
|
||||
let TriggedIndexvalue = this.doughnutChartLabels.indexOf('Triggered');
|
||||
let AllocatedIndexvalue = this.doughnutChartLabels.indexOf('Allocated');
|
||||
@ -249,23 +300,7 @@ getDoughnutChartData(){
|
||||
let CompletedIndexvalue = this.doughnutChartLabels.indexOf('Completed');
|
||||
let QCCompletedIndexvalue = this.doughnutChartLabels.indexOf('QC Completed');
|
||||
|
||||
if(data.records.current_day.length != '0'){
|
||||
//console.log('If Condition day');
|
||||
console.log('Today Status ',data.records.current_day);
|
||||
}
|
||||
else{
|
||||
//console.log('Else Condition day');
|
||||
}
|
||||
|
||||
if(data.records.current_week.length != '0'){
|
||||
//console.log('If Condition week');
|
||||
console.log('Weekly Status',data.records.current_week);
|
||||
}
|
||||
else{
|
||||
//console.log('Else Condition week');
|
||||
}
|
||||
|
||||
if(data.records.current_month.length != '0'){
|
||||
if(data.records.current_month.length != 0){
|
||||
//console.log('If Condition monthLY');
|
||||
console.log('Monthly Status',data.records.current_month);
|
||||
|
||||
@ -555,95 +590,6 @@ getDoughnutChartData(){
|
||||
else{
|
||||
this.tempDataTelePD[QCCompletedIndexvalue] = 0;
|
||||
}
|
||||
|
||||
// y: number
|
||||
|
||||
//console.log(monthlyFullPDArr.pd_status);
|
||||
// for(let FPD of monthlyFullPDArr){
|
||||
|
||||
// if(FPD.pd_status == 'TRIGGERED'){
|
||||
// console.log('PD Status');
|
||||
// let Indexvalue = this.doughnutChartLabels.indexOf('Triggered');
|
||||
// let y = +FPD.count; // y: number
|
||||
// console.log('Initial',this.tempDataFullPD);
|
||||
// this.tempDataFullPD[Indexvalue] = y;
|
||||
// console.log(this.tempDataFullPD);
|
||||
// }
|
||||
// else{
|
||||
// let Indexvalue = this.doughnutChartLabels.indexOf('Triggered');
|
||||
// this.tempDataFullPD[Indexvalue] = 0;
|
||||
// }
|
||||
|
||||
// // if(contact.pd_status == 'TRIGGERED' && contact.PDTYPE == 'FULL'){
|
||||
// // let Indexvalue = this.doughnutChartLabels.indexOf('Triggered');
|
||||
// // var y = +contact.count; // y: number
|
||||
// // console.log('Initial',this.tempDataFullPD);
|
||||
// // this.tempDataFullPD[Indexvalue] = y;
|
||||
// // console.log(this.tempDataFullPD);
|
||||
// // }
|
||||
// // else{
|
||||
// // let Indexvalue = this.doughnutChartLabels.indexOf('Triggered');
|
||||
// // this.tempDataFullPD[Indexvalue] = 0;
|
||||
|
||||
// // }
|
||||
// if(FPD.pd_status == 'ALLOCATED'){
|
||||
// let Indexvalue = this.doughnutChartLabels.indexOf('Allocated');
|
||||
// var y = +FPD.count; // y: number
|
||||
// // console.log(this.tempDataFullPD);
|
||||
// this.tempDataFullPD[Indexvalue] = y;
|
||||
// //console.log('allocated b4',tempDataFullPD);
|
||||
// }
|
||||
// else{
|
||||
// let Indexvalue = this.doughnutChartLabels.indexOf('Allocated');
|
||||
// this.tempDataFullPD[Indexvalue] = 0;
|
||||
// }
|
||||
// if(FPD.pd_status == 'INPROGRESS'){
|
||||
// let Indexvalue = this.doughnutChartLabels.indexOf('InProgress');
|
||||
// var y = +FPD.count; // y: number
|
||||
// this.tempDataFullPD[Indexvalue] = y;
|
||||
// //console.log('b4',tempDataFullPD);
|
||||
// }
|
||||
// else{
|
||||
// let Indexvalue = this.doughnutChartLabels.indexOf('InProgress');
|
||||
// this.tempDataFullPD[Indexvalue] = 0;
|
||||
// }
|
||||
// if(FPD.pd_status == 'SCHEDULED'){
|
||||
// let Indexvalue = this.doughnutChartLabels.indexOf('Scheduled');
|
||||
// var y = +FPD.count; // y: number
|
||||
// this.tempDataFullPD[Indexvalue] = y;
|
||||
// //console.log('b4',tempDataFullPD);
|
||||
// }
|
||||
// else{
|
||||
// let Indexvalue = this.doughnutChartLabels.indexOf('Scheduled');
|
||||
// this.tempDataFullPD[Indexvalue] = 0;
|
||||
// //console.log('d',tempDataFullPD);
|
||||
// }
|
||||
// if(FPD.pd_status == 'COMPLETED'){
|
||||
// let Indexvalue = this.doughnutChartLabels.indexOf('Completed');
|
||||
// var y = +FPD.count; // y: number
|
||||
// this.tempDataFullPD[Indexvalue] = y;
|
||||
// //console.log('allocated',tempDataFullPD);
|
||||
// }
|
||||
// else{
|
||||
// let Indexvalue = this.doughnutChartLabels.indexOf('Completed');
|
||||
// this.tempDataFullPD[Indexvalue] = 0;
|
||||
// }
|
||||
// //return tempDataFullPD;
|
||||
|
||||
// if(FPD.pd_status == 'QC COMPLETED'){
|
||||
// let Indexvalue = this.doughnutChartLabels.indexOf('QC Completed');
|
||||
// var y = +FPD.count; // y: number
|
||||
// this.tempDataFullPD[Indexvalue] = y;
|
||||
// //console.log('allocated',tempDataFullPD);
|
||||
// }
|
||||
// else{
|
||||
// let Indexvalue = this.doughnutChartLabels.indexOf('QC Completed');
|
||||
// this.tempDataFullPD[Indexvalue] = 0;
|
||||
// //console.log('Final Data',tempDataFullPD);
|
||||
// }
|
||||
// //console.log('inside',this.tempDataFullPD);
|
||||
// }
|
||||
//this.doughnutChartDataForFullPD = [3,4,5,6,7,8];
|
||||
}
|
||||
|
||||
else{
|
||||
@ -659,11 +605,12 @@ getDoughnutChartData(){
|
||||
console.log('temp Smart Data',this.tempDataSmartPD);
|
||||
console.log('Final Tele Data Completed',this.doughnutChartDataForTelePD);
|
||||
console.log('temp Tele Data',this.tempDataTelePD);
|
||||
console.log('total3',this.total3);
|
||||
console.log('total2',this.total2);
|
||||
console.log('total1',this.total1);
|
||||
//console.log(this.tempDataTelePD.__proto__);
|
||||
//console.log(this.tempDataTelePD._chartjs);
|
||||
|
||||
//console.log(this.doughnutChartDataForTelePD['event'].listeners["0"].chart.boxes["0"].legendItems);
|
||||
|
||||
//chart.chart.ctx;
|
||||
|
||||
/*beforeDraw: function (this.doughnutChartDataForTelePD.chart) {
|
||||
@ -715,124 +662,441 @@ getDoughnutChartData(){
|
||||
// }];
|
||||
// }, 100);
|
||||
|
||||
doughnutOptionsFullPD: any = Object.assign({
|
||||
doughnutOptions: any = Object.assign({
|
||||
elements: {
|
||||
arc: {
|
||||
borderWidth: 0.2
|
||||
borderWidth: 0
|
||||
}
|
||||
},
|
||||
title: {
|
||||
display: true,
|
||||
position: "top",
|
||||
text: 'Full',
|
||||
fontSize: 15,
|
||||
},
|
||||
// title: {
|
||||
// display: true,
|
||||
// position: "top",
|
||||
// text: 'Full',
|
||||
// fontSize: 15,
|
||||
centertext:'One'
|
||||
},this.globalChartOptions);
|
||||
|
||||
doughnutOptionsSmartPD: any = Object.assign({
|
||||
elements: {
|
||||
arc: {
|
||||
borderWidth: 0.2
|
||||
onChange(e :any,flag: any) {
|
||||
let fromdate;
|
||||
let todate;
|
||||
console.log('flag',flag);
|
||||
if(flag == 1){
|
||||
|
||||
fromdate = new Date(e.fromDate);
|
||||
todate = new Date(e.toDate);
|
||||
|
||||
}
|
||||
|
||||
if(flag == 2){
|
||||
// if(e.source._selected == true ){
|
||||
// let data = e.source.value.city_id;
|
||||
// this.selectedCity.push(data);
|
||||
// console.log('true');
|
||||
// }
|
||||
// else if(e.source._selected == false){
|
||||
// let data = e.source.value.city_id;
|
||||
// let index = this.selectedCity.indexOf(data);
|
||||
// this.selectedCity.splice(index,1);
|
||||
// console.log('false');
|
||||
// }
|
||||
let data = e.source.value.city_id;
|
||||
e.source._selected == true ? this.selectedCity.push(data)
|
||||
: this.selectedCity.splice(this.selectedCity.indexOf(data),1);
|
||||
console.log(this.selectedCity);
|
||||
}
|
||||
|
||||
if(flag == 3){
|
||||
let data = e.source.value.entity_id;
|
||||
e.source._selected == true ? this.selectedLender.push(data)
|
||||
: this.selectedLender.splice(this.selectedLender.indexOf(data),1);
|
||||
|
||||
console.log(this.selectedLender);
|
||||
|
||||
|
||||
}
|
||||
|
||||
// this._dashboardService.get2(fromdate,todate,this.selectedLender,this.selectedCity).subscribe(
|
||||
|
||||
// dataresult=>{
|
||||
|
||||
// });
|
||||
|
||||
this._dashboardService.getPDDetailForDoughnut(fromdate,todate,this.selectedLender,this.selectedCity).subscribe(data => {
|
||||
|
||||
console.log(' *****Updated Date Doughnut Chart Data *****');
|
||||
console.log('Whole Data',data);
|
||||
if(data.records.current_month.length != 0){
|
||||
this.total1 = 0;
|
||||
this.total2 = 0;
|
||||
this.total3 = 0;
|
||||
}
|
||||
},
|
||||
title: {
|
||||
display: true,
|
||||
position: "top",
|
||||
text: 'Smart',
|
||||
fontSize: 15
|
||||
},
|
||||
centertext:'Two'
|
||||
},
|
||||
this.globalChartOptions);
|
||||
this.doughnutChartDataForFullPD = [];
|
||||
this.doughnutChartDataForSmartPD = [];
|
||||
this.doughnutChartDataForTelePD = [];
|
||||
|
||||
|
||||
doughnutOptionsTelePD: any = Object.assign({
|
||||
elements: {
|
||||
arc: {
|
||||
borderWidth: 0.2
|
||||
let DraftIndexvalue = this.doughnutChartLabels.indexOf('Draft');
|
||||
let TriggedIndexvalue = this.doughnutChartLabels.indexOf('Triggered');
|
||||
let AllocatedIndexvalue = this.doughnutChartLabels.indexOf('Allocated');
|
||||
let ScheduledIndexvalue = this.doughnutChartLabels.indexOf('Scheduled');
|
||||
let InProgressIndexvalue = this.doughnutChartLabels.indexOf('InProgress');
|
||||
let CompletedIndexvalue = this.doughnutChartLabels.indexOf('Completed');
|
||||
let QCCompletedIndexvalue = this.doughnutChartLabels.indexOf('QC Completed');
|
||||
|
||||
if(data.records.current_month.length != 0){
|
||||
//console.log('If Condition monthLY');
|
||||
console.log('Monthly Status',data.records.current_month);
|
||||
|
||||
let MonthlyFullPDArr = data.records.current_month.filter(arr=>arr.PDTYPE == 'FULL' );
|
||||
let MonthlySmartPDArr = data.records.current_month.filter(arr=>arr.PDTYPE == 'SMART' );
|
||||
let MonthlyTelePDArr = data.records.current_month.filter(arr=>arr.PDTYPE == 'TELE' );
|
||||
|
||||
let DraftFullPDvalue = MonthlyFullPDArr.filter(arr=>arr.pd_status == 'DRAFT');
|
||||
if(DraftFullPDvalue.length != '0'){
|
||||
//console.log('console triggered value',TriggerFullPDvalue);
|
||||
for(let FPD of DraftFullPDvalue){
|
||||
let y = +FPD.count;
|
||||
this.total1 = this.total1+y;
|
||||
this.tempDataFullPD[DraftIndexvalue] = y;
|
||||
}
|
||||
}
|
||||
else{
|
||||
this.tempDataFullPD[DraftIndexvalue] = 0;
|
||||
}
|
||||
|
||||
let TriggerFullPDvalue = MonthlyFullPDArr.filter(arr=>arr.pd_status == 'TRIGGERED');
|
||||
if(TriggerFullPDvalue.length != '0'){
|
||||
//console.log('console triggered value',TriggerFullPDvalue);
|
||||
for(let FPD of TriggerFullPDvalue){
|
||||
let y = +FPD.count;
|
||||
this.total1 = this.total1+y;
|
||||
this.tempDataFullPD[TriggedIndexvalue] = y;
|
||||
}
|
||||
}
|
||||
else{
|
||||
this.tempDataFullPD[TriggedIndexvalue] = 0;
|
||||
}
|
||||
|
||||
let AllocatedFullPDvalue = MonthlyFullPDArr.filter(arr=>arr.pd_status == 'ALLOCATED');
|
||||
if(AllocatedFullPDvalue.length != '0'){
|
||||
for(let FPD of AllocatedFullPDvalue){
|
||||
let y = +FPD.count;
|
||||
this.total1 = this.total1+y;
|
||||
this.tempDataFullPD[AllocatedIndexvalue] = y;
|
||||
}
|
||||
}
|
||||
else{
|
||||
this.tempDataFullPD[AllocatedIndexvalue] = 0;
|
||||
}
|
||||
|
||||
let ScheduledFullPDvalue = MonthlyFullPDArr.filter(arr=>arr.pd_status == 'SCHEDULED');
|
||||
if(ScheduledFullPDvalue.length != '0'){
|
||||
for(let FPD of ScheduledFullPDvalue){
|
||||
let y = +FPD.count;
|
||||
this.total1 = this.total1+y;
|
||||
this.tempDataFullPD[ScheduledIndexvalue] = y;
|
||||
}
|
||||
//let y = +ScheduledFullPDvalue.count;
|
||||
|
||||
}
|
||||
else{
|
||||
this.tempDataFullPD[ScheduledIndexvalue] = 0;
|
||||
}
|
||||
|
||||
let InProgressFullPDvalue = MonthlyFullPDArr.filter(arr=>arr.pd_status == 'INPROGRESS');
|
||||
if(InProgressFullPDvalue.length != '0'){
|
||||
for(let FPD of InProgressFullPDvalue){
|
||||
let y = +FPD.count;
|
||||
this.total1 = this.total1+y;
|
||||
this.tempDataFullPD[InProgressIndexvalue] = y;
|
||||
}
|
||||
//let y = +InProgressFullPDvalue.count;
|
||||
|
||||
}
|
||||
else{
|
||||
this.tempDataFullPD[InProgressIndexvalue] = 0;
|
||||
}
|
||||
|
||||
let CompletedFullPDvalue = MonthlyFullPDArr.filter(arr=>arr.pd_status == 'COMPLETED');
|
||||
if(CompletedFullPDvalue.length != '0'){
|
||||
for(let FPD of CompletedFullPDvalue){
|
||||
let y = +FPD.count;
|
||||
this.total1 = this.total1+y;
|
||||
this.tempDataFullPD[CompletedIndexvalue] = y;
|
||||
}
|
||||
//let y = +CompletedFullPDvalue.count;
|
||||
|
||||
}
|
||||
else{
|
||||
this.tempDataFullPD[CompletedIndexvalue] = 0;
|
||||
}
|
||||
|
||||
let QCCompletedFullPDvalue = MonthlyFullPDArr.filter(arr=>arr.pd_status == "QC_COMPLETED");
|
||||
if(QCCompletedFullPDvalue.length != '0'){
|
||||
for(let FPD of QCCompletedFullPDvalue){
|
||||
let y = +FPD.count;
|
||||
this.total1 = this.total1+y;
|
||||
this.tempDataFullPD[QCCompletedIndexvalue] = y;
|
||||
}
|
||||
//let y = +QCCompletedFullPDvalue.count;
|
||||
|
||||
}
|
||||
else{
|
||||
this.tempDataFullPD[QCCompletedIndexvalue] = 0;
|
||||
}
|
||||
|
||||
let DraftSmartPDvalue = MonthlySmartPDArr.filter(arr=>arr.pd_status == 'DRAFT');
|
||||
if(DraftSmartPDvalue.length != '0'){
|
||||
//console.log('console triggered value',TriggerFullPDvalue);
|
||||
for(let FPD of DraftSmartPDvalue){
|
||||
let y = +FPD.count;
|
||||
this.total2 = this.total2+y;
|
||||
this.tempDataSmartPD[DraftIndexvalue] = y;
|
||||
}
|
||||
}
|
||||
else{
|
||||
this.tempDataSmartPD[DraftIndexvalue] = 0;
|
||||
}
|
||||
|
||||
let TriggerSmartPDvalue = MonthlySmartPDArr.filter(arr=>arr.pd_status == 'TRIGGERED');
|
||||
if(TriggerSmartPDvalue.length != '0'){
|
||||
|
||||
for(let FPD of TriggerSmartPDvalue){
|
||||
let y = +FPD.count;
|
||||
this.total2 = this.total2+y;
|
||||
this.tempDataSmartPD[TriggedIndexvalue] = y;
|
||||
}
|
||||
}
|
||||
else{
|
||||
this.tempDataSmartPD[TriggedIndexvalue] = 0;
|
||||
}
|
||||
|
||||
let AllocatedSmartPDvalue = MonthlySmartPDArr.filter(arr=>arr.pd_status == 'ALLOCATED');
|
||||
if(AllocatedSmartPDvalue.length != '0'){
|
||||
for(let FPD of AllocatedSmartPDvalue){
|
||||
let y = +FPD.count;
|
||||
this.total2 = this.total2+y;
|
||||
this.tempDataSmartPD[AllocatedIndexvalue] = y;
|
||||
}
|
||||
}
|
||||
else{
|
||||
this.tempDataSmartPD[AllocatedIndexvalue] = 0;
|
||||
}
|
||||
|
||||
let ScheduledSmartPDvalue = MonthlySmartPDArr.filter(arr=>arr.pd_status == 'SCHEDULED');
|
||||
if(ScheduledSmartPDvalue.length != '0'){
|
||||
for(let FPD of ScheduledSmartPDvalue){
|
||||
let y = +FPD.count;
|
||||
this.total2 = this.total2+y;
|
||||
this.tempDataSmartPD[ScheduledIndexvalue] = y;
|
||||
}
|
||||
//let y = +ScheduledFullPDvalue.count;
|
||||
|
||||
}
|
||||
else{
|
||||
this.tempDataSmartPD[ScheduledIndexvalue] = 0;
|
||||
}
|
||||
|
||||
let InProgressSmartPDvalue = MonthlySmartPDArr.filter(arr=>arr.pd_status == 'INPROGRESS');
|
||||
if(InProgressSmartPDvalue.length != '0'){
|
||||
for(let FPD of InProgressSmartPDvalue){
|
||||
let y = +FPD.count;
|
||||
this.total2 = this.total2+y;
|
||||
this.tempDataSmartPD[InProgressIndexvalue] = y;
|
||||
}
|
||||
//let y = +InProgressFullPDvalue.count;
|
||||
|
||||
}
|
||||
else{
|
||||
this.tempDataSmartPD[InProgressIndexvalue] = 0;
|
||||
}
|
||||
|
||||
let CompletedSmartPDvalue = MonthlySmartPDArr.filter(arr=>arr.pd_status == 'COMPLETED');
|
||||
if(CompletedSmartPDvalue.length != '0'){
|
||||
for(let FPD of CompletedSmartPDvalue){
|
||||
let y = +FPD.count;
|
||||
this.total2 = this.total2+y;
|
||||
this.tempDataSmartPD[CompletedIndexvalue] = y;
|
||||
}
|
||||
//let y = +CompletedFullPDvalue.count;
|
||||
|
||||
}
|
||||
else{
|
||||
this.tempDataSmartPD[CompletedIndexvalue] = 0;
|
||||
}
|
||||
|
||||
let QCCompletedSmartPDvalue = MonthlySmartPDArr.filter(arr=>arr.pd_status == "QC_COMPLETED");
|
||||
if(QCCompletedSmartPDvalue.length != '0'){
|
||||
for(let FPD of QCCompletedSmartPDvalue){
|
||||
let y = +FPD.count;
|
||||
this.total2 = this.total2+y;
|
||||
this.tempDataSmartPD[QCCompletedIndexvalue] = y;
|
||||
}
|
||||
//let y = +QCCompletedFullPDvalue.count;
|
||||
|
||||
}
|
||||
else{
|
||||
this.tempDataSmartPD[QCCompletedIndexvalue] = 0;
|
||||
}
|
||||
|
||||
|
||||
let DraftTelePDvalue = MonthlyTelePDArr.filter(arr=>arr.pd_status == 'DRAFT');
|
||||
if(DraftTelePDvalue.length != '0'){
|
||||
|
||||
for(let FPD of DraftTelePDvalue){
|
||||
let y = +FPD.count;
|
||||
this.total1 = this.total3+y;
|
||||
this.tempDataTelePD[DraftIndexvalue] = y;
|
||||
}
|
||||
}
|
||||
else{
|
||||
this.tempDataTelePD[DraftIndexvalue] = 0;
|
||||
}
|
||||
|
||||
let TriggerTelePDvalue = MonthlyTelePDArr.filter(arr=>arr.pd_status == 'TRIGGERED');
|
||||
if(TriggerTelePDvalue.length != '0'){
|
||||
//console.log('console triggered value',TriggerTelePDvalue);
|
||||
for(let FPD of TriggerTelePDvalue){
|
||||
let y = +FPD.count;
|
||||
this.total3 = this.total3+y;
|
||||
this.tempDataTelePD[TriggedIndexvalue] = y;
|
||||
}
|
||||
}
|
||||
else{
|
||||
this.tempDataTelePD[TriggedIndexvalue] = 0;
|
||||
}
|
||||
|
||||
let AllocatedTelePDvalue = MonthlyTelePDArr.filter(arr=>arr.pd_status == 'ALLOCATED');
|
||||
if(AllocatedTelePDvalue.length != '0'){
|
||||
for(let FPD of AllocatedTelePDvalue){
|
||||
let y = +FPD.count;
|
||||
this.total3 = this.total3+y;
|
||||
this.tempDataTelePD[AllocatedIndexvalue] = y;
|
||||
}
|
||||
}
|
||||
else{
|
||||
this.tempDataTelePD[AllocatedIndexvalue] = 0;
|
||||
}
|
||||
|
||||
let ScheduledTelePDvalue = MonthlyTelePDArr.filter(arr=>arr.pd_status == 'SCHEDULED');
|
||||
if(ScheduledTelePDvalue.length != '0'){
|
||||
for(let FPD of ScheduledTelePDvalue){
|
||||
let y = +FPD.count;
|
||||
this.total3 = this.total3+y;
|
||||
this.tempDataTelePD[ScheduledIndexvalue] = y;
|
||||
}
|
||||
//let y = +ScheduledFullPDvalue.count;
|
||||
|
||||
}
|
||||
else{
|
||||
this.tempDataTelePD[ScheduledIndexvalue] = 0;
|
||||
}
|
||||
|
||||
let InProgressTelePDvalue = MonthlyTelePDArr.filter(arr=>arr.pd_status == 'INPROGRESS');
|
||||
if(InProgressTelePDvalue.length != '0'){
|
||||
for(let FPD of InProgressTelePDvalue){
|
||||
let y = +FPD.count;
|
||||
this.total3 = this.total3+y;
|
||||
this.tempDataTelePD[InProgressIndexvalue] = y;
|
||||
}
|
||||
//let y = +InProgressFullPDvalue.count;
|
||||
|
||||
}
|
||||
else{
|
||||
this.tempDataTelePD[InProgressIndexvalue] = 0;
|
||||
}
|
||||
|
||||
let CompletedTelePDvalue = MonthlyTelePDArr.filter(arr=>arr.pd_status == 'COMPLETED');
|
||||
if(CompletedTelePDvalue.length != '0'){
|
||||
for(let FPD of CompletedTelePDvalue){
|
||||
let y = +FPD.count;
|
||||
this.total3 = this.total3+y;
|
||||
this.tempDataTelePD[CompletedIndexvalue] = y;
|
||||
}
|
||||
//let y = +CompletedFullPDvalue.count;
|
||||
|
||||
}
|
||||
else{
|
||||
this.tempDataTelePD[CompletedIndexvalue] = 0;
|
||||
}
|
||||
|
||||
let QCCompletedTelePDvalue = MonthlyTelePDArr.filter(arr=>arr.pd_status == "QC_COMPLETED");
|
||||
if(QCCompletedTelePDvalue.length != '0'){
|
||||
for(let FPD of QCCompletedTelePDvalue){
|
||||
let y = +FPD.count;
|
||||
this.total3 = this.total3+y;
|
||||
this.tempDataTelePD[QCCompletedIndexvalue] = y;
|
||||
}
|
||||
//let y = +QCCompletedFullPDvalue.count;
|
||||
|
||||
}
|
||||
else{
|
||||
this.tempDataTelePD[QCCompletedIndexvalue] = 0;
|
||||
}
|
||||
}
|
||||
},
|
||||
title: {
|
||||
display: true,
|
||||
position: "top",
|
||||
text: 'Tele',
|
||||
fontSize: 15
|
||||
},
|
||||
centertext:'Three'
|
||||
}, this.globalChartOptions);
|
||||
|
||||
|
||||
// Chart.pluginService.register({
|
||||
// beforeDraw: function(chart) {
|
||||
// var width = chart.chart.width,
|
||||
// height = chart.chart.height,
|
||||
// ctx = chart.chart.ctx;
|
||||
else{
|
||||
//console.log('Else Condition month');
|
||||
}
|
||||
this.doughnutChartDataForFullPD = this.tempDataFullPD;
|
||||
this.doughnutChartDataForSmartPD = this.tempDataSmartPD;
|
||||
this.doughnutChartDataForTelePD = this.tempDataTelePD;
|
||||
|
||||
// ctx.restore();
|
||||
// var fontSize = (height / 114).toFixed(2);
|
||||
// ctx.font = fontSize + "em sans-serif";
|
||||
// ctx.textBaseline = "middle";
|
||||
console.log('Final full Data Completed',this.doughnutChartDataForFullPD);
|
||||
console.log('temp full Data',this.tempDataFullPD);
|
||||
console.log('Final Smart Data Completed',this.doughnutChartDataForSmartPD);
|
||||
console.log('temp Smart Data',this.tempDataSmartPD);
|
||||
console.log('Final Tele Data Completed',this.doughnutChartDataForTelePD);
|
||||
console.log('temp Tele Data',this.tempDataTelePD);
|
||||
console.log('total3',this.total3);
|
||||
console.log('total2',this.total2);
|
||||
console.log('total1',this.total1);
|
||||
//console.log(this.tempDataTelePD.__proto__);
|
||||
//console.log(this.tempDataTelePD._chartjs);
|
||||
//console.log(this.doughnutChartDataForTelePD['event'].listeners["0"].chart.boxes["0"].legendItems);
|
||||
//chart.chart.ctx;
|
||||
|
||||
// var text = "75%",
|
||||
// textX = Math.round((width - ctx.measureText(text).width) / 2),
|
||||
// textY = height / 2;
|
||||
/*beforeDraw: function (this.doughnutChartDataForTelePD.chart) {
|
||||
if (chart.config.options.elements.center) {
|
||||
//Get ctx from string
|
||||
var ctx = chart.chart.ctx;
|
||||
|
||||
// ctx.fillText(text, textX, textY);
|
||||
// ctx.save();
|
||||
// }
|
||||
// });
|
||||
//Get options from the center object in options
|
||||
var centerConfig = chart.config.options.elements.center;
|
||||
var fontStyle = centerConfig.fontStyle || 'Arial';
|
||||
var txt = centerConfig.text;
|
||||
var color = centerConfig.color || '#000';
|
||||
var sidePadding = centerConfig.sidePadding || 20;
|
||||
var sidePaddingCalculated = (sidePadding/100) * (chart.innerRadius * 2)
|
||||
//Start with a base font of 30px
|
||||
ctx.font = "30px " + fontStyle;
|
||||
|
||||
//Get the width of the string and also the width of the element minus 10 to give it 5px side padding
|
||||
var stringWidth = ctx.measureText(txt).width;
|
||||
var elementWidth = (chart.innerRadius * 2) - sidePaddingCalculated;
|
||||
|
||||
// Find out how much the font can grow in width.
|
||||
var widthRatio = elementWidth / stringWidth;
|
||||
var newFontSize = Math.floor(30 * widthRatio);
|
||||
var elementHeight = (chart.innerRadius * 2);
|
||||
|
||||
// Pick a new font size so it will not be larger than the height of label.
|
||||
var fontSizeToUse = Math.min(newFontSize, elementHeight);
|
||||
|
||||
//Set font settings to draw it correctly.
|
||||
ctx.textAlign = 'center';
|
||||
ctx.textBaseline = 'middle';
|
||||
var centerX = ((chart.chartArea.left + chart.chartArea.right) / 2);
|
||||
var centerY = ((chart.chartArea.top + chart.chartArea.bottom) / 2);
|
||||
ctx.font = fontSizeToUse+"px " + fontStyle;
|
||||
ctx.fillStyle = color;
|
||||
|
||||
//Draw text in center
|
||||
ctx.fillText(txt, centerX, centerY);
|
||||
}
|
||||
}*/
|
||||
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
// import {Component, NgModule, ElementRef, Inject, ViewChild} from '@angular/core'
|
||||
// import {BrowserModule} from '@angular/platform-browser'
|
||||
// import {ChartsModule, Color} from 'ng2-charts';
|
||||
|
||||
// @Component({
|
||||
// selector: 'app-dashboard',
|
||||
// templateUrl: './dashboard.component.html',
|
||||
// styleUrls: ['./dashboard.component.scss']
|
||||
// })
|
||||
|
||||
|
||||
// export class DashboardComponent {
|
||||
|
||||
// @ViewChild('mycanvas')
|
||||
// canvas:ElementRef;
|
||||
// doughnutChartDataForTelePD:number[]=[1,2,3,4,5,6];
|
||||
// options: { circumference: number; rotation: number; animation: { onComplete: () => void; }; };
|
||||
|
||||
// ngOnInit(){
|
||||
// var ctx = this.canvas.nativeElement.getContext("2d");
|
||||
|
||||
// let me = this;
|
||||
// this.options = {
|
||||
|
||||
// circumference: Math.PI,
|
||||
// rotation : Math.PI,
|
||||
// animation:{ onComplete: function() {
|
||||
// me.doit(ctx);
|
||||
// }}
|
||||
// }
|
||||
|
||||
// }
|
||||
|
||||
// doit(ctx) {
|
||||
// // Chart.types.Doughnut.prototype.draw.apply(this, arguments);
|
||||
|
||||
// var width = this.canvas.nativeElement.clientWidth,
|
||||
// height = this.canvas.nativeElement.clientHeight;
|
||||
|
||||
// var fontSize = (height / 250).toFixed(2);
|
||||
// ctx.font = fontSize + "em Verdana";
|
||||
// ctx.textBaseline = "middle";
|
||||
// ctx.fillStyle = "blue";
|
||||
|
||||
// var text = "Pass Rate 82%",
|
||||
// textX = Math.round((width - ctx.measureText(text).width) / 2),
|
||||
// textY = height -10;
|
||||
|
||||
// ctx.fillText(text, textX, textY);
|
||||
// ctx.restore();
|
||||
// }
|
||||
// }
|
||||
}
|
||||
@ -1,7 +1,23 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { MatIconModule, MatCardModule,MatTabsModule, MatButtonModule, MatListModule, MatProgressBarModule, MatMenuModule } from '@angular/material';
|
||||
|
||||
import { MatIconModule,
|
||||
MatCardModule,
|
||||
MatTabsModule,
|
||||
MatButtonModule,
|
||||
MatListModule,
|
||||
MatProgressBarModule,
|
||||
MatMenuModule,
|
||||
MatAutocompleteModule,
|
||||
MatInputModule,
|
||||
MatSelectModule} from '@angular/material';
|
||||
|
||||
// import {
|
||||
// MatRadioModule,
|
||||
// MatToolbarModule,MatCheckboxModule,
|
||||
// MatTableModule,MatPaginatorModule,MatSortModule} from '@angular/material';
|
||||
|
||||
import { FlexLayoutModule } from '@angular/flex-layout';
|
||||
|
||||
import { ChartsModule } from 'ng2-charts/ng2-charts';
|
||||
@ -13,10 +29,15 @@ import { DashboardRoutes } from './dashboard.routing';
|
||||
|
||||
/** Dashboard Service */
|
||||
import { DashboardService } from './dashboard.service';
|
||||
import { MastersService } from '../settings/service/masters/masters.service';
|
||||
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
|
||||
|
||||
import { NgxMatDrpModule } from 'ngx-mat-daterange-picker';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule,
|
||||
FormsModule, ReactiveFormsModule,
|
||||
RouterModule.forChild(DashboardRoutes),
|
||||
MatIconModule,
|
||||
MatCardModule,
|
||||
@ -25,12 +46,16 @@ import { DashboardService } from './dashboard.service';
|
||||
MatListModule,
|
||||
MatProgressBarModule,
|
||||
MatMenuModule,
|
||||
MatInputModule,
|
||||
MatSelectModule,
|
||||
ChartsModule,
|
||||
NgxChartsModule,
|
||||
NgxDatatableModule,
|
||||
FlexLayoutModule
|
||||
MatAutocompleteModule,
|
||||
NgxMatDrpModule,
|
||||
FlexLayoutModule,
|
||||
],
|
||||
providers: [ DashboardService ],
|
||||
providers: [ DashboardService,MastersService ],
|
||||
declarations: [ DashboardComponent ]
|
||||
})
|
||||
|
||||
|
||||
@ -22,9 +22,9 @@ const currentdate = new Date().toJSON().slice(0,19).replace('T',' ');
|
||||
export class DashboardService {
|
||||
|
||||
private apiUrl = environment.apiEndpoint;
|
||||
//private apiUrl = 'http://localhost/sparqapi/api/';
|
||||
|
||||
|
||||
constructor(private _http: HttpClient,
|
||||
constructor(private _http: HttpClient,
|
||||
private _aws:AwsService) { }
|
||||
|
||||
// $route['getDashBoardMaster']
|
||||
@ -45,13 +45,26 @@ export class DashboardService {
|
||||
/**
|
||||
* TO get PD Datas For Dashboard Screen
|
||||
*/
|
||||
getPDDetailForDoughnut(): Observable<any> {
|
||||
return this._http.get(this.apiUrl+'getDashBoardMaster')
|
||||
.pipe(
|
||||
catchError(this.handleError('role', []))
|
||||
)
|
||||
// getPDDetailForDoughnut(): Observable<any> {
|
||||
// return this._http.get(this.apiUrl+'getDashBoardMaster')
|
||||
// .pipe(
|
||||
// catchError(this.handleError('role', []))
|
||||
// )
|
||||
|
||||
// }
|
||||
|
||||
getPDDetailForDoughnut(fromdate,todate,cityarr,lenderarr): Observable<any> {
|
||||
|
||||
return this._http.post(this.apiUrl+'getDashBoardMaster', {
|
||||
"fromdate":fromdate,
|
||||
"todate": todate,
|
||||
"cityarr":cityarr,
|
||||
"lenderarr": lenderarr})
|
||||
.pipe(catchError(this.handleError('role', []))
|
||||
)
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
getLenderDetail(): Observable<any> {
|
||||
return this._http.get(this.apiUrl+'getDashBoardLenderCity')
|
||||
@ -77,6 +90,18 @@ getLenderDetail(): Observable<any> {
|
||||
|
||||
}
|
||||
|
||||
get2(fromdate,todate,cityarr,lenderarr): Observable<any> {
|
||||
|
||||
return this._http.post(this.apiUrl+'getDashBoardMaster', {
|
||||
"fromdate":fromdate,
|
||||
"todate": todate,
|
||||
"cityarr":cityarr,
|
||||
"lenderarr": lenderarr})
|
||||
.pipe(catchError(this.handleError('role', []))
|
||||
)
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* TO Handle The Error
|
||||
*/
|
||||
|
||||
@ -254,7 +254,7 @@
|
||||
</mat-menu> -->
|
||||
<button (click)="end.toggle()" mat-icon-button class="ml-xs overflow-visible">
|
||||
<mat-icon>notifications</mat-icon>
|
||||
<span class="notification-label">2</span>
|
||||
<span *ngIf="alertCount != 0" style = "width:23px" class="notification-label" >{{alertCount}}</span>
|
||||
</button>
|
||||
<button [mat-menu-trigger-for]="user" mat-icon-button class="ml-xs">
|
||||
<mat-icon>person</mat-icon>
|
||||
@ -313,9 +313,25 @@
|
||||
<router-outlet></router-outlet>
|
||||
</div>
|
||||
<mat-sidenav #end position="end" class="chat-panel" mode="over" opened="false">
|
||||
<div style="text-align: center;">Not Yet Scheduled</div>
|
||||
<mat-tab-group [selectedIndex]="1" mat-stretch-tabs>
|
||||
<mat-tab>
|
||||
<mat-tab>
|
||||
<ng-template mat-tab-label>Triggered</ng-template>
|
||||
<div class="scroll">
|
||||
<mat-nav-list>
|
||||
<ng-template let-item let-last="last" ngFor [ngForOf]="alertMsgTriggerType">
|
||||
<mat-list-item>
|
||||
<h3 mat-line> {{item.applicant_name}} </h3>
|
||||
<p mat-line> {{item.lender_applicant_id}}</p>
|
||||
<p mat-line> {{item.entity_name}} - {{item.pd_status}} </p>
|
||||
</mat-list-item>
|
||||
</ng-template>
|
||||
</mat-nav-list>
|
||||
</div>
|
||||
</mat-tab>
|
||||
<!--<mat-tab>
|
||||
<ng-template mat-tab-label>Today</ng-template>
|
||||
<ng-template mat-tab-label>Allocated</ng-template>
|
||||
<div class="scroll">
|
||||
<mat-list class="pt-1 pb-1">
|
||||
<mat-list-item>
|
||||
@ -356,11 +372,20 @@
|
||||
</mat-list-item>
|
||||
</mat-nav-list>
|
||||
</div>
|
||||
</mat-tab>
|
||||
</mat-tab>-->
|
||||
<mat-tab>
|
||||
<ng-template mat-tab-label>Notifications</ng-template>
|
||||
<ng-template mat-tab-label>Allocated</ng-template>
|
||||
<div class="scroll">
|
||||
<mat-nav-list>
|
||||
<mat-nav-list>
|
||||
<ng-template let-item let-last="last" ngFor [ngForOf]="alertMsgAllocateType">
|
||||
<mat-list-item>
|
||||
<h3 mat-line> {{item.applicant_name}} </h3>
|
||||
<p mat-line> {{item.lender_applicant_id}}</p>
|
||||
<p mat-line> {{item.entity_name}} - {{item.pd_status}} </p>
|
||||
</mat-list-item>
|
||||
</ng-template>
|
||||
</mat-nav-list>
|
||||
<!-- <mat-nav-list>
|
||||
<mat-list-item>
|
||||
<mat-icon mat-list-avatar class="mat-text-primary">people</mat-icon>
|
||||
<h4 mat-line>Social</h4>
|
||||
@ -392,7 +417,7 @@
|
||||
<h4 mat-line>4 Users connected</h4>
|
||||
<span class="text-mat mat-text-muted" mat-line>{{ 1428275520000 | date: 'fullDate' }}</span>
|
||||
</mat-list-item>
|
||||
</mat-nav-list>
|
||||
</mat-nav-list> -->
|
||||
</div>
|
||||
</mat-tab>
|
||||
</mat-tab-group>
|
||||
|
||||
@ -10,7 +10,7 @@ import PerfectScrollbar from 'perfect-scrollbar';
|
||||
import { PerfectScrollbarConfigInterface,
|
||||
PerfectScrollbarComponent, PerfectScrollbarDirective } from 'ngx-perfect-scrollbar';
|
||||
import { UserService } from '../../settings/service/user.service';
|
||||
|
||||
import { DashboardService } from '../../dashboard/dashboard.service';
|
||||
import { AwsService } from '../../AwsService/aws.service';
|
||||
|
||||
@Component({
|
||||
@ -44,7 +44,12 @@ export class AdminLayoutComponent implements OnInit, OnDestroy {
|
||||
@ViewChild('sidemenu') sidemenu;
|
||||
public config: PerfectScrollbarConfigInterface = {};
|
||||
|
||||
constructor(private router: Router, public menuItems: MenuItems, public horizontalMenuItems : HorizontalMenuItems, public translate: TranslateService,public aws:AwsService,public users:UserService ) {
|
||||
|
||||
alertMsgTriggerType : any[];
|
||||
alertMsgAllocateType : any[];
|
||||
alertCount: any;
|
||||
|
||||
constructor(private router: Router, public menuItems: MenuItems, public horizontalMenuItems : HorizontalMenuItems, public translate: TranslateService,public aws:AwsService,public users:UserService,private _dashboardService: DashboardService) {
|
||||
const browserLang: string = translate.getBrowserLang();
|
||||
translate.use(browserLang.match(/en|fr/) ? browserLang : 'en');
|
||||
this.users.getroles().subscribe(res=>{
|
||||
@ -78,6 +83,22 @@ export class AdminLayoutComponent implements OnInit, OnDestroy {
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
/** 3) Getting PD Details For Alert Message */
|
||||
this._dashboardService.getAlertDetail().subscribe(data => {
|
||||
|
||||
console.log(' *****Layout Alert Message *****');
|
||||
console.log('Layout Alert Message Whole Data',data);
|
||||
|
||||
this.alertCount = data.records.length;
|
||||
this.alertMsgTriggerType = data.records.filter(trigger=>trigger.pd_status == "TRIGGERED" );
|
||||
this.alertMsgAllocateType = data.records.filter(allocate=>allocate.pd_status == "ALLOCATED" );
|
||||
console.log('Layout Alert Message',this.alertMsgTriggerType);
|
||||
console.log('Layout Alert Message',this.alertMsgAllocateType);
|
||||
console.log('Layout Alert Count',this.alertCount);
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user