You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
104 lines
4.3 KiB
HTML
104 lines
4.3 KiB
HTML
<app-generic-header
|
|
showBack="true"
|
|
[headerText]="'home,monthly-attendance' | translate">
|
|
</app-generic-header>
|
|
|
|
<ion-content>
|
|
<div class="contentBg">
|
|
<div>
|
|
<div class="header">
|
|
<div>
|
|
<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>
|
|
<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 *ngIf="currentMonthName !== month" [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: right;">
|
|
<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">{{year}} {{month}}</span>
|
|
</ion-col>
|
|
<ion-col [size]="2" style="text-align: left;">
|
|
<ion-icon *ngIf="currentMonthName !== month" [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 >
|
|
<span [ngClass]="direction == 'ltr' ? 'request-heading':'request-heading-ar'">{{ts.trPK('myTeam','attendance-statistics')}}</span>
|
|
</div>
|
|
<div style="position: relative;">
|
|
<div class="label-container">
|
|
<div class="green-label-container">
|
|
<span class="span-one">{{ts.trPK('attendance','present')}}</span>
|
|
<span class="span-two">{{attendedDays}}</span>
|
|
</div>
|
|
<div class="blue-label-container">
|
|
<span class="span-one">{{ts.trPK('attendance','absent')}}</span>
|
|
<span class="span-two">{{absentDays}}</span>
|
|
</div>
|
|
</div>
|
|
<div class="graph-container">
|
|
<div class="result-text-container">
|
|
<h2>{{totalAttendancePrecentage}}</h2>
|
|
<span>{{ts.trPK('absenceList','days')}}</span>
|
|
</div>
|
|
<p-chart class="today-graph" type="doughnut" [data]="data" [options]="options"></p-chart>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<ion-row class="attendance-summary">
|
|
<ion-col [size]="3">
|
|
<div class="attendance-information">
|
|
<span>{{ts.trPK('attendance-tracking','schedule')}}</span>
|
|
<h2>{{timeCardSummaryData.SCHEDULE_DAYS}}</h2>
|
|
</div>
|
|
</ion-col>
|
|
|
|
<ion-col [size]="3">
|
|
<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.UNAUTHORIZED_LEAVE}}</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 *ngIf="showData" [ngClass]="direction == 'ltr' ? 'calendar-container':'calendar-container-ar' ">
|
|
<span> {{ts.trPK('attendance','monthly-attendance-calendar')}}</span>
|
|
<app-circle-calendar
|
|
[currentDateParent]="currentDate"
|
|
[dayHoursTypeDetailsList]="dayHoursTypeDetailsList"
|
|
(monthTitle)='changeMonthTitle($event)'
|
|
(currentYear)=changeYear($event)>
|
|
</app-circle-calendar>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</ion-content> |