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.
mohemmionic5/Mohem/src/app/attendance-tracking/home/home.component.html

79 lines
2.8 KiB
HTML

<ion-header>
<ion-toolbar class="header-toolbar">
<ion-title color="light">Attendance Tracking </ion-title>
<ion-buttons slot="start">
<nav-buttons></nav-buttons>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
<div class="timer-chart">
<ion-label class="shift-title" style="font-weight: bold"> {{curentDate}}</ion-label><br/>
<ion-label class="shift-title"> {{ts.trPK('attendance-tracking','today-time-left')}}</ion-label>
<div class="fixed-shift-timer">
<circle-progress
[titleFontSize]= '3'
[percent]="percent"
[radius]="8"
[outerStrokeWidth]="0.25"
[innerStrokeWidth]="0.25"
[outerStrokeColor]="'#3cb9d5'"
[innerStrokeColor]="'rgba(0,0,0,0.3)'"
[animation]="true"
[animationDuration]="300"
[responsive]="true"
[space]="-0.25"
[startFromZero]="false"
[title]="displayTime"
titleFontWeight="bold"
[titleColor]="'#ffffff'"
[showUnits]="false"
[showSubtitle]="false"
[subtitleColor]="'#ffffff'"
[clockwise]="false"
[renderOnClick]="false">
</circle-progress>
</div>
</div>
<div *ngIf="attendanceTrackingList" class="tracking-content">
<div class="divstopBtn">
<button *ngIf="isCheckedIn"(click)="openDialog();" class="stopBtn" ion-button>
<ion-icon class="stopicon" name="pause"></ion-icon>
</button>
</div>
<ion-grid>
<ion-row class="rowBorder">
<ion-label class="shift-title">{{ts.trPK('attendance-tracking','shift-time')}}</ion-label>
<br /><br />
<ion-label class="shift-text shift-title">{{attendanceTrackingList.P_SHT_NAME}} </ion-label>
</ion-row>
<ion-row class="rowBorder">
<ion-col class="colBorder">
<ion-label class="shift-title"> {{ts.trPK('attendance-tracking','check-in')}}</ion-label>
<br /><br />
<ion-label class="shift-text shift-title">08:00</ion-label>
</ion-col>
<ion-col>
<ion-label class="shift-title"> {{ts.trPK('attendance-tracking','check-out')}}</ion-label>
<br /><br />
<ion-label class="shift-text shift-title">08:00 </ion-label>
</ion-col>
</ion-row>
<ion-row style="text-align: center">
<ion-col class="colBorder">
<ion-label class="shift-title"> {{ts.trPK('attendance-tracking','late-in')}}</ion-label>
<br /><br />
<ion-label class="shift-text shift-title">08:00 </ion-label>
</ion-col>
<ion-col>
<ion-label class="shift-title"> {{ts.trPK('attendance-tracking','regular')}}</ion-label>
<br /><br />
<ion-label class="shift-text shift-title">{{attendanceTrackingList.P_SCHEDULED_HOURS}} </ion-label>
</ion-col>
</ion-row>
</ion-grid>
</div>
</ion-content>