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

@ -1,6 +1,6 @@
<ion-header >
<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">
<nav-buttons></nav-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>
</div>
<div [ngClass]=" direction == 'ltr' ? 'div-orng' : 'div-orng-ar'">
<div [ngClass]=" direction == 'ltr' ? 'div-green' : 'div-green-ar'">
<ion-col>
<ion-row>
<label class="green-label">{{ts.trPK('absenceList','accrualNet')}}</label>
@ -78,7 +78,7 @@
</ion-row>
</ion-col>
</div>
<div [ngClass]=" direction == 'ltr' ? 'div-blue' : 'div-blue-ar'">
<div [ngClass]=" direction == 'ltr' ? 'div-red' : 'div-red-ar'">
<ion-col>
<ion-row>
<label class="blue-label">{{ts.trPK('absenceList','accrualUsed')}}</label>
@ -89,7 +89,7 @@
</ion-row>
</ion-col>
</div>
<div [ngClass]=" direction == 'ltr' ? 'div-red' : 'div-red-ar'">
<div [ngClass]=" direction == 'ltr' ? 'div-orng' : 'div-orng-ar'">
<ion-col>
<ion-row>
<label class="blue-label">{{ts.trPK('absenceList','accrualYearly')}}</label>

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

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

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

@ -197,6 +197,22 @@ height: 360px !important;
margin-top: -43px;
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;
margin-top: -26px !important;
color: black !important;

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

@ -26,16 +26,16 @@
<div class="gridService">
<ion-row>
<ion-col class="columns">
<label class="service">{{personalInfo.SERVICE_YEARS}}</label>
<br> <label class="services">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>
</ion-col>
<ion-col class="columns">
<label class="service">{{personalInfo.SERVICE_MONTHS}}</label>
<br> <label class="services">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>
</ion-col>
<ion-col class="columns">
<label class="service">{{personalInfo.SERVICE_DAYS}}</label>
<br> <label class="services">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>
</ion-col>
</ion-row>
@ -47,7 +47,7 @@
<div class="list">
<ion-list class="list-ios">
<div class="p">
<p>Years of Services</p>
<p>{{ts.trPK('userProfile','Years of Services')}}</p>
</div>
<ion-item class="itemline" (click)="openEditprofile()">
@ -58,7 +58,7 @@
<ion-label class="profile">
{{ts.trPK('userProfile','edit-profile')}}
</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 class="itemlins" (click)="openPerormance()">
@ -69,7 +69,7 @@
<ion-label class="profile">
{{ts.trPK('userProfile','performance-evaluation')}}
</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-list>

@ -106,6 +106,18 @@
font-size: 12px;
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{
margin-left: 14px;
@ -150,4 +162,14 @@
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_Job_name: string;
public direction: string;
private menu: MenuController;
setImage:any;
// 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 => {
// console.log("app compont: "+displayImg);
// this.user_image = this.sanitizer.bypassSecurityTrustUrl("data:Image/*;base64,"+displayImg);

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

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

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

@ -25,9 +25,9 @@
<ion-grid>
<div class="grid">
<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" -->
<ngx-charts-gauge [view]="view" [scheme]="colorScheme" [results]="performanceData" [min]="0" [max]="100"

@ -140,5 +140,11 @@
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 {
personalInfo: any;
user_image: any = "../assets/imgs/profile.png";
setImage:any;
setImage: any;
view: any = [380, 450];
public performanceData: any=[];
public performanceData: any = [];
public length;
public direction: string;
// public showText:boolean =false;
constructor( public ts: TranslatorService,
constructor(public ts: TranslatorService,
public cs: CommonService,
public DS :DashboredService,
public DS: DashboredService,
public authService: AuthenticationService,
// private events: Events,
// private sanitizer: DomSanitizer,
) {
// this.events.subscribe("img-change", displayImg => {
// console.log("app compont: "+displayImg);
// this.user_image = this.sanitizer.bypassSecurityTrustUrl("data:Image/*;base64,"+displayImg);
// });
}
// private events: Events,
// private sanitizer: DomSanitizer,
) {
this.direction = TranslatorService.getCurrentDirection();
// this.events.subscribe("img-change", displayImg => {
// console.log("app compont: "+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() {
this.getProfile();
this.performanceData = this.cs.sharedService.getSharedData(
PerformanceAppraisalResponse.PERFORMANCE_DATA,
true
);
console.log(this.performanceData.length);
//i % 2 == 0
this.length=this.performanceData.length;
//i % 2 == 0
this.length = this.performanceData.length;
for(let i=0;i<this.performanceData.length;i++){
this.performanceData[i].color =this.colorScheme.domain[i];
console.log( i+" : "+this.performanceData[i].name)
for (let i = 0; i < this.performanceData.length; i++) {
this.performanceData[i].color = this.colorScheme.domain[i];
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() {
console.log("getProfile");
@ -79,11 +83,12 @@ export class PerformanceEvaluationComponent implements OnInit {
if (user) {
this.personalInfo = user;
this.user_image = user.EMPLOYEE_IMAGE
? "data:image/png;base64," + user.EMPLOYEE_IMAGE
: "../assets/imgs/profile.png";
? "data:image/png;base64," + user.EMPLOYEE_IMAGE
: "../assets/imgs/profile.png";
}
});
}
}});
}
}

@ -1,9 +1,11 @@
<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-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-title color="light" > {{ts.trPK('userProfile','changepicture')}}</ion-title>
<ion-buttons slot="end">
<button style="color: white !important;" class="headerBtn" *ngIf="saveChange != ''" (click)="updateImageProfile();" >
{{ts.trPK('general','save')}}

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

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

Loading…
Cancel
Save