fixed merging conflicts
@ -0,0 +1,113 @@
|
||||
<ion-header>
|
||||
<ion-toolbar class="header-toolbar">
|
||||
<ion-buttons slot="start">
|
||||
<ion-back-button color="light" class="btnBack" defaultHref="/home"></ion-back-button>
|
||||
</ion-buttons>
|
||||
<ion-title color="light">{{ts.trPK('attendance','attendance')}}</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
|
||||
<ion-content class="colorBG">
|
||||
<div class="header-div">
|
||||
<div class="header-div">
|
||||
<p style="position: absolute; left: 40%; bottom: 65%;">{{currentMonth}}</p>
|
||||
<ion-slides>
|
||||
<ion-slide>
|
||||
<ion-grid class="headerGrid">
|
||||
<div style="color: black;">
|
||||
<!-- <ngx-gauge
|
||||
[type]="gaugeType"
|
||||
[value]="gaugeValue"
|
||||
[label]="gaugeLabel">
|
||||
</ngx-gauge> -->
|
||||
<div class="result-graph">
|
||||
|
||||
<div class="request-heading">
|
||||
|
||||
<span>Open Request Analysis</span>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="result-text-container">
|
||||
|
||||
<h2>287</h2>
|
||||
|
||||
<span>TOTAL <br> OPEN REQUEST</span>
|
||||
|
||||
</div>
|
||||
|
||||
<p-chart class="today-graph" type="doughnut" [data]="data" [options]="options"></p-chart>
|
||||
|
||||
</div>
|
||||
<div style="position: relative;
|
||||
left: 79%;
|
||||
bottom: 35px;
|
||||
color: black;
|
||||
background-color: #22c6b3;
|
||||
width: 20%; height: 6px;">
|
||||
</div>
|
||||
<div style="position: relative;
|
||||
left: 79%;
|
||||
bottom: 20px;
|
||||
color: black;
|
||||
background-color: #094875;
|
||||
width: 20%; height: 6px;">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</ion-grid>
|
||||
|
||||
</ion-slide>
|
||||
</ion-slides>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top: 45%;">
|
||||
<ion-grid>
|
||||
<ion-row>
|
||||
<ion-col>
|
||||
<ion-grid class="labelGrid">
|
||||
<ion-row>
|
||||
<ion-col>
|
||||
<label style="font-size: 13px;">SCHEDULE</label>
|
||||
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<h2 style="margin-left: 45%; font-size: 25px;">23</h2>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<ion-grid class="labelGrid">
|
||||
<ion-row>
|
||||
<ion-col>
|
||||
<label style="font-size: 12px;">OFF DAYS</label>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<h2 style="margin-left: 45%; font-size: 25px;">08</h2>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<ion-grid class="labelGrid">
|
||||
<label style="font-size: 13px;">NON ANALYZED</label>
|
||||
<h2 style="margin-left: 45%; font-size: 25px;">01</h2>
|
||||
</ion-grid>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<ion-grid class="labelGrid">
|
||||
<label style="font-size: 13px;">SHORTAGE HOURS</label>
|
||||
<h2 style="margin-left: 45%; font-size: 25px;">03</h2>
|
||||
</ion-grid>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
</div>
|
||||
<div >
|
||||
<ion-grid class="bodyGrid">
|
||||
<app-circle-calendar></app-circle-calendar>
|
||||
</ion-grid>
|
||||
</div>
|
||||
</ion-content>
|
||||
@ -0,0 +1,242 @@
|
||||
.colorBG {
|
||||
--background: #f0efef;
|
||||
}
|
||||
.header-div {
|
||||
background: #22c6b3;
|
||||
color: var(--light);
|
||||
text-transform: capitalize;
|
||||
display: block;
|
||||
position: relative;
|
||||
height: 210px;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.chart-modal .modal-Wrapper {
|
||||
--background: rgb(116, 108, 108) !important;
|
||||
--border-color:white!important ;
|
||||
width: 85%!important ;
|
||||
height: 40px !important ;
|
||||
|
||||
}
|
||||
|
||||
.navbar{
|
||||
font-size: 10px !important;
|
||||
--background: #22C6B3 !important;
|
||||
color: aliceblue !important;
|
||||
// margin-top: 10px !important;
|
||||
|
||||
}
|
||||
|
||||
.menu{
|
||||
// margin-left:330px !important;
|
||||
margin-top: 0px !important;
|
||||
font-size: 35px !important;
|
||||
background: #22C6B3;
|
||||
color: aliceblue;
|
||||
margin-left: 0px !important;
|
||||
|
||||
}
|
||||
|
||||
.person{
|
||||
|
||||
margin-left:100px !important;
|
||||
margin-top: 0px !important;
|
||||
font-size: 23px !important;
|
||||
background: #22C6B3 !important;
|
||||
color: aliceblue !important;
|
||||
|
||||
}
|
||||
|
||||
.grid{
|
||||
margin-bottom: 550px !important;
|
||||
margin-top: 20px !important;
|
||||
margin-left: 15px !important;
|
||||
margin-right: 15px !important;
|
||||
background-color:white !important;
|
||||
border-radius: 20px !important;
|
||||
height: 250px !important;
|
||||
}
|
||||
|
||||
.headerGrid{
|
||||
margin-bottom: 550px !important;
|
||||
margin-top: 80px !important;
|
||||
margin-left: 15px !important;
|
||||
margin-right: 15px !important;
|
||||
background-color:white !important;
|
||||
border-radius: 20px !important;
|
||||
height: 250px !important;
|
||||
}
|
||||
|
||||
.bodyGrid{
|
||||
margin-bottom: 550px !important;
|
||||
margin-top: 20px !important;
|
||||
margin-left: 15px !important;
|
||||
margin-right: 15px !important;
|
||||
background-color:white !important;
|
||||
border-radius: 20px !important;
|
||||
height: 270px !important;
|
||||
}
|
||||
.labelGrid{
|
||||
margin-top: -30px !important;
|
||||
background-color:white !important;
|
||||
border-radius: 20px !important;
|
||||
height: 100px !important;
|
||||
}
|
||||
|
||||
.ionSliders{
|
||||
margin: 0px !important;
|
||||
padding: 0px !important;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.ionSlide{
|
||||
margin-top: 5px !important;
|
||||
margin-left: 190px !important;
|
||||
color: black !important;
|
||||
|
||||
}
|
||||
.dateLable{
|
||||
|
||||
margin-left: 90px !important;
|
||||
color: black !important;
|
||||
font-size: small !important;
|
||||
margin-top: 15px !important;
|
||||
}
|
||||
// h1{
|
||||
// font-size: 15px !important;
|
||||
// text-align: center !important;
|
||||
// }
|
||||
.arrowDropright{
|
||||
margin-left:100px !important;
|
||||
font-size: 20px !important;
|
||||
color: rgb(168, 165, 165) !important;
|
||||
margin-top: 15px !important;
|
||||
|
||||
}
|
||||
.arrowDropleft{
|
||||
font-size: 20px !important;
|
||||
margin-left: 10px !important;
|
||||
margin-top: 15px !important;
|
||||
color: rgb(116, 108, 108) !important;
|
||||
}
|
||||
|
||||
.ionLable{
|
||||
font-size: 10px !important;
|
||||
}
|
||||
|
||||
.number{
|
||||
|
||||
font-size: 18px !important;
|
||||
font-weight: bolder !important;
|
||||
color: black !important;
|
||||
}
|
||||
|
||||
.header-div{
|
||||
background:var(--primary);
|
||||
background: -moz-linear-gradient(45deg, var(--primary) 0%, var(--secondary) 36%,var(--secondary) 59%, var(--customnavy) 100%);
|
||||
background: -webkit-linear-gradient(45deg, (--primary) 0%, var(--secondary) 36%,var(--secondary) 59%, var(--customnavy) 100%);
|
||||
background: #22C6B3;
|
||||
// background: linear-gradient(90deg, #85C48D 0%, #85C48D 13%, #2BB5C6 98%, #2BB5C6 100%);
|
||||
color:var(--light);
|
||||
text-transform: capitalize;
|
||||
|
||||
display: block;
|
||||
position: relative;
|
||||
height: 210px;
|
||||
margin-bottom:60px;
|
||||
// border-radius: 0px 0px 70px 70px;
|
||||
}
|
||||
|
||||
.request-heading {
|
||||
|
||||
span {
|
||||
|
||||
text-align: center;
|
||||
|
||||
display: block;
|
||||
|
||||
padding-top: 8px;
|
||||
|
||||
font-family: workSans-Regular;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.result-graph {
|
||||
|
||||
position: relative;
|
||||
|
||||
background: white;
|
||||
|
||||
margin-right: 20px;
|
||||
|
||||
margin-left: 20px;
|
||||
|
||||
margin-top: 20px;
|
||||
|
||||
padding-bottom: 20px;
|
||||
|
||||
border-radius: 20px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.result-text-container {
|
||||
|
||||
padding: 0;
|
||||
|
||||
margin: 0;
|
||||
|
||||
position: absolute;
|
||||
|
||||
left: 50%;
|
||||
|
||||
top: 50%;
|
||||
|
||||
display: block;
|
||||
|
||||
text-align: center;
|
||||
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
h2 {
|
||||
|
||||
font-size: 38px;
|
||||
|
||||
font-family: WorkSans-Bold;
|
||||
|
||||
margin: 0 auto;
|
||||
|
||||
line-height: 36px;
|
||||
|
||||
}
|
||||
|
||||
span {
|
||||
|
||||
width: 125px;
|
||||
|
||||
display: block;
|
||||
|
||||
margin: 0 auto;
|
||||
|
||||
font-size: 12px;
|
||||
|
||||
font-family: workSans-Regular;
|
||||
}
|
||||
}
|
||||
|
||||
@ -0,0 +1,27 @@
|
||||
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { MonthlyAttendanceComponent } from './monthly-attendance.component';
|
||||
|
||||
describe('MonthlyAttendanceComponent', () => {
|
||||
let component: MonthlyAttendanceComponent;
|
||||
let fixture: ComponentFixture<MonthlyAttendanceComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ MonthlyAttendanceComponent ],
|
||||
schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(MonthlyAttendanceComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,101 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { CommonService } from '../../hmg-common/services/common/common.service';
|
||||
import { TranslatorService } from '../../hmg-common/services/translator/translator.service';
|
||||
import { SharedDataService } from '../../hmg-common/services/shared-data-service/shared-data.service';
|
||||
import { GetSubordinatesAttdStatusRequest } from 'src/app/hmg-common/services/dashbored/models/GetSubordinatesAttdStatusRequest';
|
||||
import { DashboredService } from 'src/app/hmg-common/services/dashbored/dashbored.service';
|
||||
import { GetSubordinatesAttdStatusResponse } from 'src/app/hmg-common/services/dashbored/models/GetSubordinatesAttdStatusResponse';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-monthly-attendance',
|
||||
templateUrl: './monthly-attendance.component.html',
|
||||
styleUrls: ['./monthly-attendance.component.scss'],
|
||||
})
|
||||
export class MonthlyAttendanceComponent implements OnInit {
|
||||
|
||||
constructor(
|
||||
private cs: CommonService,
|
||||
public ts: TranslatorService,
|
||||
public sharedData: SharedDataService,
|
||||
public DS: DashboredService) { }
|
||||
gaugeType = 'full';
|
||||
gaugeValue = 28.3;
|
||||
gaugeLabel = 'Days';
|
||||
// gaugeAppendText = "km/hr";
|
||||
|
||||
|
||||
currentMonth: any;
|
||||
todayYear: any;
|
||||
todayMonth: any;
|
||||
public options = {
|
||||
|
||||
cutoutPercentage: 80,
|
||||
|
||||
tooltips: { enabled: false },
|
||||
|
||||
legend: { display: false }
|
||||
|
||||
};
|
||||
|
||||
|
||||
|
||||
public data = {
|
||||
|
||||
datasets: [
|
||||
|
||||
{
|
||||
|
||||
data: [120, 50],
|
||||
|
||||
backgroundColor: [
|
||||
|
||||
'#22c6b3',
|
||||
|
||||
'#094875',
|
||||
],
|
||||
|
||||
borderWidth: 2
|
||||
|
||||
}]
|
||||
|
||||
};
|
||||
ngOnInit() { }
|
||||
|
||||
ionViewWillEnter() {
|
||||
this.currentMonth = this.sharedData.getSharedData("currentMonth");
|
||||
console.log(this.currentMonth);
|
||||
let day = this.currentMonth.split(" ");
|
||||
this.todayMonth =day[0];
|
||||
this.todayYear = day[1];
|
||||
this.todayYear = parseInt(this.todayYear);
|
||||
console.log("MONTH: " +this.todayMonth);
|
||||
console.log("YEAR: " +this.todayYear);
|
||||
this.getSubordinatesAttStatus()
|
||||
}
|
||||
|
||||
|
||||
getSubordinatesAttStatus() {
|
||||
let request: GetSubordinatesAttdStatusRequest = new GetSubordinatesAttdStatusRequest();
|
||||
// request.P_SCHEDULE_DATE_FROM = "/Date(1578603600000+0300)/"; //test
|
||||
// request.P_SCHEDULE_DATE_TO = "/Date(1576011600000+0300)/";//test
|
||||
console.log(this.currentMonth);
|
||||
request.SearchMonth = this.todayMonth;
|
||||
request.SearchYear = 2019//this.todayYear;
|
||||
|
||||
this.DS.getSubordinatesAttStatus(request, () => { console.log("Error "); }).subscribe((result: GetSubordinatesAttdStatusResponse) => {
|
||||
if (this.cs.validResponse(result)) {
|
||||
console.log("response");
|
||||
console.log(result);
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
x(){
|
||||
console.log("ENAD CHANge")
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
@ -0,0 +1,14 @@
|
||||
|
||||
<calendar #slider [dateFormatter]="calendar.dateFormatter"
|
||||
[monthviewEventDetailTemplate]="template"
|
||||
[calendarMode]="calendar.mode"
|
||||
[currentDate]="currentAvailableAppoDate"
|
||||
[lockSwipes]="true"
|
||||
(onCurrentDateChanged)="onCurrentDateChanged($event)" (onTimeSelected)="onDayClicked($event)">
|
||||
</calendar>
|
||||
|
||||
|
||||
<ng-template #template let-showEventDetail="showEventDetail" let-selectedDate="selectedDate" let-noEventsLabel="noEventsLabel">
|
||||
|
||||
</ng-template>
|
||||
|
||||
@ -0,0 +1,124 @@
|
||||
|
||||
|
||||
|
||||
// .modalCss .modal-Wrapper {
|
||||
// width: 600px;
|
||||
// height: 300px;
|
||||
// }
|
||||
|
||||
.chart-modal .modal-Wrapper {
|
||||
--background: rgb(116, 108, 108) !important;
|
||||
--border-color:white!important ;
|
||||
width: 85%!important ;
|
||||
height: 40px !important ;
|
||||
|
||||
}
|
||||
|
||||
.navbar{
|
||||
font-size: 10px !important;
|
||||
--background: #22C6B3 !important;
|
||||
color: aliceblue !important;
|
||||
// margin-top: 10px !important;
|
||||
|
||||
}
|
||||
|
||||
.menu{
|
||||
// margin-left:330px !important;
|
||||
margin-top: 0px !important;
|
||||
font-size: 35px !important;
|
||||
background: #22C6B3;
|
||||
color: aliceblue;
|
||||
margin-left: 0px !important;
|
||||
|
||||
}
|
||||
|
||||
.person{
|
||||
|
||||
margin-left:100px !important;
|
||||
margin-top: 0px !important;
|
||||
font-size: 23px !important;
|
||||
background: #22C6B3 !important;
|
||||
color: aliceblue !important;
|
||||
|
||||
}
|
||||
|
||||
.grid{
|
||||
margin-bottom: 550px !important;
|
||||
margin-top: 20px !important;
|
||||
margin-left: 15px !important;
|
||||
margin-right: 15px !important;
|
||||
background-color:white !important;
|
||||
border-radius: 20px !important;
|
||||
height: 250px !important;
|
||||
}
|
||||
|
||||
.ionSliders{
|
||||
margin: 0px !important;
|
||||
padding: 0px !important;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.ionSlide{
|
||||
margin-top: 5px !important;
|
||||
margin-left: 190px !important;
|
||||
color: black !important;
|
||||
|
||||
}
|
||||
.dateLable{
|
||||
|
||||
margin-left: 90px !important;
|
||||
color: black !important;
|
||||
font-size: small !important;
|
||||
margin-top: 15px !important;
|
||||
}
|
||||
// h1{
|
||||
// font-size: 15px !important;
|
||||
// text-align: center !important;
|
||||
// }
|
||||
.arrowDropright{
|
||||
margin-left:100px !important;
|
||||
font-size: 20px !important;
|
||||
color: rgb(168, 165, 165) !important;
|
||||
margin-top: 15px !important;
|
||||
|
||||
}
|
||||
.arrowDropleft{
|
||||
font-size: 20px !important;
|
||||
margin-left: 10px !important;
|
||||
margin-top: 15px !important;
|
||||
color: rgb(116, 108, 108) !important;
|
||||
}
|
||||
|
||||
.ionLable{
|
||||
font-size: 10px !important;
|
||||
}
|
||||
|
||||
.number{
|
||||
|
||||
font-size: 18px !important;
|
||||
font-weight: bolder !important;
|
||||
color: black !important;
|
||||
}
|
||||
|
||||
.header-div{
|
||||
background:var(--primary);
|
||||
background: -moz-linear-gradient(45deg, var(--primary) 0%, var(--secondary) 36%,var(--secondary) 59%, var(--customnavy) 100%);
|
||||
background: -webkit-linear-gradient(45deg, (--primary) 0%, var(--secondary) 36%,var(--secondary) 59%, var(--customnavy) 100%);
|
||||
background: #22C6B3;
|
||||
// background: linear-gradient(90deg, #85C48D 0%, #85C48D 13%, #2BB5C6 98%, #2BB5C6 100%);
|
||||
color:var(--light);
|
||||
text-transform: capitalize;
|
||||
|
||||
display: block;
|
||||
position: relative;
|
||||
height: 210px;
|
||||
margin-bottom:60px;
|
||||
// border-radius: 0px 0px 70px 70px;
|
||||
}
|
||||
|
||||
.advanced-search-modal {
|
||||
--height: 12cm !important;
|
||||
--width: 80% !important;
|
||||
--border-radius: 0.4cm;
|
||||
}
|
||||
@ -0,0 +1,27 @@
|
||||
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { CircleCalendarComponent } from './circle-calendar.component';
|
||||
|
||||
describe('CircleCalendarComponent', () => {
|
||||
let component: CircleCalendarComponent;
|
||||
let fixture: ComponentFixture<CircleCalendarComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ CircleCalendarComponent ],
|
||||
schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(CircleCalendarComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,470 @@
|
||||
import { Component, OnInit, Output, Input, ViewChild, ElementRef, EventEmitter } from '@angular/core';
|
||||
import { TimeSlot } from './time.slot';
|
||||
import { SharedDataService } from '../../services/shared-data-service/shared-data.service';
|
||||
import { ModalController } from '@ionic/angular';
|
||||
import { DateInfoModalComponent } from './date-info-modal/date-info-modal.component';
|
||||
import { MenuResponse } from '../../services/menu/models/menu-response';
|
||||
import * as moment from 'moment';
|
||||
import { CommonService } from '../../services/common/common.service';
|
||||
import { GetDayAndHoursDetailsRequest } from 'src/app/time-card/service/models/get-day-hours-type-details.request';
|
||||
import { TimeCardService } from 'src/app/time-card/service/time-card.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';
|
||||
|
||||
@Component({
|
||||
selector: 'app-circle-calendar',
|
||||
templateUrl: './circle-calendar.component.html',
|
||||
styleUrls: ['./circle-calendar.component.scss']
|
||||
})
|
||||
export class CircleCalendarComponent implements OnInit {
|
||||
@Input() eventsdateDayOff: any = [];
|
||||
@Input() eventsdateAttend: any = [];
|
||||
@Input() eventsdateAbsent: any = [];
|
||||
@Output() monthTitle = new EventEmitter();
|
||||
@Output() currentYear = new EventEmitter();
|
||||
|
||||
|
||||
|
||||
/////////////////////////////////TIME AND DATE VALUES///////////////////////////////
|
||||
public monthName: any;
|
||||
public yearDate: any;
|
||||
public selEmp: string;
|
||||
public selMenu: MenuResponse = new MenuResponse();
|
||||
public respID: number;
|
||||
public menuType: any;
|
||||
public dayAndHoursPageNumber = 1;
|
||||
public selectedFilters: any = {};
|
||||
public selectedShiftFilter: any;
|
||||
public arrDaysAttendance: any = [];
|
||||
public arrDaysAbsent: any = [];
|
||||
public arrDaysOff: any = [];
|
||||
public selectedShift: any;
|
||||
public shiftDetailsData: any = [];
|
||||
public swipeDetailsData: any = [];
|
||||
public arrOfAllList: any = [];
|
||||
///////////////////////////////END//////////////////////////////////////////////////
|
||||
|
||||
|
||||
eventsdata: any = [];
|
||||
|
||||
calendarModes = [
|
||||
{ key: 'month', value: 'Month' },
|
||||
{ key: 'week', value: 'Week' },
|
||||
{ key: 'day', value: 'Day' },
|
||||
];
|
||||
|
||||
public calendar = {
|
||||
mode: this.calendarModes[0].key,
|
||||
currentDate: new Date(),
|
||||
currentAvailableAppoDate: new Date(),
|
||||
dateFormatter: {
|
||||
formatMonthViewDayHeader: (date: Date) => {
|
||||
return this.getHeaderDay(date);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
public currentAvailableAppoDate: any;
|
||||
public eventsInput: any = [];
|
||||
public events: TimeSlot[] = [];
|
||||
public selectedTime: string;
|
||||
public selectedDate: string;
|
||||
public weekDaysEn = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
|
||||
public weekDaysEnSort = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
|
||||
public lockSwipeToPrev: any = true;
|
||||
public currentDate: any;
|
||||
public selectedDateObject: any;
|
||||
public currentDateToSwipe: any;
|
||||
public activeMonth: any;
|
||||
isFirst: boolean;
|
||||
arrFutrueDays: any;
|
||||
eventsdateFutrue: any;
|
||||
detailData: any;
|
||||
constructor(
|
||||
public sharedData: SharedDataService,
|
||||
public mod: ModalController,
|
||||
public common: CommonService,
|
||||
public timeCardService: TimeCardService) { }
|
||||
@ViewChild("slider") slides: ElementRef;
|
||||
|
||||
ngOnInit() {
|
||||
this.isFirst = false;
|
||||
this.reRenderCalendar();
|
||||
}
|
||||
|
||||
|
||||
ngAfterViewInit() {
|
||||
setTimeout(() => {
|
||||
this.reRenderCalendar();
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
|
||||
getHeaderDay(date: any) {
|
||||
return this.weekDaysEnSort[date.getDay()];
|
||||
|
||||
}
|
||||
|
||||
reRenderCalendar() {
|
||||
this.renderDate(this.eventsdateAbsent, 'absent');
|
||||
this.renderDate(this.eventsdateAttend, 'present');
|
||||
this.renderDate(this.eventsdateDayOff, 'dayoff');
|
||||
}
|
||||
|
||||
|
||||
dayClicked(data: any): void {
|
||||
|
||||
if (data.isPast) {
|
||||
this.eventsInput = [];
|
||||
this.selectedTime = null;
|
||||
} else {
|
||||
// At least one slot
|
||||
if (data.events.length > 0) {
|
||||
this.selectedDate = this.getDateISO(data.selectedTime);
|
||||
//TODO replace later later
|
||||
for (let i = 0; i < data.events.length; i++) {
|
||||
|
||||
}
|
||||
this.presentTimeSlots(data.events, data.selectedTime);
|
||||
this.currentDate = this.getHeaderDate(data.selectedTime);
|
||||
} else {
|
||||
this.eventsInput = [];
|
||||
this.selectedTime = null;
|
||||
}
|
||||
//}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
async presentTimeSlots(events: TimeSlot[], date: Date) {
|
||||
this.eventsInput = [];
|
||||
let index = 1;
|
||||
for (let event of events) {
|
||||
// event.end = this.cs.getKSATimeZone(event.end);
|
||||
this.eventsInput.push({
|
||||
name: 'radio' + index,
|
||||
type: 'radio',
|
||||
label: event.isoTime.substring(0, event.isoTime.length - 3),
|
||||
value: event,
|
||||
checked: index === 1
|
||||
});
|
||||
if (index == 1) {
|
||||
this.selectedTime = event.isoTime;
|
||||
this.selectedDateObject = new Date(event.end);
|
||||
|
||||
}
|
||||
++index;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
public getDateISO(date: Date): string {
|
||||
return (
|
||||
date.getFullYear().toString() +
|
||||
"-" +
|
||||
this.trailerZero(date.getMonth() + 1) +
|
||||
"-" +
|
||||
this.trailerZero(date.getDate())
|
||||
);
|
||||
}
|
||||
|
||||
onCurrentDateChanged(event) {
|
||||
console.log("onCurrentDateChanged");
|
||||
if (this.isFirst) {
|
||||
const today = new Date();
|
||||
this.currentDateToSwipe = event;
|
||||
if (this.calendar.mode === 'month') {
|
||||
if ((event.getFullYear() === today.getFullYear() && event.getMonth() <= today.getMonth())) {
|
||||
this.lockSwipeToPrev = true;
|
||||
} else {
|
||||
this.lockSwipeToPrev = false;
|
||||
}
|
||||
}
|
||||
this.activeMonth = this.getHeaderMonth(event);
|
||||
this.currentDate = this.getHeaderDate(event);
|
||||
this.sharedData.setSharedData(this.activeMonth, "currentMonth");
|
||||
let dateData = this.currentDate.toString()
|
||||
dateData = dateData.split(" ")
|
||||
this.getDayHoursTypeDetails(dateData[2], dateData[3]);
|
||||
this.reRenderCalendar();
|
||||
} else {
|
||||
const today = new Date();
|
||||
this.currentDateToSwipe = event;
|
||||
if (this.calendar.mode === 'month') {
|
||||
if ((event.getFullYear() === today.getFullYear() && event.getMonth() <= today.getMonth())) {
|
||||
this.lockSwipeToPrev = true;
|
||||
} else {
|
||||
this.lockSwipeToPrev = false;
|
||||
}
|
||||
}
|
||||
this.activeMonth = this.getHeaderMonth(event);
|
||||
this.currentDate = this.getHeaderDate(event);
|
||||
this.sharedData.setSharedData(this.activeMonth, "currentMonth");
|
||||
this.isFirst = true;
|
||||
}
|
||||
}
|
||||
|
||||
getHeaderDate(date: any) {
|
||||
|
||||
return this.weekDaysEn[date.getDay()] + ", " + date.getDate() + " " + this.getMonthName(date.getMonth() + 1) + " " + date.getFullYear();
|
||||
|
||||
}
|
||||
|
||||
private trailerZero(value: number): string {
|
||||
const str = value.toString();
|
||||
return str.length > 1 ? str : "" + str;
|
||||
}
|
||||
getHeaderMonth(date: any) {
|
||||
|
||||
return this.getMonthName(date.getMonth() + 1) + " " + date.getFullYear();
|
||||
|
||||
}
|
||||
|
||||
public getMonthName(value: number): string {
|
||||
switch (value) {
|
||||
case 1:
|
||||
return "January";
|
||||
case 2:
|
||||
return "February";
|
||||
case 3:
|
||||
return "March";
|
||||
case 4:
|
||||
return "April";
|
||||
case 5:
|
||||
return "May";
|
||||
case 6:
|
||||
return "June";
|
||||
case 7:
|
||||
return "July";
|
||||
case 8:
|
||||
return "August";
|
||||
case 9:
|
||||
return "September";
|
||||
case 10:
|
||||
return "October";
|
||||
case 11:
|
||||
return "November";
|
||||
case 12:
|
||||
return "December";
|
||||
}
|
||||
}
|
||||
|
||||
public async dateModal(todayDate, shiftDetails) {
|
||||
const modal = await this.mod.create({
|
||||
component: DateInfoModalComponent,
|
||||
showBackdrop: true,
|
||||
backdropDismiss: true,
|
||||
componentProps: {
|
||||
TODAYDATE: todayDate,
|
||||
SHIFTDETAILS: shiftDetails
|
||||
}
|
||||
});
|
||||
modal.cssClass = "calendar-modal";
|
||||
await modal.present();
|
||||
}
|
||||
|
||||
public renderDate(arrayDays, cssClass) {
|
||||
const td = document.querySelectorAll(".swiper-slide-active .monthview-datetable td:not(.text-muted)");
|
||||
arrayDays.forEach(dateObj => {
|
||||
const date = dateObj.startTime;
|
||||
td.forEach(element => {
|
||||
// tslint:disable-next-line: triple-equals
|
||||
if (date.getDate() == element.textContent.trim()) {
|
||||
element.classList.add(cssClass);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
onDayClicked(x) {
|
||||
// this.dateModal(this.currentDate);
|
||||
let fullDate;
|
||||
let arrOfFullDate;
|
||||
for (let i = 0; i < this.arrOfAllList.length; i++) {
|
||||
fullDate = this.arrOfAllList[i].SCHEDULE_DATE.split(" ")
|
||||
if (this.common.convertISODateToJsonDate(fullDate[0]) == this.common.convertISODateToJsonDate(this.getDateISO(x.selectedTime))) {
|
||||
arrOfFullDate = fullDate[0].split("/")
|
||||
this.showDetails(this.arrOfAllList, fullDate[0]);
|
||||
// console.log(arrOfFullDate[2])
|
||||
// this.getDayHoursTypeDetails(this.getMonthName(parseInt(arrOfFullDate[0])),parseInt(arrOfFullDate[2]),true, fullDate[0])
|
||||
} else {
|
||||
console.log("NOT match");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
getScheduleShiftDetails(RTP_ID) {
|
||||
const GetShiftDetailRequestObject = new GetShiftDetailRequest();
|
||||
GetShiftDetailRequestObject.P_RTP_ID = 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;
|
||||
this.dateModal(this.detailData,result);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
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;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/////////////////////////this function should be in common service/////////////////////////
|
||||
public getDayHoursTypeDetails(month, year) {
|
||||
|
||||
this.monthTitle.emit(month);
|
||||
this.currentYear.emit(year);
|
||||
const dayAndHoursReqObj = new GetDayAndHoursDetailsRequest();
|
||||
this.monthName = month//moment().format('MMMM');
|
||||
this.yearDate = year//moment().format('YYYY');
|
||||
this.selEmp = this.common.sharedService.getSharedData(MenuResponse.SHARED_SEL_EMP, false);
|
||||
this.respID = this.common.sharedService.getSharedData(MenuResponse.SHARED_SEL_RESP_ID, false);
|
||||
this.selMenu = this.common.sharedService.getSharedData(MenuResponse.SHARED_DATA, false);
|
||||
this.menuType = this.selMenu.List_Menu.MENU_TYPE;
|
||||
|
||||
dayAndHoursReqObj.P_SELECTED_EMPLOYEE_NUMBER = this.selEmp;
|
||||
dayAndHoursReqObj.P_MENU_TYPE = this.menuType;
|
||||
dayAndHoursReqObj.P_SELECTED_RESP_ID = this.respID;
|
||||
dayAndHoursReqObj.SearchMonth = this.monthName;
|
||||
dayAndHoursReqObj.SearchYear = this.yearDate;
|
||||
dayAndHoursReqObj.P_PAGE_NUM = this.dayAndHoursPageNumber;
|
||||
dayAndHoursReqObj.P_PAGE_LIMIT = 100;
|
||||
|
||||
if (Object.keys(this.selectedFilters).length !== 0) {
|
||||
dayAndHoursReqObj.P_SHT_TYPE = this.selectedShiftFilter;
|
||||
dayAndHoursReqObj.P_EXCESS_FLAG = this.selectedFilters['P_EXCESS_FLAG'.toString()].value;
|
||||
dayAndHoursReqObj.P_TIMEBACK_FLAG = this.selectedFilters['P_TIMEBACK_FLAG'.toString()].value;
|
||||
dayAndHoursReqObj.P_COMP_OFF_FLAG = this.selectedFilters['P_COMP_OFF_FLAG'.toString()].value;
|
||||
dayAndHoursReqObj.P_NON_SCHEDULED_FLAG = this.selectedFilters['P_NON_SCHEDULED_FLAG'.toString()].value;
|
||||
dayAndHoursReqObj.P_LATE_IN_FLAG = this.selectedFilters['P_LATE_IN_FLAG'.toString()].value;
|
||||
dayAndHoursReqObj.P_EARLY_OUT_FLAG = this.selectedFilters['P_EARLY_OUT_FLAG'.toString()].value;
|
||||
dayAndHoursReqObj.P_SHORTAGE_FLAG = this.selectedFilters['P_SHORTAGE_FLAG'.toString()].value;
|
||||
dayAndHoursReqObj.P_MISSING_SWIPE_FLAG = this.selectedFilters['P_MISSING_SWIPE_FLAG'.toString()].value;
|
||||
dayAndHoursReqObj.P_ACTUAL_WOB_SEC = this.selectedFilters['P_ACTUAL_WOB_SEC'.toString()].value;
|
||||
dayAndHoursReqObj.P_ANALAYZED_FLAG = this.selectedFilters['P_ANALAYZED_FLAG'.toString()].value;
|
||||
dayAndHoursReqObj.P_APPR_TIMEBACK_FLAG = this.selectedFilters['P_APPR_TIMEBACK_FLAG'.toString()].value;
|
||||
}
|
||||
|
||||
this.timeCardService.getDayHoursTypeDetails(dayAndHoursReqObj).subscribe((result) => {
|
||||
if (this.common.validResponse(result)) {
|
||||
this.arrOfAllList = result.GetDayHoursTypeDetailsList;
|
||||
this.countAllAttendDays(result.GetDayHoursTypeDetailsList);
|
||||
this.common.sharedService.setSharedData(result.GetDayHoursTypeDetailsList, 'calendarDateValue');
|
||||
// this.common.openTimeCardPage();
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
|
||||
showDetails(allData, date){
|
||||
let fullDate;
|
||||
for (let i = 0; i < allData.length; i++) {
|
||||
fullDate = allData[i].SCHEDULE_DATE.split(" ")
|
||||
if(fullDate[0] == date){
|
||||
this.detailData = allData[i]
|
||||
console.log("date details:")
|
||||
console.log(this.detailData);
|
||||
this.getScheduleShiftDetails(this.detailData.RTP_ID);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
countAllAttendDays(allDays) {
|
||||
this.eventsdateDayOff = [];
|
||||
this.eventsdateAttend = [];
|
||||
this.eventsdateAbsent = [];
|
||||
this.arrDaysOff = [];
|
||||
this.arrDaysAttendance = [];
|
||||
this.arrDaysAbsent = [];
|
||||
this.eventsdateFutrue = [];
|
||||
this.arrFutrueDays = [];
|
||||
|
||||
for (let i = 0; i < allDays.length; i++) {
|
||||
if (allDays[i].DAY_TYPE == "OFF") {
|
||||
//offDay
|
||||
this.arrDaysOff.push({
|
||||
startTime: new Date(allDays[i].SCHEDULE_DATE),
|
||||
endTime: new Date(allDays[i].SCHEDULE_DATE)
|
||||
});
|
||||
} else if (allDays[i].DAY_TYPE == "SCHEDULED" && !allDays[i].REMARKS) {
|
||||
//attendace
|
||||
this.arrDaysAttendance.push({
|
||||
startTime: new Date(allDays[i].SCHEDULE_DATE),
|
||||
endTime: new Date(allDays[i].SCHEDULE_DATE)
|
||||
});
|
||||
} else if (allDays[i].DAY_TYPE == "SCHEDULED" && allDays[i].REMARKS) {
|
||||
//absent
|
||||
this.arrDaysAbsent.push(
|
||||
{
|
||||
startTime: new Date(allDays[i].SCHEDULE_DATE),
|
||||
endTime: new Date(allDays[i].SCHEDULE_DATE),
|
||||
isoTime: "09:00:00",
|
||||
allDay: false
|
||||
}
|
||||
);
|
||||
} else {
|
||||
this.arrFutrueDays.push(
|
||||
{
|
||||
startTime: new Date(allDays[i].SCHEDULE_DATE),
|
||||
endTime: new Date(allDays[i].SCHEDULE_DATE),
|
||||
isoTime: "09:00:00",
|
||||
allDay: false
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
// this.common.sharedService.setSharedData(this.arrDaysOff,'calendarDayOffDateValue');
|
||||
// this.common.sharedService.setSharedData(this.arrDaysAttendance,'calendarAttendanceDateValue');
|
||||
// this.common.sharedService.setSharedData( this.arrDaysAbsent,'calendarDaysAbsentDateValue');
|
||||
this.eventsdateDayOff = this.arrDaysOff;
|
||||
this.eventsdateAttend = this.arrDaysAttendance;
|
||||
this.eventsdateAbsent = this.arrDaysAbsent;
|
||||
this.eventsdateFutrue = this.arrFutrueDays;
|
||||
this.reRenderCalendar();
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
@ -0,0 +1,176 @@
|
||||
<ion-grid class="headerGrid">
|
||||
<ion-row style="margin-left: -130px; margin-top: 27px;">
|
||||
<ion-col size="10">
|
||||
<div style="width: 100%;">
|
||||
<div class="result-graph">
|
||||
|
||||
<div class="request-heading">
|
||||
|
||||
<span></span>
|
||||
</div>
|
||||
|
||||
<div class="result-text-container">
|
||||
|
||||
<h2 class="percentage">{{percentage}}</h2>
|
||||
<span>Completed <br><br><br><br></span>
|
||||
</div>
|
||||
|
||||
<p-chart class="today-graph" type="doughnut" [data]="data" [options]="options"></p-chart>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col size="2">
|
||||
<div class="div" >
|
||||
<!-- <p class="p1">{{scheduleDate}}</p> -->
|
||||
|
||||
<ion-row >
|
||||
<p class="p0">{{nameDay}}</p>
|
||||
</ion-row>
|
||||
<ion-row >
|
||||
<p class="p1">{{day}}</p>
|
||||
</ion-row>
|
||||
<ion-row >
|
||||
<p class="p2">{{nameMonth}}</p>
|
||||
</ion-row>
|
||||
<ion-row >
|
||||
<p class="p3">{{year}}</p>
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<p class="p5">{{ts.trPK('attendance','present')}}</p>
|
||||
</ion-row>
|
||||
|
||||
<!-- <p class="p2">{{todayDate}}</p>
|
||||
<p class="p3">{{monthDate}}</p>
|
||||
<p class="p4">{{month}}</p> -->
|
||||
|
||||
|
||||
</div>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
|
||||
<div >
|
||||
<ion-grid class="grid">
|
||||
<ion-row class="gridrow">
|
||||
<ion-col class="liftcol">
|
||||
<ion-row class="amountlabel"> <p>{{shiftTime}}</p> </ion-row>
|
||||
<ion-row class="rowlabel">
|
||||
<p >{{ts.trPK('attendance-tracking','shift-time')}}</p>
|
||||
</ion-row>
|
||||
</ion-col>
|
||||
<ion-col class="rightcol">
|
||||
<ion-row class="amountlabel"><p >{{scheduled}}</p> </ion-row>
|
||||
<ion-row class="rowlabel">
|
||||
<p >{{ts.trPK('attendance-tracking','regular')}}</p>
|
||||
</ion-row>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
<!-- <div style="background-color: gray; height: 1px;"></div> -->
|
||||
<ion-row class="gridrow" >
|
||||
<ion-col class="liftcol">
|
||||
<ion-row class="amountlabel"><p >{{startDate}}</p> </ion-row>
|
||||
<ion-row class="rowlabel">
|
||||
<p >{{ts.trPK('attendance-tracking','check-in')}}</p>
|
||||
</ion-row>
|
||||
</ion-col>
|
||||
<ion-col class="rightcol">
|
||||
<ion-row class="amountlabel"> <p >{{endDate}}</p> </ion-row>
|
||||
<ion-row class="rowlabel">
|
||||
<p >{{ts.trPK('attendance-tracking','check-out')}} </p>
|
||||
</ion-row>
|
||||
</ion-col>
|
||||
</ion-row >
|
||||
<!-- <div style="background-color: gray; height: 1px;"></div> -->
|
||||
<ion-row class="gridrow">
|
||||
<ion-col class="liftcol">
|
||||
<ion-row class="amountlabel"> <p >{{lateIn}}</p> </ion-row>
|
||||
<ion-row class="rowlabel">
|
||||
<p >{{ts.trPK('attendance-tracking','late-in')}}</p>
|
||||
</ion-row>
|
||||
</ion-col>
|
||||
<ion-col class="rightcol">
|
||||
<ion-row class="amountlabel"> <p >{{excess}}</p> </ion-row>
|
||||
<ion-row class="rowlabel">
|
||||
<p >{{ts.trPK('attendance-tracking','excess')}}</p>
|
||||
</ion-row>
|
||||
</ion-col>
|
||||
</ion-row >
|
||||
<!-- <div style="background-color: gray; height: 1px;"></div> -->
|
||||
<ion-row class="gridrow">
|
||||
<ion-col class="liftcol">
|
||||
<ion-row class="amountlabel"> <p >{{shortage}}</p> </ion-row>
|
||||
<ion-row class="rowlabel">
|
||||
<p>{{ts.trPK('attendance-tracking','shortage')}}</p>
|
||||
</ion-row>
|
||||
</ion-col>
|
||||
<ion-col class="rightcol">
|
||||
<ion-row class="amountlabel"> <p >{{earlyOut}}</p> </ion-row>
|
||||
<ion-row class="rowlabel">
|
||||
<p >{{ts.trPK('attendance-tracking','early-out')}}</p>
|
||||
</ion-row>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
<!-- //////////////////////////////////////////////////////////////// -->
|
||||
|
||||
|
||||
<!-- <ion-row>
|
||||
<ion-col>
|
||||
<p style="position: relative; left: 20px;">{{shiftTime}}</p>
|
||||
<p style="position: relative; left: 25px; color: gray;">{{ts.trPK('attendance-tracking','shift-time')}}</p>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
<div style="background-color: gray; height: 1px;"></div>
|
||||
<ion-row>
|
||||
<ion-col>
|
||||
<p style="position: relative; left: 40px;">{{scheduled}}</p>
|
||||
<p style="position: relative; left: 20px; color: gray;">{{ts.trPK('attendance-tracking','regular')}}</p>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
<div style="background-color: gray; height: 0.3px;"></div>
|
||||
<ion-row>
|
||||
<ion-col>
|
||||
<p style="position: relative; left: 40px;">{{startDate}}</p>
|
||||
<p style="position: relative; left: 20px; color: gray;">{{ts.trPK('attendance-tracking','check-in')}}</p>
|
||||
<p style="position: relative; left: 20px; color: gray;">CHECK-IN</p> -->
|
||||
<!-- </ion-col>
|
||||
</ion-row>
|
||||
<div style="background-color: gray; height: 1px;"></div>
|
||||
<ion-row>
|
||||
<ion-col>
|
||||
<p style="position: relative; left: 40px;">{{endDate}}</p>
|
||||
<p style="position: relative; left: 40px; color: gray;">{{ts.trPK('attendance-tracking','check-out')}} </p> -->
|
||||
<!-- <p style="position: relative; left: 40px; color: gray;">CHECK-OUT</p> -->
|
||||
<!-- </ion-col>
|
||||
</ion-row> -->
|
||||
<!-- <div style="background-color: gray; height: 0.3px;"></div> -->
|
||||
<!-- </ion-grid>
|
||||
</div>
|
||||
<div style="background-color: gray;height: 100%;margin-left: 150px;margin-top: -60px;margin-right: 150px;">
|
||||
<ion-grid style="width: 140px;">
|
||||
<ion-row>
|
||||
<ion-col>
|
||||
<p style="position: relative; left: 40px;">{{lateIn}}</p>
|
||||
<p style="position: relative; left: 30px; color: gray;">{{ts.trPK('attendance-tracking','late-in')}}</p>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<ion-col>
|
||||
<p style="position: relative; left: 40px;">{{excess}}</p>
|
||||
<p style="position: relative; left: 30px; color: gray;">{{ts.trPK('attendance-tracking','excess')}}</p>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<ion-col>
|
||||
<p style="position: relative; left: 40px;">{{shortage}}</p>
|
||||
<p style="position: relative; left: 20px; color: gray;">{{ts.trPK('attendance-tracking','shortage')}}</p>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<ion-col>
|
||||
<p style="position: relative; left: 40px;">{{earlyOut}}</p>
|
||||
<p style="position: relative; left: 40px; color: gray;">{{ts.trPK('attendance-tracking','early-out')}}</p>
|
||||
</ion-col>
|
||||
</ion-row> -->
|
||||
</ion-grid>
|
||||
</div>
|
||||
@ -0,0 +1,163 @@
|
||||
.result-text-container {
|
||||
|
||||
// padding: 0;
|
||||
|
||||
// margin: 0;
|
||||
|
||||
// position: absolute;
|
||||
|
||||
// left: 50%;
|
||||
|
||||
// top: 50%;
|
||||
|
||||
// display: block;
|
||||
|
||||
// text-align: center;
|
||||
|
||||
// transform: translate(-50%, -50%);
|
||||
//////////////////////////here
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
left: 58%;
|
||||
top: 67%;
|
||||
display: block;
|
||||
text-align: center;
|
||||
-webkit-transform: translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
h2 {
|
||||
|
||||
font-size: 25px;
|
||||
|
||||
// font-family: WorkSans-Bold;
|
||||
font-weight: bold;
|
||||
|
||||
margin: 0 auto;
|
||||
|
||||
line-height: 36px;
|
||||
|
||||
}
|
||||
|
||||
span {
|
||||
|
||||
width: 125px;
|
||||
|
||||
display: block;
|
||||
|
||||
margin: 0 auto;
|
||||
|
||||
font-size: 12px;
|
||||
|
||||
font-family: workSans-Regular;
|
||||
color: rgb(163, 163, 163) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.today-graph{
|
||||
display: block;
|
||||
height: 127px;
|
||||
width: 288px;
|
||||
}
|
||||
.amountlabel{
|
||||
color: black !important;
|
||||
font-weight: bold !important;
|
||||
font-size: 13px !important;
|
||||
// border-top: 1px solid rgb(163, 163, 163) !important;
|
||||
margin-left: 0px !important;
|
||||
margin-bottom: -29px !important;
|
||||
}
|
||||
.rowlabel{
|
||||
color: rgb(163, 163, 163) !important;
|
||||
font-size: 13px !important;
|
||||
font-family: WorkSans-Bold;
|
||||
}
|
||||
.grid{
|
||||
padding-bottom: -20px !important;
|
||||
padding-top: -20px !important;
|
||||
height: 360px !important;
|
||||
|
||||
}
|
||||
.liftcol{
|
||||
// padding-top: 1px !important;
|
||||
// padding-bottom: 1px !important;
|
||||
border-right: 1px solid rgb(163, 163, 163) !important;
|
||||
}
|
||||
|
||||
.rightcol{
|
||||
|
||||
margin-left: 5px !important;
|
||||
}
|
||||
.gridrow{
|
||||
border-top: 1px solid rgb(163, 163, 163) !important;
|
||||
margin-left: 19px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.div{
|
||||
// border: 1px solid #a3a3a3 !important;
|
||||
// text-align: center;
|
||||
// width: 274%;
|
||||
// border-radius: 8%;
|
||||
// height: 40%;
|
||||
// margin-right: -11px;
|
||||
border: 1px solid #a3a3a3 !important;
|
||||
border-radius: 9px;
|
||||
width: 241%;
|
||||
margin-right: -226px;
|
||||
|
||||
|
||||
}
|
||||
.p0{ margin-bottom: -15px !important;
|
||||
color: black !important;
|
||||
margin-left: 24px;
|
||||
font-weight: bold !important;
|
||||
font-size: 17px !important;
|
||||
margin-top: 8px;
|
||||
|
||||
}
|
||||
.p1{
|
||||
margin-bottom: -7px !important;
|
||||
color: black !important;
|
||||
/* margin-right: 25px !important; */
|
||||
font-family: WorkSans-Bold !important;
|
||||
margin-left: 36px;
|
||||
/* margin-bottom: -82px; */
|
||||
font-size: 33px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.p2{ font-weight: bold !important;
|
||||
font-size: 17px !important;
|
||||
margin-bottom: 43px !important;
|
||||
margin-top: 0px !important;
|
||||
color: black !important;
|
||||
font-weight: bold !important;
|
||||
margin-left: 33px;
|
||||
}
|
||||
.p3{ /* margin-bottom: -72px !important; */
|
||||
color: black !important;
|
||||
font-weight: bold !important;
|
||||
font-size: 19px;
|
||||
margin-top: -43px;
|
||||
margin-left: 27px;
|
||||
}
|
||||
.p4{ margin-bottom: 56px !important;
|
||||
margin-top: -26px !important;
|
||||
color: black !important;
|
||||
}
|
||||
// .pdiv{background-color: gray;height: 26px;}
|
||||
.p5{
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
background-color: #094875;
|
||||
color: white;
|
||||
margin-top: -13px;
|
||||
margin-bottom: -3px;
|
||||
height: 21px;
|
||||
width: 110px;
|
||||
padding-top: 7px;
|
||||
/* font-family: WorkSans-Bold !important; */
|
||||
padding-bottom: 21px;
|
||||
border-bottom-left-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
}
|
||||
@ -0,0 +1,27 @@
|
||||
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { DateInfoModalComponent } from './date-info-modal.component';
|
||||
|
||||
describe('DateInfoModalComponent', () => {
|
||||
let component: DateInfoModalComponent;
|
||||
let fixture: ComponentFixture<DateInfoModalComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ DateInfoModalComponent ],
|
||||
schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(DateInfoModalComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,234 @@
|
||||
import { Component, OnInit, Input, ViewChild } from '@angular/core';
|
||||
import { ModalController, NavParams, IonInfiniteScroll } from '@ionic/angular';
|
||||
import { TranslatorService } from 'src/app/hmg-common/services/translator/translator.service';
|
||||
// import { SharedDataService } from 'src/app/hmg-common/services/shared-data-service/shared-data.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-date-info-modal',
|
||||
templateUrl: './date-info-modal.component.html',
|
||||
styleUrls: ['./date-info-modal.component.scss'],
|
||||
})
|
||||
export class DateInfoModalComponent implements OnInit {
|
||||
[x: string]: any;
|
||||
gaugeType = "full";
|
||||
gaugeValue = 28.3;
|
||||
gaugeLabel = "Days";
|
||||
@Input() TODAYDATE: any;
|
||||
@Input() SHIFTDETAILS:any;
|
||||
today: any;
|
||||
todayDate: any;
|
||||
month: any;
|
||||
monthDate: any;
|
||||
excess: any;
|
||||
shortage:any;
|
||||
lateIn:any;
|
||||
scheduled:any;
|
||||
earlyOut:any;
|
||||
shiftTime:any;
|
||||
startDate:any;
|
||||
endDate:any;
|
||||
shift:any;
|
||||
percentage:any;
|
||||
data:any;
|
||||
scheduleDate:any;
|
||||
tests:any;
|
||||
year: any;
|
||||
nameMonth:any;
|
||||
nameDay: any;
|
||||
@ViewChild(IonInfiniteScroll) infiniteScroll: IonInfiniteScroll;
|
||||
// public weekDaysEnSort = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
|
||||
public weekDaysEn = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
|
||||
|
||||
public options = {
|
||||
cutoutPercentage: 85,
|
||||
|
||||
tooltips: { enabled: false },
|
||||
|
||||
legend: { display: false }
|
||||
|
||||
};
|
||||
|
||||
constructor(public modalController: ModalController, public navParams: NavParams, public ts:TranslatorService,
|
||||
|
||||
) { }
|
||||
|
||||
ngOnInit() {
|
||||
// this.shift =this.common.sharedService.getSharedData('shiftDetailsData');
|
||||
console.log(this.TODAYDATE.SCHEDULE_DATE.split(" ")[0].split(" "))
|
||||
//22/2/2019
|
||||
console.log(this.TODAYDATE.EXCESS_HRS)
|
||||
|
||||
this.excess = this.TODAYDATE.EXCESS_HRS
|
||||
console.log(this.TODAYDATE.LATE_IN_HRS)
|
||||
this.lateIn = this.TODAYDATE.LATE_IN_HRS
|
||||
console.log(this.TODAYDATE.SHORTAGE_HRS)
|
||||
this.shortage = this.TODAYDATE.SHORTAGE_HRS
|
||||
console.log(this.TODAYDATE.SCHEDULED_HRS)
|
||||
this.scheduled = this.TODAYDATE.SCHEDULED_HRS
|
||||
console.log(this.TODAYDATE.EARLY_OUT_HRS )
|
||||
this.earlyOut = this.TODAYDATE.EARLY_OUT_HRS
|
||||
this.scheduleDate = this.TODAYDATE. SCHEDULE_DATE
|
||||
|
||||
console.log(this.TODAYDATE. SCHEDULE_DATE)
|
||||
|
||||
|
||||
// console.log(this.SHIFTDETAILS)
|
||||
// console.log(this.SHIFTDETAILS.SHT_NAME)
|
||||
this.shiftTime= this.SHIFTDETAILS.GetScheduleShiftsDetailsList[0].SHT_NAME
|
||||
this.startDate= this.SHIFTDETAILS.GetScheduleShiftsDetailsList[0].SHT_ACTUAL_START_TIME
|
||||
this.endDate= this.SHIFTDETAILS.GetScheduleShiftsDetailsList[0].SHT_ACTUAL_END_TIME
|
||||
this.percentage=this.SHIFTDETAILS.GetScheduleShiftsDetailsList[0].PERCENTAGE
|
||||
|
||||
this.percChart= this.percentage.substring(0,this.percentage.indexOf("%"));
|
||||
let test = this.scheduleDate;
|
||||
let splitdate =test.split(" ");
|
||||
let date =splitdate[0];
|
||||
let test1 =date.split("/");
|
||||
console.log("" + test1);
|
||||
this. month =test1[1];
|
||||
console.log("" + this.month);
|
||||
this. year =test1[2];
|
||||
console.log("" + this.year);
|
||||
this.day =test1[0];
|
||||
console.log("date: "+ date);
|
||||
console.log("this.percChart: " +this.percChart);
|
||||
|
||||
this.nameMonth=this.getMonthName(parseInt(this.month))
|
||||
console.log("" + this.nameMonth)
|
||||
console.log("" + this.month)
|
||||
|
||||
this.nameDay=this.getHeaderDay(new Date(date))
|
||||
console.log("" + this.nameDay)
|
||||
|
||||
|
||||
// let testnamdeday=this.weekDaysEnSort[new Date(date).getDay()];
|
||||
|
||||
// console.log("testnamdeday" + testnamdeday)
|
||||
|
||||
|
||||
let d = new Date(date);
|
||||
let dayName = d.toString().split(' ')[0];
|
||||
|
||||
this.data = {
|
||||
labels: ['percentage'],
|
||||
datasets: [
|
||||
|
||||
{
|
||||
|
||||
data: [this.percChart],
|
||||
// data: [96],
|
||||
backgroundColor: [
|
||||
'#22C6B3',
|
||||
|
||||
// '#22C6B3'
|
||||
],
|
||||
|
||||
borderWidth: 2
|
||||
|
||||
}]
|
||||
|
||||
};
|
||||
|
||||
|
||||
|
||||
// this.startDate= this.SHIFTDETAILS.GetScheduleShiftsDetailsList[0].SHT_ACTUAL_START_DATETIME;
|
||||
|
||||
// console.log(this.SHIFTDETAILS.GetScheduleShiftsDetailsList[0].SHT_ACTUAL_START_TIME)
|
||||
|
||||
|
||||
// console.log(this.SHIFTDETAILS.GetScheduleShiftsDetailsList[0].SHT_ACTUAL_END_DATETIME );
|
||||
// this.endDate= this.SHIFTDETAILS.GetScheduleShiftsDetailsList[0].SHT_ACTUAL_END_DATETIME ;
|
||||
|
||||
// console.log(this.SHIFTDETAILS.GetScheduleShiftsDetailsList[0].SHT_ACTUAL_END_TIME )
|
||||
|
||||
// SHT_ACTUAL_START_DATETIME
|
||||
// SHT_ACTUAL_START_TIME
|
||||
// SHT_ACTUAL_END_DATETIME
|
||||
// SHT_ACTUAL_END_TIME
|
||||
|
||||
|
||||
//let dateData = this.TODAYDATE.split(' ');
|
||||
// console.log(dateData)
|
||||
// this.today = dateData[0];
|
||||
// this.todayDate = dateData[1];
|
||||
// this.monthDate = dateData[2];
|
||||
// this.month = dateData[3];
|
||||
// console.log(this.todayDate);
|
||||
// console.log(this.today);
|
||||
// console.log(this.monthDate);
|
||||
// console.log(this.month);
|
||||
|
||||
}
|
||||
|
||||
|
||||
public getMonthName(value: number): string {
|
||||
switch (value) {
|
||||
case 1:
|
||||
return "Jan";
|
||||
case 2:
|
||||
return "Feb";
|
||||
case 3:
|
||||
return "Mar";
|
||||
case 4:
|
||||
return "Apr";
|
||||
case 5:
|
||||
return "May";
|
||||
case 6:
|
||||
return "Jun";
|
||||
case 7:
|
||||
return "Jul";
|
||||
case 8:
|
||||
return "Aug";
|
||||
case 9:
|
||||
return "Sep";
|
||||
case 10:
|
||||
return "Oct";
|
||||
case 11:
|
||||
return "Nov";
|
||||
case 12:
|
||||
return "Dec";
|
||||
}
|
||||
}
|
||||
|
||||
getHeaderDay(date: any) {
|
||||
// return this.weekDaysEnSort[date.getDay()];
|
||||
return this.weekDaysEn[date.getDay()];
|
||||
|
||||
}
|
||||
// @ViewChild(IonInfiniteScroll) infiniteScroll: IonInfiniteScroll;
|
||||
// public options = {
|
||||
// cutoutPercentage: 80,
|
||||
|
||||
// tooltips: { enabled: false },
|
||||
|
||||
// legend: { display: false }
|
||||
|
||||
// };
|
||||
|
||||
//
|
||||
//return this.weekDaysEn[date.getDay()] + ", " + date.getDate() + " " + this.getMonthName(date.getMonth() + 1) + " " + date.getFullYear();
|
||||
// create muthod recive date
|
||||
// them get day date.getDay()
|
||||
// them get month name this.getMonthName(date.getMonth() + 1)
|
||||
// date.getFullYear()
|
||||
//implemeition this.getMonthName()
|
||||
|
||||
//SCHEDULE_DATE: "2/1/2020 12:00:00 AM"
|
||||
//GetDayHoursTypeDetailsList
|
||||
|
||||
|
||||
// // date = {scheduleDate};
|
||||
// let a = date.split(" ");
|
||||
// let date = a[0];
|
||||
//test=date.split("/")
|
||||
// test[0]
|
||||
// test[1]
|
||||
// test[3]
|
||||
|
||||
|
||||
// let date2 = date.split("/");
|
||||
// String part1 = parts[0];
|
||||
// String part2 = parts[1];
|
||||
// String part3 = parts[2];
|
||||
|
||||
}
|
||||
@ -0,0 +1,21 @@
|
||||
export class TimeSlot {
|
||||
constructor(isoTime: string, startDate: string, end: string) {
|
||||
this.isoTime = isoTime;
|
||||
this.start = startDate;
|
||||
this.end = end;
|
||||
this.allDay = true;
|
||||
this.draggable = false;
|
||||
}
|
||||
|
||||
public eventTimeLabel() {
|
||||
return new Date(this.end).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', hour12: false });
|
||||
}
|
||||
// event time in iso format
|
||||
isoTime: string;
|
||||
// start of event day
|
||||
start: string;
|
||||
// event date time
|
||||
end: string;
|
||||
allDay: boolean;
|
||||
draggable: boolean;
|
||||
}
|
||||
@ -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,75 @@
|
||||
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 selectedShiftDay: 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();
|
||||
}
|
||||
|
||||
// this.selectedShiftDay = this.sharedData.getSharedData('selectedShiftDay', false);
|
||||
// console.log(this.selectedShiftDay);
|
||||
// if (this.selectedShiftDay.origin === 'shiftDetails') {
|
||||
// this.getScheduleShiftDetails();
|
||||
// } else if (this.selectedShiftDay.origin === 'shiftSwipes') {
|
||||
// this.getSwipesDetails();
|
||||
// }
|
||||
}
|
||||
|
||||
getScheduleShiftDetails() {
|
||||
console.log("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;
|
||||
// this.common.sharedService.setSharedData(this.shiftDetailsData,'shiftDetailsData');
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
getSwipesDetails() {
|
||||
console.log("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,576 @@
|
||||
<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> -->
|
||||
|
||||
|
||||
<!------------------------------------------ ENAD CODE ------------------------------------------->
|
||||
|
||||
|
||||
|
||||
<ion-content class="colorBG">
|
||||
|
||||
<div class="header-div">
|
||||
<ion-buttons slot="start">
|
||||
<ion-back-button color="light" class="btnBack" defaultHref="/home"></ion-back-button>
|
||||
</ion-buttons>
|
||||
<ion-title class="Title"> {{ts.trPK('attendance','monthly-attendance')}}</ion-title>
|
||||
</div>
|
||||
<div class="">
|
||||
<div class="header">
|
||||
<!-- <p style="position: absolute; left: 40%; bottom: 65%;">{{monthTitle}}</p> -->
|
||||
|
||||
|
||||
<div class="slider">
|
||||
<ion-row>
|
||||
<ion-col>
|
||||
<button ion-button icon-start class="slidPrev" (click)="previousSlide(sliderOne,slideWithNav)">
|
||||
<ion-icon class="activeArrow" ios="ios-arrow-dropleft-circle" md="md-arrow-dropleft-circle">
|
||||
</ion-icon>
|
||||
</button>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<p style="position: absolute; left: 27%; bottom: 0%; font-family: WorkSans-Bold;">{{month}}</p>
|
||||
<!-- <p style="position: absolute; left: 22%; bottom: 0%; font-family: WorkSans-Bold;">{{yearTitle}}</p> -->
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<p style="position: absolute; left: 25%; bottom: 0%; font-family: WorkSans-Bold;">{{year}}</p>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<button ion-button icon-end class="slidNext" (click)="nextSlide(sliderOne,slideWithNav)">
|
||||
<ion-icon class="disabledArrow" ios="ios-arrow-dropright-circle" md="md-arrow-dropright-circle">
|
||||
</ion-icon>
|
||||
|
||||
</button>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- <ion-slides [options]="slideOptsOne" #sliderRef (ionSlideDidChange)="SlideDidChange(sliderOne,slideWithNav)">
|
||||
<ion-slide >
|
||||
<ion-grid class="headerGrid"> -->
|
||||
|
||||
<ion-slides [options]="slideOptsOne" #slideWithNav (ionSlideDidChange)="SlideDidChange(sliderOne,slideWithNav)">
|
||||
<ion-slide >
|
||||
<ion-grid class="headerGrid">
|
||||
<div style="color: black;">
|
||||
<!-- <ngx-gauge
|
||||
[type]="gaugeType"
|
||||
[value]="gaugeValue"
|
||||
[label]="gaugeLabel">
|
||||
</ngx-gauge> -->
|
||||
<div class="result-graph">
|
||||
|
||||
<div class="request-heading">
|
||||
|
||||
<span> {{ts.trPK('attendance-tracking','attendance-statistics')}}</span>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="result-text-container">
|
||||
|
||||
<h2>{{totalAttendancePrecentage}}</h2>
|
||||
<p>{{ts.trPK('absenceList','days')}}</p>
|
||||
<!-- <span>TOTAL <br> OPEN REQUEST</span> -->
|
||||
|
||||
</div>
|
||||
|
||||
<p-chart class="today-graph" type="doughnut" [data]="data" [options]="options"></p-chart>
|
||||
|
||||
</div>
|
||||
<!-- <div style="position: relative;
|
||||
left: 77%;
|
||||
bottom: 117px;
|
||||
color: black;
|
||||
background-color: #22c6b3;
|
||||
width: 20%; height: 6px;">
|
||||
<label style="position: absolute;left: 20%; bottom: 100%; font-size:11px ;"> {{ts.trPK('attendance','present')}} <strong>{{attendedDays}}</strong></label>
|
||||
</div>
|
||||
<div style="position: relative;
|
||||
left: 77%;
|
||||
bottom: 67px;
|
||||
color: black;
|
||||
background-color: #094875;
|
||||
width: 20%; height: 6px;">
|
||||
<label style="position: absolute;left: 20%; bottom: 100%; font-size:11px ;">{{ts.trPK('attendance','absent')}} <strong>{{absentDays}}</strong></label>
|
||||
</div>
|
||||
|
||||
</div> -->
|
||||
<div style="position: relative;
|
||||
left: 77%;
|
||||
bottom: 117px;
|
||||
color: black;
|
||||
background-color: #22c6b3;
|
||||
width: 20%; height: 6px;">
|
||||
<ion-col>
|
||||
<ion-row>
|
||||
<label class="green-label">{{ts.trPK('attendance','present')}}</label>
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<label class="green-amount">{{attendedDays}}</label>
|
||||
</ion-row>
|
||||
</ion-col>
|
||||
</div>
|
||||
<div style="position: relative;
|
||||
left: 77%;
|
||||
bottom: 67px;
|
||||
color: black;
|
||||
background-color: #094875;
|
||||
width: 20%; height: 6px;">
|
||||
<ion-col>
|
||||
<ion-row>
|
||||
<label class="blue-label">{{ts.trPK('attendance','absent')}}</label>
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<label class="blue-amount" for="">{{absentDays}}</label>
|
||||
</ion-row>
|
||||
</ion-col>
|
||||
</div>
|
||||
</div>
|
||||
</ion-grid>
|
||||
|
||||
<!-- //////////////////////////////////////// -->
|
||||
</ion-slide>
|
||||
</ion-slides>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top: 10%;">
|
||||
<ion-grid>
|
||||
<ion-row>
|
||||
<ion-col>
|
||||
<ion-grid class="labelGrid">
|
||||
<ion-row>
|
||||
<ion-col>
|
||||
<label style="font-size: 12px;">{{ts.trPK('attendance-tracking','schedule')}}</label>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<h2 *ngIf ="timeCardSummaryData" style="margin-left: 45%; font-size: 25px; font-weight: bold;">{{timeCardSummaryData.SCHEDULE_DAYS}}</h2>
|
||||
<h2 *ngIf ="!timeCardSummaryData" style="margin-left: 45%; font-size: 25px;">0</h2>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<ion-grid class="labelGrid">
|
||||
<ion-row>
|
||||
<ion-col>
|
||||
<label style="font-size: 12px;">{{ts.trPK('attendance-tracking','off-days')}}</label>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
|
||||
<ion-col>
|
||||
<h2 *ngIf ="timeCardSummaryData" style="margin-left: 37%; margin-top: 18px; font-size: 25px; font-weight: bold;">{{timeCardSummaryData.OFF_DAYS}}</h2>
|
||||
<h2 *ngIf ="!timeCardSummaryData" style="margin-left: 37%; font-size: 25px;">0</h2>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<ion-grid class="labelGrid">
|
||||
<label style="font-size: 12px;">{{ts.trPK('attendance-tracking','non-analyzed')}}</label>
|
||||
<h2 *ngIf ="timeCardSummaryData" style="margin-left: 36%; font-size: 25px; font-weight: bold;">{{timeCardSummaryData.UNAUTHORIZED_LEAVE}}</h2>
|
||||
<h2 *ngIf ="!timeCardSummaryData" style="margin-left: 36%; font-size: 25px;">0</h2>
|
||||
</ion-grid>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<ion-grid class="labelGrid">
|
||||
<label style="font-size: 12px;">{{ts.trPK('attendance-tracking','shortage-hours')}}</label>
|
||||
<h2 *ngIf ="timeCardSummaryData" style="margin-left: 18%; font-size: 25px; font-weight: bold;">{{timeCardSummaryData.SHORTAGE_HRS}}</h2>
|
||||
<h2 *ngIf ="!timeCardSummaryData" style="margin-left: 45%; font-size: 25px;">0</h2>
|
||||
</ion-grid>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
</div>
|
||||
<div >
|
||||
<ion-grid class="bodyGrid">
|
||||
<p style="font-weight: bold; font-size: 17px;"> {{ts.trPK('attendance','monthly-attendance-calendar')}}</p>
|
||||
<app-circle-calendar [eventsdateAttend]='arrDaysAttendance' [eventsdateAbsent]='arrDaysAbsent' [eventsdateDayOff]='arrDaysOff' (monthTitle)='changeMonthTitle($event)' (currentYear)=changeYear($event)></app-circle-calendar>
|
||||
</ion-grid>
|
||||
</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,488 @@
|
||||
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;
|
||||
}
|
||||
|
||||
///////////////////////////////here
|
||||
.slidPrev{
|
||||
// margin-top: 8px;
|
||||
margin-left: 10px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.slidNext{
|
||||
background: transparent;
|
||||
margin-top: -1px;
|
||||
margin-left: 43px;
|
||||
}
|
||||
.activeArrow{
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
color: white;
|
||||
}
|
||||
.disabledArrow{
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
color: gray;
|
||||
// margin-right: 5px;
|
||||
}
|
||||
|
||||
.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%;
|
||||
}
|
||||
|
||||
|
||||
//////////////////////////////////////////ENAD CODE////////////////////////////////////////////
|
||||
|
||||
|
||||
.colorBG{
|
||||
--background: #f0efef;
|
||||
}
|
||||
|
||||
.header-div {
|
||||
|
||||
background-color: #22C6B3;
|
||||
text-transform: capitalize;
|
||||
height: 180px;
|
||||
position: relative;
|
||||
display: block;
|
||||
margin-bottom: -28px;
|
||||
}
|
||||
.Title{
|
||||
text-align: center !important;
|
||||
color: white !important;
|
||||
margin-top: -86px !important;
|
||||
font-size: 17px !important;
|
||||
font-family: workSans-Regular;
|
||||
}
|
||||
|
||||
.header{
|
||||
|
||||
margin-top: -221px;
|
||||
}
|
||||
|
||||
.chart-modal .modal-Wrapper {
|
||||
--background: rgb(116, 108, 108) !important;
|
||||
--border-color:white!important ;
|
||||
width: 85%!important ;
|
||||
height: 40px !important ;
|
||||
|
||||
}
|
||||
|
||||
.navbar{
|
||||
font-size: 10px !important;
|
||||
--background: #22C6B3 !important;
|
||||
color: aliceblue !important;
|
||||
// margin-top: 10px !important;
|
||||
|
||||
}
|
||||
|
||||
.menu{
|
||||
// margin-left:330px !important;
|
||||
margin-top: 0px !important;
|
||||
font-size: 35px !important;
|
||||
background: #22C6B3;
|
||||
color: aliceblue;
|
||||
margin-left: 0px !important;
|
||||
|
||||
}
|
||||
|
||||
.person{
|
||||
|
||||
margin-left:100px !important;
|
||||
margin-top: 0px !important;
|
||||
font-size: 23px !important;
|
||||
background: #22C6B3 !important;
|
||||
color: aliceblue !important;
|
||||
|
||||
}
|
||||
|
||||
.grid{
|
||||
margin-bottom: 550px !important;
|
||||
margin-top: 20px !important;
|
||||
margin-left: 15px !important;
|
||||
margin-right: 15px !important;
|
||||
background-color:white !important;
|
||||
border-radius: 20px !important;
|
||||
height: 250px !important;
|
||||
}
|
||||
|
||||
.headerGrid{
|
||||
margin-top: 5px !important;
|
||||
margin-left: 15px !important;
|
||||
margin-right: 15px !important;
|
||||
background-color: white !important;
|
||||
border-radius: 20px !important;
|
||||
height: 250px !important;
|
||||
border: 1px solid #d6d4d4;
|
||||
}
|
||||
|
||||
.green-label{
|
||||
font-size: 12px;
|
||||
margin-top: -13px;
|
||||
}
|
||||
|
||||
.green-amount{
|
||||
font-size: 17px;
|
||||
font-family: WorkSans-Bold;
|
||||
margin-top: -3px;
|
||||
}
|
||||
|
||||
.blue-label{
|
||||
font-size: 12px;
|
||||
margin-top: -13px;
|
||||
}
|
||||
|
||||
.blue-amount{
|
||||
font-size: 17px;
|
||||
font-family: WorkSans-Bold;
|
||||
margin-top: -4px;
|
||||
}
|
||||
|
||||
.today-graph{
|
||||
display:block !important;
|
||||
height: 150px !important;
|
||||
width: 300 !important;
|
||||
margin-left: -70px !important;
|
||||
}
|
||||
.bodyGrid{
|
||||
// margin-bottom: 550px !important;
|
||||
// margin-top: 7px !important;
|
||||
// margin-left: 15px !important;
|
||||
// margin-right: 15px !important;
|
||||
// background-color:white !important;
|
||||
// border-radius: 20px !important;
|
||||
// height: 270px !important;
|
||||
// border: 1px solid #d6d4d4 !important;
|
||||
|
||||
margin-top: 7px !important;
|
||||
margin-left: 15px !important;
|
||||
margin-right: 15px !important;
|
||||
background-color: white !important;
|
||||
border-radius: 20px !important;
|
||||
height: 321px !important;
|
||||
border: 1px solid #d6d4d4 !important;
|
||||
|
||||
}
|
||||
.labelGrid{
|
||||
// margin-top: -30px !important;
|
||||
// background-color:white !important;
|
||||
// border-radius: 20px !important;
|
||||
// height: 100px !important;
|
||||
// border: 1px solid #d6d4d4;
|
||||
margin-top: -30px !important;
|
||||
background-color: white !important;
|
||||
border-radius: 23px !important;
|
||||
height: 100px !important;
|
||||
border: 1px solid #d6d4d4;
|
||||
padding-right: 0px;
|
||||
}
|
||||
|
||||
.ionSliders{
|
||||
margin: 0px !important;
|
||||
padding: 0px !important;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.ionSlide{
|
||||
margin-top: 5px !important;
|
||||
margin-left: 190px !important;
|
||||
color: black !important;
|
||||
|
||||
}
|
||||
.dateLable{
|
||||
|
||||
margin-left: 90px !important;
|
||||
color: black !important;
|
||||
font-size: small !important;
|
||||
margin-top: 15px !important;
|
||||
}
|
||||
// h1{
|
||||
// font-size: 15px !important;
|
||||
// text-align: center !important;
|
||||
// }
|
||||
.arrowDropright{
|
||||
margin-left:100px !important;
|
||||
font-size: 20px !important;
|
||||
color: rgb(168, 165, 165) !important;
|
||||
margin-top: 15px !important;
|
||||
|
||||
}
|
||||
.arrowDropleft{
|
||||
font-size: 20px !important;
|
||||
margin-left: 10px !important;
|
||||
margin-top: 15px !important;
|
||||
color: rgb(116, 108, 108) !important;
|
||||
}
|
||||
|
||||
.ionLable{
|
||||
font-size: 10px !important;
|
||||
}
|
||||
|
||||
.number{
|
||||
|
||||
font-size: 18px !important;
|
||||
font-weight: bolder !important;
|
||||
color: black !important;
|
||||
}
|
||||
|
||||
.header-div{
|
||||
background:var(--primary);
|
||||
background: -moz-linear-gradient(45deg, var(--primary) 0%, var(--secondary) 36%,var(--secondary) 59%, var(--customnavy) 100%);
|
||||
background: -webkit-linear-gradient(45deg, (--primary) 0%, var(--secondary) 36%,var(--secondary) 59%, var(--customnavy) 100%);
|
||||
background: #22C6B3;
|
||||
// background: linear-gradient(90deg, #85C48D 0%, #85C48D 13%, #2BB5C6 98%, #2BB5C6 100%);
|
||||
color:var(--light);
|
||||
text-transform: capitalize;
|
||||
|
||||
display: block;
|
||||
position: relative;
|
||||
height: 210px;
|
||||
margin-bottom:60px;
|
||||
// border-radius: 0px 0px 70px 70px;
|
||||
}
|
||||
|
||||
.request-heading {
|
||||
|
||||
span {
|
||||
|
||||
// text-align: center;
|
||||
|
||||
// display: block;
|
||||
|
||||
// padding-top: 8px;
|
||||
|
||||
// font-family: workSans-Regular;
|
||||
// text-align: center;
|
||||
display: block;
|
||||
padding-top: 8px;
|
||||
/* font-family: workSans-Regular; */
|
||||
margin-left: -157px;
|
||||
margin-top: -19px;
|
||||
padding-bottom: 16px;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.result-graph {
|
||||
|
||||
position: relative;
|
||||
|
||||
background: white;
|
||||
|
||||
margin-right: 20px;
|
||||
|
||||
margin-left: 20px;
|
||||
|
||||
margin-top: 20px;
|
||||
|
||||
padding-bottom: 20px;
|
||||
|
||||
border-radius: 20px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.result-text-container {
|
||||
|
||||
padding: 0;
|
||||
|
||||
margin: 0;
|
||||
|
||||
position: absolute;
|
||||
|
||||
left: 38%;
|
||||
top: 60%;
|
||||
|
||||
display: block;
|
||||
|
||||
text-align: center;
|
||||
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
h2 {
|
||||
|
||||
font-size: 25px;
|
||||
|
||||
font-family: WorkSans-Bold;
|
||||
color: black !important;
|
||||
margin: 0 auto;
|
||||
|
||||
line-height: 36px;
|
||||
|
||||
}
|
||||
p {
|
||||
|
||||
font-size: 20px;
|
||||
color: black !important;
|
||||
// font-family: WorkSans-Bold;
|
||||
|
||||
margin: 0 auto;
|
||||
|
||||
line-height: 36px;
|
||||
|
||||
}
|
||||
|
||||
span {
|
||||
|
||||
width: 125px;
|
||||
|
||||
display: block;
|
||||
|
||||
margin: 0 auto;
|
||||
|
||||
font-size: 12px;
|
||||
color: black !important;
|
||||
font-family: workSans-Regular;
|
||||
}
|
||||
}
|
||||
|
||||
|
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 |