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.
mohemm_srca/Mohem/src/app/hmg-common/ui/circle-calendar/date-info-modal/date-info-modal.component.html

181 lines
6.2 KiB
HTML

<ion-grid class="headerGrid">
<ion-row style="margin-left: -130px; margin-top: 27px;">
<ion-col size="10">
<div style="width: 100%;">
<div class="result-graph">
<div class="request-heading">
<span></span>
</div>
<div class="result-text-container">
<h2 class="percentage">{{percentage}}</h2>
<span>Completed <br><br><br><br></span>
</div>
<p-chart class="today-graph" type="doughnut" [data]="data" [options]="options"></p-chart>
</div>
</div>
</ion-col>
<ion-col size="2">
<div class="div" >
<!-- <p class="p1">{{scheduleDate}}</p> -->
<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>
<!-- <p class="p2">{{todayDate}}</p>
<p class="p3">{{monthDate}}</p>
<p class="p4">{{month}}</p> -->
</div>
</ion-col>
</ion-row>
</ion-grid>
<div >
<ion-grid class="grid">
<ion-row class="gridrow">
<ion-col class="liftcol">
<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 class="rightcol">
<ion-row class="amountlabel"><p >{{scheduled}}</p> </ion-row>
<ion-row class="rowlabel">
<p >{{ts.trPK('attendance-tracking','regular')}}</p>
</ion-row>
</ion-col>
</ion-row>
<!-- <div style="background-color: gray; height: 1px;"></div> -->
<ion-row class="gridrow" >
<ion-col class="liftcol">
<ion-row class="amountlabel"><p >{{startDate}}</p> </ion-row>
<ion-row class="rowlabel">
<p >{{ts.trPK('attendance-tracking','check-in')}}</p>
</ion-row>
</ion-col>
<ion-col class="rightcol">
<ion-row class="amountlabel"> <p >{{endDate}}</p> </ion-row>
<ion-row class="rowlabel">
<p >{{ts.trPK('attendance-tracking','check-out')}} </p>
</ion-row>
</ion-col>
</ion-row >
<!-- <div style="background-color: gray; height: 1px;"></div> -->
<ion-row class="gridrow">
<ion-col class="liftcol">
<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 class="rightcol">
<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-row >
<!-- <div style="background-color: gray; height: 1px;"></div> -->
<ion-row class="gridrow">
<ion-col class="liftcol">
<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 class="rightcol">
<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-row>
<ion-col>
<p style="position: relative; left: 20px;">{{shiftTime}}</p>
<p style="position: relative; left: 25px; color: gray;">{{ts.trPK('attendance-tracking','shift-time')}}</p>
</ion-col>
</ion-row>
<div style="background-color: gray; height: 1px;"></div>
<ion-row>
<ion-col>
<p style="position: relative; left: 40px;">{{scheduled}}</p>
<p style="position: relative; left: 20px; color: gray;">{{ts.trPK('attendance-tracking','regular')}}</p>
</ion-col>
</ion-row>
<div style="background-color: gray; height: 0.3px;"></div>
<ion-row>
<ion-col>
<p style="position: relative; left: 40px;">{{startDate}}</p>
<p style="position: relative; left: 20px; color: gray;">{{ts.trPK('attendance-tracking','check-in')}}</p>
<p style="position: relative; left: 20px; color: gray;">CHECK-IN</p> -->
<!-- </ion-col>
</ion-row>
<div style="background-color: gray; height: 1px;"></div>
<ion-row>
<ion-col>
<p style="position: relative; left: 40px;">{{endDate}}</p>
<p style="position: relative; left: 40px; color: gray;">{{ts.trPK('attendance-tracking','check-out')}} </p> -->
<!-- <p style="position: relative; left: 40px; color: gray;">CHECK-OUT</p> -->
<!-- </ion-col>
</ion-row> -->
<!-- <div style="background-color: gray; height: 0.3px;"></div> -->
<!-- </ion-grid>
</div>
<div style="background-color: gray;height: 100%;margin-left: 150px;margin-top: -60px;margin-right: 150px;">
<ion-grid style="width: 140px;">
<ion-row>
<ion-col>
<p style="position: relative; left: 40px;">{{lateIn}}</p>
<p style="position: relative; left: 30px; color: gray;">{{ts.trPK('attendance-tracking','late-in')}}</p>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<p style="position: relative; left: 40px;">{{excess}}</p>
<p style="position: relative; left: 30px; color: gray;">{{ts.trPK('attendance-tracking','excess')}}</p>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<p style="position: relative; left: 40px;">{{shortage}}</p>
<p style="position: relative; left: 20px; color: gray;">{{ts.trPK('attendance-tracking','shortage')}}</p>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<p style="position: relative; left: 40px;">{{earlyOut}}</p>
<p style="position: relative; left: 40px; color: gray;">{{ts.trPK('attendance-tracking','early-out')}}</p>
</ion-col>
</ion-row> -->
</ion-grid>
<!-- <div style="border-bottom: rgb(190, 187, 187) solid 1px;" >
<button class="more" ion-button (click)="hide()" >{{ts.trPK('attendance-tracking','less')}}</button>
</div>
<div *ngIf="hideMe"> </div> -->
</div>