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

@ -79,14 +79,14 @@
<ion-row style="margin: 0 -5px;"> <ion-row style="margin: 0 -5px;">
<ion-col [size]="4"> <ion-col [size]="4">
<div class="attendance-information"> <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">{{attendanceTrackingList.P_SWIPE_IN | slice:0:-3}}</h2>
<h2 *ngIf="attendanceTrackingList.P_SWIPE_IN === null">--:--</h2> <h2 *ngIf="attendanceTrackingList.P_SWIPE_IN === null">--:--</h2>
</div> </div>
</ion-col> </ion-col>
<ion-col [size]="4"> <ion-col [size]="4">
<div class="attendance-information"> <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">{{attendanceTrackingList.P_SWIPE_OUT | slice:0:-3}}</h2>
<h2 *ngIf="attendanceTrackingList.P_SWIPE_OUT === null">--:--</h2> <h2 *ngIf="attendanceTrackingList.P_SWIPE_OUT === null">--:--</h2>
</div> </div>
@ -103,14 +103,19 @@
<div class="header"> <div class="header">
<div> <div>
<ion-row> <ion-row>
<ion-col [size]="2" style="text-align: left;"> <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>
<ion-col [size]="8" style="text-align: center;"> <ion-col [size]="8" style="text-align: center;">
<span class="month-year-span">{{month}} {{year}}</span> <span class="month-year-span">{{month}} {{year}}</span>
</ion-col> </ion-col>
<ion-col [size]="2" style="text-align: right;"> <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-col>
</ion-row> </ion-row>
</div> </div>

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

@ -58,6 +58,7 @@ export class DetailsComponent implements OnInit {
public yearTitle: string; public yearTitle: string;
public activeMonth: any; public activeMonth: any;
public currentMonthName = this.getMonthName(new Date().getMonth() + 1); public currentMonthName = this.getMonthName(new Date().getMonth() + 1);
public showData = false; public showData = false;
public currentYear = new Date().getFullYear(); public currentYear = new Date().getFullYear();
public attendanceTrackingList: any = []; public attendanceTrackingList: any = [];
@ -67,7 +68,7 @@ export class DetailsComponent implements OnInit {
year: any; year: any;
preMonth: number; preMonth: number;
nextMonth: any; nextMonth: any;
public direction: string;
public options = { public options = {
cutoutPercentage: 80, cutoutPercentage: 80,
tooltips: { enabled: false }, tooltips: { enabled: false },
@ -82,6 +83,7 @@ export class DetailsComponent implements OnInit {
public searchEmail = ''; public searchEmail = '';
public showEmailInput = false; public showEmailInput = false;
public showUserNameOrNameInput = true; public showUserNameOrNameInput = true;
constructor( constructor(
public timeCardService: TimeCardService, public timeCardService: TimeCardService,
@ -93,7 +95,9 @@ export class DetailsComponent implements OnInit {
private location: Location, private location: Location,
public authService: AuthenticationService, public authService: AuthenticationService,
public dashboardService: DashboredService, public dashboardService: DashboredService,
) { } ) {
this.direction = TranslatorService.getCurrentLanguageName();
}
ngOnInit() { ngOnInit() {
this.common.startLoading(); this.common.startLoading();
@ -131,7 +135,15 @@ export class DetailsComponent implements OnInit {
this.showData = false; this.showData = false;
this.nextMonth = new Date().getMonth() + 2; this.nextMonth = new Date().getMonth() + 2;
this.preMonth = new Date().getMonth(); 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?) { calendarConfig(month?, year?) {
@ -167,6 +179,7 @@ export class DetailsComponent implements OnInit {
}); });
} }
nextSlide() { nextSlide() {
this.common.startLoading(); this.common.startLoading();
if (this.currentMonthName !== this.month) { 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?) { intializeMemberDetail(userID?) {
this.empSubordinate = []; this.empSubordinate = [];

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

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

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

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

@ -95,7 +95,15 @@
padding-top: 19px; padding-top: 19px;
padding-bottom: 26px; 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{ .service{
font-size: 28px; font-size: 28px;

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

Loading…
Cancel
Save