fixed timecard module
parent
7ed63baf68
commit
f1157f48f6
@ -1,148 +1,100 @@
|
||||
<ion-content class="colorBG">
|
||||
<ion-header>
|
||||
<ion-toolbar class="header-toolbar-new">
|
||||
<ion-buttons slot="start">
|
||||
<nav-buttons backLink="/home"></nav-buttons>
|
||||
</ion-buttons>
|
||||
<ion-title>MONTHLY ATTENDANCE</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<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>
|
||||
<div class="header">
|
||||
<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>
|
||||
</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()">
|
||||
<ion-icon [ngClass]=" currentMonthName === month ? 'disabledArrow' : 'activeArrow'"
|
||||
ios="ios-arrow-dropright-circle" md="md-arrow-dropright-circle"></ion-icon>
|
||||
</button>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
<ion-content>
|
||||
<div class="contentBg">
|
||||
<div>
|
||||
<div class="header">
|
||||
<div>
|
||||
<ion-row>
|
||||
<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 [ngClass]=" currentMonthName === month ? 'disabledArrow' : 'activeArrow'" ios="ios-arrow-dropright-circle" md="md-arrow-dropright-circle" (click)="nextSlide()"></ion-icon>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</div>
|
||||
</div>
|
||||
<ion-slides [options]="slideOptsOne" #slideWithNav (ionSlideDidChange)="SlideDidChange(sliderOne,slideWithNav)">
|
||||
<ion-slide>
|
||||
<ion-grid class="headerGrid">
|
||||
<div style="color: black;">
|
||||
<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>
|
||||
</div>
|
||||
<p-chart class="today-graph" type="doughnut" [data]="data" [options]="options"></p-chart>
|
||||
</div>
|
||||
|
||||
<div style="position: relative;
|
||||
left: 74%;
|
||||
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: 74%;
|
||||
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 class="result-graph">
|
||||
<div class="request-heading">
|
||||
<span>{{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>
|
||||
</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>
|
||||
<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>
|
||||
<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 [size]="3">
|
||||
<div class="attendance-information">
|
||||
<span>{{ts.trPK('attendance-tracking','off-days')}}</span>
|
||||
<h2>{{timeCardSummaryData.OFF_DAYS}}</h2>
|
||||
</div>
|
||||
</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 [size]="3">
|
||||
<div class="attendance-information">
|
||||
<span>{{ts.trPK('attendance-tracking','non-analyzed')}}</span>
|
||||
<h2>{{timeCardSummaryData.UNAUTHORIZED_LEAVE}}</h2>
|
||||
</div>
|
||||
</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 [size]="3">
|
||||
<div class="attendance-information">
|
||||
<span>{{ts.trPK('attendance-tracking','shortage-hours')}}</span>
|
||||
<h2>{{timeCardSummaryData.SHORTAGE_HRS}}</h2>
|
||||
</div>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
</div>
|
||||
<div>
|
||||
<ion-grid class="bodyGrid" *ngIf="showData">
|
||||
<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 *ngIf="showData" class="calendar-container">
|
||||
<span> {{ts.trPK('attendance','monthly-attendance-calendar')}}</span>
|
||||
<app-circle-calendar
|
||||
[eventsdateAttend]='arrDaysAttendance'
|
||||
[eventsdateAbsent]='arrDaysAbsent'
|
||||
[eventsdateDayOff]='arrDaysOff'
|
||||
[currentDateParent]="currentDate"
|
||||
[dayHoursTypeDetailsList]="dayHoursTypeDetailsList"
|
||||
[normalDays]="normalDays"
|
||||
(monthTitle)='changeMonthTitle($event)'
|
||||
(currentYear)=changeYear($event)>
|
||||
</app-circle-calendar>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</ion-content>
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue