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

387 lines
16 KiB
HTML

<ion-header>
<ion-toolbar class="header-toolbar-new">
<ion-buttons slot="start">
<ion-back-button color="light" class="btnBack" defaultHref="/eit/homepage"></ion-back-button>
</ion-buttons>
<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' && timeCardSummaryData">
<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">
{{timeCardSummaryData.PERIOD_DAYS}}
</ion-col>
</ion-row>
<ion-row>
<ion-col [size]="8">
Schedule Days
</ion-col>
<ion-col [size]="4">
{{timeCardSummaryData.SCHEDULE_DAYS}}
</ion-col>
</ion-row>
<ion-row>
<ion-col [size]="8">
Off days
</ion-col>
<ion-col [size]="4">
{{timeCardSummaryData.OFF_DAYS}}
</ion-col>
</ion-row>
<ion-row>
<ion-col [size]="8">
Attended Days
</ion-col>
<ion-col [size]="4">
{{timeCardSummaryData.ATTENDED_DAYS}}
</ion-col>
</ion-row>
<ion-row>
<ion-col [size]="8">
Absent Days
</ion-col>
<ion-col [size]="4">
{{timeCardSummaryData.ABSENT_DAYS}}
</ion-col>
</ion-row>
<ion-row>
<ion-col [size]="8">
Non Schedule Days
</ion-col>
<ion-col [size]="4">
{{timeCardSummaryData.NON_SCHEDULE_DAYS}}
</ion-col>
</ion-row>
<ion-row>
<ion-col [size]="8">
Not Analyzed Days
</ion-col>
<ion-col [size]="4">
{{timeCardSummaryData.NOT_ANALYZED_DAYS}}
</ion-col>
</ion-row>
</ion-grid>
</ion-card-content>
</ion-card>
<ion-card>
<ion-card-content>
<ion-grid style="line-height: 10px;">
<ion-row>
<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>
<ion-col [size]="6">
Regular
</ion-col>
<ion-col [size]="3">
{{timeCardSummaryData.ACTUAL_HRS}}
</ion-col>
<ion-col [size]="3">
{{timeCardSummaryData.SCHEDULED_HRS}}
</ion-col>
</ion-row>
<ion-row>
<ion-col [size]="6">
Planned OT
</ion-col>
<ion-col [size]="3">
{{timeCardSummaryData.PLANNED_OTHRS}}
</ion-col>
<ion-col [size]="3">
{{timeCardSummaryData.SCHEDULED_PLANNED_OT_HRS}}
</ion-col>
</ion-row>
<ion-row>
<ion-col [size]="6">
On Call
</ion-col>
<ion-col [size]="3">
{{timeCardSummaryData.ON_CALL_HRS}}
</ion-col>
<ion-col [size]="3">
{{timeCardSummaryData.SCHEDULED_ON_CALL_HRS}}
</ion-col>
</ion-row>
<ion-row>
<ion-col [size]="6">
Excess
</ion-col>
<ion-col [size]="3">
{{timeCardSummaryData.EXCESS_HRS}}
</ion-col>
<ion-col [size]="3">
</ion-col>
</ion-row>
<ion-row>
<ion-col [size]="6">
Time Back
</ion-col>
<ion-col [size]="3">
{{timeCardSummaryData.TIMEBACK_HRS}}
</ion-col>
<ion-col [size]="3">
</ion-col>
</ion-row>
<ion-row>
<ion-col [size]="6">
Approved Time Back
</ion-col>
<ion-col [size]="3">
{{timeCardSummaryData.TIMEBACK_HRS}}
</ion-col>
<ion-col [size]="3">
</ion-col>
</ion-row>
<ion-row>
<ion-col [size]="6">
Time Back Balance
</ion-col>
<ion-col [size]="3">
{{timeCardSummaryData.TIME_BACK_BALANCE}}
</ion-col>
<ion-col [size]="3">
</ion-col>
</ion-row>
<ion-row>
<ion-col [size]="6">
Late In
</ion-col>
<ion-col [size]="3">
{{timeCardSummaryData.LATE_IN_HRS}}
</ion-col>
<ion-col [size]="3">
</ion-col>
</ion-row>
<ion-row>
<ion-col [size]="6">
Early Out
</ion-col>
<ion-col [size]="3">
{{timeCardSummaryData.EARLY_OUT_HRS}}
</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>
<ion-col [size]="7">
Half-Day Leave
</ion-col>
<ion-col [size]="5">
{{timeCardSummaryData.HALF_DAY_LEAVE}}
</ion-col>
</ion-row>
<ion-row>
<ion-col [size]="7">
Unauthorized Leave
</ion-col>
<ion-col [size]="5">
{{timeCardSummaryData.UNAUTHORIZED_LEAVE}}
</ion-col>
</ion-row>
<ion-row>
<ion-col>
Business Trip
</ion-col>
<ion-col [size]="5">
{{timeCardSummaryData.BUSINESS_TRIP}}
</ion-col>
</ion-row>
<ion-row>
<ion-col [size]="7">
Sick Leave
</ion-col>
<ion-col [size]="5">
{{timeCardSummaryData.SICK_LEAVE}}
</ion-col>
</ion-row>
<ion-row>
<ion-col [size]="7">
Paid Leave
</ion-col>
<ion-col [size]="5">
{{timeCardSummaryData.PAID_LEAVE}}
</ion-col>
</ion-row>
<ion-row>
<ion-col [size]="7">
Unpaid Leave
</ion-col>
<ion-col [size]="5">
{{timeCardSummaryData.UNPAID_LEAVE}}
</ion-col>
</ion-row>
<ion-row>
<ion-col [size]="7">
Puclic Holiday
</ion-col>
<ion-col [size]="5">
{{timeCardSummaryData.PUBLIC_HOLIDAY}}
</ion-col>
</ion-row>
</ion-grid>
</ion-card-content>
</ion-card>
</div>
<div *ngIf="activeSegment === 'time-card-details' && dayHoursData.length > 0" class="time-card-details">
<ion-slides #sliderRef (ionSlideWillChange)="slideChanged($event)" class="fadeIn">
<ion-slide *ngFor="let dayHours of dayHoursData; let i = index">
<ion-grid>
<ion-row style="text-align: center;">
<ion-col [size]="12" class="time-card-details-heading-two">
<h2>{{ dayHours.SCHEDULE_DATE | date }}</h2>
<h2>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/TimeBackIcon.png"></span>
</ion-col>
<ion-col [size]="6">
<span>Time Back:</span>
</ion-col>
<ion-col [size]="4">
{{dayHours.TIMEBACK_HRS}}
</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" style="font-size: 12px;">
{{dayHours.REMARKS}}
</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">
{{dayHours.SCHEDULED_HRS}}
</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">
{{dayHours.EXCESS_HRS}}
</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">
{{dayHours.PLANNED_OT_HRS}}
</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">
{{dayHours.LATE_IN_HRS}}
</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">
{{dayHours.EARLY_OUT_HRS}}
</ion-col>
</ion-row>
</ion-grid>
</ion-slide>
</ion-slides>
<div class="dayhours-button-container">
<button class="dayhours-button" (click)="showShiftDetails('shiftDetails')">Shift details</button>
<button class="dayhours-button" (click)="showShiftDetails('shiftSwipes')">Swipes</button>
</div>
</div>
</div>
<div class="right-slider-icon" *ngIf="activeSegment === 'time-card-details'">
<img *ngIf="rightIconActive && dayHoursData.length > 1" (click)="nextSlide()" style="height: 35%;" src="../assets/imgs/time-card/Asset 18.png">
<img *ngIf="!rightIconActive || dayHoursData.length == 1" style="height: 35%;" src="../assets/imgs/time-card/Asset 20.png">
</div>
<div class="left-slider-icon" *ngIf="activeSegment === 'time-card-details'">
<img *ngIf="leftIconActive && dayHoursData.length > 1" (click)="previousSlide()" style="height: 35%;" src="../assets/imgs/time-card/Asset 19.png">
<img *ngIf="!leftIconActive || dayHoursData.length == 1" style="height: 35%;" src="../assets/imgs/time-card/Asset 21.png">
</div>
</ion-content>
<div *ngIf="activeSegment === 'time-card-details'" class="footer-modal-button">
<button ion-button (click)="openSelectPeriodModal()">
Select Period
</button>
</div>