|
|
|
|
<!-- <ion-header>
|
|
|
|
|
<ion-toolbar class="header-toolbar-new">
|
|
|
|
|
<ion-buttons slot="start">
|
|
|
|
|
<ion-back-button color="light" class="btnBack" defaultHref="/eit/homepage"></ion-back-button>
|
|
|
|
|
</ion-buttons>
|
|
|
|
|
<ion-title color="light" >My Time Card</ion-title>
|
|
|
|
|
</ion-toolbar>
|
|
|
|
|
</ion-header> -->
|
|
|
|
|
|
|
|
|
|
<!-- <ion-content> -->
|
|
|
|
|
<!-- <div class="time-card-details-container">
|
|
|
|
|
<ion-segment
|
|
|
|
|
(ionChange)="segmentChanged($event)"
|
|
|
|
|
[value]="activeSegment"
|
|
|
|
|
style="font-family: WorkSans-Bold;margin-top: 10px;">
|
|
|
|
|
<ion-segment-button
|
|
|
|
|
value="time-card-details"
|
|
|
|
|
[ngClass]="activeSegment == 'time-card-details' ? 'active-Segment' : 'normal-Segment'" >
|
|
|
|
|
<ion-label>Time Card Details</ion-label>
|
|
|
|
|
</ion-segment-button>
|
|
|
|
|
<ion-segment-button
|
|
|
|
|
value="time-card-summary"
|
|
|
|
|
[ngClass]="activeSegment == 'time-card-summary' ? 'active-Segment' : 'normal-Segment'">
|
|
|
|
|
<ion-label>Time Card Summary</ion-label>
|
|
|
|
|
</ion-segment-button>
|
|
|
|
|
</ion-segment>
|
|
|
|
|
|
|
|
|
|
<div class="ion-padding" *ngIf="activeSegment === 'time-card-summary' && timeCardSummaryData">
|
|
|
|
|
<ion-card>
|
|
|
|
|
<ion-card-content>
|
|
|
|
|
<h2 class="card-summary-heading">Days</h2>
|
|
|
|
|
<ion-grid style="line-height: 10px;">
|
|
|
|
|
<ion-row>
|
|
|
|
|
<ion-col [size]="8">
|
|
|
|
|
Period Days
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col [size]="4">
|
|
|
|
|
{{timeCardSummaryData.PERIOD_DAYS}}
|
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-row>
|
|
|
|
|
<ion-row>
|
|
|
|
|
<ion-col [size]="8">
|
|
|
|
|
Schedule Days
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col [size]="4">
|
|
|
|
|
{{timeCardSummaryData.SCHEDULE_DAYS}}
|
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-row>
|
|
|
|
|
<ion-row>
|
|
|
|
|
<ion-col [size]="8">
|
|
|
|
|
Off days
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col [size]="4">
|
|
|
|
|
{{timeCardSummaryData.OFF_DAYS}}
|
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-row>
|
|
|
|
|
<ion-row>
|
|
|
|
|
<ion-col [size]="8">
|
|
|
|
|
Attended Days
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col [size]="4">
|
|
|
|
|
{{timeCardSummaryData.ATTENDED_DAYS}}
|
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-row>
|
|
|
|
|
<ion-row>
|
|
|
|
|
<ion-col [size]="8">
|
|
|
|
|
Absent Days
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col [size]="4">
|
|
|
|
|
{{timeCardSummaryData.ABSENT_DAYS}}
|
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-row>
|
|
|
|
|
<ion-row>
|
|
|
|
|
<ion-col [size]="8">
|
|
|
|
|
Non Schedule Days
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col [size]="4">
|
|
|
|
|
{{timeCardSummaryData.NON_SCHEDULE_DAYS}}
|
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-row>
|
|
|
|
|
<ion-row>
|
|
|
|
|
<ion-col [size]="8">
|
|
|
|
|
Not Analyzed Days
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col [size]="4">
|
|
|
|
|
{{timeCardSummaryData.NOT_ANALYZED_DAYS}}
|
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-row>
|
|
|
|
|
</ion-grid>
|
|
|
|
|
</ion-card-content>
|
|
|
|
|
</ion-card>
|
|
|
|
|
|
|
|
|
|
<ion-card>
|
|
|
|
|
<ion-card-content>
|
|
|
|
|
<ion-grid style="line-height: 10px;">
|
|
|
|
|
<ion-row>
|
|
|
|
|
<ion-col [size]="6" class="card-summary-heading-hours">
|
|
|
|
|
Hours
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col [size]="3" class="card-summary-heading-hours-extended-heading">
|
|
|
|
|
Actual
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col [size]="3" class="card-summary-heading-hours-extended-heading">
|
|
|
|
|
Schedule
|
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-row>
|
|
|
|
|
<ion-row>
|
|
|
|
|
<ion-col [size]="6">
|
|
|
|
|
Regular
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col [size]="3">
|
|
|
|
|
{{timeCardSummaryData.ACTUAL_HRS}}
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col [size]="3">
|
|
|
|
|
{{timeCardSummaryData.SCHEDULED_HRS}}
|
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-row>
|
|
|
|
|
<ion-row>
|
|
|
|
|
<ion-col [size]="6">
|
|
|
|
|
Planned OT
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col [size]="3">
|
|
|
|
|
{{timeCardSummaryData.PLANNED_OTHRS}}
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col [size]="3">
|
|
|
|
|
{{timeCardSummaryData.SCHEDULED_PLANNED_OT_HRS}}
|
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-row>
|
|
|
|
|
<ion-row>
|
|
|
|
|
<ion-col [size]="6">
|
|
|
|
|
On Call
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col [size]="3">
|
|
|
|
|
{{timeCardSummaryData.ON_CALL_HRS}}
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col [size]="3">
|
|
|
|
|
{{timeCardSummaryData.SCHEDULED_ON_CALL_HRS}}
|
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-row>
|
|
|
|
|
<ion-row>
|
|
|
|
|
<ion-col [size]="6">
|
|
|
|
|
Excess
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col [size]="3">
|
|
|
|
|
{{timeCardSummaryData.EXCESS_HRS}}
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col [size]="3">
|
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-row>
|
|
|
|
|
<ion-row>
|
|
|
|
|
<ion-col [size]="6">
|
|
|
|
|
Time Back
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col [size]="3">
|
|
|
|
|
{{timeCardSummaryData.TIMEBACK_HRS}}
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col [size]="3">
|
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-row>
|
|
|
|
|
<ion-row>
|
|
|
|
|
<ion-col [size]="6">
|
|
|
|
|
Approved Time Back
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col [size]="3">
|
|
|
|
|
{{timeCardSummaryData.TIMEBACK_HRS}}
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col [size]="3">
|
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-row>
|
|
|
|
|
<ion-row>
|
|
|
|
|
<ion-col [size]="6">
|
|
|
|
|
Time Back Balance
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col [size]="3">
|
|
|
|
|
{{timeCardSummaryData.TIME_BACK_BALANCE}}
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col [size]="3">
|
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-row>
|
|
|
|
|
<ion-row>
|
|
|
|
|
<ion-col [size]="6">
|
|
|
|
|
Late In
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col [size]="3">
|
|
|
|
|
{{timeCardSummaryData.LATE_IN_HRS}}
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col [size]="3">
|
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-row>
|
|
|
|
|
<ion-row>
|
|
|
|
|
<ion-col [size]="6">
|
|
|
|
|
Early Out
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col [size]="3">
|
|
|
|
|
{{timeCardSummaryData.EARLY_OUT_HRS}}
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col [size]="3">
|
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-row>
|
|
|
|
|
</ion-grid>
|
|
|
|
|
</ion-card-content>
|
|
|
|
|
</ion-card>
|
|
|
|
|
|
|
|
|
|
<ion-card>
|
|
|
|
|
<ion-card-content>
|
|
|
|
|
<h2 class="card-summary-heading">Leaves & Holidays</h2>
|
|
|
|
|
<ion-grid style="line-height: 10px;">
|
|
|
|
|
<ion-row>
|
|
|
|
|
<ion-col [size]="7">
|
|
|
|
|
Half-Day Leave
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col [size]="5">
|
|
|
|
|
{{timeCardSummaryData.HALF_DAY_LEAVE}}
|
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-row>
|
|
|
|
|
<ion-row>
|
|
|
|
|
<ion-col [size]="7">
|
|
|
|
|
Unauthorized Leave
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col [size]="5">
|
|
|
|
|
{{timeCardSummaryData.UNAUTHORIZED_LEAVE}}
|
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-row>
|
|
|
|
|
<ion-row>
|
|
|
|
|
<ion-col>
|
|
|
|
|
Business Trip
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col [size]="5">
|
|
|
|
|
{{timeCardSummaryData.BUSINESS_TRIP}}
|
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-row>
|
|
|
|
|
<ion-row>
|
|
|
|
|
<ion-col [size]="7">
|
|
|
|
|
Sick Leave
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col [size]="5">
|
|
|
|
|
{{timeCardSummaryData.SICK_LEAVE}}
|
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-row>
|
|
|
|
|
<ion-row>
|
|
|
|
|
<ion-col [size]="7">
|
|
|
|
|
Paid Leave
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col [size]="5">
|
|
|
|
|
{{timeCardSummaryData.PAID_LEAVE}}
|
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-row>
|
|
|
|
|
<ion-row>
|
|
|
|
|
<ion-col [size]="7">
|
|
|
|
|
Unpaid Leave
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col [size]="5">
|
|
|
|
|
{{timeCardSummaryData.UNPAID_LEAVE}}
|
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-row>
|
|
|
|
|
<ion-row>
|
|
|
|
|
<ion-col [size]="7">
|
|
|
|
|
Puclic Holiday
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col [size]="5">
|
|
|
|
|
{{timeCardSummaryData.PUBLIC_HOLIDAY}}
|
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-row>
|
|
|
|
|
</ion-grid>
|
|
|
|
|
</ion-card-content>
|
|
|
|
|
</ion-card>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div *ngIf="activeSegment === 'time-card-details' && dayHoursData.length > 0" class="time-card-details">
|
|
|
|
|
<ion-slides #sliderRef (ionSlideWillChange)="slideChanged($event)" class="fadeIn">
|
|
|
|
|
<ion-slide *ngFor="let dayHours of dayHoursData; let i = index">
|
|
|
|
|
<ion-grid>
|
|
|
|
|
<ion-row style="text-align: center;">
|
|
|
|
|
<ion-col [size]="12" class="time-card-details-heading-two">
|
|
|
|
|
<h2>{{ dayHours.SCHEDULE_DATE | date }}</h2>
|
|
|
|
|
<h2>Time card details</h2>
|
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-row>
|
|
|
|
|
<ion-row>
|
|
|
|
|
<ion-col [size]="2">
|
|
|
|
|
<span class="time-card-span"><img class="" src="../assets/imgs/time-card/TimeBackIcon.png"></span>
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col [size]="6">
|
|
|
|
|
<span>Time Back:</span>
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col [size]="4">
|
|
|
|
|
{{dayHours.TIMEBACK_HRS}}
|
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-row>
|
|
|
|
|
|
|
|
|
|
<ion-row>
|
|
|
|
|
<ion-col [size]="2">
|
|
|
|
|
<span class="time-card-span"><img class="" src="../assets/imgs/time-card/Remarks.png"></span>
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col [size]="6">
|
|
|
|
|
<span>Remarks:</span>
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col [size]="4" style="font-size: 12px;">
|
|
|
|
|
{{dayHours.REMARKS}}
|
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-row>
|
|
|
|
|
|
|
|
|
|
<ion-row [hidden]="showMore == false">
|
|
|
|
|
<ion-col [size]="2">
|
|
|
|
|
<span class="time-card-span"><img class="" src="../assets/imgs/time-card/Shift Hours.png"></span>
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col [size]="6">
|
|
|
|
|
<span>Shift Hours:</span>
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col [size]="4">
|
|
|
|
|
{{dayHours.SCHEDULED_HRS}}
|
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-row>
|
|
|
|
|
|
|
|
|
|
<ion-row [hidden]="showMore == false">
|
|
|
|
|
<ion-col [size]="2">
|
|
|
|
|
<span class="time-card-span"><img class="" src="../assets/imgs/time-card/ExcessTime.png"></span>
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col [size]="6">
|
|
|
|
|
<span>Excess Time:</span>
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col [size]="4">
|
|
|
|
|
{{dayHours.EXCESS_HRS}}
|
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-row>
|
|
|
|
|
|
|
|
|
|
<ion-row [hidden]="showMore == false">
|
|
|
|
|
<ion-col [size]="2">
|
|
|
|
|
<span class="time-card-span"><img class="" src="../assets/imgs/time-card/PlannedOT.png"></span>
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col [size]="6">
|
|
|
|
|
<span>Planned OT:</span>
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col [size]="4">
|
|
|
|
|
{{dayHours.PLANNED_OT_HRS}}
|
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-row>
|
|
|
|
|
|
|
|
|
|
<ion-row [hidden]="showMore == false">
|
|
|
|
|
<ion-col [size]="2">
|
|
|
|
|
<span class="time-card-span"><img class="" src="../assets/imgs/time-card/LateIn.png"></span>
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col [size]="6">
|
|
|
|
|
<span>Late In:</span>
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col [size]="4">
|
|
|
|
|
{{dayHours.LATE_IN_HRS}}
|
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-row>
|
|
|
|
|
|
|
|
|
|
<ion-row [hidden]="showMore == false">
|
|
|
|
|
<ion-col [size]="2">
|
|
|
|
|
<span class="time-card-span"><img class="" src="../assets/imgs/time-card/EarlyOut.png"></span>
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col [size]="6">
|
|
|
|
|
<span>Early Out:</span>
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col [size]="4">
|
|
|
|
|
{{dayHours.EARLY_OUT_HRS}}
|
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-row>
|
|
|
|
|
</ion-grid>
|
|
|
|
|
</ion-slide>
|
|
|
|
|
|
|
|
|
|
</ion-slides>
|
|
|
|
|
<div class="dayhours-button-container">
|
|
|
|
|
<button class="dayhours-button" (click)="showShiftDetails('shiftDetails')">Shift details</button>
|
|
|
|
|
<button class="dayhours-button" (click)="showShiftDetails('shiftSwipes')">Swipes</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="right-slider-icon" *ngIf="activeSegment === 'time-card-details'">
|
|
|
|
|
<img *ngIf="rightIconActive && dayHoursData.length > 1" (click)="nextSlide()" style="height: 35%;" src="../assets/imgs/time-card/Asset 18.png">
|
|
|
|
|
<img *ngIf="!rightIconActive || dayHoursData.length == 1" style="height: 35%;" src="../assets/imgs/time-card/Asset 20.png">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="left-slider-icon" *ngIf="activeSegment === 'time-card-details'">
|
|
|
|
|
<img *ngIf="leftIconActive && dayHoursData.length > 1" (click)="previousSlide()" style="height: 35%;" src="../assets/imgs/time-card/Asset 19.png">
|
|
|
|
|
<img *ngIf="!leftIconActive || dayHoursData.length == 1" style="height: 35%;" src="../assets/imgs/time-card/Asset 21.png">
|
|
|
|
|
</div> -->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!------------------------------------------ ENAD CODE ------------------------------------------->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<ion-content class="colorBG">
|
|
|
|
|
|
|
|
|
|
<div class="header-div">
|
|
|
|
|
<ion-buttons slot="start">
|
|
|
|
|
<ion-back-button color="light" class="btnBack" defaultHref="/home"></ion-back-button>
|
|
|
|
|
</ion-buttons>
|
|
|
|
|
<ion-title class="Title"> {{ts.trPK('attendance','monthly-attendance')}}</ion-title>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="">
|
|
|
|
|
<div class="header">
|
|
|
|
|
<!-- <p style="position: absolute; left: 40%; bottom: 65%;">{{monthTitle}}</p> -->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="slider">
|
|
|
|
|
<ion-row>
|
|
|
|
|
<ion-col>
|
|
|
|
|
<button ion-button icon-start class="slidPrev" (click)="previousSlide(sliderOne,slideWithNav)">
|
|
|
|
|
<ion-icon class="activeArrow" ios="ios-arrow-dropleft-circle" md="md-arrow-dropleft-circle">
|
|
|
|
|
</ion-icon>
|
|
|
|
|
</button>
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col>
|
|
|
|
|
<p style="position: absolute; left: 27%; bottom: 0%; font-family: WorkSans-Bold;">{{month}}</p>
|
|
|
|
|
<!-- <p style="position: absolute; left: 22%; bottom: 0%; font-family: WorkSans-Bold;">{{yearTitle}}</p> -->
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col>
|
|
|
|
|
<p style="position: absolute; left: 25%; bottom: 0%; font-family: WorkSans-Bold;">{{year}}</p>
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col>
|
|
|
|
|
<button ion-button icon-end class="slidNext" (click)="nextSlide(sliderOne,slideWithNav)">
|
|
|
|
|
<ion-icon class="disabledArrow" ios="ios-arrow-dropright-circle" md="md-arrow-dropright-circle">
|
|
|
|
|
</ion-icon>
|
|
|
|
|
|
|
|
|
|
</button>
|
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-row>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- <ion-slides [options]="slideOptsOne" #sliderRef (ionSlideDidChange)="SlideDidChange(sliderOne,slideWithNav)">
|
|
|
|
|
<ion-slide >
|
|
|
|
|
<ion-grid class="headerGrid"> -->
|
|
|
|
|
|
|
|
|
|
<ion-slides [options]="slideOptsOne" #slideWithNav (ionSlideDidChange)="SlideDidChange(sliderOne,slideWithNav)">
|
|
|
|
|
<ion-slide >
|
|
|
|
|
<ion-grid class="headerGrid">
|
|
|
|
|
<div style="color: black;">
|
|
|
|
|
<!-- <ngx-gauge
|
|
|
|
|
[type]="gaugeType"
|
|
|
|
|
[value]="gaugeValue"
|
|
|
|
|
[label]="gaugeLabel">
|
|
|
|
|
</ngx-gauge> -->
|
|
|
|
|
<div class="result-graph">
|
|
|
|
|
|
|
|
|
|
<div class="request-heading">
|
|
|
|
|
|
|
|
|
|
<span> {{ts.trPK('attendance-tracking','attendance-statistics')}}</span>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="result-text-container">
|
|
|
|
|
|
|
|
|
|
<h2>{{totalAttendancePrecentage}}</h2>
|
|
|
|
|
<p>{{ts.trPK('absenceList','days')}}</p>
|
|
|
|
|
<!-- <span>TOTAL <br> OPEN REQUEST</span> -->
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<p-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;">
|
|
|
|
|
<label style="position: absolute;left: 20%; bottom: 100%; font-size:11px ;"> {{ts.trPK('attendance','present')}} <strong>{{attendedDays}}</strong></label>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="position: relative;
|
|
|
|
|
left: 77%;
|
|
|
|
|
bottom: 67px;
|
|
|
|
|
color: black;
|
|
|
|
|
background-color: #094875;
|
|
|
|
|
width: 20%; height: 6px;">
|
|
|
|
|
<label style="position: absolute;left: 20%; bottom: 100%; font-size:11px ;">{{ts.trPK('attendance','absent')}} <strong>{{absentDays}}</strong></label>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div> -->
|
|
|
|
|
<div style="position: relative;
|
|
|
|
|
left: 77%;
|
|
|
|
|
bottom: 117px;
|
|
|
|
|
color: black;
|
|
|
|
|
background-color: #22c6b3;
|
|
|
|
|
width: 20%; height: 6px;">
|
|
|
|
|
<ion-col>
|
|
|
|
|
<ion-row>
|
|
|
|
|
<label class="green-label">{{ts.trPK('attendance','present')}}</label>
|
|
|
|
|
</ion-row>
|
|
|
|
|
<ion-row>
|
|
|
|
|
<label class="green-amount">{{attendedDays}}</label>
|
|
|
|
|
</ion-row>
|
|
|
|
|
</ion-col>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="position: relative;
|
|
|
|
|
left: 77%;
|
|
|
|
|
bottom: 67px;
|
|
|
|
|
color: black;
|
|
|
|
|
background-color: #094875;
|
|
|
|
|
width: 20%; height: 6px;">
|
|
|
|
|
<ion-col>
|
|
|
|
|
<ion-row>
|
|
|
|
|
<label class="blue-label">{{ts.trPK('attendance','absent')}}</label>
|
|
|
|
|
</ion-row>
|
|
|
|
|
<ion-row>
|
|
|
|
|
<label class="blue-amount" for="">{{absentDays}}</label>
|
|
|
|
|
</ion-row>
|
|
|
|
|
</ion-col>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</ion-grid>
|
|
|
|
|
|
|
|
|
|
<!-- //////////////////////////////////////// -->
|
|
|
|
|
</ion-slide>
|
|
|
|
|
</ion-slides>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="margin-top: 10%;">
|
|
|
|
|
<ion-grid>
|
|
|
|
|
<ion-row>
|
|
|
|
|
<ion-col>
|
|
|
|
|
<ion-grid class="labelGrid">
|
|
|
|
|
<ion-row>
|
|
|
|
|
<ion-col>
|
|
|
|
|
<label style="font-size: 12px;">{{ts.trPK('attendance-tracking','schedule')}}</label>
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col>
|
|
|
|
|
<h2 *ngIf ="timeCardSummaryData" style="margin-left: 45%; font-size: 25px; font-weight: bold;">{{timeCardSummaryData.SCHEDULE_DAYS}}</h2>
|
|
|
|
|
<h2 *ngIf ="!timeCardSummaryData" style="margin-left: 45%; font-size: 25px;">0</h2>
|
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-row>
|
|
|
|
|
</ion-grid>
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col>
|
|
|
|
|
<ion-grid class="labelGrid">
|
|
|
|
|
<ion-row>
|
|
|
|
|
<ion-col>
|
|
|
|
|
<label style="font-size: 12px;">{{ts.trPK('attendance-tracking','off-days')}}</label>
|
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-row>
|
|
|
|
|
<ion-row>
|
|
|
|
|
|
|
|
|
|
<ion-col>
|
|
|
|
|
<h2 *ngIf ="timeCardSummaryData" style="margin-left: 37%; margin-top: 18px; font-size: 25px; font-weight: bold;">{{timeCardSummaryData.OFF_DAYS}}</h2>
|
|
|
|
|
<h2 *ngIf ="!timeCardSummaryData" style="margin-left: 37%; font-size: 25px;">0</h2>
|
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-row>
|
|
|
|
|
</ion-grid>
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col>
|
|
|
|
|
<ion-grid class="labelGrid">
|
|
|
|
|
<label style="font-size: 12px;">{{ts.trPK('attendance-tracking','non-analyzed')}}</label>
|
|
|
|
|
<h2 *ngIf ="timeCardSummaryData" style="margin-left: 36%; font-size: 25px; font-weight: bold;">{{timeCardSummaryData.UNAUTHORIZED_LEAVE}}</h2>
|
|
|
|
|
<h2 *ngIf ="!timeCardSummaryData" style="margin-left: 36%; font-size: 25px;">0</h2>
|
|
|
|
|
</ion-grid>
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col>
|
|
|
|
|
<ion-grid class="labelGrid">
|
|
|
|
|
<label style="font-size: 12px;">{{ts.trPK('attendance-tracking','shortage-hours')}}</label>
|
|
|
|
|
<h2 *ngIf ="timeCardSummaryData" style="margin-left: 18%; font-size: 25px; font-weight: bold;">{{timeCardSummaryData.SHORTAGE_HRS}}</h2>
|
|
|
|
|
<h2 *ngIf ="!timeCardSummaryData" style="margin-left: 45%; font-size: 25px;">0</h2>
|
|
|
|
|
</ion-grid>
|
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-row>
|
|
|
|
|
</ion-grid>
|
|
|
|
|
</div>
|
|
|
|
|
<div >
|
|
|
|
|
<ion-grid class="bodyGrid">
|
|
|
|
|
<p style="font-weight: bold; font-size: 17px;"> {{ts.trPK('attendance','monthly-attendance-calendar')}}</p>
|
|
|
|
|
<app-circle-calendar [eventsdateAttend]='arrDaysAttendance' [eventsdateAbsent]='arrDaysAbsent' [eventsdateDayOff]='arrDaysOff' (monthTitle)='changeMonthTitle($event)' (currentYear)=changeYear($event)></app-circle-calendar>
|
|
|
|
|
</ion-grid>
|
|
|
|
|
</div>
|
|
|
|
|
</ion-content>
|
|
|
|
|
<!-- <div *ngIf="activeSegment === 'time-card-details'" class="footer-modal-button">
|
|
|
|
|
<button ion-button (click)="openSelectPeriodModal()">
|
|
|
|
|
Select Period
|
|
|
|
|
</button>
|
|
|
|
|
</div> -->
|
|
|
|
|
|
|
|
|
|
|