add arabic version + fix bugs

master
Fatimah.Alshammari 6 years ago
parent 25826f900d
commit 7a30805e71

@ -55,26 +55,20 @@
<div class="result-text-container">
<h2>{{totalnumber}}</h2>
<!-- <h2>{{totalnumber}}</h2> -->
<!-- <h2>{{accrualNet + accrualUsed + accrualYearly}}</h2> -->
<span>{{ts.trPK('absenceList','totalNumber')}}</span>
<!-- <span>{{ts.trPK('absenceList','totalNumber')}}</span> -->
</div>
<p-chart #chart class="today-graph" type="doughnut" [data]="data" [options]="options"></p-chart>
<p-chart #chart [ngClass]=" direction == 'ltr' ? 'today-graph' : 'today-graph-ar'" type="doughnut" [data]="data" [options]="options"></p-chart>
</div>
<div style="position: relative;
left: 82%;
bottom: 128px;
color: black;
background-color: #DDB017;
width: 13%;
height: 6px;">
<div [ngClass]=" direction == 'ltr' ? 'div-orng' : 'div-orng-ar'">
<ion-col>
<ion-row>
<label class="green-label">{{ts.trPK('absenceList','accrualNet')}}</label>
@ -84,13 +78,7 @@
</ion-row>
</ion-col>
</div>
<div style="position: relative;
left: 59%;
bottom: 131px;
color: black;
background-color: #094875;
width: 13%;
height: 6px;">
<div [ngClass]=" direction == 'ltr' ? 'div-blue' : 'div-blue-ar'">
<ion-col>
<ion-row>
<label class="blue-label">{{ts.trPK('absenceList','accrualUsed')}}</label>
@ -101,13 +89,7 @@
</ion-row>
</ion-col>
</div>
<div style="position: relative;
left: 82%;
bottom: 80px;
color: black;
background-color: #CB3232;
width: 13%;
height: 6px;">
<div [ngClass]=" direction == 'ltr' ? 'div-red' : 'div-red-ar'">
<ion-col>
<ion-row>
<label class="blue-label">{{ts.trPK('absenceList','accrualYearly')}}</label>

@ -137,6 +137,17 @@
// padding-top: 29px;
margin-left: -70px !important;
}
.today-graph-ar{
display: block !important;
height: 196px;
width: 385px;
padding-left: 51px;
/* margin-left: -70px !important; */
font-size: 14px;
margin-left: -48px;
margin-right: 63px;
margin-bottom: -30px;
}
.headerGrid{
background-color: white !important;
@ -215,4 +226,64 @@ margin-top: -13px;
left: 0;
top: 0px;
z-index: 1;
}
}
.div-orng{
position: relative;
left: 82%;
bottom: 128px;
color: black;
background-color: #1FA269;
width: 13%;
height: 6px;
}
.div-blue-ar{
position: relative;
bottom: 131px;
color: black;
background-color: #CB3232;
// background-color: #094875;
// background-color: #DDB017;
width: 13%;
height: 6px;
right: 78px;
}
.div-blue{
position: relative;
left: 59%;
bottom: 131px;
color: black;
background-color: #CB3232;
// background-color: #094875;
width: 13%;
height: 6px;
}
.div-orng-ar{
position: relative;
bottom: 59px;
color: black;
background-color: #1FA269;
width: 13%;
height: 6px;
right: 9px;
}
.div-red{
position: relative;
left: 82%;
bottom: 80px;
color: black;
// background-color: #CB3232;
background-color: #DDB017;
width: 13%;
height: 6px;
}
.div-red-ar{
position: relative;
bottom: 139px;
color: black;
// background-color: #CB3232;
background-color: #DDB017;
width: 13%;
height: 6px;
right: 10px;
}

@ -39,6 +39,7 @@ export class HomeComponent implements OnInit {
ACCRUAL_USED_ENTITLEMENT: any;
ACCRUAL_YEARLY_ENTITLEMENT: any;
totalnumber: any;
public direction: string;
public options = {
cutoutPercentage: 80,
@ -55,7 +56,9 @@ export class HomeComponent implements OnInit {
public absService: AbsenceListService,
public accrualService: AccrualService,
public authService: AuthenticationService
) {}
) {
this.direction = TranslatorService.getCurrentDirection();
}
ngOnInit() {

@ -7,16 +7,16 @@
<ion-col size="10">
<div style="width: 100%;">
<div class="result-graph">
<div class="result-text-container">
<div [ngClass]=" direction == 'ltr' ? 'result-text-container' : 'result-text-container-ar'">
<h2 class="percentage">{{percentage}}</h2>
<span>Completed <br><br><br><br></span>
</div>
<p-chart class="today-graph" type="doughnut" [data]="data" [options]="options"></p-chart>
<p-chart [ngClass]=" direction == 'ltr' ? 'today-graph' : 'today-graph-ar'" type="doughnut" [data]="data" [options]="options"></p-chart>
</div>
</div>
</ion-col>
<ion-col size="2">
<div class="div" >
<div [ngClass]=" direction == 'ltr' ? 'div' : 'div-ar'">
<ion-row >
<p class="p0">{{nameDay}}</p>
</ion-row>
@ -40,7 +40,7 @@
<div>
<ion-grid class="grid">
<ion-row class="gridrow">
<ion-col class="liftcol">
<ion-col [ngClass]=" direction == 'ltr' ? 'liftcol' : 'liftcol-ar'">
<ion-row class="amountlabel"> <p>{{shiftTime}}</p> </ion-row>
<ion-row class="rowlabel">
<p >{{ts.trPK('attendance-tracking','shift-time')}}</p>
@ -54,7 +54,7 @@
</ion-col>
</ion-row>
<ion-row class="gridrow" >
<ion-col class="liftcol">
<ion-col [ngClass]=" direction == 'ltr' ? 'liftcol' : 'liftcol-ar'">
<ion-row class="amountlabel"><p >{{startDate}}</p> </ion-row>
<ion-row class="rowlabel">
<p >{{ts.trPK('attendance-tracking','check-in')}}</p>
@ -68,7 +68,7 @@
</ion-col>
</ion-row >
<ion-row class="gridrow">
<ion-col class="liftcol">
<ion-col [ngClass]=" direction == 'ltr' ? 'liftcol' : 'liftcol-ar'">
<ion-row class="amountlabel"> <p >{{lateIn}}</p> </ion-row>
<ion-row class="rowlabel">
<p >{{ts.trPK('attendance-tracking','late-in')}}</p>
@ -82,7 +82,7 @@
</ion-col>
</ion-row>
<ion-row class="gridrow">
<ion-col class="liftcol">
<ion-col [ngClass]=" direction == 'ltr' ? 'liftcol' : 'liftcol-ar'">
<ion-row class="amountlabel"> <p >{{shortage}}</p> </ion-row>
<ion-row class="rowlabel">
<p>{{ts.trPK('attendance-tracking','shortage')}}</p>

@ -54,11 +54,56 @@
}
}
.result-text-container-ar {
padding: 0;
margin: 0;
position: absolute;
left: 38%;
top: 67%;
display: block;
text-align: center;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
h2 {
font-size: 25px;
// font-family: WorkSans-Bold;
font-weight: bold;
margin: 0 auto;
line-height: 36px;
}
span {
width: 125px;
display: block;
margin: 0 auto;
font-size: 12px;
font-family: workSans-Regular;
color: rgb(163, 163, 163) !important;
}
}
.today-graph{
display: block;
height: 127px;
width: 288px;
}
.today-graph-ar{
display: block;
height: 134px;
width: 285px;
margin-left: -18px;
}
.amountlabel{
color: black !important;
font-weight: bold !important;
@ -79,10 +124,13 @@ height: 360px !important;
}
.liftcol{
// padding-top: 1px !important;
// padding-bottom: 1px !important;
border-right: 1px solid rgb(163, 163, 163) !important;
}
.liftcol-ar{
border-left: 1px solid rgb(163, 163, 163) !important;
}
.rightcol{
@ -107,6 +155,12 @@ height: 360px !important;
margin-right: -226px;
}
.div-ar{
border: 1px solid #a3a3a3 !important;
border-radius: 9px;
width: 264%;
margin-right: -302px;
}
.p0{
margin-bottom: -13px !important;

@ -36,7 +36,7 @@ export class DateInfoModalComponent implements OnInit {
nameMonth: any;
nameDay: any;
public weekDaysEn = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
public direction: string;
public options = {
cutoutPercentage: 85,
tooltips: { enabled: false },
@ -52,7 +52,9 @@ export class DateInfoModalComponent implements OnInit {
public modalController: ModalController,
public navParams: NavParams,
public ts: TranslatorService
) { }
) {
this.direction = TranslatorService.getCurrentDirection();
}
ngOnInit() {
console.log(this.TODAYDATE);

@ -23,8 +23,8 @@ ion-title{
position: absolute;
top: 0;
text-align: center;
// left: 15%;
// right: 15%;
left: 4%;
right: 4%;
font-size: 0.42cm;
font-weight: bold;
height: 100%;

@ -3,8 +3,8 @@ ion-title{
position: absolute;
top: 0;
text-align: center;
// left: 15%;
// right: 15%;
left: 4%;
right: 4%;
font-size: 0.42cm;
font-weight: bold;
height: 100%;

@ -38,7 +38,7 @@
<!-- <p style="position: absolute; left: 40%; bottom: 65%;">{{currentMonth}}</p> -->
<div>
<ion-row>
<ion-row *ngIf="direction == 'ltr'">
<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">
@ -47,19 +47,32 @@
</ion-col>
<ion-col>
<p class="label"><b style="font-family: WorkSans-Bold;">{{ (showPaySlip.PAYSLIP_CHOICE)?.substring(15,23) }}</b></p>
<!-- <label class="label" for="">{{showPaySlip.PAYSLIP_CHOICE}}</label> -->
<!-- <label class="p" for="">{{showPaySlip.PERIOD_NAME}}</label> -->
<!-- <p style="position: absolute; left: 40%; bottom: 65%;">{{currentMonth}}</p> -->
</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 [ngClass]=" payslipIndex === 0 ? 'disabledArrow' : 'activeArrow'" ios="ios-arrow-dropright-circle" md="md-arrow-dropright-circle">
</ion-icon>
</button>
</ion-col>
</ion-row>
<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">
</ion-icon>
</button>
</ion-col>
<ion-col>
<p class="label"><b style="font-family: WorkSans-Bold;">{{ (showPaySlip.PAYSLIP_CHOICE)?.substring(15,23) }}</b></p>
</ion-col>
<ion-col>
<button ion-button icon-end class="slidbtn" (click)="slideNext(sliderOne,slideWithNav)">
<ion-icon [ngClass]=" payslipIndex === 0 ? 'disabledArrow-ar' : 'activeArrow-ar'" ios="ios-arrow-dropleft-circle" md="md-arrow-dropleft-circle">
</ion-icon>
</button>
</ion-col>
</ion-row>
</div>
@ -98,12 +111,7 @@
<p-chart #chart class="today-graph" type="doughnut" [data]="data" [options]="options"></p-chart>
</div>
<div style="position: relative;
left: 77%;
bottom: 117px;
color: black;
background-color: #22c6b3;
width: 20%; height: 6px;">
<div [ngClass]=" direction == 'ltr' ? 'div-green' : 'div-green-ar'">
<ion-col>
<ion-row>
<label class="green-label">{{ts.trPK('payslip','earnings-key')}}</label>
@ -113,12 +121,7 @@
</ion-row>
</ion-col>
</div>
<div style="position: relative;
left: 77%;
bottom: 67px;
color: black;
background-color: #094875;
width: 20%; height: 6px;">
<div [ngClass]=" direction == 'ltr' ? 'div-blue' : 'div-blue-ar'">
<ion-col>
<ion-row>
<label class="blue-label">{{ts.trPK('payslip','deductions-key')}}</label>

@ -117,6 +117,15 @@
--background: transparent !important;
}
.activeArrow-ar{
height: 26px;
width: 26px;
color: white;
background: transparent !important;
--background: transparent !important;
margin-right: 25px;
}
.slidbtn{
background: transparent;
@ -131,6 +140,15 @@
background: transparent !important;
--background: transparent !important;
}
.disabledArrow-ar{
height: 26px;
width: 26px;
color: #908d8d;
background: transparent !important;
--background: transparent !important;
margin-right: 3px;
margin-left: -124px;
}
.result-graph{
font-size: 14px;
@ -267,4 +285,36 @@ margin-top: -13px;
margin-left: 58px;
margin-bottom: 12px;
padding-right: 5px;
}
.div-green{
position: relative;
left: 77%;
bottom: 117px;
color: black;
background-color: #22c6b3;
width: 20%; height: 6px;
}
.div-green-ar{
position: relative;
// left: 77%;
bottom: 117px;
color: black;
background-color: #22c6b3;
width: 20%; height: 6px;
}
.div-blue{
position: relative;
left: 77%;
bottom: 67px;
color: black;
background-color: #094875;
width: 20%; height: 6px;
}
.div-blue-ar{
position: relative;
// left: 77%;
bottom: 67px;
color: black;
background-color: #094875;
width: 20%; height: 6px;
}

@ -42,6 +42,7 @@ export class HomeComponent implements OnInit {
sliderOne: any;
payslipIndex :any;
data:any;
public direction: string;
@ViewChild('slides') slides: IonSlides;
@ViewChild('slideWithNav') slideWithNav: IonSlides;
@ViewChild('chart') chart: UIChart;
@ -70,7 +71,9 @@ export class HomeComponent implements OnInit {
public cs: CommonService,
) {}
) {
this.direction = TranslatorService.getCurrentDirection();
}
ngOnInit() {

@ -100,7 +100,7 @@ private handlePerformanceAppraisalResult(result){
this.performanceData=[];
for(let i=0;i<this.appraisalArr.length;i++){
this.performanceData.push({name:this.appraisalArr[i].APPRAISAL_YEAR,value :this.appraisalArr[i].APPRAISAL_SCORE});
this.performanceData.push({name:this.appraisalArr[i].APPRAISAL_YEAR,value :parseInt(this.appraisalArr[i].APPRAISAL_SCORE).toFixed()});
}
console.log("PerformanceAppraisalResponse");
this.sharedData.setSharedData(this.performanceData, PerformanceAppraisalResponse.PERFORMANCE_DATA);

@ -1,12 +1,22 @@
<ion-header >
<ion-toolbar class="header-toolbar-new">
<ion-title color="light">{{ts.trPK('userProfile','performance')}}</ion-title>
<ion-buttons slot="start">
<nav-buttons></nav-buttons>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content class="colorBG">
<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-buttons>
<p class="proTitles">{{ts.trPK('userProfile','performance')}}</p>
<p class="proTitles">{{ts.trPK('userProfile','performance')}}</p> -->
<div class="profilediv">
<img class="profileImg" [src]="user_image">
<!-- <img class="profileImg" [src]="user_image"> -->
</div>
<!-- <ion-img class="profileImg" [src]="imageSrc"></ion-img> -->
@ -19,8 +29,8 @@
<div class="gauge">
<ngx-charts-gauge [view]="view" [scheme]="colorScheme" [results]="performanceData" [min]="0" [max]="100"
<!-- [showText]="showText" -->
<ngx-charts-gauge [view]="view" [scheme]="colorScheme" [results]="performanceData" [min]="0" [max]="100"
[angleSpan]="240" [startAngle]="-120" [bigSegments]="5"
[smallSegments]="10" (select)="onSelect($event)">
</ngx-charts-gauge>

@ -122,14 +122,14 @@
}
.labelvalue{
font-size: 28px !important;
font-size: 27px !important;
font-weight: bold !important;
margin-top: 7px !important;
margin-left: 72px !important;
margin-left: 90px !important;
}
.percentage{
font-size: 15px !important;
font-size: 19px !important;
margin-top: 15px !important;
}

@ -23,7 +23,7 @@ export class PerformanceEvaluationComponent implements OnInit {
view: any = [380, 450];
public performanceData: any=[];
public length;
// public showText:boolean =false;
constructor( public ts: TranslatorService,
public cs: CommonService,
@ -49,7 +49,8 @@ export class PerformanceEvaluationComponent implements OnInit {
};
ngOnInit() {
this.getProfile();
this.performanceData = this.cs.sharedService.getSharedData(

@ -14,7 +14,7 @@
<div>
<div class="header">
<div>
<ion-row>
<ion-row *ngIf="direction == 'ltr'">
<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-col>
@ -25,12 +25,24 @@
<ion-icon [ngClass]=" currentMonthName === month ? 'disabledArrow' : 'activeArrow'" ios="ios-arrow-dropright-circle" md="md-arrow-dropright-circle" (click)="nextSlide()"></ion-icon>
</ion-col>
</ion-row>
<ion-row *ngIf="direction == 'rtl'">
<ion-col [size]="2" style="text-align: left;">
<ion-icon class="activeArrow" ios="ios-arrow-dropright-circle" md="md-arrow-dropright-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-dropleft-circle" md="md-arrow-dropleft-circle" (click)="nextSlide()"></ion-icon>
</ion-col>
</ion-row>
</div>
</div>
<div class="result-graph">
<div class="request-heading">
<span>{{ts.trPK('myTeam','attendance-statistics')}}</span>
<div >
<span [ngClass]="direction == 'ltr' ? 'request-heading':'request-heading-ar' ">{{ts.trPK('myTeam','attendance-statistics')}}</span>
</div>
<div style="position: relative;">
<div class="label-container">
@ -83,7 +95,7 @@
</ion-col>
</ion-row>
<div *ngIf="showData" class="calendar-container">
<div *ngIf="showData" [ngClass]="direction == 'ltr' ? 'calendar-container':'calendar-container-ar' ">
<span> {{ts.trPK('attendance','monthly-attendance-calendar')}}</span>
<app-circle-calendar
[eventsdateAttend]='arrDaysAttendance'

@ -719,6 +719,7 @@ $actionBtnSize : 36px;
color: gray;
}
.result-graph {
position: relative;
background: white;
@ -729,13 +730,20 @@ $actionBtnSize : 36px;
margin-bottom: 10px;
}
.request-heading {
span {
// span {
text-align: left;
display: block;
padding-top: 8px;
margin-bottom: 10px;
margin-left: 10px;
}
// }
}
.request-heading-ar{
text-align: left;
display: block;
padding-top: 8px;
margin-bottom: 10px;
margin-left: 215px;
}
.result-text-container {
@ -902,6 +910,19 @@ $actionBtnSize : 36px;
margin-left: 10px;
}
}
.calendar-container-ar{
background: white;
margin-bottom: 100px;
margin-top: 20px;
border-radius: 20px;
span{
text-align: left;
display: block;
padding-top: 8px;
margin-bottom: 10px;
margin-left: 196px;
}
}

@ -22,13 +22,17 @@ export class TimeCardDetailsComponent implements OnInit {
year: any;
preMonth: number;
nextMonth: any;
public direction: string;
constructor(
public timeCardService: TimeCardService,
public common: CommonService,
public modalController: ModalController,
public sharedData: SharedDataService,
public ts: TranslatorService
) { }
) {
this.direction = TranslatorService.getCurrentDirection();
console.log(this.direction);
}
public showMore: any = true;
public menuType: any;
@ -66,6 +70,7 @@ export class TimeCardDetailsComponent implements OnInit {
public dayHoursTypeDetailsList = [];
public normalDays: any = [];
public currentDate = new Date();
public options = {
cutoutPercentage: 80,
tooltips: { enabled: false },

@ -1281,12 +1281,12 @@
},
"confirm-msg-success": {
"en" :"Are you sure, you want to Apply for Vacation Rule?",
"ar" :"Are you sure, you want to Apply for Vacation Rule?"
"ar" :" تريد التقديم على قواعد الاجازات ؟, هل انت متأكد"
},
"update-msg-success": {
"en" :"Are you sure, you want to Update this Vacation Rule?",
"ar" :"Are you sure, you want to Update this Vacation Rule?"
"ar" :"تريد تحديث قواعد الاجازات ؟, هل انت متأكد"
}
},
@ -1428,7 +1428,7 @@
"ar": "احصائيات الحضور"
},
"myTeam-header": {
"en": "MY TEAM",
"en": "My Team",
"ar": "فريقي"
},
"total": {
@ -2341,11 +2341,11 @@
},
"deductions-key":{
"en": "DED",
"ar":" "
"ar":" المستقطع"
},
"earnings-key":{
"en": "NET",
"ar":" "
"ar":"المكتسب "
},
"particular":{
"en": "Particular",
@ -2372,7 +2372,7 @@
"attendance-tracking": {
"title":{
"en": "Mark Attendance",
"ar":"Mark Attendance "
"ar":"علامة الحضور "
},
"check-in":{
"en": "Check In",

Loading…
Cancel
Save