edit ticketbalance &absense home &payslip header

accural-balance
Fatimah.Alshammari 6 years ago
parent 08c8ea71b1
commit c1e72539de

@ -1,20 +1,21 @@
<!-- <ion-header > <ion-header >
<ion-toolbar class="header-toolbar-new"> <ion-toolbar class="header-toolbar-new">
<ion-title color="light">{{ts.trPK('absenceList','absenceList')}}</ion-title> <ion-title color="light">{{ts.trPK('absenceList','absenceList')}}</ion-title>
<ion-buttons slot="start"> <ion-buttons slot="start">
<nav-buttons></nav-buttons> <nav-buttons></nav-buttons>
</ion-buttons> </ion-buttons>
<ion-buttons slot="end"> <!-- <ion-buttons slot="end">
<button class="headerBtn" (click)="AccrualBalances()"> <button class="headerBtn" (click)="AccrualBalances()">
<img class="headerImg" src="../assets/imgs/accubalance.png"> <img class="headerImg" src="../assets/imgs/accubalance.png">
</button> </button>
</ion-buttons> </ion-buttons> -->
</ion-toolbar> </ion-toolbar>
</ion-header> --> </ion-header>
<ion-content class="colorBG">
<ion-content >
<!-- colorBG -->
<div class="contentEit" style="background: #f3f1f1;">
<div class="header-div"> <div class="header-div">
<!-- <ion-buttons slot="end"> <!-- <ion-buttons slot="end">
@ -22,10 +23,12 @@
<img class="headerImg" src="../assets/imgs/accubalance.png"> <img class="headerImg" src="../assets/imgs/accubalance.png">
</button> </button>
</ion-buttons> --> </ion-buttons> -->
<ion-buttons slot="start">
<!-- <ion-buttons slot="start">
<ion-back-button color="light" class="btnBack" defaultHref="/home"></ion-back-button> <ion-back-button color="light" class="btnBack" defaultHref="/home"></ion-back-button>
</ion-buttons> </ion-buttons>
<p class="Title">{{ts.trPK('absenceList','absenceList')}}</p> <p class="Title">{{ts.trPK('absenceList','absenceList')}}</p> -->
</div> </div>
@ -39,7 +42,7 @@
<div style="color: black;"> <div style="color: black;">
<div class="result-graph"> <div class="result-graph">
<div> <div >
<!-- <ion-item> --> <!-- <ion-item> -->
<!-- <ion-label class="datelabel">{{request.P_EFFECTIVE_DATE}}</ion-label> --> <!-- <ion-label class="datelabel">{{request.P_EFFECTIVE_DATE}}</ion-label> -->
<ion-datetime [(ngModel)]="Sdate" class="datetime" displayFormat="DD MMMM YYYY" placeholder="DD MMMM YYYY" <ion-datetime [(ngModel)]="Sdate" class="datetime" displayFormat="DD MMMM YYYY" placeholder="DD MMMM YYYY"
@ -51,9 +54,11 @@
margin-top: -10px; margin-right: -9px;"></div> margin-top: -10px; margin-right: -9px;"></div>
<div class="result-text-container"> <div class="result-text-container">
<!-- <h2>10</h2> --> <h2>{{totalnumber}}</h2>
<h2>{{accrualNet + accrualUsed + accrualYearly}}</h2>
<!-- <h2>{{accrualNet + accrualUsed + accrualYearly}}</h2> -->
<span>{{ts.trPK('absenceList','totalNumber')}}</span> <span>{{ts.trPK('absenceList','totalNumber')}}</span>
@ -139,7 +144,7 @@
<!-- /////////////////////////////////////////////////////////up --> <!-- /////////////////////////////////////////////////////////up -->
<ion-content padding> <!-- <ion-content padding> -->
<div class="no-dataDiv" *ngIf="!GetAbsenceTransactionList || GetAbsenceTransactionList.length <= 0" > <div class="no-dataDiv" *ngIf="!GetAbsenceTransactionList || GetAbsenceTransactionList.length <= 0" >
<ion-row> <ion-row>
@ -245,7 +250,7 @@
<ion-icon class="addClass" name="add" (click)="createAbsence()"></ion-icon> <ion-icon class="addClass" name="add" (click)="createAbsence()"></ion-icon>
</div>
</ion-content> </ion-content>
<!-- <ion-footer> <!-- <ion-footer>
<div class="centerDiv"> <div class="centerDiv">

@ -144,9 +144,9 @@
border-radius: 20px !important; border-radius: 20px !important;
padding-top: 28px; padding-top: 28px;
padding-bottom: 14px; padding-bottom: 14px;
margin-left: 9px; margin-left: 13px;
margin-right: 13px; margin-right: 13px;
margin-top: -94px; margin-top: -136px;
margin-bottom: 10px; margin-bottom: 10px;
} }
@ -159,7 +159,7 @@
margin: 0; margin: 0;
position: absolute; position: absolute;
left: 31%; left: 31%;
top: 26%; top: 23%;
display: block; display: block;
text-align: center; text-align: center;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
@ -204,4 +204,15 @@ margin-top: -13px;
font-size: 17px; font-size: 17px;
font-family: WorkSans-Bold; font-family: WorkSans-Bold;
margin-top: -4px; margin-top: -4px;
}
.contentEit:before {
position: absolute;
content: "";
// background: #22c6b3;
height: 140px;
width: 100%;
left: 0;
top: 0px;
z-index: 1;
} }

@ -97,7 +97,8 @@ export class HomeComponent implements OnInit {
this.accrualNet = this.leaveAccrualBalance.ACCRUAL_NET_ENTITLEMENT; this.accrualNet = this.leaveAccrualBalance.ACCRUAL_NET_ENTITLEMENT;
this.accrualUsed = this.leaveAccrualBalance.ACCRUAL_USED_ENTITLEMENT; this.accrualUsed = this.leaveAccrualBalance.ACCRUAL_USED_ENTITLEMENT;
this.accrualYearly = this.leaveAccrualBalance.ACCRUAL_YEARLY_ENTITLEMENT; this.accrualYearly = this.leaveAccrualBalance.ACCRUAL_YEARLY_ENTITLEMENT;
this.totalnumber= this.accrualNet + this.accrualUsed + this.accrualYearly;
this.totalnumber= this.totalnumber.toFixed(3);
this.request = this.common.sharedService.getSharedData('leaveAccrualBalanceDate', false); this.request = this.common.sharedService.getSharedData('leaveAccrualBalanceDate', false);
console.log("this.request" + this.request.P_EFFECTIVE_DATE); console.log("this.request" + this.request.P_EFFECTIVE_DATE);
this.effectiveDate = this.request.P_EFFECTIVE_DATE; this.effectiveDate = this.request.P_EFFECTIVE_DATE;
@ -254,7 +255,8 @@ createAbsence() {
this.accrualNet = this.balance[0].ACCRUAL_NET_ENTITLEMENT; this.accrualNet = this.balance[0].ACCRUAL_NET_ENTITLEMENT;
this.accrualUsed = this.balance[0].ACCRUAL_USED_ENTITLEMENT; this.accrualUsed = this.balance[0].ACCRUAL_USED_ENTITLEMENT;
this.accrualYearly = this.balance[0].ACCRUAL_YEARLY_ENTITLEMENT; this.accrualYearly = this.balance[0].ACCRUAL_YEARLY_ENTITLEMENT;
this.totalnumber= this.accrualNet + this.accrualUsed + this.accrualYearly;
this.totalnumber= this.totalnumber.toFixed(3);
this.data = { this.data = {
// labels: ['earingTotal', 'deductionTotal'], // labels: ['earingTotal', 'deductionTotal'],
datasets: [ datasets: [

@ -1,15 +1,16 @@
<ion-header> <ion-header>
<ion-toolbar class="header-toolbar-new"> <ion-toolbar class="header-toolbar-new">
<nav-buttons [enableMenu]="false" [enableBack]="true" [navigate]="true"></nav-buttons> <nav-buttons [enableMenu]="false" [enableBack]="true" [navigate]="true"></nav-buttons>
<ion-title>{{headerTitle}}</ion-title> <ion-title style="color: white;">{{headerTitle}}</ion-title>
</ion-toolbar> </ion-toolbar>
</ion-header> </ion-header>
<ion-content class="colorBG"> <ion-content>
<div class="content" style="background: #f3f1f1;">
<!-- class="colorBG" -->
<div class="" [hidden]="functionName!='HMG_TKT_NEW_EIT_SS'"> <div class="" [hidden]="functionName!='HMG_TKT_NEW_EIT_SS'">
<ion-grid class="headerGrid" style="padding-top: 30%;"> <ion-grid class="headerGrid">
<p class="title">{{ts.trPK('absenceList','tickets-balance')}}</p> <p class="title">{{ts.trPK('absenceList','tickets-balance')}}</p>
<div style="color: black;"> <div style="color: black;">
@ -224,6 +225,7 @@
<ion-infinite-scroll-content></ion-infinite-scroll-content> <ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll> </ion-infinite-scroll>
</div>
</ion-content> </ion-content>
<ion-footer> <ion-footer>
@ -233,4 +235,5 @@
<!-- <ion-button class="footer-button" color="customnavy" ion-button (click)="addEITRrq()"> <!-- <ion-button class="footer-button" color="customnavy" ion-button (click)="addEITRrq()">
{{'general, add' | translate}}</ion-button> --> {{'general, add' | translate}}</ion-button> -->
</div> </div>
</ion-footer> </ion-footer>

@ -85,6 +85,17 @@ h4 {
} }
//////////////////////////////// ////////////////////////////////
.content:before {
position: absolute;
content: "";
background: #22c6b3;
height: 140px;
width: 100%;
left: 0;
top: 0px;
z-index: 1;
}
.colorBG{ .colorBG{
--background: #f0efef; --background: #f0efef;
@ -99,7 +110,7 @@ h4 {
.title{ .title{
text-align: center; text-align: center;
color: black; color: black;
margin-top: -10px; margin-top: 5px;
font-size: 17px; font-size: 17px;
} }
.today-graph{ .today-graph{
@ -111,22 +122,37 @@ h4 {
} }
.headerGrid{ .headerGrid{
// background-color: white !important;
// border: 1px solid #cac8c8 !important;
// border-radius: 20px !important;
// padding-top: 28px;
// padding-bottom: 53px;
// margin-left: 9px;
// margin-right: 13px;
// margin-top: -94px;
// margin-bottom: 10px;
background-color: white !important; background-color: white !important;
border: 1px solid #cac8c8 !important; border: 1px solid #cac8c8 !important;
border-radius: 20px !important; /* padding-top: 28px; */
padding-top: 28px;
padding-bottom: 53px; padding-bottom: 53px;
margin-left: 9px; padding-top: -30px;
margin-left: 13px;
margin-right: 13px; margin-right: 13px;
margin-top: -94px; /* margin-top: -86px; */
margin-bottom: 10px; margin-bottom: 10px;
position: relative;
z-index: 1;
border-radius: 20px;
margin-top: 17px;
} }
.result-graph{ .result-graph{
font-size: 14px; font-size: 14px;
margin-left: -48px; margin-left: -48px;
margin-right: 3px; margin-right: 3px;
margin-bottom: -30px; margin-bottom: -30px;
} }
.green-label{ .green-label{

@ -44,7 +44,6 @@ export class EitListComponent implements OnInit {
accrualNetInfants: any; accrualNetInfants: any;
accrualUNetChild: any; accrualUNetChild: any;
accrualNetAdult: any; accrualNetAdult: any;
public options = { public options = {
cutoutPercentage: 80, cutoutPercentage: 80,
@ -81,6 +80,7 @@ export class EitListComponent implements OnInit {
this.accrualNetAdult = this.accrualBalancesList[1].ACCRUAL_NET_ENTITLEMENT; this.accrualNetAdult = this.accrualBalancesList[1].ACCRUAL_NET_ENTITLEMENT;
this.accrualUNetChild = this.accrualBalancesList[2].ACCRUAL_NET_ENTITLEMENT; this.accrualUNetChild = this.accrualBalancesList[2].ACCRUAL_NET_ENTITLEMENT;
this. accrualNetInfants= this.accrualBalancesList[3].ACCRUAL_NET_ENTITLEMENT; this. accrualNetInfants= this.accrualBalancesList[3].ACCRUAL_NET_ENTITLEMENT;
this.data = { this.data = {
// labels: ['earingTotal', 'deductionTotal'], // labels: ['earingTotal', 'deductionTotal'],
datasets: [ datasets: [

@ -1,7 +1,6 @@
<!-- <!-- <ion-header>
<ion-header>
<ion-toolbar class="header-toolbar"> <ion-toolbar class="header-toolbar">
<ion-buttons slot="start"> <ion-buttons slot="start">
<ion-back-button color="light" class="btnBack" defaultHref="/home"></ion-back-button> <ion-back-button color="light" class="btnBack" defaultHref="/home"></ion-back-button>
@ -9,17 +8,25 @@
<ion-title color="light" >{{ts.trPK('payslip','title')}}</ion-title> <ion-title color="light" >{{ts.trPK('payslip','title')}}</ion-title>
</ion-toolbar> </ion-toolbar>
</ion-header> --> </ion-header> -->
<ion-header>
<ion-toolbar class="header-toolbar-new">
<nav-buttons [enableMenu]="false" [enableBack]="true" [navigate]="true"></nav-buttons>
<ion-title style="color: white;">{{ts.trPK('payslip','monthly-payslip')}}</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="colorBG"> <ion-content class="colorBG">
<div class="header-div"> <div class="header-div">
<ion-buttons slot="start"> <!-- <ion-buttons slot="start">
<ion-back-button color="light" class="btnBack" defaultHref="/home"></ion-back-button> <ion-back-button color="light" class="btnBack" defaultHref="/home"></ion-back-button>
</ion-buttons> </ion-buttons>
<p class="Title">{{ts.trPK('payslip','monthly-payslip')}}</p> <p class="Title">{{ts.trPK('payslip','monthly-payslip')}}</p>
<div class="Imgdiv"> <div class="Imgdiv">
<img class="Imgsrc"> <img class="Imgsrc">
</div> </div> -->
</div> </div>
<!-- <ion-img class="profileImg" [src]="imageSrc"></ion-img> --> <!-- <ion-img class="profileImg" [src]="imageSrc"></ion-img> -->

@ -58,19 +58,20 @@
color: var(--red); color: var(--red);
} }
.header-toolbar-new{
--background: #22c6b3;
}
.colorBG{ .colorBG{
--background: #f0efef; --background: #f0efef;
} }
.header-div { .header-div {
background-color: #22C6B3;
background-color: #22C6B3; text-transform: capitalize;
text-transform: capitalize; height: 119px;
height: 180px; position: relative;
position: relative; display: block;
display: block; margin-bottom: -28px;
margin-bottom: -28px;
} }
.Title{ .Title{
text-align: center; text-align: center;
@ -142,8 +143,8 @@
border-radius: 20px !important; border-radius: 20px !important;
padding-top: 13px; padding-top: 13px;
padding-bottom: 14px; padding-bottom: 14px;
margin-left: 30px; margin-left: 26px;
margin-right: 32px; margin-right: 28px;
margin-top: -2px; margin-top: -2px;
margin-bottom: 10px; margin-bottom: 10px;
padding-right: 21px; padding-right: 21px;
@ -214,7 +215,7 @@ margin-top: -13px;
.header{ .header{
margin-top: -126px; margin-top: -119px;
} }
.bgcolor { .bgcolor {

Loading…
Cancel
Save