Merge remote-tracking branch 'origin/timecard' into new-time-card
@ -1,3 +1,34 @@
|
||||
<p>
|
||||
home works!
|
||||
</p>
|
||||
<ion-header>
|
||||
<ion-toolbar class="header-toolbar-new">
|
||||
<ion-buttons slot="start">
|
||||
<ion-back-button color="light" class="btnBack" ></ion-back-button>
|
||||
</ion-buttons>
|
||||
<ion-title color="light" >Time and Attendance</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content>
|
||||
<div class="time-card-home-container">
|
||||
<ion-card
|
||||
(click)="openDetailPage(timeCard.pageLink)"
|
||||
*ngFor="let timeCard of timeCardOptions ; let i = index">
|
||||
<ion-card-content>
|
||||
<ion-grid>
|
||||
<ion-row>
|
||||
<ion-col [size]="4" class="time-card-image">
|
||||
<img src="../assets/imgs/time-card/{{timeCard.imageName}}">
|
||||
</ion-col>
|
||||
<ion-col [size]="6" class="time-card-details">
|
||||
<h1 class="time-card-heading">{{timeCard.heading}}</h1>
|
||||
<span class="time-card-description">{{timeCard.description}}</span>
|
||||
</ion-col>
|
||||
<ion-col [size]="2">
|
||||
<img class="time-card-rightIcon"
|
||||
src="../assets/imgs/time-card/ArrowRight.png">
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
</ion-card-content>
|
||||
</ion-card>
|
||||
</div>
|
||||
</ion-content>
|
||||
|
||||
@ -0,0 +1,59 @@
|
||||
ion-header{
|
||||
overflow: hidden;
|
||||
}
|
||||
ion-content{
|
||||
--ion-background-color: #f2f2f3;
|
||||
}
|
||||
|
||||
ion-card-content {
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
ion-card {
|
||||
box-shadow: none !important;
|
||||
background-color: white;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
ion-header {
|
||||
background: #f2f2f3;
|
||||
}
|
||||
ion-title{
|
||||
text-align: center;
|
||||
font-family: WorkSans-Bold;
|
||||
font-size: 18px;
|
||||
}
|
||||
.time-card-home-container{
|
||||
margin-right: 10px;
|
||||
margin-left: 10px;
|
||||
margin-top: 20px
|
||||
}
|
||||
.header-toolbar-new{
|
||||
--background: linear-gradient(90deg, rgba(132,198,143,1) 0%, rgba(41,183,197,1) 100%);
|
||||
border-bottom-right-radius: 30px;
|
||||
border-bottom-left-radius: 30px;
|
||||
}
|
||||
|
||||
.time-card-image{
|
||||
padding: 10px;
|
||||
}
|
||||
.time-card-details{
|
||||
padding: 0px;
|
||||
margin-top: 25px;
|
||||
line-height: 10px;
|
||||
}
|
||||
|
||||
.time-card-heading{
|
||||
font-weight: bold;
|
||||
font-size: 13px;
|
||||
color: #666666;
|
||||
font-family: WorkSans-Bold;
|
||||
}
|
||||
|
||||
.time-card-description{
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.time-card-rightIcon{
|
||||
padding: 8px;
|
||||
margin-top: 18px;
|
||||
}
|
||||
@ -0,0 +1,61 @@
|
||||
|
||||
<ion-content>
|
||||
<div class="date-container">
|
||||
<ion-row class="ion-justify-content-center">
|
||||
<ion-col [size]="11">
|
||||
<ion-item>
|
||||
<div class="date-time-icon date-primary"></div>
|
||||
<ion-label>Date From</ion-label>
|
||||
<ion-datetime
|
||||
[placeholder]="Select"
|
||||
display-format="DD/MM/YYYY"
|
||||
[min]="1900"
|
||||
[max]="2100"
|
||||
[(ngModel)]="dateFrom"
|
||||
doneText="Done"
|
||||
cancelText="Cancel"
|
||||
></ion-datetime>
|
||||
</ion-item>
|
||||
</ion-col>
|
||||
<ion-col [size]="11">
|
||||
<ion-item>
|
||||
<div class="date-time-icon date-primary"></div>
|
||||
<ion-label>Date To</ion-label>
|
||||
<ion-datetime
|
||||
[placeholder]="Select"
|
||||
display-format="DD/MM/YYYY"
|
||||
[min]="1900"
|
||||
[max]="2100"
|
||||
[(ngModel)]="dateTo"
|
||||
doneText="Done"
|
||||
cancelText="Cancel"
|
||||
></ion-datetime>
|
||||
</ion-item>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</div>
|
||||
|
||||
<div class="filters-container">
|
||||
<span
|
||||
*ngFor="let filter of filtersArray; let i = index"
|
||||
[ngClass]="{'selected': filter.active == true,'notSelected': filter.active == false }"
|
||||
class="filter-tag-button"
|
||||
(click)="changeFiltersSelection(i)">
|
||||
{{filter.name}}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<ion-list>
|
||||
<ion-radio-group [(ngModel)]="selectedShiftType">
|
||||
<ion-list-header>
|
||||
Shift type
|
||||
</ion-list-header>
|
||||
<ion-item *ngFor="let shift of shiftTypesArray">
|
||||
<ion-label>{{shift.SHT_TYPE_DESC}}</ion-label>
|
||||
<ion-radio value="{{shift.SHT_TYPE}}"></ion-radio>
|
||||
</ion-item>
|
||||
</ion-radio-group>
|
||||
</ion-list>
|
||||
|
||||
<ion-button (click)="dismissModal()">Search</ion-button>
|
||||
</ion-content>
|
||||
@ -0,0 +1,30 @@
|
||||
.footer-modal-button{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
color: white;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
.footer-modal-button button{
|
||||
font-size: 20px;
|
||||
background: white;
|
||||
line-height: 2;
|
||||
}
|
||||
.filters-container{
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.filter-tag-button{
|
||||
display: inline-block;
|
||||
border-radius: 5px;
|
||||
border: 2px solid #A3D077;
|
||||
color: #606161;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
padding: 5px;
|
||||
margin: 5px;
|
||||
}
|
||||
.filters-container .selected {
|
||||
background-color: #d4f0e4;
|
||||
}
|
||||
@ -0,0 +1,27 @@
|
||||
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { SelectPeriodComponent } from './select-period.component';
|
||||
|
||||
describe('SelectPeriodComponent', () => {
|
||||
let component: SelectPeriodComponent;
|
||||
let fixture: ComponentFixture<SelectPeriodComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ SelectPeriodComponent ],
|
||||
schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(SelectPeriodComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,128 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { ModalController, NavParams } from '@ionic/angular';
|
||||
import { CommonService } from 'src/app/hmg-common/services/common/common.service';
|
||||
import { TimeCardService } from 'src/app/time-card/service/time-card.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-select-period',
|
||||
templateUrl: './select-period.component.html',
|
||||
styleUrls: ['./select-period.component.scss'],
|
||||
})
|
||||
export class SelectPeriodComponent implements OnInit {
|
||||
public shiftTypesArray: any = [];
|
||||
public dateFrom: any;
|
||||
public dateTo: any;
|
||||
public selectedShiftType: any;
|
||||
|
||||
public filtersArray: any = [
|
||||
{
|
||||
name: 'Excess',
|
||||
active: false,
|
||||
key: 'P_EXCESS_FLAG',
|
||||
value: ''
|
||||
},
|
||||
{
|
||||
name: 'Timeback',
|
||||
active: false,
|
||||
key: 'P_TIMEBACK_FLAG',
|
||||
value: ''
|
||||
},
|
||||
{
|
||||
name: 'Comp Off',
|
||||
active: false,
|
||||
key: 'P_COMP_OFF_FLAG',
|
||||
value: ''
|
||||
},
|
||||
{
|
||||
name: 'Non scheduled',
|
||||
active: false,
|
||||
key: 'P_NON_SCHEDULED_FLAG',
|
||||
value: ''
|
||||
},
|
||||
{
|
||||
name: 'Late In',
|
||||
active: false,
|
||||
key: 'P_LATE_IN_FLAG',
|
||||
value: ''
|
||||
},
|
||||
{
|
||||
name: 'Early Out',
|
||||
active: false,
|
||||
key: 'P_EARLY_OUT_FLAG',
|
||||
value: ''
|
||||
},
|
||||
{
|
||||
name: 'Shortage',
|
||||
active: false,
|
||||
key: 'P_SHORTAGE_FLAG',
|
||||
value: ''
|
||||
},
|
||||
{
|
||||
name: 'Missing Swipe',
|
||||
active: false,
|
||||
key: 'P_MISSING_SWIPE_FLAG',
|
||||
value: ''
|
||||
},
|
||||
{
|
||||
name: 'Work On Break',
|
||||
active: false,
|
||||
key: 'P_ACTUAL_WOB_SEC',
|
||||
value: ''
|
||||
},
|
||||
{
|
||||
name: 'Analyzed',
|
||||
active: false,
|
||||
key: 'P_ANALAYZED_FLAG',
|
||||
value: ''
|
||||
},
|
||||
{
|
||||
name: 'Approved Timeback',
|
||||
active: false,
|
||||
key: 'P_APPR_TIMEBACK_FLAG',
|
||||
value: ''
|
||||
},
|
||||
];
|
||||
constructor(
|
||||
public modalController: ModalController,
|
||||
public common: CommonService,
|
||||
public timeCardService: TimeCardService,
|
||||
public navParams: NavParams) { }
|
||||
|
||||
ngOnInit() {
|
||||
this.getShiftTypes();
|
||||
this.dateFrom = this.navParams.get('dateFrom');
|
||||
this.dateTo = this.navParams.get('dateTo');
|
||||
}
|
||||
|
||||
public dismissModal() {
|
||||
const selectedFilters: any = {};
|
||||
for (const filter of this.filtersArray) {
|
||||
selectedFilters[filter.key] = filter;
|
||||
}
|
||||
this.modalController.dismiss({
|
||||
dismissed: true,
|
||||
keySelectedFilters: selectedFilters,
|
||||
selectedShiftType: this.selectedShiftType,
|
||||
dateFrom: this.dateFrom,
|
||||
dateTo: this.dateTo
|
||||
});
|
||||
}
|
||||
|
||||
public changeFiltersSelection(i: any) {
|
||||
this.filtersArray[i].active = !this.filtersArray[i].active;
|
||||
if (this.filtersArray[i].active) {
|
||||
this.filtersArray[i].value = 'Y';
|
||||
} else {
|
||||
this.filtersArray[i].value = '';
|
||||
}
|
||||
}
|
||||
|
||||
public getShiftTypes() {
|
||||
this.timeCardService.getShiftType().subscribe((result) => {
|
||||
if (this.common.validResponse(result)) {
|
||||
this.shiftTypesArray = result.GetShiftTypesList;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,191 @@
|
||||
<ion-header>
|
||||
<ion-toolbar class="header-toolbar-new">
|
||||
<ion-buttons slot="start">
|
||||
<ion-back-button color="light" class="btnBack" ></ion-back-button>
|
||||
</ion-buttons>
|
||||
<ion-title color="light" >Shift Details</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content>
|
||||
<div class="ion-padding shift-container" *ngIf="shiftDetailsData.length > 0 && selectedShift.origin === 'shiftDetails'">
|
||||
<ion-card *ngFor="let shiftData of shiftDetailsData;">
|
||||
<ion-card-content>
|
||||
<h2 class="card-summary-heading">Shift details</h2>
|
||||
<h2 class="card-summary-heading">{{ shiftData.SCHEDULE_DATE | date }}</h2>
|
||||
<ion-grid style="line-height: 10px;">
|
||||
<ion-row>
|
||||
<ion-col [size]="8">
|
||||
Shift type
|
||||
</ion-col>
|
||||
<ion-col [size]="4">
|
||||
{{shiftData.SHT_TYPE_DESC}}
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<ion-col [size]="8">
|
||||
Shift
|
||||
</ion-col>
|
||||
<ion-col [size]="4">
|
||||
{{shiftData.SHT_NAME}}
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<ion-col [size]="8">
|
||||
Break
|
||||
</ion-col>
|
||||
<ion-col [size]="4">
|
||||
{{shiftData.BREAK_NAME}}
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<ion-col [size]="8">
|
||||
Work On Break
|
||||
</ion-col>
|
||||
<ion-col [size]="4">
|
||||
{{shiftData.ACTUAL_WOB_HRS}}
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<h2 class="card-summary-heading">Actual Swipe(s)</h2>
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<ion-col [size]="8">
|
||||
Start
|
||||
</ion-col>
|
||||
<ion-col [size]="4">
|
||||
{{shiftData.SHT_ACTUAL_START_TIME}}
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<ion-col [size]="8">
|
||||
End
|
||||
</ion-col>
|
||||
<ion-col [size]="4">
|
||||
{{shiftData.SHT_ACTUAL_END_TIME}}
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<h2 class="card-summary-heading">Approved Swipe(s)</h2>
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<ion-col [size]="8">
|
||||
Start
|
||||
</ion-col>
|
||||
<ion-col [size]="4">
|
||||
{{shiftData.APPROVED_START_TIME}}
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<ion-col [size]="8">
|
||||
Start Reason
|
||||
</ion-col>
|
||||
<ion-col [size]="4">
|
||||
{{shiftData.APPROVED_START_REASON_DESC}}
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<ion-col [size]="8">
|
||||
End
|
||||
</ion-col>
|
||||
<ion-col [size]="4">
|
||||
{{shiftData.APPROVED_END_TIME}}
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<ion-col [size]="8">
|
||||
End Reason
|
||||
</ion-col>
|
||||
<ion-col [size]="4">
|
||||
{{shiftData.APPROVED_END_REASON_DESC}}
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<ion-col [size]="8">
|
||||
Actual Hours
|
||||
</ion-col>
|
||||
<ion-col [size]="4">
|
||||
{{shiftData.SHT_ACTUAL_HRS}}
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
</ion-card-content>
|
||||
</ion-card>
|
||||
</div>
|
||||
|
||||
<div class="ion-padding shift-container" *ngIf="swipeDetailsData && selectedShift.origin === 'shiftSwipes'">
|
||||
<ion-card *ngFor="let swipeData of swipeDetailsData;">
|
||||
<ion-card-content>
|
||||
<h2 class="card-summary-heading">Employee Swipe(s)</h2>
|
||||
<h2 class="card-summary-heading">{{ swipeData.SCHEDULE_DATE | date }}</h2>
|
||||
|
||||
<ion-grid style="line-height: 10px;">
|
||||
<ion-row>
|
||||
<ion-col [size]="8">
|
||||
Swipe Date
|
||||
</ion-col>
|
||||
<ion-col [size]="4">
|
||||
{{swipeData.SWIPE_DATE}}
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<ion-col [size]="8">
|
||||
Swipe Time
|
||||
</ion-col>
|
||||
<ion-col [size]="4">
|
||||
{{swipeData.SWIPE_TIME}}
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<ion-col [size]="8">
|
||||
Swipe Status
|
||||
</ion-col>
|
||||
<ion-col [size]="4">
|
||||
{{swipeData.SWIPE_STATUS}}
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<ion-col [size]="8">
|
||||
Machine Location
|
||||
</ion-col>
|
||||
<ion-col [size]="4">
|
||||
{{swipeData.MACHINE_LOCATION}}
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<ion-col [size]="8">
|
||||
Unit Number
|
||||
</ion-col>
|
||||
<ion-col [size]="4">
|
||||
{{swipeData.UNIT_NUMBER}}
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<ion-col [size]="8">
|
||||
Unit Name
|
||||
</ion-col>
|
||||
<ion-col [size]="4">
|
||||
{{swipeData.UNIT_NAME}}
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<ion-col [size]="8">
|
||||
Exclude
|
||||
</ion-col>
|
||||
<ion-col [size]="4">
|
||||
{{swipeData.EXCLUDE_FLAG}}
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<ion-col [size]="8">
|
||||
Error Message
|
||||
</ion-col>
|
||||
<ion-col [size]="4">
|
||||
{{swipeData.RETURN_MESSAGE}}
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
</ion-card-content>
|
||||
</ion-card>
|
||||
</div>
|
||||
</ion-content>
|
||||
@ -0,0 +1,30 @@
|
||||
ion-header{
|
||||
overflow: hidden;
|
||||
background: #f2f2f3;
|
||||
}
|
||||
ion-content{
|
||||
--ion-background-color: #f2f2f3;
|
||||
}
|
||||
|
||||
ion-card-content {
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
ion-card {
|
||||
box-shadow: none !important;
|
||||
background-color: white;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
ion-title{
|
||||
text-align: center;
|
||||
font-family: WorkSans-Bold;
|
||||
font-size: 18px;
|
||||
margin-right: 45px;
|
||||
}
|
||||
|
||||
.header-toolbar-new{
|
||||
--background: linear-gradient(90deg, rgba(132,198,143,1) 0%, rgba(41,183,197,1) 100%);
|
||||
border-bottom-right-radius: 30px;
|
||||
border-bottom-left-radius: 30px;
|
||||
}
|
||||
@ -0,0 +1,27 @@
|
||||
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { ShiftDetailsComponent } from './shift-details.component';
|
||||
|
||||
describe('ShiftDetailsComponent', () => {
|
||||
let component: ShiftDetailsComponent;
|
||||
let fixture: ComponentFixture<ShiftDetailsComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ ShiftDetailsComponent ],
|
||||
schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(ShiftDetailsComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,62 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { TimeCardService } from 'src/app/time-card/service/time-card.service';
|
||||
import { CommonService } from 'src/app/hmg-common/services/common/common.service';
|
||||
import { SharedDataService } from 'src/app/hmg-common/services/shared-data-service/shared-data.service';
|
||||
import { GetShiftDetailRequest } from 'src/app/time-card/service/models/get-shift-detail.request';
|
||||
import { GetSwipesRequest } from 'src/app/time-card/service/models/get-swipes-request';
|
||||
import { MenuResponse } from 'src/app/hmg-common/services/menu/models/menu-response';
|
||||
import * as moment from 'moment';
|
||||
|
||||
@Component({
|
||||
selector: 'app-shift-details',
|
||||
templateUrl: './shift-details.component.html',
|
||||
styleUrls: ['./shift-details.component.scss'],
|
||||
})
|
||||
export class ShiftDetailsComponent implements OnInit {
|
||||
public selectedShift: any;
|
||||
public shiftDetailsData: any = [];
|
||||
public swipeDetailsData: any = [];
|
||||
constructor(
|
||||
public timeCardService: TimeCardService,
|
||||
public common: CommonService,
|
||||
public sharedData: SharedDataService) { }
|
||||
|
||||
ngOnInit() {
|
||||
this.selectedShift = this.sharedData.getSharedData('selectedShift', false);
|
||||
console.log(this.selectedShift);
|
||||
if (this.selectedShift.origin === 'shiftDetails') {
|
||||
this.getScheduleShiftDetails();
|
||||
} else if (this.selectedShift.origin === 'shiftSwipes') {
|
||||
this.getSwipesDetails();
|
||||
}
|
||||
}
|
||||
|
||||
getScheduleShiftDetails() {
|
||||
const GetShiftDetailRequestObject = new GetShiftDetailRequest();
|
||||
GetShiftDetailRequestObject.P_RTP_ID = this.selectedShift.RTP_ID;
|
||||
GetShiftDetailRequestObject.P_PAGE_NUM = 1;
|
||||
GetShiftDetailRequestObject.P_PAGE_LIMIT = 10;
|
||||
console.log(GetShiftDetailRequestObject);
|
||||
this.timeCardService.getShiftDetail(GetShiftDetailRequestObject).subscribe((result) => {
|
||||
if (this.common.validResponse(result)) {
|
||||
console.log(result);
|
||||
this.shiftDetailsData = result.GetScheduleShiftsDetailsList;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
getSwipesDetails() {
|
||||
const GetSwipesRequestObject = new GetSwipesRequest();
|
||||
GetSwipesRequestObject.P_SELECTED_EMPLOYEE_NUMBER = this.common.sharedService.getSharedData(MenuResponse.SHARED_SEL_EMP, false);
|
||||
GetSwipesRequestObject.P_SCHEDULE_DATE = this.common.convertISODateToJsonDate(this.selectedShift.SCHEDULE_DATE);
|
||||
GetSwipesRequestObject.P_PAGE_NUM = 1;
|
||||
GetSwipesRequestObject.P_PAGE_LIMIT = 10;
|
||||
this.timeCardService.getSwipes(GetSwipesRequestObject).subscribe((result) => {
|
||||
if (this.common.validResponse(result)) {
|
||||
console.log(result);
|
||||
this.swipeDetailsData = result.GetSwipesList;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,3 +1,387 @@
|
||||
<p>
|
||||
time-card-details works!
|
||||
</p>
|
||||
<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>
|
||||
|
||||
|
||||
@ -0,0 +1,154 @@
|
||||
ion-header{
|
||||
overflow: hidden;
|
||||
background: #f2f2f3;
|
||||
}
|
||||
ion-content{
|
||||
--ion-background-color: #f2f2f3;
|
||||
}
|
||||
|
||||
ion-card-content {
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
ion-card {
|
||||
box-shadow: none !important;
|
||||
background-color: white;
|
||||
margin: 10px -15px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
ion-title{
|
||||
text-align: center;
|
||||
font-family: WorkSans-Bold;
|
||||
font-size: 18px;
|
||||
margin-right: 35px;
|
||||
}
|
||||
|
||||
.header-toolbar-new{
|
||||
--background: linear-gradient(90deg, rgba(132,198,143,1) 0%, rgba(41,183,197,1) 100%);
|
||||
border-bottom-right-radius: 30px;
|
||||
border-bottom-left-radius: 30px;
|
||||
}
|
||||
|
||||
.active-Segment {
|
||||
border-radius: 5px !important;
|
||||
font-size: 0.3cm !important;
|
||||
background: white !important;
|
||||
color: #fff !important;
|
||||
font-weight: bold !important;
|
||||
border: 1px solid white !important;
|
||||
text-transform: none;
|
||||
--color-checked: none;
|
||||
}
|
||||
.active-Segment ion-label{
|
||||
// color: #A3D077 !important;
|
||||
color: #11975F !important;
|
||||
font-size: 11px;
|
||||
}
|
||||
.normal-Segment ion-label{
|
||||
// color: #A3D077 !important;
|
||||
color: white !important;
|
||||
font-size: 11px;
|
||||
}
|
||||
.normal-Segment {
|
||||
border-radius: 5px !important;
|
||||
font-size: 0.3cm !important;
|
||||
background: #A3D077 !important;
|
||||
color: #fff !important;
|
||||
font-weight: bold !important;
|
||||
border: 1px solid white !important;
|
||||
text-transform: none;
|
||||
--color-checked: none;
|
||||
}
|
||||
.time-card-details-container{
|
||||
margin-right: 20px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.card-summary-heading{
|
||||
margin-left: 10px;
|
||||
margin-top: 12px;
|
||||
color: #606161;
|
||||
font-family: WorkSans-Bold;
|
||||
}
|
||||
.card-summary-heading-hours{
|
||||
color: #606161;
|
||||
font-family: WorkSans-Bold;
|
||||
}
|
||||
|
||||
.card-summary-heading-hours-extended-heading{
|
||||
color: #D3D3D3;
|
||||
font-family: WorkSans-Bold;
|
||||
}
|
||||
|
||||
/////////////////////////////////
|
||||
|
||||
.time-card-details {
|
||||
background: white;
|
||||
margin: 20px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.time-card-details-heading-two {
|
||||
color: #606161;
|
||||
font-family: WorkSans-Bold;
|
||||
}
|
||||
.time-card-details-heading-two h2 {
|
||||
margin-top: 15px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.time-card-span img{
|
||||
height: 30px;
|
||||
margin-top: -5px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.dayhours-button-container{
|
||||
width: 100%;
|
||||
padding-right: 5px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
.dayhours-button{
|
||||
width: 50%;
|
||||
height: 35px;
|
||||
font-size: 15px;
|
||||
color: white;
|
||||
background: #606161;
|
||||
}
|
||||
|
||||
/////////////////////////////////////
|
||||
.footer-modal-button{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
color: white;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
.footer-modal-button button{
|
||||
font-size: 20px;
|
||||
background: white;
|
||||
line-height: 2;
|
||||
margin: -42px auto 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
////////////////////////////
|
||||
.right-slider-icon{
|
||||
float: right;
|
||||
height: 100%;
|
||||
width: 15%;
|
||||
position: fixed;
|
||||
right: -5%;
|
||||
top: 31%;
|
||||
}
|
||||
|
||||
.left-slider-icon{
|
||||
width: 15%;
|
||||
position: fixed;
|
||||
top: 32%;
|
||||
left: -4%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
|
After Width: | Height: | Size: 698 B |
|
After Width: | Height: | Size: 720 B |
|
After Width: | Height: | Size: 673 B |
|
After Width: | Height: | Size: 2.8 KiB |
|
After Width: | Height: | Size: 2.8 KiB |
|
After Width: | Height: | Size: 2.9 KiB |
|
After Width: | Height: | Size: 2.8 KiB |
|
After Width: | Height: | Size: 557 B |
|
After Width: | Height: | Size: 914 B |
|
After Width: | Height: | Size: 556 B |
|
After Width: | Height: | Size: 9.7 KiB |
|
After Width: | Height: | Size: 4.4 KiB |
|
After Width: | Height: | Size: 833 B |
|
After Width: | Height: | Size: 447 B |
|
After Width: | Height: | Size: 653 B |
|
After Width: | Height: | Size: 682 B |
|
After Width: | Height: | Size: 658 B |
|
After Width: | Height: | Size: 618 B |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 9.1 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 4.5 KiB |