mekawy-issues
Fatimah.Alshammari 6 years ago
parent 0a0c583053
commit d74b491dd9

@ -79,14 +79,14 @@
<ion-row style="margin: 0 -5px;">
<ion-col [size]="4">
<div class="attendance-information">
<span>{{ts.trPK('myTeam','checkIn')}}</span>
<span>{{ts.trPK('myTeam','check-in')}}</span>
<h2 *ngIf="attendanceTrackingList.P_SWIPE_IN !== null">{{attendanceTrackingList.P_SWIPE_IN | slice:0:-3}}</h2>
<h2 *ngIf="attendanceTrackingList.P_SWIPE_IN === null">--:--</h2>
</div>
</ion-col>
<ion-col [size]="4">
<div class="attendance-information">
<span>{{ts.trPK('myTeam','checkOut')}}</span>
<span>{{ts.trPK('myTeam','check-out')}}</span>
<h2 *ngIf="attendanceTrackingList.P_SWIPE_OUT !== null">{{attendanceTrackingList.P_SWIPE_OUT | slice:0:-3}}</h2>
<h2 *ngIf="attendanceTrackingList.P_SWIPE_OUT === null">--:--</h2>
</div>
@ -103,14 +103,19 @@
<div class="header">
<div>
<ion-row>
<ion-col [size]="2" style="text-align: left;">
<ion-icon class="activeArrow" ios="ios-arrow-dropleft-circle" md="md-arrow-dropleft-circle" (click)="previousSlide()"></ion-icon>
<ion-icon [ngClass]="direction == 'en'? 'activeArrow':'activeArrow-ar'" ios="ios-arrow-dropleft-circle" md="md-arrow-dropleft-circle" (click)="previousSlide()"></ion-icon>
</ion-col>
<ion-col [size]="8" style="text-align: center;">
<span class="month-year-span">{{month}} {{year}}</span>
</ion-col>
<ion-col [size]="2" style="text-align: right;">
<ion-icon [ngClass]=" currentMonthName === month ? 'disabledArrow' : 'activeArrow'" ios="ios-arrow-dropright-circle" md="md-arrow-dropright-circle" (click)="nextSlide()"></ion-icon>
<ion-icon [ngClass]="{'disabledArrow' : currentMonthName === month , 'activeArrow' : currentMonthName != month , 'disabledArrow-ar' : direction != 'en' ,'disabledArrow' : direction == 'en'}" ios="ios-arrow-dropright-circle" md="md-arrow-dropright-circle" (click)="nextSlide()"></ion-icon>
<!-- [ngClass]=" currentMonthName === month ? 'disabledArrow' : 'activeArrow'" -->
</ion-col>
</ion-row>
</div>

@ -231,13 +231,16 @@ ion-title{
.activeArrow-ar{
height: 20px;
width: 20px;
color: #22c6b3;
width: 20px;
color: #22c6b3;
margin-right: 275px;
}
.disabledArrow-ar{
height: 20px;
width: 20px;
color: gray;
/* margin-left: 136px; */
margin-right: -251px;
}
.result-graph {
position: relative;

@ -58,6 +58,7 @@ export class DetailsComponent implements OnInit {
public yearTitle: string;
public activeMonth: any;
public currentMonthName = this.getMonthName(new Date().getMonth() + 1);
public showData = false;
public currentYear = new Date().getFullYear();
public attendanceTrackingList: any = [];
@ -67,7 +68,7 @@ export class DetailsComponent implements OnInit {
year: any;
preMonth: number;
nextMonth: any;
public direction: string;
public options = {
cutoutPercentage: 80,
tooltips: { enabled: false },
@ -82,6 +83,7 @@ export class DetailsComponent implements OnInit {
public searchEmail = '';
public showEmailInput = false;
public showUserNameOrNameInput = true;
constructor(
public timeCardService: TimeCardService,
@ -93,7 +95,9 @@ export class DetailsComponent implements OnInit {
private location: Location,
public authService: AuthenticationService,
public dashboardService: DashboredService,
) { }
) {
this.direction = TranslatorService.getCurrentLanguageName();
}
ngOnInit() {
this.common.startLoading();
@ -131,7 +135,15 @@ export class DetailsComponent implements OnInit {
this.showData = false;
this.nextMonth = new Date().getMonth() + 2;
this.preMonth = new Date().getMonth();
this.calendarConfig(this.getMonthName(new Date().getMonth() + 1) , new Date().getFullYear());
if(this.direction == 'en'){
this.currentMonthName = this.getMonthName(new Date().getMonth() + 1);
}
else{
this.currentMonthName = this.getMonthNameAr(new Date().getMonth() + 1);
}
this.calendarConfig(this.currentMonthName) , (new Date().getFullYear());
}
calendarConfig(month?, year?) {
@ -167,6 +179,7 @@ export class DetailsComponent implements OnInit {
});
}
nextSlide() {
this.common.startLoading();
if (this.currentMonthName !== this.month) {
@ -310,6 +323,35 @@ export class DetailsComponent implements OnInit {
}
}
public getMonthNameAr(value: any): any {
switch (value) {
case 1:
return "يناير";
case 2:
return " فبراير";
case 3:
return "مارس";
case 4:
return "أبريل";
case 5:
return "مايو";
case 6:
return "يونيو";
case 7:
return "يوليو";
case 8:
return "أغسطس";
case 9:
return "سبتمبر";
case 10:
return " اكتوبر";
case 11:
return " نوفمبر";
case 12:
return "ديسمبر";
}
}
intializeMemberDetail(userID?) {
this.empSubordinate = [];

@ -2,12 +2,13 @@
<ion-toolbar class="header-toolbar-new">
<ion-title color="light">{{ts.trPK('myTeam','myTeam-header')}}</ion-title>
<ion-buttons slot="start">
<!-- <nav-buttons backLink="/home"></nav-buttons> -->
<nav-buttons></nav-buttons>
<nav-buttons backLink="/home"></nav-buttons>
<!-- <nav-buttons></nav-buttons> -->
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
<div class="contentBg">
<div class="result-graph">

@ -45,15 +45,30 @@
<div class="">
<div class="header">
<div >
<!-- <p style="position: absolute; left: 40%; bottom: 65%;">{{currentMonth}}</p> -->
<div>
<ion-row *ngIf="direction == 'ltr'">
<div class="header">
<!-- <ion-row *ngIf="direction == 'ltr'">-->
<ion-row >
<ion-col>
<button ion-button icon-start class="slidBtn" (click)="slidePrev(sliderOne,slideWithNav)">
<ion-icon [ngClass]=" payslipIndex === GetPayslipList.length-1 ? 'disabledArrow' : 'activeArrow'" ios="ios-arrow-dropleft-circle" md="md-arrow-dropleft-circle">
</ion-icon>
<!-- <ion-icon [ngClass]=" payslipIndex === GetPayslipList.length-1 ? 'disabledArrow' : 'activeArrow'" ios="ios-arrow-dropleft-circle" md="md-arrow-dropleft-circle">
</ion-icon> -->
<ion-icon
[ngClass]=" {'disabledArrow-ar' : payslipIndex === GetPayslipList.length-1 && direction != 'en',
'disabledArrow' : payslipIndex === GetPayslipList.length-1 && direction === 'en' ,
'activeArrow-ar' : payslipIndex != GetPayslipList.length-1 && direction != 'en' ,
'activeArrow' : payslipIndex != GetPayslipList.length-1 && direction === 'en' }"
ios="ios-arrow-dropleft-circle" md="md-arrow-dropleft-circle">
</ion-icon>
<!-- <ion-icon [ngClass]="{'disabledArrow-ar' : direction != 'en' ,'disabledArrow' : direction == 'en'}" class="activeArrow" ios="ios-arrow-dropleft-circle" md="md-arrow-dropleft-circle">
</ion-icon> -->
</button>
</ion-col>
<ion-col>
@ -61,13 +76,26 @@
</ion-col>
<ion-col>
<button ion-button icon-end class="slidbtn" (click)="slideNext(sliderOne,slideWithNav)">
<ion-icon [ngClass]=" payslipIndex === 0 ? 'disabledArrow' : 'activeArrow'" ios="ios-arrow-dropright-circle" md="md-arrow-dropright-circle">
</ion-icon>
<ion-icon
[ngClass]=" {
'activeArrow-ar' : payslipIndex != 0 && direction != 'en' ,
'activeArrow' : payslipIndex != 0 && direction === 'en' ,
'disabledArrow-ar' : payslipIndex == 0 && direction != 'en',
'disabledArrow' : payslipIndex == 0 && direction === 'en'
}"
ios="ios-arrow-dropright-circle" md="md-arrow-dropright-circle">
</ion-icon>
<!-- <ion-icon [ngClass]="{'disabledArrow' : payslipIndex === 0 , 'activeArrow' : payslipIndex != 0 , 'disabledArrow-ar' : direction != 'en' ,'disabledArrow' : direction == 'en'}" ios="ios-arrow-dropright-circle" md="md-arrow-dropright-circle">
</ion-icon> -->
</button>
</ion-col>
</ion-row>
<ion-row *ngIf="direction == 'rtl'">
<!-- <ion-row *ngIf="direction == 'rtl'">
<ion-col>
<button ion-button icon-start class="slidBtn" (click)="slidePrev(sliderOne,slideWithNav)">
<ion-icon [ngClass]=" payslipIndex === GetPayslipList.length-1 ? 'disabledArrow-ar' : 'activeArrow-ar'" ios="ios-arrow-dropright-circle" md="md-arrow-dropright-circle">
@ -83,7 +111,7 @@
</ion-icon>
</button>
</ion-col>
</ion-row>
</ion-row> -->
</div>
@ -111,18 +139,15 @@
</div> -->
<div [ngClass]="direction == 'en'? 'result-text-container':'result-text-container-ar'">
<h2>{{GetSummaryOfPaymentList.TOTAL_PAY_AMOUNT}}</h2>
<!-- <span>TOTAL <br> OPEN REQUEST</span> -->
<span>{{ts.trPK('payslip','total')}} <br> {{ts.trPK('payslip','salary')}}</span>
</div>
<p-chart #chart class="today-graph" type="doughnut" [data]="data" [options]="options"></p-chart>
</div>
<div [ngClass]=" direction == 'ltr' ? 'div-green-ar' : 'div-green'">
<div [ngClass]=" direction == 'en' ? 'div-green':'div-green-ar'">
<ion-col>
<ion-row>
<label class="green-label">{{ts.trPK('payslip','earnings-key')}}</label>
@ -132,7 +157,7 @@
</ion-row>
</ion-col>
</div>
<div [ngClass]=" direction == 'ltr' ? 'div-blue-ar' : 'div-blue'">
<div [ngClass]=" direction == 'en' ? 'div-blue' : 'div-blue-ar'">
<ion-col>
<ion-row>
<label class="blue-label">{{ts.trPK('payslip','deductions-key')}}</label>
@ -179,9 +204,7 @@
</ion-col>
<ion-col class="colPayslips">
<label class="label" for="">{{GetSummaryOfPaymentList.TOTAL_DEDUCTIONS_AMOUNT}}</label>
</ion-col>
</ion-col>
</ion-row>

@ -28,6 +28,7 @@
font-size: 15px !important;
text-align: center;
margin-bottom: 1px;
margin-left: 8px;
}
.label-bold{
font-size: 13px !important;
@ -124,8 +125,12 @@
color: white;
background: transparent !important;
--background: transparent !important;
margin-right: 25px;
-webkit-transform: scaleX(-1);
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
transform: scaleX(-1);
margin-right: 38px;
margin-left: -45px;
}
.slidbtn{
background: transparent;
@ -147,7 +152,12 @@
background: transparent !important;
--background: transparent !important;
margin-right: 3px;
margin-left: -124px;
// margin-left: -124px;
margin-left: -105px;
-webkit-transform: scaleX(-1);
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
transform: scaleX(-1);
}
.result-graph{
@ -326,34 +336,54 @@
padding-right: 5px;
}
.div-green{
// left: 77%;
// width: 20%; height: 6px;
position: relative;
left: 77%;
left: 83%;
bottom: 117px;
color: black;
background-color: #22c6b3;
width: 20%; height: 6px;
width: 16%;
height: 6px;
}
.div-green-ar{
position: relative;
// position: relative;
// left: 77%;
// bottom: 117px;
// color: black;
// background-color: #22c6b3;
// width: 20%; height: 6px;
position: relative;
left: 4%;
bottom: 117px;
color: black;
background-color: #22c6b3;
width: 20%; height: 6px;
width: 15%;
height: 6px;
}
.div-blue{
// left: 77%;
// width: 20%; height: 6px;
position: relative;
left: 77%;
bottom: 67px;
color: black;
background-color: #094875;
width: 20%; height: 6px;
left: 83%;
bottom: 67px;
color: black;
background-color: #094875;
width: 16%;
height: 6px;
}
.div-blue-ar{
position: relative;
//position: relative;
// left: 77%;
// bottom: 67px;
// color: black;
// background-color: #094875;
// width: 20%; height: 6px;
position: relative;
left: 4%;
bottom: 67px;
color: black;
background-color: #094875;
width: 20%; height: 6px;
width: 15%;
height: 6px;
}

@ -37,15 +37,15 @@
<ion-grid *ngIf="personalInfo">
<div class="gridService">
<ion-row>
<ion-col class="columns">
<ion-col [ngClass]=" direction == 'ltr' ? 'columns' : 'columns-ar'">
<label [ngClass]=" direction == 'ltr' ? 'service' : 'service-ar'">{{personalInfo.SERVICE_YEARS}}</label>
<br> <label [ngClass]=" direction == 'ltr' ? 'services' : 'services-ar'">{{ts.trPK('userProfile','years')}}</label>
</ion-col>
<ion-col class="columns">
<ion-col [ngClass]=" direction == 'ltr' ? 'columns' : 'columns-ar'">
<label [ngClass]=" direction == 'ltr' ? 'service' : 'service-ar'">{{personalInfo.SERVICE_MONTHS}}</label>
<br> <label [ngClass]=" direction == 'ltr' ? 'services' : 'services-ar'">{{ts.trPK('userProfile','months')}}</label>
</ion-col>
<ion-col class="columns">
<ion-col [ngClass]=" direction == 'ltr' ? 'columns' : 'columns-ar'">
<label [ngClass]=" direction == 'ltr' ? 'service' : 'service-ar'">{{personalInfo.SERVICE_DAYS}}</label>
<br> <label [ngClass]=" direction == 'ltr' ? 'services' : 'services-ar'">{{ts.trPK('absenceList','days')}}</label>
</ion-col>

@ -95,7 +95,15 @@
padding-top: 19px;
padding-bottom: 26px;
}
.columns-ar{
margin: 10px;
background: #094875;
border-radius: 27px;
padding-left: 7px;
padding-right: 3px;
padding-top: 19px;
padding-bottom: 26px;
}
.service{
font-size: 28px;

@ -1475,17 +1475,17 @@
"en": "Today's Attendance",
"ar": "حضور اليوم"
},
"checkIn": {
"check-in":{
"en": "Check-In",
"ar": "CheckIn"
"ar":"وقت الدخول"
},
"checkOut": {
"check-out":{
"en": "Check-Out",
"ar": "CheckOut"
"ar":"وقت الخروج"
},
"late": {
"en": "Late",
"ar": "Late"
"ar": "التأخير"
},
"attendance-statistics": {
"en": "Attendance Statistics",

Loading…
Cancel
Save