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.
117 lines
5.0 KiB
HTML
117 lines
5.0 KiB
HTML
<ion-content>
|
|
<ion-slides #slides pager="true" [options]="slideOptsOne" (ionSlideDidChange)="slideChanged($event)" class="slider-container">
|
|
<ion-slide *ngFor="let shift of SHIFTDETAILS.GetScheduleShiftsDetailsList; let i=index">
|
|
<ion-grid class="headerGrid">
|
|
<ion-row style="padding: 5px 10px;">
|
|
<ion-col size="8">
|
|
<div style="width: 100%;">
|
|
<div class="result-graph">
|
|
<div class="result-text-container" [ngStyle]="direction === 'rtl' ? {'left': '65%'} : {}">
|
|
<h2 class="percentage">{{percentage}}</h2>
|
|
<span>{{ts.trPK('attendance','completed')}}<br><br><br><br></span>
|
|
</div>
|
|
<p-chart [ngClass]="direction == 'ltr'? 'today-graph':'today-graph-ar'" type="doughnut" [data]="data" [options]="options"></p-chart>
|
|
</div>
|
|
</div>
|
|
</ion-col>
|
|
<ion-col size="4">
|
|
<div class="div" >
|
|
<ion-row >
|
|
<p class="p0">{{nameDay}}</p>
|
|
</ion-row>
|
|
<ion-row >
|
|
<p class="p1">{{day}}</p>
|
|
</ion-row>
|
|
<ion-row >
|
|
<p class="p2">{{nameMonth}}</p>
|
|
</ion-row>
|
|
<ion-row >
|
|
<p class="p3">{{year}}</p>
|
|
</ion-row>
|
|
<ion-row>
|
|
<p class="p5">{{ts.trPK('attendance','present')}}</p>
|
|
</ion-row>
|
|
</div>
|
|
</ion-col>
|
|
</ion-row>
|
|
<ion-row class="gridrow">
|
|
|
|
|
|
<ion-col [size]="6" [ngClass]="direction == 'ltr'? 'col':'col-ar'">
|
|
<ion-row class="amountlabel"> <p>{{shiftTime}}</p> </ion-row>
|
|
<ion-row class="rowlabel">
|
|
<p >{{ts.trPK('attendance-tracking','shift-time')}}</p>
|
|
</ion-row>
|
|
</ion-col>
|
|
|
|
<ion-col [size]="6" style="border-bottom: 1px solid #ccc;">
|
|
<ion-row class="amountlabel"><p >{{scheduled}}</p> </ion-row>
|
|
<ion-row class="rowlabel">
|
|
<p >{{ts.trPK('attendance-tracking','shift-type')}}</p>
|
|
</ion-row>
|
|
</ion-col>
|
|
|
|
|
|
<ion-col [size]="6" [ngClass]="direction == 'ltr'? 'col':'col-ar'">
|
|
<ion-row class="amountlabel"><p >{{actualCheckIn}}</p> </ion-row>
|
|
<ion-row class="rowlabel">
|
|
<p >{{ts.trPK('attendance-tracking','actual-check-in')}}</p>
|
|
</ion-row>
|
|
</ion-col>
|
|
|
|
|
|
<ion-col [size]="6" style="border-bottom: 1px solid #ccc;">
|
|
<ion-row class="amountlabel"> <p >{{actualCheckOut}}</p> </ion-row>
|
|
<ion-row class="rowlabel">
|
|
<p >{{ts.trPK('attendance-tracking','actual-check-out')}} </p>
|
|
</ion-row>
|
|
</ion-col>
|
|
|
|
<ion-col [size]="6" [ngClass]="direction == 'ltr'? 'col':'col-ar'">
|
|
<ion-row class="amountlabel"><p >{{approvedCheckIn}}</p> </ion-row>
|
|
<ion-row class="rowlabel">
|
|
<p >{{ts.trPK('attendance-tracking','approved-check-in')}}</p>
|
|
</ion-row>
|
|
</ion-col>
|
|
|
|
|
|
<ion-col [size]="6" style="border-bottom: 1px solid #ccc;">
|
|
<ion-row class="amountlabel"> <p >{{approvedCheckOut}}</p> </ion-row>
|
|
<ion-row class="rowlabel">
|
|
<p >{{ts.trPK('attendance-tracking','approved-check-out')}} </p>
|
|
</ion-row>
|
|
</ion-col>
|
|
|
|
<ion-col [size]="6" [ngClass]="direction == 'ltr'? 'col':'col-ar'">
|
|
<ion-row class="amountlabel"> <p >{{lateIn}}</p> </ion-row>
|
|
<ion-row class="rowlabel">
|
|
<p >{{ts.trPK('attendance-tracking','late-in')}}</p>
|
|
</ion-row>
|
|
</ion-col>
|
|
<ion-col [size]="6" style="border-bottom: 1px solid #ccc;">
|
|
<ion-row class="amountlabel"> <p >{{excess}}</p> </ion-row>
|
|
<ion-row class="rowlabel">
|
|
<p >{{ts.trPK('attendance-tracking','excess')}}</p>
|
|
</ion-row>
|
|
</ion-col>
|
|
|
|
<ion-col [size]="6" style="border-bottom: none;" [ngClass]="direction == 'ltr'? 'col':'col-ar'">
|
|
<ion-row class="amountlabel"> <p >{{shortage}}</p> </ion-row>
|
|
<ion-row class="rowlabel">
|
|
<p>{{ts.trPK('attendance-tracking','shortage')}}</p>
|
|
</ion-row>
|
|
</ion-col>
|
|
|
|
<ion-col [size]="6">
|
|
<ion-row class="amountlabel"> <p >{{earlyOut}}</p> </ion-row>
|
|
<ion-row class="rowlabel">
|
|
<p >{{ts.trPK('attendance-tracking','early-out')}}</p>
|
|
</ion-row>
|
|
</ion-col>
|
|
</ion-row>
|
|
</ion-grid>
|
|
</ion-slide>
|
|
</ion-slides>
|
|
</ion-content>
|
|
|