|
|
|
|
<ion-header>
|
|
|
|
|
<ion-toolbar class="header-toolbar-new">
|
|
|
|
|
<ion-title color="light" >My Time Card</ion-title>
|
|
|
|
|
</ion-toolbar>
|
|
|
|
|
</ion-header>
|
|
|
|
|
|
|
|
|
|
<ion-content>
|
|
|
|
|
|
|
|
|
|
<div class="time-card-details-container">
|
|
|
|
|
<ion-segment
|
|
|
|
|
(ionChange)="segmentChanged($event)"
|
|
|
|
|
[value]="activeSegment"
|
|
|
|
|
style="font-family: WorkSans-Bold;margin-top: 10px;">
|
|
|
|
|
<ion-segment-button
|
|
|
|
|
value="time-card-details"
|
|
|
|
|
[ngClass]="activeSegment == 'time-card-details' ? 'active-Segment' : 'normal-Segment'" >
|
|
|
|
|
<ion-label>Time Card Details</ion-label>
|
|
|
|
|
</ion-segment-button>
|
|
|
|
|
<ion-segment-button
|
|
|
|
|
value="time-card-summary"
|
|
|
|
|
[ngClass]="activeSegment == 'time-card-summary' ? 'active-Segment' : 'normal-Segment'">
|
|
|
|
|
<ion-label>Time Card Summary</ion-label>
|
|
|
|
|
</ion-segment-button>
|
|
|
|
|
</ion-segment>
|
|
|
|
|
|
|
|
|
|
<div class="ion-padding" *ngIf="activeSegment === 'time-card-summary'">
|
|
|
|
|
<ion-card>
|
|
|
|
|
<ion-card-content>
|
|
|
|
|
<h2 class="card-summary-heading">Days</h2>
|
|
|
|
|
<ion-grid style="line-height: 10px;">
|
|
|
|
|
<ion-row>
|
|
|
|
|
<ion-col size="8">
|
|
|
|
|
Period Days
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col size="4">
|
|
|
|
|
245
|
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-row>
|
|
|
|
|
<ion-row>
|
|
|
|
|
<ion-col size="8">
|
|
|
|
|
Schedule Days
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col size="4">
|
|
|
|
|
156
|
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-row>
|
|
|
|
|
<ion-row>
|
|
|
|
|
<ion-col size="8">
|
|
|
|
|
Off days
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col size="4">
|
|
|
|
|
79
|
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-row>
|
|
|
|
|
<ion-row class="">
|
|
|
|
|
<ion-col size="8">
|
|
|
|
|
Attended Days
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col size="4">
|
|
|
|
|
163
|
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-row>
|
|
|
|
|
<ion-row class="">
|
|
|
|
|
<ion-col size="8">
|
|
|
|
|
Absent Days
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col size="4">
|
|
|
|
|
0
|
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-row>
|
|
|
|
|
|
|
|
|
|
<ion-row class="">
|
|
|
|
|
<ion-col size="8">
|
|
|
|
|
Non Schedule Days
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col size="4">
|
|
|
|
|
0
|
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-row>
|
|
|
|
|
<ion-row class="">
|
|
|
|
|
<ion-col size="8">
|
|
|
|
|
Not Analyzed Days
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col size="4">
|
|
|
|
|
3
|
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-row>
|
|
|
|
|
</ion-grid>
|
|
|
|
|
</ion-card-content>
|
|
|
|
|
</ion-card>
|
|
|
|
|
|
|
|
|
|
<ion-card>
|
|
|
|
|
<ion-card-content>
|
|
|
|
|
<ion-grid style="line-height: 10px;">
|
|
|
|
|
<ion-row class="">
|
|
|
|
|
<ion-col size="6" class="card-summary-heading-hours">
|
|
|
|
|
Hours
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col size="3" class="card-summary-heading-hours-extended-heading">
|
|
|
|
|
Actual
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col size="3" class="card-summary-heading-hours-extended-heading">
|
|
|
|
|
Schedule
|
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-row>
|
|
|
|
|
<ion-row class="">
|
|
|
|
|
<ion-col size="6">
|
|
|
|
|
Regular
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col size="3">
|
|
|
|
|
245
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col size="3">
|
|
|
|
|
235
|
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-row>
|
|
|
|
|
<ion-row class="">
|
|
|
|
|
<ion-col size="6">
|
|
|
|
|
Planned OT
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col size="3">
|
|
|
|
|
156
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col size="3">
|
|
|
|
|
156
|
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-row>
|
|
|
|
|
<ion-row class="">
|
|
|
|
|
<ion-col size="6">
|
|
|
|
|
On Call
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col size="3">
|
|
|
|
|
79
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col size="3">
|
|
|
|
|
79
|
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-row>
|
|
|
|
|
<ion-row class="">
|
|
|
|
|
<ion-col size="6">
|
|
|
|
|
Excess
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col size="3">
|
|
|
|
|
10
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col size="3">
|
|
|
|
|
10
|
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-row>
|
|
|
|
|
<ion-row class="">
|
|
|
|
|
<ion-col size="6">
|
|
|
|
|
Time Back
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col size="3">
|
|
|
|
|
163
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col size="3">
|
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-row>
|
|
|
|
|
<ion-row class="">
|
|
|
|
|
<ion-col size="6">
|
|
|
|
|
Approved Time Back
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col size="3">
|
|
|
|
|
0
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col size="3">
|
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-row>
|
|
|
|
|
<ion-row class="">
|
|
|
|
|
<ion-col size="6">
|
|
|
|
|
Time Back Balance
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col size="3">
|
|
|
|
|
0
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col size="3">
|
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-row>
|
|
|
|
|
<ion-row class="">
|
|
|
|
|
<ion-col size="6">
|
|
|
|
|
Late In
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col size="3">
|
|
|
|
|
00:06
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col size="3">
|
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-row>
|
|
|
|
|
<ion-row class="">
|
|
|
|
|
<ion-col size="6">
|
|
|
|
|
Early Out
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col size="3">
|
|
|
|
|
00:03
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col size="3">
|
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-row>
|
|
|
|
|
</ion-grid>
|
|
|
|
|
</ion-card-content>
|
|
|
|
|
</ion-card>
|
|
|
|
|
|
|
|
|
|
<ion-card>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<ion-card-content>
|
|
|
|
|
<h2 class="card-summary-heading">Leaves & Holidays</h2>
|
|
|
|
|
<ion-grid style="line-height: 10px;">
|
|
|
|
|
<ion-row class="">
|
|
|
|
|
<ion-col size="7">
|
|
|
|
|
Half-Day Leave
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col size="5">
|
|
|
|
|
245
|
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-row>
|
|
|
|
|
<ion-row class="">
|
|
|
|
|
<ion-col size="7">
|
|
|
|
|
Unauthorized Leave
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col size="5">
|
|
|
|
|
156
|
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-row>
|
|
|
|
|
<ion-row class="">
|
|
|
|
|
<ion-col size="7">
|
|
|
|
|
Business Trip
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col size="5">
|
|
|
|
|
79
|
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-row>
|
|
|
|
|
<ion-row class="">
|
|
|
|
|
<ion-col size="7">
|
|
|
|
|
Sick Leave
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col size="5">
|
|
|
|
|
163
|
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-row>
|
|
|
|
|
<ion-row class="">
|
|
|
|
|
<ion-col size="7">
|
|
|
|
|
Paid Leave
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col size="5">
|
|
|
|
|
0
|
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-row>
|
|
|
|
|
<ion-row class="">
|
|
|
|
|
<ion-col size="7">
|
|
|
|
|
Unpaid Leave
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col size="5">
|
|
|
|
|
0
|
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-row>
|
|
|
|
|
<ion-row class="">
|
|
|
|
|
<ion-col size="7">
|
|
|
|
|
Puclic Holiday
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col size="5">
|
|
|
|
|
3
|
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-row>
|
|
|
|
|
</ion-grid>
|
|
|
|
|
</ion-card-content>
|
|
|
|
|
</ion-card>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div *ngIf="activeSegment === 'time-card-details'" class="time-card-details">
|
|
|
|
|
<ion-grid>
|
|
|
|
|
<ion-row style="text-align: center;">
|
|
|
|
|
<ion-col size="12" class="time-card-details-heading-two">
|
|
|
|
|
<h2>Today's time card details</h2>
|
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-row>
|
|
|
|
|
<ion-row>
|
|
|
|
|
<ion-col size="2">
|
|
|
|
|
<span class="time-card-span"><img class="" src="../assets/imgs/time-card/SwipeIn.png"></span>
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col size="6">
|
|
|
|
|
<span>Swipe In:</span>
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col size="4">
|
|
|
|
|
06:57
|
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-row>
|
|
|
|
|
|
|
|
|
|
<ion-row>
|
|
|
|
|
<ion-col size="2">
|
|
|
|
|
<span class="time-card-span"><img class="" src="../assets/imgs/time-card/SwipeOut.png"></span>
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col size="6">
|
|
|
|
|
<span>Swipe Out:</span>
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col size="4">
|
|
|
|
|
05:05
|
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-row>
|
|
|
|
|
|
|
|
|
|
<ion-row>
|
|
|
|
|
<ion-col size="2">
|
|
|
|
|
<span class="time-card-span"><img class="" src="../assets/imgs/time-card/TotalHours.png"></span>
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col size="6">
|
|
|
|
|
<span>Total Hours:</span>
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col size="4">
|
|
|
|
|
03:39
|
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-row>
|
|
|
|
|
|
|
|
|
|
<ion-row>
|
|
|
|
|
<ion-col size="2">
|
|
|
|
|
<span class="time-card-span"><img class="" src="../assets/imgs/time-card/TimeBackIcon.png"></span>
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col size="6">
|
|
|
|
|
<span>Time Back:</span>
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col size="4">
|
|
|
|
|
03:39
|
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-row>
|
|
|
|
|
|
|
|
|
|
<ion-row>
|
|
|
|
|
<ion-col size="2">
|
|
|
|
|
<span class="time-card-span"><img class="" src="../assets/imgs/time-card/Remarks.png"></span>
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col size="6">
|
|
|
|
|
<span>Remarks:</span>
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col size="4">
|
|
|
|
|
Off Shift
|
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-row>
|
|
|
|
|
|
|
|
|
|
<ion-row [hidden]="showMore == false">
|
|
|
|
|
<ion-col size="2">
|
|
|
|
|
<span class="time-card-span"><img class="" src="../assets/imgs/time-card/Shift Hours.png"></span>
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col size="6">
|
|
|
|
|
<span>Shift Hours:</span>
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col size="4">
|
|
|
|
|
09:00
|
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-row>
|
|
|
|
|
|
|
|
|
|
<ion-row [hidden]="showMore == false">
|
|
|
|
|
<ion-col size="2">
|
|
|
|
|
<span class="time-card-span"><img class="" src="../assets/imgs/time-card/ExcessTime.png"></span>
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col size="6">
|
|
|
|
|
<span>Excess Time:</span>
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col size="4">
|
|
|
|
|
00:08
|
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-row>
|
|
|
|
|
|
|
|
|
|
<ion-row [hidden]="showMore == false">
|
|
|
|
|
<ion-col size="2">
|
|
|
|
|
<span class="time-card-span"><img class="" src="../assets/imgs/time-card/PlannedOT.png"></span>
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col size="6">
|
|
|
|
|
<span>Planned OT:</span>
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col size="4">
|
|
|
|
|
03:00
|
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-row>
|
|
|
|
|
|
|
|
|
|
<ion-row [hidden]="showMore == false">
|
|
|
|
|
<ion-col size="2">
|
|
|
|
|
<span class="time-card-span"><img class="" src="../assets/imgs/time-card/LateIn.png"></span>
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col size="6">
|
|
|
|
|
<span>Late In:</span>
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col size="4">
|
|
|
|
|
00:00
|
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-row>
|
|
|
|
|
|
|
|
|
|
<ion-row [hidden]="showMore == false">
|
|
|
|
|
<ion-col size="2">
|
|
|
|
|
<span class="time-card-span"><img class="" src="../assets/imgs/time-card/EarlyOut.png"></span>
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col size="6">
|
|
|
|
|
<span>Early Out:</span>
|
|
|
|
|
</ion-col>
|
|
|
|
|
<ion-col size="4">
|
|
|
|
|
00:00
|
|
|
|
|
</ion-col>
|
|
|
|
|
</ion-row>
|
|
|
|
|
</ion-grid>
|
|
|
|
|
<div class="show-more-less" (click)="toggleButton()">
|
|
|
|
|
<span>More Details</span>
|
|
|
|
|
<ion-icon slot="icon-only" name="ios-arrow-down"></ion-icon>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</ion-content>
|
|
|
|
|
<div class="footer-modal-button">
|
|
|
|
|
<button ion-button (click)="openSelectPeriodModal()">
|
|
|
|
|
Select Period
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|