Merge remote-tracking branch 'origin/timecard' into new-time-card
@ -1,3 +1,34 @@
|
|||||||
<p>
|
<ion-header>
|
||||||
home works!
|
<ion-toolbar class="header-toolbar-new">
|
||||||
</p>
|
<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>
|
<ion-header>
|
||||||
time-card-details works!
|
<ion-toolbar class="header-toolbar-new">
|
||||||
</p>
|
<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 |