MOHEMM-Q3-DEV-LATEST
Fatimah.Alshammari 6 years ago
parent d2843a8a86
commit 80ab9a5c80

@ -1,6 +1,6 @@
<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('home','leave-balance')}}</ion-title>
<ion-buttons slot="start"> <ion-buttons slot="start">
<nav-buttons></nav-buttons> <nav-buttons></nav-buttons>
</ion-buttons> </ion-buttons>
@ -68,7 +68,7 @@
<p-chart #chart [ngClass]=" direction == 'ltr' ? 'today-graph' : 'today-graph-ar'" 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>
<div [ngClass]=" direction == 'ltr' ? 'div-orng' : 'div-orng-ar'"> <div [ngClass]=" direction == 'ltr' ? 'div-green' : 'div-green-ar'">
<ion-col> <ion-col>
<ion-row> <ion-row>
<label class="green-label">{{ts.trPK('absenceList','accrualNet')}}</label> <label class="green-label">{{ts.trPK('absenceList','accrualNet')}}</label>
@ -78,7 +78,7 @@
</ion-row> </ion-row>
</ion-col> </ion-col>
</div> </div>
<div [ngClass]=" direction == 'ltr' ? 'div-blue' : 'div-blue-ar'"> <div [ngClass]=" direction == 'ltr' ? 'div-red' : 'div-red-ar'">
<ion-col> <ion-col>
<ion-row> <ion-row>
<label class="blue-label">{{ts.trPK('absenceList','accrualUsed')}}</label> <label class="blue-label">{{ts.trPK('absenceList','accrualUsed')}}</label>
@ -89,7 +89,7 @@
</ion-row> </ion-row>
</ion-col> </ion-col>
</div> </div>
<div [ngClass]=" direction == 'ltr' ? 'div-red' : 'div-red-ar'"> <div [ngClass]=" direction == 'ltr' ? 'div-orng' : 'div-orng-ar'">
<ion-col> <ion-col>
<ion-row> <ion-row>
<label class="blue-label">{{ts.trPK('absenceList','accrualYearly')}}</label> <label class="blue-label">{{ts.trPK('absenceList','accrualYearly')}}</label>

@ -227,7 +227,7 @@ margin-top: -13px;
top: 0px; top: 0px;
z-index: 1; z-index: 1;
} }
.div-orng{ .div-green{
position: relative; position: relative;
left: 82%; left: 82%;
bottom: 128px; bottom: 128px;
@ -236,7 +236,17 @@ margin-top: -13px;
width: 13%; width: 13%;
height: 6px; height: 6px;
} }
.div-blue-ar{ .div-green-ar{
position: relative;
bottom: 59px;
color: black;
background-color: #1FA269;
width: 13%;
height: 6px;
right: 9px;
}
.div-red-ar{
position: relative; position: relative;
bottom: 131px; bottom: 131px;
color: black; color: black;
@ -247,7 +257,7 @@ margin-top: -13px;
height: 6px; height: 6px;
right: 78px; right: 78px;
} }
.div-blue{ .div-red{
position: relative; position: relative;
left: 59%; left: 59%;
bottom: 131px; bottom: 131px;
@ -257,17 +267,8 @@ margin-top: -13px;
width: 13%; width: 13%;
height: 6px; height: 6px;
} }
.div-orng-ar{
position: relative; .div-orng{
bottom: 59px;
color: black;
background-color: #1FA269;
width: 13%;
height: 6px;
right: 9px;
}
.div-red{
position: relative; position: relative;
left: 82%; left: 82%;
bottom: 80px; bottom: 80px;
@ -277,7 +278,7 @@ margin-top: -13px;
width: 13%; width: 13%;
height: 6px; height: 6px;
} }
.div-red-ar{ .div-orng-ar{
position: relative; position: relative;
bottom: 139px; bottom: 139px;
color: black; color: black;

@ -108,10 +108,10 @@ export class HomeComponent implements OnInit {
this.data = { this.data = {
// labels: ['earingTotal', 'deductionTotal'], // labels: ['earingTotal', 'deductionTotal'],
datasets: [ datasets: [
{ data: [this.accrualNet,this.accrualUsed,this.accrualYearly], { data: [this.accrualNet,this.accrualYearly,this.accrualUsed],
backgroundColor: [ backgroundColor: [
'#DDB017', '#1FA269',
'#094875', '#DDB017',
'#CB3232',], '#CB3232',],
borderWidth: 2 borderWidth: 2
} }
@ -263,11 +263,11 @@ createAbsence() {
this.data = { this.data = {
// labels: ['earingTotal', 'deductionTotal'], // labels: ['earingTotal', 'deductionTotal'],
datasets: [ datasets: [
{ data: [this.accrualNet,this.accrualUsed,this.accrualYearly], { data: [this.accrualNet,this.accrualYearly,this.accrualUsed],
backgroundColor: [ backgroundColor: [
'#DDB017', '#1FA269',
'#094875', '#DDB017',
'#CB3232',], '#CB3232',],
borderWidth: 2 borderWidth: 2
} }
] ]

@ -24,10 +24,10 @@
<p class="p1">{{day}}</p> <p class="p1">{{day}}</p>
</ion-row> </ion-row>
<ion-row > <ion-row >
<p class="p2">{{nameMonth}}</p> <p [ngClass]="direction == 'ltr' ? 'p2':'p2-ar' ">{{nameMonth}}</p>
</ion-row> </ion-row>
<ion-row > <ion-row >
<p class="p3">{{year}}</p> <p [ngClass]="direction == 'ltr' ? 'p3':'p3-ar' "class="p3">{{year}}</p>
</ion-row> </ion-row>
<ion-row> <ion-row>
<p class="p5">{{ts.trPK('attendance','present')}}</p> <p class="p5">{{ts.trPK('attendance','present')}}</p>

@ -197,6 +197,22 @@ height: 360px !important;
margin-top: -43px; margin-top: -43px;
margin-left: 27px; margin-left: 27px;
} }
.p2-ar{ font-weight: bold !important;
font-size: 17px !important;
margin-bottom: 43px !important;
margin-top: 0px !important;
color: black !important;
font-weight: bold !important;
margin-right: 33px;
}
.p3-ar{ /* margin-bottom: -72px !important; */
color: black !important;
font-weight: bold !important;
font-size: 19px;
margin-top: -43px;
margin-right: 27px;
}
.p4{ margin-bottom: 56px !important; .p4{ margin-bottom: 56px !important;
margin-top: -26px !important; margin-top: -26px !important;
color: black !important; color: black !important;

@ -58,7 +58,7 @@ export class HomeComponent implements OnInit {
tooltips: { enabled: false }, tooltips: { enabled: false },
legend: { display: false }}; legend: { display: false }};
gaugeType = "full"; gaugeType = "full";
direction: string;
// gaugeValue = 11.200; // gaugeValue = 11.200;
// gaugeLabel = ""; // gaugeLabel = "";

@ -26,16 +26,16 @@
<div class="gridService"> <div class="gridService">
<ion-row> <ion-row>
<ion-col class="columns"> <ion-col class="columns">
<label class="service">{{personalInfo.SERVICE_YEARS}}</label> <label [ngClass]=" direction == 'ltr' ? 'service' : 'service-ar'">{{personalInfo.SERVICE_YEARS}}</label>
<br> <label class="services">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 class="columns">
<label class="service">{{personalInfo.SERVICE_MONTHS}}</label> <label [ngClass]=" direction == 'ltr' ? 'service' : 'service-ar'">{{personalInfo.SERVICE_MONTHS}}</label>
<br> <label class="services">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 class="columns">
<label class="service">{{personalInfo.SERVICE_DAYS}}</label> <label [ngClass]=" direction == 'ltr' ? 'service' : 'service-ar'">{{personalInfo.SERVICE_DAYS}}</label>
<br> <label class="services">DAYS</label> <br> <label [ngClass]=" direction == 'ltr' ? 'services' : 'services-ar'">{{ts.trPK('absenceList','days')}}</label>
</ion-col> </ion-col>
</ion-row> </ion-row>
@ -47,7 +47,7 @@
<div class="list"> <div class="list">
<ion-list class="list-ios"> <ion-list class="list-ios">
<div class="p"> <div class="p">
<p>Years of Services</p> <p>{{ts.trPK('userProfile','Years of Services')}}</p>
</div> </div>
<ion-item class="itemline" (click)="openEditprofile()"> <ion-item class="itemline" (click)="openEditprofile()">
@ -58,7 +58,7 @@
<ion-label class="profile"> <ion-label class="profile">
{{ts.trPK('userProfile','edit-profile')}} {{ts.trPK('userProfile','edit-profile')}}
</ion-label> </ion-label>
<ion-icon style= "width: 20px; height: 22px !important;" name="arrow-forward" item-right></ion-icon> <ion-icon [ngClass]=" direction == 'ltr' ? 'arrow' : 'arrow-ar'" name="arrow-forward" item-right></ion-icon>
</ion-item> </ion-item>
<ion-item class="itemlins" (click)="openPerormance()"> <ion-item class="itemlins" (click)="openPerormance()">
@ -69,7 +69,7 @@
<ion-label class="profile"> <ion-label class="profile">
{{ts.trPK('userProfile','performance-evaluation')}} {{ts.trPK('userProfile','performance-evaluation')}}
</ion-label> </ion-label>
<ion-icon style= "width: 20px; height: 22px !important;" name="arrow-forward" item-right></ion-icon> <ion-icon [ngClass]=" direction == 'ltr' ? 'arrow' : 'arrow-ar'" name="arrow-forward" item-right></ion-icon>
</ion-item> </ion-item>
</ion-list> </ion-list>

@ -106,6 +106,18 @@
font-size: 12px; font-size: 12px;
color: white; color: white;
} }
.service-ar{
font-size: 28px;
color: white;
letter-spacing: 1px;
font-weight: bold;
margin-right: 26px;
}
.services-ar{
font-size: 14px;
color: white;
margin-right: 25px;
}
.list{ .list{
margin-left: 14px; margin-left: 14px;
@ -150,4 +162,14 @@
margin-top: 4px; margin-top: 4px;
} }
.arrow{
width: 20px;
height: 22px !important;
}
.arrow-ar{
float: left;
font-size: 25px;
color: grey;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}

@ -20,7 +20,7 @@ export class EditProfileComponent implements OnInit {
User_name_Emp: string = ""; User_name_Emp: string = "";
User_Job_name: string; User_Job_name: string;
public direction: string;
private menu: MenuController; private menu: MenuController;
setImage:any; setImage:any;
// imageSrc: any = "../assets/imgs/profile.png"; // imageSrc: any = "../assets/imgs/profile.png";
@ -41,6 +41,7 @@ export class EditProfileComponent implements OnInit {
) )
{ {
this.direction = TranslatorService.getCurrentDirection();
// this.events.subscribe("img-change", displayImg => { // this.events.subscribe("img-change", displayImg => {
// console.log("app compont: "+displayImg); // console.log("app compont: "+displayImg);
// this.user_image = this.sanitizer.bypassSecurityTrustUrl("data:Image/*;base64,"+displayImg); // this.user_image = this.sanitizer.bypassSecurityTrustUrl("data:Image/*;base64,"+displayImg);

@ -10,13 +10,21 @@
</div> </div>
</ion-header> --> </ion-header> -->
<ion-header >
<ion-toolbar class="header-toolbar-new">
<ion-title color="light">{{ts.trPK('userProfile','title')}}</ion-title>
<ion-buttons slot="start">
<nav-buttons></nav-buttons>
</ion-buttons>
</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="proTitles">{{ts.trPK('userProfile','title')}}</p> <p class="proTitles">{{ts.trPK('userProfile','title')}}</p> -->
<!-- <div class="centerDiv profileDiv"> --> <!-- <div class="centerDiv profileDiv"> -->
<div class="centerDiv homeBox"> <div class="centerDiv homeBox">
@ -32,7 +40,7 @@
</div> </div>
<div class="changeImgBtn"> <div [ngClass]=" direction == 'ltr' ? 'changeImgBtn' : 'changeImgBtn-ar'">
<button ion-button icon-only menuToggle class="menubutton" (click)="ChangeImage()"> <button ion-button icon-only menuToggle class="menubutton" (click)="ChangeImage()">
<ion-icon (click)="ChangeImage();" class="changeIcon" name="md-create"></ion-icon> <ion-icon (click)="ChangeImage();" class="changeIcon" name="md-create"></ion-icon>
</button> </button>

@ -50,6 +50,11 @@ ion-col.colBold, ion-col.colBold > label{
top: 80%; top: 80%;
left: 65%; left: 65%;
} }
.changeImgBtn-ar{
position: absolute;
top: 80%;
left: 74%;
}
.profileImg{ .profileImg{
width: 160px; width: 160px;
height: 160px; height: 160px;

@ -14,6 +14,7 @@ export class HomeComponent implements OnInit {
personalInfo: any; personalInfo: any;
setImage:any; setImage:any;
imageSrc: any = "../assets/imgs/profile.png"; imageSrc: any = "../assets/imgs/profile.png";
public direction: string;
// user_image: any = "../assets/imgs/profile.png"; // user_image: any = "../assets/imgs/profile.png";
constructor( constructor(
public ts: TranslatorService, public ts: TranslatorService,
@ -24,7 +25,7 @@ export class HomeComponent implements OnInit {
) { ) {
this.direction = TranslatorService.getCurrentDirection();
this.events.subscribe("img-change", displayImg => { this.events.subscribe("img-change", displayImg => {
// alert("1 - profile home : "+displayImg); // alert("1 - profile home : "+displayImg);
//this.user_image = "data:image/png;base64"+displayImg; //this.user_image = "data:image/png;base64"+displayImg;

@ -25,9 +25,9 @@
<ion-grid> <ion-grid>
<div class="grid"> <div class="grid">
<ion-row> <ion-row>
<p class="Text">Performance Evaluation</p> <p class="Text">{{ts.trPK('userProfile','performance-evaluation')}}</p>
<div class="gauge"> <div [ngClass]=" direction == 'ltr' ? 'gauge' : 'gauge-ar'" >
<!-- [showText]="showText" --> <!-- [showText]="showText" -->
<ngx-charts-gauge [view]="view" [scheme]="colorScheme" [results]="performanceData" [min]="0" [max]="100" <ngx-charts-gauge [view]="view" [scheme]="colorScheme" [results]="performanceData" [min]="0" [max]="100"

@ -140,5 +140,11 @@
margin-top: -20px; margin-top: -20px;
} }
.gauge-ar{
transform: translate(-24px, -65px);
margin-bottom: -187px;
margin-top: -20px;
margin-right: -56px;
}

@ -19,57 +19,61 @@ import { AuthenticatedUser } from "src/app/hmg-common/services/authentication/mo
export class PerformanceEvaluationComponent implements OnInit { export class PerformanceEvaluationComponent implements OnInit {
personalInfo: any; personalInfo: any;
user_image: any = "../assets/imgs/profile.png"; user_image: any = "../assets/imgs/profile.png";
setImage:any; setImage: any;
view: any = [380, 450]; view: any = [380, 450];
public performanceData: any=[]; public performanceData: any = [];
public length; public length;
public direction: string;
// public showText:boolean =false; // public showText:boolean =false;
constructor( public ts: TranslatorService, constructor(public ts: TranslatorService,
public cs: CommonService, public cs: CommonService,
public DS :DashboredService, public DS: DashboredService,
public authService: AuthenticationService, public authService: AuthenticationService,
// private events: Events, // private events: Events,
// private sanitizer: DomSanitizer, // private sanitizer: DomSanitizer,
) { ) {
this.direction = TranslatorService.getCurrentDirection();
// this.events.subscribe("img-change", displayImg => { // this.events.subscribe("img-change", displayImg => {
// console.log("app compont: "+displayImg); // console.log("app compont: "+displayImg);
// this.user_image = this.sanitizer.bypassSecurityTrustUrl("data:Image/*;base64,"+displayImg); // this.user_image = this.sanitizer.bypassSecurityTrustUrl("data:Image/*;base64,"+displayImg);
// }); // });
}
colorScheme = { }
domain: ['#22C6B3', '#094875','#3CB9D5','#1FA269','#0D155E']
};
colorScheme = {
domain: ['#22C6B3', '#094875', '#3CB9D5', '#1FA269', '#0D155E']
};
ngOnInit() { ngOnInit() {
this.getProfile(); this.getProfile();
this.performanceData = this.cs.sharedService.getSharedData( this.performanceData = this.cs.sharedService.getSharedData(
PerformanceAppraisalResponse.PERFORMANCE_DATA, PerformanceAppraisalResponse.PERFORMANCE_DATA,
true true
); );
console.log(this.performanceData.length); console.log(this.performanceData.length);
//i % 2 == 0 //i % 2 == 0
this.length=this.performanceData.length; this.length = this.performanceData.length;
for(let i=0;i<this.performanceData.length;i++){ for (let i = 0; i < this.performanceData.length; i++) {
this.performanceData[i].color =this.colorScheme.domain[i]; this.performanceData[i].color = this.colorScheme.domain[i];
console.log( i+" : "+this.performanceData[i].name) console.log(i + " : " + this.performanceData[i].name)
} }
console.log( this.performanceData[0].color) console.log(this.performanceData[0].color)
}
}
ngAfterViewInit() {
document.querySelector("svg .gauge.chart > text").remove();
}
getProfile() { getProfile() {
console.log("getProfile"); console.log("getProfile");
@ -79,11 +83,12 @@ export class PerformanceEvaluationComponent implements OnInit {
if (user) { if (user) {
this.personalInfo = user; this.personalInfo = user;
this.user_image = user.EMPLOYEE_IMAGE this.user_image = user.EMPLOYEE_IMAGE
? "data:image/png;base64," + user.EMPLOYEE_IMAGE ? "data:image/png;base64," + user.EMPLOYEE_IMAGE
: "../assets/imgs/profile.png"; : "../assets/imgs/profile.png";
}
});
}
}});
}
} }

@ -1,9 +1,11 @@
<ion-header> <ion-header>
<ion-toolbar class="header-toolbar"> <ion-toolbar class="header-toolbar-new">
<ion-title color="light" > {{ts.trPK('userProfile','changepicture')}}</ion-title>
<ion-buttons slot="start"> <ion-buttons slot="start">
<ion-back-button color="light" class="btnBack" defaultHref="/home"></ion-back-button> <nav-buttons></nav-buttons>
<!-- <ion-back-button color="light" class="btnBack" defaultHref="/home"></ion-back-button> -->
</ion-buttons> </ion-buttons>
<ion-title color="light" > {{ts.trPK('userProfile','changepicture')}}</ion-title>
<ion-buttons slot="end"> <ion-buttons slot="end">
<button style="color: white !important;" class="headerBtn" *ngIf="saveChange != ''" (click)="updateImageProfile();" > <button style="color: white !important;" class="headerBtn" *ngIf="saveChange != ''" (click)="updateImageProfile();" >
{{ts.trPK('general','save')}} {{ts.trPK('general','save')}}

@ -8,7 +8,9 @@
// background: transparent; // background: transparent;
// border-radius: 50% !important; // border-radius: 50% !important;
// } // }
.header-toolbar-new{
--background: #22c6b3;
}
.imgCircle{ .imgCircle{
// width: 90px; // width: 90px;

@ -1033,6 +1033,18 @@
"en": "Employee Name", "en": "Employee Name",
"ar": "اسم الموظف " "ar": "اسم الموظف "
}, },
"years": {
"en": "Years",
"ar": "سنوات "
},
"years-of-services": {
"en": " Years of Services",
"ar": "سنوات الخبره"
},
"months": {
"en": "Months",
"ar": "اشهر "
},
"orgName": { "orgName": {
"en": "Organization Name", "en": "Organization Name",
"ar": "اسم المنشأة" "ar": "اسم المنشأة"

Loading…
Cancel
Save