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.
99 lines
3.3 KiB
HTML
99 lines
3.3 KiB
HTML
<ion-grid class="headerGrid">
|
|
<ion-row style="margin-left: -95px; margin-bottom: 1px;">
|
|
<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>74%</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 style="border: 1px gray solid; margin-left: -45px; text-align:center; width: 245%; border-radius: 5%; height: 100%;">
|
|
<p style=" margin-bottom: -25px;">{{today}}</p>
|
|
<p style="font-weight:bold ;font-size: 28px; margin-bottom: -16px;">{{todayDate}}</p>
|
|
<p style=" margin-bottom: -15px;">{{monthDate}}</p>
|
|
<p style=" margin-bottom: 2px;">{{month}}</p>
|
|
<div style="background-color: gray;height: 26px;">
|
|
<p>Permenent</p>
|
|
</div>
|
|
</div>
|
|
</ion-col>
|
|
</ion-row>
|
|
</ion-grid>
|
|
|
|
<div style="background-color: gray; height: 0.3px; margin-bottom: 60px;">
|
|
<ion-grid>
|
|
<ion-row>
|
|
<ion-col>
|
|
<p style="position: relative; left: 20px;">19:00 - 07:00</p>
|
|
<p style="position: relative; left: 25px; color: gray;">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;">11:30</p>
|
|
<p style="position: relative; left: 20px; color: gray;">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;">19:20</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;">7:50</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;">00:20</p>
|
|
<p style="position: relative; left: 30px; color: gray;">LATE-IN</p>
|
|
</ion-col>
|
|
</ion-row>
|
|
<ion-row>
|
|
<ion-col>
|
|
<p style="position: relative; left: 40px;">00:30</p>
|
|
<p style="position: relative; left: 30px; color: gray;">EXCESS</p>
|
|
</ion-col>
|
|
</ion-row>
|
|
<ion-row>
|
|
<ion-col>
|
|
<p style="position: relative; left: 40px;">00:00</p>
|
|
<p style="position: relative; left: 20px; color: gray;">SHORTAGE</p>
|
|
</ion-col>
|
|
</ion-row>
|
|
<ion-row>
|
|
<ion-col>
|
|
<p style="position: relative; left: 40px;">00:00</p>
|
|
<p style="position: relative; left: 40px; color: gray;">EARLY-OUT</p>
|
|
</ion-col>
|
|
</ion-row>
|
|
</ion-grid>
|
|
</div>
|