|
|
|
|
@ -13,13 +13,72 @@
|
|
|
|
|
<div class="user-info">
|
|
|
|
|
<div class="user-image-container">
|
|
|
|
|
<div class="user-image">
|
|
|
|
|
<img [src]="employee.EMPLOYEE_IMAGE ? 'data:image/png;base64,'+employee.EMPLOYEE_IMAGE : '../assets/imgs/profile.png'" alt="Team Member Image"/>
|
|
|
|
|
<img class="img" [src]="employee.EMPLOYEE_IMAGE ? 'data:image/png;base64,'+employee.EMPLOYEE_IMAGE : '../assets/imgs/profile.png'" alt="Team Member Image"/>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<h1>{{employee.EMPLOYEE_NAME}}</h1>
|
|
|
|
|
<span>{{employee.JOB_NAME}}</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="user-actions">
|
|
|
|
|
|
|
|
|
|
<div >
|
|
|
|
|
<ion-row>
|
|
|
|
|
<ion-segment
|
|
|
|
|
(ionChange)="segmentChanged($event)"
|
|
|
|
|
[value]="activeSegment">
|
|
|
|
|
<ion-segment-button
|
|
|
|
|
value="About"
|
|
|
|
|
[ngClass]="activeSegment == 'About' ? 'active-Segment' : 'normal-Segment'">
|
|
|
|
|
<!-- <ion-label> Team Members</ion-label> -->
|
|
|
|
|
<img [ngClass]="direction == 'en' ? 'imgSize-en':'imgSize-ar' " src="../assets/imgs/profile.svg">
|
|
|
|
|
</ion-segment-button>
|
|
|
|
|
<ion-segment-button
|
|
|
|
|
value="create-request"
|
|
|
|
|
[ngClass]="activeSegment == 'create-request' ? 'active-Segment' : 'normal-Segment'">
|
|
|
|
|
<img (click)="getMenuEntries(employee)" [ngClass]="direction == 'en' ? 'imgSize-en':'imgSize-ar' " src="../assets/imgs/create-req.svg">
|
|
|
|
|
<!-- <ion-label> {{ts.trPK('vacation-rule','create-request')}}</ion-label> -->
|
|
|
|
|
</ion-segment-button>
|
|
|
|
|
|
|
|
|
|
<ion-segment-button
|
|
|
|
|
value="Attendance"
|
|
|
|
|
[ngClass]="activeSegment == 'Attendance' ? 'active-Segment' : 'normal-Segment'" >
|
|
|
|
|
<!-- <ion-label>{{ts.trPK('attendance','attendance')}}</ion-label> -->
|
|
|
|
|
<img [ngClass]="direction == 'en' ? 'imgSize-en':'imgSize-ar' " src="../assets/imgs/view-attendance.svg">
|
|
|
|
|
</ion-segment-button>
|
|
|
|
|
<ion-segment-button
|
|
|
|
|
value="Team Members"
|
|
|
|
|
[ngClass]="activeSegment == 'Team Members' ? 'active-Segment' : 'normal-Segment'">
|
|
|
|
|
<!-- <ion-label>{{ts.trPK('myTeam','team-members')}}</ion-label> -->
|
|
|
|
|
<img [ngClass]="direction == 'en' ? 'imgSize-en':'imgSize-ar' " src="../assets/imgs/team-members.svg">
|
|
|
|
|
</ion-segment-button>
|
|
|
|
|
</ion-segment>
|
|
|
|
|
</ion-row>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="user-actions">
|
|
|
|
|
<ion-row class="ion-justify-content-center">
|
|
|
|
|
<ion-col [size]="3">
|
|
|
|
|
<div class="action-button col-button">
|
|
|
|
|
<span>{{ts.trPK('myTeam','profile-details')}}</span>
|
|
|
|
|
</div>
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col [size]="3" (click)="getMenuEntries(employee)">
|
|
|
|
|
<div class="action-button col-button">
|
|
|
|
|
<span>{{ts.trPK('vacation-rule','create-request')}}</span>
|
|
|
|
|
</div>
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col [size]="3" >
|
|
|
|
|
<div class="action-button col-button">
|
|
|
|
|
<span>{{ts.trPK('myTeam','view-attendence')}} </span>
|
|
|
|
|
</div>
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col [size]="3" >
|
|
|
|
|
<div class="action-button col-button">
|
|
|
|
|
<span>{{ts.trPK('myTeam','team-members')}}</span>
|
|
|
|
|
</div>
|
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-row>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="user-actions">
|
|
|
|
|
<ion-row class="ion-justify-content-center">
|
|
|
|
|
<ion-col [size]="4">
|
|
|
|
|
<div class="action-button col-button">
|
|
|
|
|
@ -98,6 +157,27 @@
|
|
|
|
|
</div>
|
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-row>
|
|
|
|
|
<!-- <ion-row *ngIf="attendanceTrackingList.stats == '' || attendanceTrackingList.stats == '' "> Hello </ion-row>
|
|
|
|
|
</div> -->
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div *ngIf="showAttendence" class="result-graph-attendence">
|
|
|
|
|
<div >
|
|
|
|
|
<ion-row style="margin-top: 8px; margin-left: 12px;">
|
|
|
|
|
<ion-col [size]="8">
|
|
|
|
|
<span class="attendence-text"> {{ts.trPK('attendance','monthly-attendance-calendar')}}</span>
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col [size]="4">
|
|
|
|
|
<ion-row>
|
|
|
|
|
<button (click)="showCalender()" style="background: white; margin-left: 15px;">
|
|
|
|
|
<label [ngClass]="direction == 'en' ? 'stats-en':'stats-ar' " >{{ts.trPK('attendance-tracking','view-days')}}</label>
|
|
|
|
|
<img src="../assets/imgs/view-days.svg">
|
|
|
|
|
</button>
|
|
|
|
|
</ion-row>
|
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-row>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="header">
|
|
|
|
|
@ -132,6 +212,37 @@
|
|
|
|
|
<div>
|
|
|
|
|
<span [ngClass]="direction == 'en' ? 'request-heading':'request-heading-ar'">{{ts.trPK('myTeam','attendance-statistics')}}</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<ion-row class="attendance-summary">
|
|
|
|
|
<ion-col [size]="4">
|
|
|
|
|
<div class="attendance-information">
|
|
|
|
|
<span>{{ts.trPK('attendance-tracking','schedule')}}</span>
|
|
|
|
|
<h2>{{timeCardSummaryData?.SCHEDULE_DAYS}}</h2>
|
|
|
|
|
</div>
|
|
|
|
|
</ion-col>
|
|
|
|
|
|
|
|
|
|
<ion-col [size]="2">
|
|
|
|
|
<div class="attendance-information">
|
|
|
|
|
<span>{{ts.trPK('attendance-tracking','off-days')}}</span>
|
|
|
|
|
<h2>{{timeCardSummaryData?.OFF_DAYS}}</h2>
|
|
|
|
|
</div>
|
|
|
|
|
</ion-col>
|
|
|
|
|
|
|
|
|
|
<ion-col [size]="3">
|
|
|
|
|
<div class="attendance-information">
|
|
|
|
|
<span>{{ts.trPK('attendance-tracking','non-analyzed')}}</span>
|
|
|
|
|
<h2>{{timeCardSummaryData?.NOT_ANALYZED_DAYS}}</h2>
|
|
|
|
|
</div>
|
|
|
|
|
</ion-col>
|
|
|
|
|
|
|
|
|
|
<ion-col [size]="3">
|
|
|
|
|
<div class="attendance-information">
|
|
|
|
|
<span>{{ts.trPK('attendance-tracking','shortage-hours')}}</span>
|
|
|
|
|
<h2>{{timeCardSummaryData?.SHORTAGE_HRS}}</h2>
|
|
|
|
|
</div>
|
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-row>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="position: relative;">
|
|
|
|
|
<div class="label-container">
|
|
|
|
|
<div class="green-label-container">
|
|
|
|
|
@ -153,6 +264,45 @@
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- //////////////////////////////////CALENDAR/////////////////////////////////////////////////////// -->
|
|
|
|
|
|
|
|
|
|
<div *ngIf="!showAttendence">
|
|
|
|
|
<div *ngIf="showData" [ngClass]="direction == 'en' ? 'calendar-container':'calendar-container-ar' ">
|
|
|
|
|
<div>
|
|
|
|
|
<ion-row style="margin-top: 8px; margin-left: 12px;">
|
|
|
|
|
<ion-col [size]="8">
|
|
|
|
|
<span class="attendence-text"> {{ts.trPK('attendance','monthly-attendance-calendar')}}</span>
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col [size]="4">
|
|
|
|
|
<ion-row>
|
|
|
|
|
<button (click)="showCalender()" style="background: white; margin-left: 15px; margin-top: 6px;">
|
|
|
|
|
<label [ngClass]="direction == 'en' ? 'stats-en':'stats-ar' " >{{ts.trPK('attendance-tracking','view-stats')}}</label>
|
|
|
|
|
<img src="../assets/imgs/view-stats.svg">
|
|
|
|
|
</button>
|
|
|
|
|
</ion-row>
|
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-row>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="header">
|
|
|
|
|
<div>
|
|
|
|
|
|
|
|
|
|
<div>
|
|
|
|
|
<ion-row >
|
|
|
|
|
<ion-slides [options]="slideOptsOne">
|
|
|
|
|
<ion-slide *ngFor="let filter of filters; let i=index" (click)="monthCardSliders(filter.monthNo)" [ngClass]="filter.disable === true ? 'disable-filter' : ''">
|
|
|
|
|
<app-card-calendar
|
|
|
|
|
[text]="filter.name"
|
|
|
|
|
[color]="filter.color"
|
|
|
|
|
[active]="filter.active"
|
|
|
|
|
(click)="activeFilter(i)"
|
|
|
|
|
></app-card-calendar>
|
|
|
|
|
</ion-slide>
|
|
|
|
|
</ion-slides>
|
|
|
|
|
</ion-row>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<ion-row class="attendance-summary">
|
|
|
|
|
<ion-col [size]="3">
|
|
|
|
|
<div class="attendance-information">
|
|
|
|
|
@ -196,7 +346,14 @@
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div *ngIf="activeSegment === 'Team Members'">
|
|
|
|
|
<div style="margin-top: 15px;background: white;border-radius: 100px;overflow: hidden;">
|
|
|
|
|
<div style="margin-top: -23px;">
|
|
|
|
|
<ion-row>
|
|
|
|
|
<ion-col><p class="text">{{ts.trPK('myTeam','my-team-members')}}</p></ion-col>
|
|
|
|
|
<ion-col> <div class="number"><p [ngClass]="direction == 'en' ? 'numberEmp-en':'numberEmp-ar' ">{{EmpTotal}}</p></div></ion-col>
|
|
|
|
|
</ion-row>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
<!-- <div style="margin-top: 15px;background: white;border-radius: 100px;overflow: hidden;">
|
|
|
|
|
<ion-row no-padding>
|
|
|
|
|
<ion-col [size]="3" class="search-dropdown" no-padding>
|
|
|
|
|
<ion-select okText="{{ts.trPK('general','ok')}}" cancelText="{{ts.trPK('general','cancel')}}"
|
|
|
|
|
@ -223,7 +380,7 @@
|
|
|
|
|
<ion-icon name="close" ></ion-icon>
|
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-row>
|
|
|
|
|
</div>
|
|
|
|
|
</div> -->
|
|
|
|
|
|
|
|
|
|
<ng-container *ngFor="let subordinate of empSubordinate;let i=index">
|
|
|
|
|
<app-employee-information
|
|
|
|
|
|