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/time-card/time-card-details/time-card-details.component...

412 lines
13 KiB
HTML

<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>