Sineedge/sparqsineedge
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CSS changes

Browse Source
This commit is contained in:
venbatechnologies@gmail.com 2018-11-17 18:57:55 +05:30
parent 629bb2b72c
commit f99edf725b
5 changed files with 48 additions and 345 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

111
ng6-seed/src/app/dashboard/dashboard.component.html
View File

@ -1,19 +1,4 @@
<!--<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">
<div class="pad-wrap">
<!-- doughnut -->
<div fxFlex.gt-sm="100" fxFlex.gt-xs="100" fxFlex="100">
@ -28,21 +13,6 @@
</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;">
@ -53,23 +23,12 @@
</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;">
@ -81,32 +40,11 @@
<!-- <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
{{doughnutChartDataForSmartPD}} Length
{{doughnutChartDataForSmartPD.length}}
Tele Pd
{{doughnutChartDataForTelePD}} Length
{{doughnutChartDataForTelePD.length}} -->
<mat-card-content>
<div fxLayout="row">
<div fxFlex.gt-sm="30" fxFlex="100">
@ -166,44 +104,5 @@
</mat-card-content>
</mat-card>
</div>
<!--<div fxLayout="row wrap">
<div fxFlex.gt-sm="100" fxFlex.gt-xs="100" fxFlex="100">
<mat-card>
<mat-card-title>Today's Status</mat-card-title>
<mat-card-subtitle></mat-card-subtitle>
<hr>
<mat-card-content>
<div class="w-100 h-300px">
<ngx-charts-bar-horizontal-stacked [scheme]="colorScheme" [results]="multi" [gradient]="gradient" [xAxis]="showXAxis" [yAxis]="showYAxis" [legend]="showLegend" [showXAxisLabel]="showXAxisLabel" [showYAxisLabel]="showYAxisLabel" [xAxisLabel]="yAxisLabel" [yAxisLabel]="xAxisLabel" width="832" height="200">
</ngx-charts-bar-horizontal-stacked>
</div>
</mat-card-content>
</mat-card>
</div>
</div>
<div fxLayout="row">
<div fxFlex="77%">
<mat-card>
<mat-card-title>Today's Details</mat-card-title>
<mat-card-content>
<div class="w-100 h-300px">
<span>Full</span>
<ngx-charts-advanced-pie-chart [view]="view" [scheme]="colorScheme" [results]="full" [gradient]="gradient" >
</ngx-charts-advanced-pie-chart>
</div>
<div class="w-100 h-300px">
<span>Smart</span>
<ngx-charts-advanced-pie-chart [view]="view" [scheme]="colorScheme" [results]="smart" [gradient]="gradient" >
</ngx-charts-advanced-pie-chart>
</div>
<div class="w-100 h-300px">
<span>Tele</span>
<ngx-charts-advanced-pie-chart [view]="view" [scheme]="colorScheme" [results]="tele" [gradient]="gradient" >
</ngx-charts-advanced-pie-chart>
</div>
</mat-card-content>
</mat-card>
</div>-->
</div>

20
ng6-seed/src/app/dashboard/dashboard.component.scss
View File

@ -22,16 +22,16 @@ li
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;
}
}
}
//::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%;

238
ng6-seed/src/app/dashboard/dashboard.component.ts
View File

@ -116,7 +116,7 @@ export class DashboardComponent {
ngOnInit(){
this.getPDSubCardData();
this.getDoughnutChartData();
@ -126,13 +126,18 @@ export class DashboardComponent {
const toMin = new Date(today.getFullYear(), today.getMonth()-1, 1);
const toMax = new Date(today.getFullYear(), today.getMonth()+2, 0);
const thismonth = new Date(today.getFullYear(), today.getMonth(), 0);
console.log(fromMin);
console.log(fromMax);
console.log(toMin);
console.log(toMax);
//const resetRange = {fromDate: today, toDate: today};
//this.dateRangePicker.resetDates(resetRange); // will trigger selectedDateRangeChanged
const LastDateForPreMonth = new Date(today.getFullYear(), today.getMonth(), 0);
const FirstDateForPreMonth = new Date(today.getFullYear(), today.getMonth()-1, 1);
console.log('FromDateMin:',fromMin);
console.log('FromDateMax:',fromMax);
console.log('ToDateMin',toMin);
console.log('ToDateMax',toMax);
console.log('LastDateForPreMonth',LastDateForPreMonth);
console.log('FirstDateForPreMonth',FirstDateForPreMonth);
// const resetRange = {fromDate: today, toDate: today};
// this.dateRangePicker.resetDates(resetRange); // will trigger selectedDateRangeChanged
this.setupPresets();
@ -184,102 +189,7 @@ console.log(toMax);
]
}
/**
* To Get and Display PD Details As Per
* 1) LenderWise PD Details,
* 2) Citywise PD Details,
* 3) Alert Message of PD Details.
**/
getPDSubCardData(){
/** 1) Getting Lenderwise PD Details - Daily , Weekly and Monthly Data **/
this._dashboardService.getLenderDetail().subscribe(data => {
console.log(' ***** Lender Wise *****');
console.log('Lender Wise Whole Data',data);
/** Daily Lender Datas */
if(data.records.current_day.length != '0'){
//console.log('If Condition day');
}
else{
//console.log('Else Condition day');
}
/** Weekly Lender Datas */
if(data.records.current_week.length != '0'){
//console.log('If Condition week');
}
else{
//console.log('Else Condition week');
}
/** Monthly Lender Datas */
if(data.records.current_month.length != '0'){
this.lenderWisePD = Object.keys(data.records.current_month).map(function(key) {
return data.records.current_month[key];
});
console.log('Monthly Status Lenderwise PD',this.lenderWisePD);
}
else{
//console.log('Else Condition month');
}
});
/** 2) Getting Citywise PD Details - Daily , Weekly and Monthly Data **/
this._dashboardService.getCityDetail().subscribe(data => {
console.log(' ***** City Wise *****');
console.log('City Wise Whole Data',data);
/** Daily City Datas */
if(data.records.current_day.length != '0'){
//console.log('If Condition day');
}
else{
//console.log('Else Condition day');
}
/** Weekly City Datas */
if(data.records.current_week.length != '0'){
//console.log('If Condition week');
}
else{
//console.log('Else Condition week');
}
/** Monthly City Datas */
if(data.records.current_month.length != '0'){
//this.cityWisePD = this.TodayFullPD.current_month;
this.cityWisePD = Object.keys(data.records.current_month).map(function(key) {
return data.records.current_month[key];
});
console.log('Monthly Status Citywise PD',this.cityWisePD);
}
else{
//console.log('Else Condition month');
}
});
/** 3) Getting Alert Message of PD Details */
this._dashboardService.getAlertDetail().subscribe(data => {
console.log(' ***** Alert Message *****');
console.log('Alert Message Whole Data',data);
this.alertMessage = data.records;
console.log('Alert Message',this.alertMessage);
});
}
/**
* To Get and Display Doughnut Chart Data Based on PDType
**/
@ -613,59 +523,11 @@ getDoughnutChartData(){
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) {
if (chart.config.options.elements.center) {
//Get ctx from string
var ctx = chart.chart.ctx;
//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);
}
}*/
})
}
// setTimeout(() => {
// this.datasets = [{
// data: [12, 19, 3, 5, 2, 3]
// }];
// }, 100);
doughnutOptions: any = Object.assign({
elements: {
@ -673,11 +535,6 @@ doughnutOptions: any = Object.assign({
borderWidth: 0
}
},
// title: {
// display: true,
// position: "top",
// text: 'Full',
// fontSize: 15,
centertext:'One'
},this.globalChartOptions);
@ -693,17 +550,6 @@ onChange(e :any,flag: any) {
}
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);
@ -720,11 +566,6 @@ onChange(e :any,flag: any) {
}
// this._dashboardService.get2(fromdate,todate,this.selectedLender,this.selectedCity).subscribe(
// dataresult=>{
// });
this._dashboardService.getPDDetailForDoughnut(fromdate,todate,this.selectedLender,this.selectedCity).subscribe(data => {
@ -758,7 +599,7 @@ onChange(e :any,flag: any) {
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;
@ -771,7 +612,7 @@ onChange(e :any,flag: any) {
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;
@ -1054,52 +895,9 @@ onChange(e :any,flag: any) {
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;
console.log('total2',this.total2);
console.log('total1',this.total1);
/*beforeDraw: function (this.doughnutChartDataForTelePD.chart) {
if (chart.config.options.elements.center) {
//Get ctx from string
var ctx = chart.chart.ctx;
//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);
}
}*/
})

12
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/client-info/client-info.component.html
View File

@ -1,5 +1,6 @@
<!--<pre> {{ m_group | json}}</pre>-->
<mat-card style="padding: 12px;">
<p>Client Details</p>
<form *ngIf="apiLoadFinish" [formGroup]="_clientQuesFrom" (submit)="onSubmit()" novalidate>
<div fxLayout="row" fxLayoutAlign="start none">
<div formArrayName="client_details" fxFill>
@ -28,7 +29,7 @@
<div fxLayout="row wrap" fxLayoutGap="12px" fxLayoutAlign="start none">
<div>
<mat-form-field>
<mat-select (selectionChange)="selectedPM($event)" placeholder="Select Payment Mode" formControlName="payment_mode">
<mat-select (selectionChange)="selectedPM($event)" placeholder="Payment Mode" formControlName="payment_mode">
<mat-option *ngFor="let pm of m_paymentModeType" [value]="pm.id">{{ pm.name }}</mat-option>
</mat-select>
</mat-form-field>
@ -49,7 +50,7 @@
<div fxLayout="row" fxLayoutGap="12px" fxLayoutAlign="start none">
<div>
<mat-form-field>
<mat-select (selectionChange)="selectedFreqPurchase($event)" placeholder="Select Frequency of Purchase" formControlName="frequency_of_purchase">
<mat-select (selectionChange)="selectedFreqPurchase($event)" placeholder="Frequency of Purchase" formControlName="frequency_of_purchase">
<mat-option *ngFor="let feq of m_freqOfPurchase" [value]="feq.frequency_id">{{ feq.name }}</mat-option>
</mat-select>
</mat-form-field>
@ -63,17 +64,18 @@
<div fxFlex="20">
<span *ngIf="_clientQuesFrom.controls.client_details.controls.length > 1" (click)="removeLanguage(i)">
<button mat-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Delete" matTooltipPosition="above"><mat-icon>delete</mat-icon></button>
<button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Delete" matTooltipPosition="above"><mat-icon>delete</mat-icon></button>
</span>
</div>
</div>
</div>
</div>
<button mat-raised-button mat-icon-button mat-button color="primary" matTooltip="Add More Answer" matTooltipPosition="above"
class="mr-1 mb-1 hover-icon" (click)="addSupplierDetails($event); false"><mat-icon>add</mat-icon></button>
</div>
</div>
<div class="row" style="text-align:right;">
<button mat-raised-button mat-icon-button mat-button color="primary" matTooltip="Add More Client Details" matTooltipPosition="above"
class="mr-1 mb-1 hover-icon" (click)="addSupplierDetails($event); false"><mat-icon>add</mat-icon></button>
<button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Reset" matTooltipPosition="above" type="reset"><mat-icon>settings_backup_restore</mat-icon></button>
<button mat-raised-button mat-icon-button class="mr-1 mb-1 hover-icon" matTooltip="Save" matTooltipPosition="above" type="submit"><mat-icon>save</mat-icon></button>
</div>

12
ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/client-info/client-info.component.ts
View File

@ -13,6 +13,7 @@ import {
FormArray,
} from '@angular/forms';
import { NotifierService } from 'angular-notifier';
import {
@ -84,10 +85,13 @@ export class ClientInfoComponent implements OnInit {
// 'name': 'Others'
// }
// ]
private notifier: NotifierService;
constructor(
notifier: NotifierService,
private _formBuilder: FormBuilder,
private pdTrigerService: PdTrigerService) { }
private pdTrigerService: PdTrigerService) {
this.notifier = notifier;}
ngOnInit() {
this.getM_FreqOfPurchase();
@ -254,16 +258,16 @@ var result = Object.keys(supp_data).map(function(key) {
dataresult => {
if (dataresult.status == 200) {
// console.log(dataresult);
// this.notifier.notify('success', 'Record Saved Successfully.!');
this.notifier.notify('success', 'Record Saved Successfully.!');
// this.dialogRef.close();
// alert("sample alert for Saving");
}
else {
// this.notifier.notify('warning', 'Something Wents Wrong Try Again.!');
this.notifier.notify('warning', 'Something Wents Wrong Try Again.!');
// this.errorMessage = "Some Thing Wents Wrong Try Again !";
}
}, error => {
// this.notifier.notify('warning', 'Something Wents Wrong Try Again.!');
this.notifier.notify('warning', 'Something Wents Wrong Try Again.!');
// this.errorMessage = "Something Wents Wrong Try Again !";
// this.dialogRef.close();
});