my-team attendance issues resolved

MOE_DEV_NEW_TEMPORARY_DESIGN
umasoodch 6 years ago
parent bf825662a9
commit 69ea2637d6

@ -7,4 +7,9 @@ export class AttendanceTrackingList {
public P_SCHEDULED_HOURS: string;
public P_SHT_NAME: string;
public P_SPENT_HOURS: string;
public P_BREAK_HOURS: string;
public P_LATE_IN_HOURS: string;
public P_SWIPES_EXEMPTED_FLAG: string;
public P_SWIPE_IN: string;
public P_SWIPE_OUT: string;
}

@ -1,10 +1,10 @@
<calendar #slider [dateFormatter]="calendar.dateFormatter"
[monthviewEventDetailTemplate]="template"
[calendarMode]="calendar.mode"
[currentDate]="currentAvailableAppoDate"
[lockSwipes]="true"
(onCurrentDateChanged)="onCurrentDateChanged($event)" (onTimeSelected)="onDayClicked($event)">
[monthviewEventDetailTemplate]="template"
[calendarMode]="calendar.mode"
[currentDate]="currentDateParent"
[lockSwipes]="true"
(onTimeSelected)="onDayClicked($event)">
</calendar>

@ -17,15 +17,16 @@ import { GetSwipesRequest } from 'src/app/time-card/service/models/get-swipes-re
styleUrls: ['./circle-calendar.component.scss']
})
export class CircleCalendarComponent implements OnInit {
@Input() eventsdateDayOff: any = [];
@Input() eventsdateAttend: any = [];
@Input() eventsdateAbsent: any = [];
@Input() normalDays: any = [];
@Input() dayHoursTypeDetailsList: any = [];
@Input() currentDateParent: string;
@Output() monthTitle = new EventEmitter();
@Output() currentYear = new EventEmitter();
/////////////////////////////////TIME AND DATE VALUES///////////////////////////////
public monthName: any;
public yearDate: any;
public selEmp: string;
@ -42,28 +43,11 @@ export class CircleCalendarComponent implements OnInit {
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);
}
}
}
mode: 'month'
};
public currentAvailableAppoDate: any;
public eventsInput: any = [];
@ -77,7 +61,8 @@ export class CircleCalendarComponent implements OnInit {
public selectedDateObject: any;
public currentDateToSwipe: any;
public activeMonth: any;
isFirst: boolean;
public isFirst = false;
public selectedIndexData: any;
arrFutrueDays: any;
eventsdateFutrue: any;
detailData: any;
@ -86,191 +71,43 @@ export class CircleCalendarComponent implements OnInit {
public mod: ModalController,
public common: CommonService,
public timeCardService: TimeCardService) { }
@ViewChild("slider") slides: ElementRef;
@ViewChild('slider') slides: ElementRef;
ngOnInit() {
this.isFirst = false;
this.reRenderCalendar();
console.log("1")
console.log(this.currentDateParent);
}
// tslint:disable-next-line: use-life-cycle-interface
ngAfterViewInit() {
setTimeout(() => {
this.reRenderCalendar();
}, 1000);
console.log("2")
}
// ngOnChanges(){
// console.log("3")
// }
getHeaderDay(date: any) {
return this.weekDaysEnSort[date.getDay()];
}
reRenderCalendar() {
this.renderDate(this.eventsdateAbsent, 'absent');
this.renderDate(this.eventsdateAttend, 'present');
this.renderDate(this.eventsdateDayOff, 'dayoff');
this.renderDate(this.normalDays, 'scheduleDay');
}
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) {
public async dateModal(shiftDetails) {
const modal = await this.mod.create({
component: DateInfoModalComponent,
showBackdrop: true,
backdropDismiss: true,
componentProps: {
TODAYDATE: todayDate,
TODAYDATE: this.selectedIndexData,
SHIFTDETAILS: shiftDetails
}
});
modal.cssClass = "calendar-modal";
modal.cssClass = 'calendar-modal';
await modal.present();
}
public renderDate(arrayDays, cssClass) {
const td = document.querySelectorAll(".swiper-slide-active .monthview-datetable td:not(.text-muted)");
const td = document.querySelectorAll('.swiper-slide-active .monthview-datetable td:not(.text-muted)');
arrayDays.forEach(dateObj => {
const date = dateObj.startTime;
td.forEach(element => {
@ -282,194 +119,31 @@ export class CircleCalendarComponent implements OnInit {
});
}
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");
onDayClicked(event) {
if (this.isFirst) {
console.log(event.selectedTime.getDate());
const selectedIndex = event.selectedTime.getDate();
this.selectedIndexData = this.dayHoursTypeDetailsList[selectedIndex - 1];
if (this.selectedIndexData.present) {
const rtpID = this.selectedIndexData.RTP_ID;
this.getScheduleShiftDetails(rtpID);
}
} else {
this.isFirst = true;
}
}
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();
this.dateModal(result);
}
});
}
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();
}
}

@ -1,180 +1,104 @@
<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>
<!-- <ion-slides [options]="slideOptsOne" (ionSlideDidChange)="slideChanged($event)">
<ion-slide *ngFor="let shift of SHIFTDETAILS.GetScheduleShiftsDetailsList; let i=index"> -->
<!-- <div> -->
<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="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>
<div class="result-text-container">
<h2 class="percentage">{{percentage}}</h2>
<span>Completed <br><br><br><br></span>
</ion-col>
<ion-col size="2">
<div class="div" >
<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>
</div>
</ion-col>
</ion-row>
</ion-grid>
<p-chart class="today-graph" type="doughnut" [data]="data" [options]="options"></p-chart>
<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>
<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 >
<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>
<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>
</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> -->
</ion-grid>
</div>
<!-- </div> -->
</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 style="border-bottom: rgb(190, 187, 187) solid 1px;" >
<button class="more" ion-button (click)="hide()" >{{ts.trPK('attendance-tracking','less')}}</button>
</div>
<div *ngIf="hideMe"> </div> -->
</div>
<!-- </ion-slide>
</ion-slides> -->

@ -108,23 +108,25 @@ height: 360px !important;
}
.p0{ margin-bottom: -15px !important;
.p0{
margin-bottom: -13px !important;
color: black !important;
margin-left: 24px;
font-weight: bold !important;
font-size: 17px !important;
font-size: 15px !important;
margin-top: 8px;
text-align: center;
display: block;
width: 100%;
}
.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;
text-align: center;
display: block;
width: 100%;
}
.p2{ font-weight: bold !important;
font-size: 17px !important;

@ -1,7 +1,7 @@
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';
import { IonSlides } from '@ionic/angular';
@Component({
selector: 'app-date-info-modal',
@ -9,230 +9,130 @@ import { TranslatorService } from 'src/app/hmg-common/services/translator/transl
styleUrls: ['./date-info-modal.component.scss'],
})
export class DateInfoModalComponent implements OnInit {
@ViewChild('slides') slides: IonSlides;
[x: string]: any;
gaugeType = "full";
gaugeType = 'full';
gaugeValue = 28.3;
gaugeLabel = "Days";
gaugeLabel = 'Days';
@Input() TODAYDATE: any;
@Input() SHIFTDETAILS: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;
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;
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 }
};
public slideOptsOne = {
slidesPerView: 1,
spaceBetween: 0
};
constructor(public modalController: ModalController, public navParams: NavParams, public ts:TranslatorService,
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];
console.log(this.TODAYDATE);
this.excess = this.TODAYDATE.EXCESS_HRS;
this.lateIn = this.TODAYDATE.LATE_IN_HRS;
this.shortage = this.TODAYDATE.SHORTAGE_HRS;
this.scheduled = this.TODAYDATE.SCHEDULED_HRS;
this.earlyOut = this.TODAYDATE.EARLY_OUT_HRS ;
this.scheduleDate = this.TODAYDATE.SCHEDULE_DATE;
this.assignData(this.SHIFTDETAILS.GetScheduleShiftsDetailsList[0]);
}
this.data = {
assignData(shiftDetails) {
this.shiftTime = shiftDetails.SHT_NAME;
this.startDate = shiftDetails.SHT_ACTUAL_START_TIME;
this.endDate = shiftDetails.SHT_ACTUAL_END_TIME;
this.percentage = shiftDetails.PERCENTAGE;
this.percChart = this.percentage.substring(0, this.percentage.indexOf('%'));
const test = this.scheduleDate;
const splitdate = test.split(' ');
const date = splitdate[0];
const test1 = date.split('/');
this.day = test1[1];
this.year = test1[2];
this.month = test1[0];
// tslint:disable-next-line: radix
this.nameMonth = this.getMonthName(parseInt(this.month));
this.nameDay = this.getHeaderDay(new Date(date));
const d = new Date(date);
this.data = {
labels: ['percentage'],
datasets: [
{
data: [this.percChart],
// data: [96],
backgroundColor: [
'#22C6B3',
// '#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);
}
slideChanged(ev) {
this.slides.getActiveIndex().then(index => {
const shiftDetails = this.SHIFTDETAILS[index];
this.assignData(shiftDetails);
});
}
public getMonthName(value: number): string {
switch (value) {
case 1:
return "Jan";
return 'Jan';
case 2:
return "Feb";
return 'Feb';
case 3:
return "Mar";
return 'Mar';
case 4:
return "Apr";
return 'Apr';
case 5:
return "May";
return 'May';
case 6:
return "Jun";
return 'Jun';
case 7:
return "Jul";
return 'Jul';
case 8:
return "Aug";
return 'Aug';
case 9:
return "Sep";
return 'Sep';
case 10:
return "Oct";
return 'Oct';
case 11:
return "Nov";
return 'Nov';
case 12:
return "Dec";
return 'Dec';
}
}
getHeaderDay(date: any) {
// return this.weekDaysEnSort[date.getDay()];
return this.weekDaysEn[date.getDay()];
}
// hide(){
// this.hideMe = true;
// }
// @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];
}

@ -1,13 +1,13 @@
<div class="team-member-container">
<ion-row>
<ion-col [size]="3">
<div class="user-image-container present">
<div class="user-image-container">
<div class="user-image">
<img [src]="employeeImage" alt="Team Member Image"/>
</div>
</div>
</ion-col>
<ion-col [size]="9" style="padding: 8px 15px 0;">
<ion-col [size]="9" style="padding: 8px 5px 0px;margin-top: 14px;">
<div>
<span class="employee-name">
<h2 class="name">{{name}}</h2>
@ -17,10 +17,10 @@
<img src="../assets/imgs/green_call_icon.png" >
</span>
</div>
<div class="swipe-information">
<!-- <div class="swipe-information">
<span class="check-in"><strong>Check-In:</strong> {{checkIn}}</span>
<span><strong>Check-Out:</strong> {{checkOut}}</span>
</div>
</div> -->
</ion-col>
</ion-row>
</div>

@ -7,25 +7,25 @@
.user-image-container{
position: relative;
width: 80px;
height: 80px;
width: 70px;
height: 70px;
display: block;
margin: 0 auto;
&:before{
position: absolute;
content: "";
width: 20px;
height: 20px;
border-radius: 20px;
border: 1px solid white;
top: 0;
right: 0;
background-color: red;
z-index: 9;
}
&.present:before{
background-color: green !important;
}
// &:before{
// position: absolute;
// content: "";
// width: 20px;
// height: 20px;
// border-radius: 20px;
// border: 1px solid white;
// top: 0;
// right: 0;
// background-color: red;
// z-index: 9;
// }
// &.present:before{
// background-color: green !important;
// }
}
.user-image{
overflow: hidden;
@ -46,7 +46,7 @@
display: inline-block;
width: 80%;
.name{
font-size: 18px;
font-size: 16px;
color: black;
margin: 0;
width: 100%;
@ -55,7 +55,7 @@
overflow: hidden;
}
.title{
font-size: 15px;
font-size: 13px;
color: #888;
width: 100%;
text-overflow: ellipsis;
@ -69,7 +69,7 @@
display: inline-block;
text-align: center;
vertical-align: top;
margin-top: 10px;
margin-top: 5px;
}
.swipe-information{
color: #888;

@ -11,8 +11,6 @@ export class EmployeeInformationComponent implements OnInit {
@Input() name: string;
@Input() title: string;
@Input() employeeImage: string;
@Input() checkIn: string;
@Input() checkOut: string;
constructor() { }

@ -9,9 +9,9 @@
<ion-content>
<div class="contentBg">
<div class="result-graph">
<div class="result-graph" style="padding-top: 12px;">
<div class="user-info">
<div class="user-image-container present">
<div class="user-image-container">
<div class="user-image">
<img [src]="employee.EMPLOYEE_IMAGE ? 'data:image/png;base64,'+employee.EMPLOYEE_IMAGE : '../assets/imgs/profile.png'" alt="Team Member Image"/>
</div>
@ -72,139 +72,122 @@
</div>
<div *ngIf="activeSegment === 'Attendance'">
<div class="">
<div class="header">
<div class="slider">
<ion-row>
<ion-col>
<button ion-button icon-start class="slidPrev" (click)="previousSlide()">
<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>
</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()">
<ion-icon [ngClass]=" currentMonthName === month ? 'disabledArrow' : 'activeArrow'" ios="ios-arrow-dropright-circle" md="md-arrow-dropright-circle"></ion-icon>
</button>
</ion-col>
</ion-row>
</div>
<ion-slides >
<ion-slide >
<ion-grid class="headerGrid">
<div style="color: black;">
<div class="result-graph" style='margin-top:0;'>
<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>
</div>
<p-chart class="today-graph" type="doughnut" [data]="data" [options]="options"></p-chart>
</div>
<div style="position: absolute;
left: 70%;
top: 35%;
color: black;
background-color: #22c6b3;
width: 20%; height: 6px;z-index:99">
<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: absolute;
left: 70%;
top: 65%;
color: black;
background-color: #094875;
width: 20%; height: 6px;z-index:99">
<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>
<p style="margin-bottom: 1px;">
{{ts.trPK('myTeam','todayAttendance')}}
</p>
<ion-row style="margin: 0 -5px;">
<ion-col [size]="4">
<div class="attendance-information">
<span>{{ts.trPK('myTeam','checkIn')}}</span>
<h2 *ngIf="attendanceTrackingList.P_SWIPE_IN !== null">{{attendanceTrackingList.P_SWIPE_IN | slice:0:-3}}</h2>
<h2 *ngIf="attendanceTrackingList.P_SWIPE_IN === null">--:--</h2>
</div>
</ion-col>
<ion-col [size]="4">
<div class="attendance-information">
<span>{{ts.trPK('myTeam','checkOut')}}</span>
<h2 *ngIf="attendanceTrackingList.P_SWIPE_OUT !== null">{{attendanceTrackingList.P_SWIPE_OUT | slice:0:-3}}</h2>
<h2 *ngIf="attendanceTrackingList.P_SWIPE_OUT === null">--:--</h2>
</div>
</ion-col>
<ion-col [size]="4">
<div class="attendance-information">
<span>{{ts.trPK('myTeam','late')}}</span>
<h2>{{attendanceTrackingList.P_LATE_IN_HOURS | slice:0:-3}} </h2>
</div>
</ion-col>
</ion-row>
</div>
<div>
<ion-grid>
<div class="header">
<div>
<ion-row>
<ion-col [size]='3'>
<div class="labelGrid">
<label>{{ts.trPK('attendance-tracking','schedule')}}</label>
<h2 *ngIf ="timeCardSummaryData">{{timeCardSummaryData.SCHEDULE_DAYS}}</h2>
<h2 *ngIf ="!timeCardSummaryData">0</h2>
</div>
</ion-col>
<ion-col [size]='3'>
<div class="labelGrid">
<label>{{ts.trPK('attendance-tracking','off-days')}}</label>
<h2 *ngIf ="timeCardSummaryData">{{timeCardSummaryData.OFF_DAYS}}</h2>
<h2 *ngIf ="!timeCardSummaryData">0</h2>
</div>
<ion-col [size]="2" style="text-align: left;">
<ion-icon class="activeArrow" ios="ios-arrow-dropleft-circle" md="md-arrow-dropleft-circle" (click)="previousSlide()"></ion-icon>
</ion-col>
<ion-col [size]='3'>
<div class="labelGrid">
<label>{{ts.trPK('attendance-tracking','non-analyzed')}}</label>
<h2 *ngIf ="timeCardSummaryData" >{{timeCardSummaryData.UNAUTHORIZED_LEAVE}}</h2>
<h2 *ngIf ="!timeCardSummaryData">0</h2>
</div>
<ion-col [size]="8" style="text-align: center;">
<span class="month-year-span">{{month}} {{year}}</span>
</ion-col>
<ion-col [size]='3'>
<div class="labelGrid">
<label>{{ts.trPK('attendance-tracking','shortage-hours')}}</label>
<h2 *ngIf ="timeCardSummaryData" >{{timeCardSummaryData.SHORTAGE_HRS}}</h2>
<h2 *ngIf ="!timeCardSummaryData">0</h2>
</div>
<ion-col [size]="2" style="text-align: right;">
<ion-icon [ngClass]=" currentMonthName === month ? 'disabledArrow' : 'activeArrow'" ios="ios-arrow-dropright-circle" md="md-arrow-dropright-circle" (click)="nextSlide()"></ion-icon>
</ion-col>
</ion-row>
</ion-grid>
</div>
</div>
<div class="result-graph">
<div class="request-heading">
<span>{{ts.trPK('myTeam','attendance-statistics')}}</span>
</div>
<div style="position: relative;">
<div class="label-container">
<div class="green-label-container">
<span class="span-one">{{ts.trPK('attendance','present')}}</span>
<span class="span-two">{{attendedDays}}</span>
</div>
<div class="blue-label-container">
<span class="span-one">{{ts.trPK('attendance','absent')}}</span>
<span class="span-two">{{absentDays}}</span>
</div>
</div>
<div class="graph-container">
<div class="result-text-container">
<h2>{{totalAttendancePrecentage}}</h2>
<span>{{ts.trPK('absenceList','days')}}</span>
</div>
<p-chart class="today-graph" type="doughnut" [data]="data" [options]="options"></p-chart>
</div>
</div>
</div>
<div>
<ion-grid class="bodyGrid" *ngIf="showData">
<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>
<ion-row class="attendance-summary">
<ion-col [size]="3">
<div class="attendance-information">
<span>{{ts.trPK('attendance-tracking','schedule')}}</span>
<h2>{{timeCardSummaryData.SCHEDULE_DAYS}}</h2>
</div>
</ion-col>
<ion-col [size]="3">
<div class="attendance-information">
<span>{{ts.trPK('attendance-tracking','off-days')}}</span>
<h2>{{timeCardSummaryData.OFF_DAYS}}</h2>
</div>
</ion-col>
<ion-col [size]="3">
<div class="attendance-information">
<span>{{ts.trPK('attendance-tracking','non-analyzed')}}</span>
<h2>{{timeCardSummaryData.UNAUTHORIZED_LEAVE}}</h2>
</div>
</ion-col>
<ion-col [size]="3">
<div class="attendance-information">
<span>{{ts.trPK('attendance-tracking','shortage-hours')}}</span>
<h2>{{timeCardSummaryData.SHORTAGE_HRS}}</h2>
</div>
</ion-col>
</ion-row>
<div *ngIf="showData" class="calendar-container">
<span> {{ts.trPK('attendance','monthly-attendance-calendar')}}</span>
<app-circle-calendar
[eventsdateAttend]='arrDaysAttendance'
[eventsdateAbsent]='arrDaysAbsent'
[eventsdateDayOff]='arrDaysOff'
[currentDateParent]="currentDate"
[dayHoursTypeDetailsList]="dayHoursTypeDetailsList"
[normalDays]="normalDays"
(monthTitle)='changeMonthTitle($event)'
(currentYear)=changeYear($event)>
</app-circle-calendar>
</div>
</div>
<div *ngIf="activeSegment === 'Team Members'">
<ion-row class="filters-row">
<ion-slides [options]="slideOptsOne">
<ion-slide *ngFor="let filter of filters; let i=index">
<app-card-filter
[value]="filter.value"
[text]="filter.name"
[color]="filter.color"
[active]="filter.active"
(click)="activeFilter(i)"
></app-card-filter>
</ion-slide>
</ion-slides>
</ion-row>
<div style="margin-top: 15px;background: white;border-radius: 100px;overflow: hidden;">
<ion-row no-padding>
<ion-col [size]="3" class="search-dropdown" no-padding>
@ -239,8 +222,6 @@
[name]="subordinate.EMPLOYEE_NAME"
[title]="subordinate.POSITION_NAME"
[employeeImage]="subordinate.EMPLOYEE_IMAGE ? 'data:image/png;base64,'+subordinate.EMPLOYEE_IMAGE : '../assets/imgs/profile.png'"
checkIn="08:15"
checkOut="-"
(click)="getDetails(i)">
</app-employee-information>
</ng-container>

@ -26,15 +26,6 @@ ion-title{
top: 0px;
z-index: 1;
}
.result-graph {
position: relative;
background: white;
margin-top: 20px;
padding-bottom: 20px;
border-radius: 20px;
z-index: 1;
padding: 20px;
}
.user-info{
text-align: center;
@ -45,21 +36,21 @@ ion-title{
height: 80px;
display: block;
margin: 0 auto;
&:before{
position: absolute;
content: "";
width: 20px;
height: 20px;
border-radius: 20px;
border: 1px solid white;
top: 0;
right: 0;
background-color: red;
z-index: 9;
}
&.present:before{
background-color: green !important;
}
// &:before{
// position: absolute;
// content: "";
// width: 20px;
// height: 20px;
// border-radius: 20px;
// border: 1px solid white;
// top: 0;
// right: 0;
// background-color: red;
// z-index: 9;
// }
// &.present:before{
// background-color: green !important;
// }
}
.user-image{
overflow: hidden;
@ -238,53 +229,51 @@ ion-title{
color: gray;
}
.result-graph {
position: relative;
background: white;
margin-top: 20px;
padding-bottom: 20px;
border-radius: 20px;
z-index: 1;
margin-bottom: 10px;
}
.request-heading {
span {
display: block;
text-align: left;
display: block;
padding-top: 8px;
margin-bottom: 10px;
margin-left: 10px;
}
}
.result-text-container {
padding: 0;
margin: 0;
position: absolute;
left: 30%;
top: 61%;
left: 50%;
top: 50%;
display: block;
text-align: center;
transform: translate(-50%, -50%);
h2 {
font-size: 32px;
font-size: 38px;
font-family: WorkSans-Bold;
color: black !important;
margin: 0 auto;
line-height: 12px;
}
p {
font-size: 20px;
color: black !important;
margin: 0 auto;
line-height: 36px;
line-height: 36px;
}
span {
width: 125px;
display: block;
margin: 0 auto;
font-size: 12px;
color: black !important;
font-family: workSans-Regular;
}
}
.today-graph{
display:block !important;
height: 180px !important;
width: 100% !important;
margin-left:-23%;
margin-bottom:-30px;
}
}
.today-graph {
width: 100%;
max-height: 4cm;
}
.green-label{
font-size: 12px;
@ -344,6 +333,83 @@ ion-title{
height: 321px !important;
border: 1px solid #d6d4d4 !important;
}
.attendance-information{
background: white;
border-radius: 20px;
padding: 10px;
h2{
padding: 0;
margin: 0;
font-size: 22px;
}
span{
font-size: 11px;
}
}
.month-year-span{
font-size: 20px;
font-family: WorkSans-Bold;
}
.green-label-container{
border-top: 5px solid #22c6b3;
padding: 1px 0px;
margin: 15px 0px
}
.blue-label-container{
border-top: 5px solid #094875;
padding: 1px 0px;
margin: 15px 0px
}
.span-one{
display: block;
font-size: 12px;
color: black;
}
.span-two{
display: block;
font-size: 22px;
font-family: WorkSans-Bold;
}
.graph-container{
margin-left: -50px;
position: relative;
margin-right: 50px;
}
.label-container{
position: absolute;
width: 20%;
right: 30px;
top: 50%;
margin-top: -60px;
}
.attendance-summary .attendance-information {
span{
height: 32px;
display: block;
line-height: 14px;
}
h2{
text-align: right;
font-family: WorkSans-Bold;
}
}
.calendar-container{
background: white;
margin-bottom: 100px;
margin-top: 20px;
border-radius: 20px;
span{
text-align: left;
display: block;
padding-top: 8px;
margin-bottom: 10px;
margin-left: 10px;
}
}

@ -12,7 +12,8 @@ import * as moment from 'moment';
import { TimeCardService } from 'src/app/time-card/service/time-card.service';
import { GetDayAndHoursDetailsRequest } from 'src/app/time-card/service/models/get-day-hours-type-details.request';
import { GetTimeCardSummaryRequest } from 'src/app/time-card/service/models/get-time-card-summary.request';
import { DashboredService } from 'src/app/hmg-common/services/dashbored/dashbored.service';
import { AttendanceTrackingResponse } from 'src/app/hmg-common/services/dashbored/attendance-tracking.response';
@Component({
selector: 'app-details',
templateUrl: './details.component.html',
@ -22,7 +23,7 @@ import { GetTimeCardSummaryRequest } from 'src/app/time-card/service/models/get-
export class DetailsComponent implements OnInit {
public static opendEmployeesARR = 'opend_employees_arr';
@ViewChild(IonInfiniteScroll) infiniteScroll: IonInfiniteScroll;
public activeSegment = 'About';
public activeSegment = 'Attendance';
pageNum = 1;
pageLimit = 50;
empSubordinate: any;
@ -38,8 +39,6 @@ export class DetailsComponent implements OnInit {
public opendEmployees: any = [];
public headerTitle = '';
public userImage: any = '../assets/imgs/profile.png';
public showMore: any = true;
public menuType: any;
public selEmp: string;
public dateFrom: any = new Date();
@ -48,13 +47,7 @@ export class DetailsComponent implements OnInit {
public timeCardSummaryData: any = [];
public dayHoursData: any = [];
public selectedShift: any;
public rightIconActive = false;
public leftIconActive = false;
public loadMore = false;
public dayAndHoursPageNumber = 1;
public selectedFilters: any = {};
public selectedShiftFilter: any;
public loadMoreDateHoursData = false;
public monthName: any;
public yearDate: any;
public absentDays: number;
@ -64,14 +57,16 @@ export class DetailsComponent implements OnInit {
public arrDaysAttendance: any = [];
public arrDaysAbsent: any = [];
public arrDaysOff: any = [];
public normalDays: any = [];
public monthTitle: string = moment().format('MMMM');
public yearTitle: string;
public isChange = false;
public activeMonth: any;
public currentMonthName = this.getMonthName(new Date().getMonth() + 1);
public showData = false;
public currentYear = new Date().getFullYear();
public attendanceTrackingList: any = [];
public currentDate = new Date();
public dayHoursTypeDetailsList = [];
month: any;
year: any;
preMonth: number;
@ -83,44 +78,7 @@ export class DetailsComponent implements OnInit {
legend: { display: false }
};
public data = {
datasets: [
{
data: [120, 50],
backgroundColor: [
'#22c6b3',
'#094875',
],
borderWidth: 2
}]
};
public filters = [
{
value: 0,
name: 'All',
active: true,
color: '#124375'
},
{
value: 0,
name: 'Present',
active: false,
color: '#18a169'
},
{
value: 0,
name: 'Absent',
active: false,
color: '#38c9b3'
},
{
value: 0,
name: 'Late',
active: false,
color: '#114475'
}
];
public data = {};
public slideOptsOne = {
slidesPerView: 4,
@ -143,15 +101,31 @@ export class DetailsComponent implements OnInit {
public modalController: ModalController,
private location: Location,
public authService: AuthenticationService,
public dashboardService: DashboredService,
) { }
ngOnInit() {
this.intializeMemberDetail();
this.showAttendanceTracking();
}
showAttendanceTracking() {
this.employee = this.common.sharedService.getSharedData(MyTeamService.EMPLOYEE_SHARED_DATA, false);
const request = {
P_SELECTED_EMPLOYEE_NUMBER: this.employee.EMPLOYEE_NUMBER
};
this.dashboardService.getAttendanceTracking(request).subscribe((result: AttendanceTrackingResponse) => {
if (this.common.validResponse(result)) {
const key = 'GetAttendanceTrackingList';
this.attendanceTrackingList = result[key];
}
});
}
public segmentChanged(event: any) {
this.activeSegment = event.detail.value;
if (this.activeSegment === 'Attendance') {
this.normalDays = [];
this.initAttendance();
}
}
@ -188,59 +162,34 @@ export class DetailsComponent implements OnInit {
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_EMPLOYEE_NUMBER = this.employee.EMPLOYEE_NUMBER;
dayAndHoursReqObj.P_MENU_TYPE = 'M';
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)) {
console.log(result.GetDayHoursTypeDetailsList);
this.common.sharedService.setSharedData(result.GetDayHoursTypeDetailsList, 'RTP_IDs');
this.countAllAttendDays(result.GetDayHoursTypeDetailsList);
this.loadMoreDateHoursData = false;
const daysDataLength = result.GetDayHoursTypeDetailsList.length;
this.loadMore = daysDataLength === 10 ? true : false;
if (this.dayAndHoursPageNumber > 1 && daysDataLength !== 0) {
this.rightIconActive = true;
this.dayHoursData = this.dayHoursData.concat(result.GetDayHoursTypeDetailsList);
setTimeout(() => {
this.nextSlide();
}, 1000);
} else if (this.dayAndHoursPageNumber === 1 && daysDataLength <= 10 && daysDataLength !== 0) {
this.rightIconActive = true;
this.dayHoursData = result.GetDayHoursTypeDetailsList;
}
this.dayHoursTypeDetailsList = result.GetDayHoursTypeDetailsList;
}
});
}
nextSlide() {
this.normalDays = [];
if (this.currentMonthName !== this.month) {
this.showData = false;
if (this.nextMonth > 12) {
this.currentYear = this.currentYear + 1;
this.nextMonth = 1;
}
this.currentDate = new Date(this.currentYear, (this.nextMonth - 1), 1);
this.calendarConfig(this.getMonthName(this.nextMonth) , this.currentYear);
this.nextMonth = this.nextMonth + 1;
this.preMonth = this.nextMonth - 2;
@ -248,11 +197,14 @@ export class DetailsComponent implements OnInit {
}
previousSlide() {
this.normalDays = [];
this.showData = false;
if (this.preMonth === 0) {
this.currentYear = this.currentYear - 1;
this.preMonth = 12;
}
this.currentDate = new Date(this.currentYear, (this.preMonth - 1), 1);
console.log(this.currentDate);
this.calendarConfig(this.getMonthName(this.preMonth) , this.currentYear);
this.preMonth = this.preMonth - 1;
this.nextMonth = this.preMonth + 2;
@ -260,74 +212,82 @@ export class DetailsComponent implements OnInit {
changeMonthTitle(title) {
console.log('changeMonthTitle');
this.monthTitle = title;
this.isChange = true;
this.getTimeCardSummaryDetails();
}
changeYear(year) {
console.log('changeYear');
this.yearTitle = year;
}
countAllAttendDays(allDays) {
// tslint:disable-next-line:prefer-for-of
for (let i = 0; i < allDays.length; i++) {
if (allDays[i].DAY_TYPE === 'Off') {
this.arrDaysOff.push({startTime: new Date(allDays[i].SCHEDULE_DATE),
endTime: new Date(allDays[i].SCHEDULE_DATE)});
} else if (allDays[i].DAY_TYPE === 'SCHEDULED') {
this.arrDaysAttendance.push({startTime: new Date(allDays[i].SCHEDULE_DATE),
endTime: new Date(allDays[i].SCHEDULE_DATE)});
} else {
// tslint:disable-next-line: triple-equals
if (allDays[i].ATTENDED_FLAG == 'Y') {
allDays[i].present = true;
allDays[i].absent = false;
allDays[i].daysOff = false;
allDays[i].schedule = false;
this.arrDaysAttendance.push({
startTime: new Date(allDays[i].SCHEDULE_DATE),
endTime: new Date(allDays[i].SCHEDULE_DATE)
});
// tslint:disable-next-line: triple-equals
} else if (allDays[i].ATTENDED_FLAG == 'N' && allDays[i].ABSENT_FLAG == 'Y') {
allDays[i].present = false;
allDays[i].absent = true;
allDays[i].daysOff = false;
allDays[i].schedule = false;
this.arrDaysAbsent.push({
startTime: new Date(allDays[i].SCHEDULE_DATE),
endTime: new Date(allDays[i].SCHEDULE_DATE),
isoTime: '09:00:00',
allDay: false
});
// tslint:disable-next-line: triple-equals
} else if (allDays[i].ATTENDED_FLAG == 'N' && allDays[i].DAY_TYPE === 'OFF') {
allDays[i].present = false;
allDays[i].absent = false;
allDays[i].daysOff = true;
allDays[i].schedule = false;
this.arrDaysOff.push({
startTime: new Date(allDays[i].SCHEDULE_DATE),
endTime: new Date(allDays[i].SCHEDULE_DATE)
});
} else {
allDays[i].present = false;
allDays[i].absent = false;
allDays[i].daysOff = false;
allDays[i].schedule = true;
this.normalDays.push({
startTime: new Date(allDays[i].SCHEDULE_DATE),
endTime: new Date(allDays[i].SCHEDULE_DATE)
});
}
}
this.showData = true;
console.log(this.arrDaysOff);
console.log(this.arrDaysAttendance);
console.log(this.arrDaysAbsent);
console.log(this.normalDays);
}
public getTimeCardSummaryDetails(month?, year?) {
const timeCardSummaryReqObj = new GetTimeCardSummaryRequest();
if (this.isChange) {
this.monthName = month;
this.yearDate = year;
} else {
this.monthName = month;
this.yearDate = year;
}
this.monthName = month;
this.yearDate = year;
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;
timeCardSummaryReqObj.P_SELECTED_EMPLOYEE_NUMBER = this.selEmp;
timeCardSummaryReqObj.P_MENU_TYPE = this.menuType;
timeCardSummaryReqObj.P_SELECTED_EMPLOYEE_NUMBER = this.employee.EMPLOYEE_NUMBER;
timeCardSummaryReqObj.P_MENU_TYPE = 'M';
timeCardSummaryReqObj.P_SELECTED_RESP_ID = this.respID;
timeCardSummaryReqObj.SearchMonth = this.monthName;
timeCardSummaryReqObj.SearchYear = this.yearDate;
if (Object.keys(this.selectedFilters).length !== 0) {
timeCardSummaryReqObj.P_SHT_TYPE = this.selectedShiftFilter;
timeCardSummaryReqObj.P_EXCESS_FLAG = this.selectedFilters['P_EXCESS_FLAG'.toString()].value;
timeCardSummaryReqObj.P_TIMEBACK_FLAG = this.selectedFilters['P_TIMEBACK_FLAG'.toString()].value;
timeCardSummaryReqObj.P_COMP_OFF_FLAG = this.selectedFilters['P_COMP_OFF_FLAG'.toString()].value;
timeCardSummaryReqObj.P_NON_SCHEDULED_FLAG = this.selectedFilters['P_NON_SCHEDULED_FLAG'.toString()].value;
timeCardSummaryReqObj.P_LATE_IN_FLAG = this.selectedFilters['P_LATE_IN_FLAG'.toString()].value;
timeCardSummaryReqObj.P_EARLY_OUT_FLAG = this.selectedFilters['P_EARLY_OUT_FLAG'.toString()].value;
timeCardSummaryReqObj.P_SHORTAGE_FLAG = this.selectedFilters['P_SHORTAGE_FLAG'.toString()].value;
timeCardSummaryReqObj.P_MISSING_SWIPE_FLAG = this.selectedFilters['P_MISSING_SWIPE_FLAG'.toString()].value;
timeCardSummaryReqObj.P_ACTUAL_WOB_SEC = this.selectedFilters['P_ACTUAL_WOB_SEC'.toString()].value;
timeCardSummaryReqObj.P_ANALAYZED_FLAG = this.selectedFilters['P_ANALAYZED_FLAG'.toString()].value;
timeCardSummaryReqObj.P_APPR_TIMEBACK_FLAG = this.selectedFilters['P_APPR_TIMEBACK_FLAG'.toString()].value;
}
this.timeCardService.getTimeCardSummary(timeCardSummaryReqObj).subscribe((result) => {
if (this.common.validResponse(result)) {
@ -335,27 +295,24 @@ export class DetailsComponent implements OnInit {
this.absentDays = this.timeCardSummaryData.ABSENT_DAYS;
this.attendedDays = this.timeCardSummaryData.ATTENDED_DAYS;
this.totalAttendancePrecentage = this.timeCardSummaryData.PERIOD_DAYS - this.timeCardSummaryData.OFF_DAYS;
this.options = {
cutoutPercentage: 80,
tooltips: { enabled: false },
legend: { display: false }
};
if (this.absentDays === 0 && this.attendedDays === 0) {
this.futrueDays = this.totalAttendancePrecentage;
// this.totalAttendancePrecentage = this.timeCardSummaryData.PERIOD_DAYS - this.timeCardSummaryData.OFF_DAYS;
// if (this.absentDays === 0 && this.attendedDays === 0) {
// this.futrueDays = this.totalAttendancePrecentage;
// }
this.totalAttendancePrecentage = this.absentDays + this.attendedDays;
if (this.totalAttendancePrecentage > 0) {
this.data = {
datasets: [
{
data: [this.absentDays, this.attendedDays],
backgroundColor: [
'#094875',
'#22c6b3'
],
borderWidth: 2
}]
};
}
this.data = {
datasets: [
{
data: [this.absentDays, this.attendedDays, this.futrueDays],
backgroundColor: [
'#094875',
'#22c6b3',
'#9e9e9e'
],
borderWidth: 2
}]
};
}
});
}
@ -431,7 +388,6 @@ export class DetailsComponent implements OnInit {
}
searchEmployeeTwo() {
console.log('umar 1999');
this.isSearch = true;
this.empSubordinate = [];
this.getEmpSubordinate('');

@ -3,7 +3,7 @@
<ion-buttons slot="start">
<nav-buttons backLink="/home"></nav-buttons>
</ion-buttons>
<ion-title>MY TEAM</ion-title>
<ion-title>{{ts.trPK('myTeam','myTeam-header')}}</ion-title>
</ion-toolbar>
</ion-header>
@ -11,16 +11,16 @@
<div class="contentBg">
<div class="result-graph">
<div class="request-heading">
<span>Today's Attendance</span>
<span>{{ts.trPK('myTeam','todayAttendance')}}</span>
</div>
<div class="result-text-container">
<h2>43</h2>
<span>TOTAL <br> TEAM MEMBERS</span>
<h2>{{totalEmployees}}</h2>
<span>{{ts.trPK('myTeam','total')}} <br> {{ts.trPK('myTeam','team-members')}}</span>
</div>
<p-chart class="today-graph" type="doughnut" [data]="data" [options]="options"></p-chart>
</div>
</div>
<ion-row class="filters-row">
<!-- <ion-row class="filters-row">
<ion-slides [options]="slideOptsOne">
<ion-slide *ngFor="let filter of filters; let i=index">
<app-card-filter
@ -32,7 +32,7 @@
></app-card-filter>
</ion-slide>
</ion-slides>
</ion-row>
</ion-row> -->
<div style="margin-top: 15px;background: white;border-radius: 100px;overflow: hidden;">
<ion-row no-padding>

@ -26,6 +26,7 @@ export class HomeComponent implements OnInit {
public getEmployeeSubordinatesRequestObject: any;
public selMenu: any;
public selEmpNo: any;
public totalEmployees = 0;
public options = {
cutoutPercentage: 80,
@ -35,41 +36,40 @@ export class HomeComponent implements OnInit {
public data = {
datasets: [
{
data: [30, 30, 40],
data: [100],
backgroundColor: [
'#18a169',
'#38c9b3',
'#114475',
'#22c6b3'
],
borderWidth: 5
}]
};
public filters = [
{
value: 0,
name: 'All',
active: true,
color: '#124375'
},
{
value: 0,
name: 'Present',
active: false,
color: '#18a169'
},
{
value: 0,
name: 'Absent',
active: false,
color: '#38c9b3'
},
{
value: 0,
name: 'Late',
active: false,
color: '#114475'
}
];
// public filters = [
// {
// value: 0,
// name: 'All',
// active: true,
// color: '#124375'
// },
// {
// value: 0,
// name: 'Present',
// active: false,
// color: '#18a169'
// },
// {
// value: 0,
// name: 'Absent',
// active: false,
// color: '#38c9b3'
// },
// {
// value: 0,
// name: 'Late',
// active: false,
// color: '#114475'
// }
// ];
public slideOptsOne = {
slidesPerView: 4,
spaceBetween: 10
@ -96,12 +96,12 @@ export class HomeComponent implements OnInit {
this.setIntitial();
}
activeFilter(index: number) {
this.previousActiveIndex = this.currentActiveIndex;
this.currentActiveIndex = index;
this.filters[this.previousActiveIndex].active = false;
this.filters[this.currentActiveIndex].active = true;
}
// activeFilter(index: number) {
// this.previousActiveIndex = this.currentActiveIndex;
// this.currentActiveIndex = index;
// this.filters[this.previousActiveIndex].active = false;
// this.filters[this.currentActiveIndex].active = true;
// }
goback() {
this.location.back();
@ -146,6 +146,7 @@ export class HomeComponent implements OnInit {
this.getEmployeeSubordinatesRequestObject = body;
this.myTeamService.getEmployeeSubordinates(body).subscribe((result: any) => {
if (this.common.validResponse(result)) {
this.totalEmployees = result.P_NUM_OF_SUBORDINATES;
this.handleEmpResult(result.GetEmployeeSubordinatesList);
}
});

@ -1,125 +1,85 @@
<ion-content class="colorBG">
<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()">
<ion-icon [ngClass]=" currentMonthName === month ? 'disabledArrow' : 'activeArrow'" ios="ios-arrow-dropright-circle" md="md-arrow-dropright-circle"></ion-icon>
</button>
<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>
<div class="header">
<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-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> -->
<ion-col>
<p style="position: absolute; left: 27%; bottom: 0%; font-family: WorkSans-Bold;">{{month}}</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()">
<ion-icon [ngClass]=" currentMonthName === month ? 'disabledArrow' : 'activeArrow'"
ios="ios-arrow-dropright-circle" md="md-arrow-dropright-circle"></ion-icon>
</button>
</ion-col>
</ion-row>
</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>
<ion-slides [options]="slideOptsOne" #slideWithNav (ionSlideDidChange)="SlideDidChange(sliderOne,slideWithNav)">
<ion-slide>
<ion-grid class="headerGrid">
<div style="color: black;">
<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>
</div>
<p-chart class="today-graph" type="doughnut" [data]="data" [options]="options"></p-chart>
</div>
</div> -->
<div style="position: relative;
<div style="position: relative;
left: 74%;
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;
<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: 74%;
bottom: 67px;
color: black;
background-color: #094875;
width: 20%; height: 6px;">
<ion-col>
<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>
</ion-row>
</ion-col>
</div>
</div>
</div>
</ion-grid>
<!-- //////////////////////////////////////// -->
</ion-slide>
</ion-slides>
</div>
@ -128,62 +88,61 @@
<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-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-grid class="labelGrid">
<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>
<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-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-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 >
<div>
<ion-grid class="bodyGrid" *ngIf="showData">
<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>
<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> -->
</ion-content>

@ -30,9 +30,6 @@ export class TimeCardDetailsComponent implements OnInit {
year: any;
preMonth: number;
nextMonth: any;
constructor(
public timeCardService: TimeCardService,
public common: CommonService,
@ -121,25 +118,19 @@ export class TimeCardDetailsComponent implements OnInit {
if (this.activeSegment === 'time-card-details' && this.dayHoursData.length === 0) {
this.getDayHoursTypeDetails();
} else {
this.rightIconActive = true;
this.leftIconActive = false;
}
}
public toggleButton() {
console.log('toggleButton');
this.showMore = !this.showMore;
}
public getDayHoursTypeDetails(month?, year?) {
console.log('getDayHoursTypeDetails');
const dayAndHoursReqObj = new GetDayAndHoursDetailsRequest();
// this.dateFrom = moment(this.dateFrom).format('YYYY-MM-DDTHH:mm:ssZ');
// this.dateTo = moment(this.dateTo).format('YYYY-MM-DDTHH:mm:ssZ');
this.monthName = month; // moment().format('MMMM');
this.yearDate = year; // moment().format('YYYY');
this.monthName = month;
this.yearDate = year;
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);
@ -148,8 +139,6 @@ export class TimeCardDetailsComponent implements OnInit {
dayAndHoursReqObj.P_SELECTED_EMPLOYEE_NUMBER = this.selEmp;
dayAndHoursReqObj.P_MENU_TYPE = this.menuType;
dayAndHoursReqObj.P_SELECTED_RESP_ID = this.respID;
// dayAndHoursReqObj.P_SCHEDULE_DATE_FROM = this.common.convertISODateToJsonDate(this.dateFrom);
// dayAndHoursReqObj.P_SCHEDULE_DATE_TO = this.common.convertISODateToJsonDate(this.dateTo);
dayAndHoursReqObj.SearchMonth = this.monthName;
dayAndHoursReqObj.SearchYear = this.yearDate;
dayAndHoursReqObj.P_PAGE_NUM = this.dayAndHoursPageNumber;
@ -194,28 +183,28 @@ export class TimeCardDetailsComponent implements OnInit {
}
countAllAttendDays(allDays) {
console.log('countAllAttendDays');
// tslint:disable-next-line:prefer-for-of
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)});
this.arrDaysOff.push({
startTime: new Date(allDays[i].SCHEDULE_DATE),
endTime: new Date(allDays[i].SCHEDULE_DATE)
});
} else if (allDays[i].DAY_TYPE === 'SCHEDULED') {
// attendace
this.arrDaysAttendance.push({startTime: new Date(allDays[i].SCHEDULE_DATE),
endTime: new Date(allDays[i].SCHEDULE_DATE)});
this.arrDaysAttendance.push({
startTime: new Date(allDays[i].SCHEDULE_DATE),
endTime: new Date(allDays[i].SCHEDULE_DATE)
});
} else {
// absent
this.arrDaysAbsent.push(
{startTime: new Date(allDays[i].SCHEDULE_DATE),
endTime: new Date(allDays[i].SCHEDULE_DATE),
isoTime: '09:00:00',
allDay: false
}
);
this.arrDaysAbsent.push({
startTime: new Date(allDays[i].SCHEDULE_DATE),
endTime: new Date(allDays[i].SCHEDULE_DATE),
isoTime: '09:00:00',
allDay: false
});
}
}
this.showData = true;
@ -265,11 +254,7 @@ export class TimeCardDetailsComponent implements OnInit {
this.timeCardSummaryData = result.GetTimeCardSummaryList[0];
this.absentDays = this.timeCardSummaryData.ABSENT_DAYS;
// console.log("absent: "+ this.absentDays);
this.attendedDays = this.timeCardSummaryData.ATTENDED_DAYS;
// console.log("attendedDays: "+ this.attendedDays);
this.totalAttendancePrecentage = this.timeCardSummaryData.PERIOD_DAYS - this.timeCardSummaryData.OFF_DAYS;
this.options = {
cutoutPercentage: 80,
@ -324,104 +309,80 @@ export class TimeCardDetailsComponent implements OnInit {
return await modal.present();
}
slideChanged(ev: any) {
console.log('slideChanged');
const prom1 = this.sliderRef.isBeginning();
const prom2 = this.sliderRef.isEnd();
showShiftDetails(origin: string) {
this.sliderRef.getActiveIndex().then((index: number) => {
this.selectedShift = this.dayHoursData[index];
this.selectedShift.origin = origin;
this.sharedData.setSharedData(this.selectedShift, 'selectedShift');
this.common.navigatePage('/time-card/shift-details');
});
}
Promise.all([prom1, prom2]).then((data) => {
data[0] ? this.leftIconActive = false : this.leftIconActive = true;
if (data[1]) {
if (!this.loadMore) {
this.rightIconActive = false;
}
} else {
this.rightIconActive = true;
nextSlide() {
if (this.currentMonthName !== this.month) {
this.showData = false;
if (this.nextMonth > 12) {
this.currentYear = this.currentYear + 1;
this.nextMonth = 1;
}
});
}
showShiftDetails(origin: string) {
this.sliderRef.getActiveIndex().then((index: number) => {
this.selectedShift = this.dayHoursData[index];
this.selectedShift.origin = origin;
this.sharedData.setSharedData(this.selectedShift, 'selectedShift');
this.common.navigatePage('/time-card/shift-details');
});
}
nextSlide() {
if (this.currentMonthName !== this.month) {
this.showData = false;
if (this.nextMonth > 12) {
this.currentYear = this.currentYear + 1;
this.nextMonth = 1;
}
console.log('preMonth: ' + this.nextMonth);
console.log('currentYear: ' + this.currentYear);
this.calendarConfig(this.getMonthName(this.nextMonth) , this.currentYear);
this.nextMonth = this.nextMonth + 1;
this.preMonth = this.nextMonth - 2;
}
this.calendarConfig(this.getMonthName(this.nextMonth) , this.currentYear);
this.nextMonth = this.nextMonth + 1;
this.preMonth = this.nextMonth - 2;
}
}
previousSlide() {
this.showData = false;
if (this.preMonth === 0) {
this.currentYear = this.currentYear - 1;
this.preMonth = 12;
}
console.log('preMonth: ' + this.preMonth);
console.log('currentYear: ' + this.currentYear);
this.calendarConfig(this.getMonthName(this.preMonth) , this.currentYear);
this.preMonth = this.preMonth - 1;
this.nextMonth = this.preMonth + 2;
previousSlide() {
this.showData = false;
if (this.preMonth === 0) {
this.currentYear = this.currentYear - 1;
this.preMonth = 12;
}
this.calendarConfig(this.getMonthName(this.preMonth) , this.currentYear);
this.preMonth = this.preMonth - 1;
this.nextMonth = this.preMonth + 2;
}
changeMonthTitle(title) {
console.log('changeMonthTitle');
changeMonthTitle(title) {
this.monthTitle = title;
this.isChange = true;
this.getTimeCardSummaryDetails();
}
changeYear(year) {
console.log('changeYear');
this.yearTitle = year;
}
}
changeYear(year) {
this.yearTitle = year;
}
getHeaderMonth(date: any) {
return this.getMonthName(date.getMonth() + 1) + ' ' + date.getFullYear();
}
getHeaderMonth(date: any) {
return this.getMonthName(date.getMonth() + 1) + ' ' + date.getFullYear();
}
public getMonthName(value: any): any {
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 getMonthName(value: any): any {
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';
}
}
}
}

@ -1297,6 +1297,38 @@
"requestFor": {
"en": "Request for",
"ar": "اطلب ل"
},
"todayAttendance": {
"en": "Today's Attendance",
"ar": "Today's Attendance"
},
"checkIn": {
"en": "Check-In",
"ar": "CheckIn"
},
"checkOut": {
"en": "Check-Out",
"ar": "CheckOut"
},
"late": {
"en": "Late",
"ar": "Late"
},
"attendance-statistics": {
"en": "Attendance Statistics",
"ar": "Attendance Statistics"
},
"myTeam-header": {
"en": "MY TEAM",
"ar": "MY TEAM"
},
"total": {
"en": "TOTAL",
"ar": "TOTAL"
},
"team-members": {
"en": "TEAM MEMBERS",
"ar": "TEAM MEMBERS"
}
},
"searchForReplacment": {
@ -2222,19 +2254,19 @@
"ar":"TODAY'S TIME LEFT"
},
"shortage-hours":{
"en": "SHORTAGE HOURS",
"en": "Shortage Hours",
"ar":"ساعات التقصير"
},
"schedule":{
"en": "SCHEDULE",
"en": "Schedule",
"ar":"ايام العمل"
},
"off-days":{
"en": "OFF DAYS",
"en": "Off Days",
"ar":"ايام الراحه"
},
"non-analyzed":{
"en": "NON ANALYZED",
"en": "Non Analyzed",
"ar":"لايوجد تحليل"
},
"attendance-statistics":{

@ -1033,14 +1033,6 @@ border:0px
}
.monthview-selected {
background-color: gray !important;
color: #fff !important;
}
.advanced-search-modal {
--height: 12cm !important;
--width: 80% !important;
@ -1057,35 +1049,103 @@ border:0px
}
.monthview-datetable tbody td{
border:0 !important;
}
.monthview-datetable {
*{
font-size: 12px !important;
font-weight: normal !important;
}
thead th {
border:none !important;
color:#888;
}
tbody td{
border:none !important;
line-height: 40px !important;
background: none !important;
padding: 0 !important;
&.text-muted {
visibility: hidden;
}
.monthview-primary-with-event::after, .absent::after, .present::after, .dayoff::after {
content: " ";
width: 80%;
height: 3px;
background: #77cfb8;
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
height: 100%;
color: #fff;
z-index: -1;
border-radius: 50%;
}
.absent::after{
background: #094875;
}
&.monthview-selected {
color: black;
}
&.monthview-selected.present,
&.present {
color:#fff !important;
&:before {
background-color: #22c6b3 !important;
}
}
&.monthview-selected.absent,
&.absent {
color:#fff !important;
&:before {
background-color:#1a586d !important;
}
}
&.monthview-selected.dayoff,
&.dayoff {
color:#555 !important;
&:before {
background-color:#e5e5e5 !important;
}
}
&.monthview-selected.scheduleDay,
&.scheduleDay {
color: #000 !important;
&:before {
background-color: #fff !important;
border: 1px solid #ccc !important;
}
}
.present::after{
background: #77cfb8;
&:before {
content: "";
width: 40px;
height: 40px;
display: block;
border-radius: 100px;
text-align: center;
margin: 9px auto -40px;
}
}
}
.dayoff::after{
background: gray;
.table-bordered{
border:none !important;
}
// .monthview-primary-with-event::after, .absent::after, .present::after, .dayoff::after {
// content: " ";
// width: 80%;
// height: 3px;
// background: #77cfb8;
// position: absolute;
// bottom: 0;
// left: 0;
// right: 0;
// margin: auto;
// height: 100%;
// color: #fff;
// z-index: -1;
// border-radius: 50%;
// }
// .absent::after{
// background: #094875;
// }
// .present::after{
// background: #77cfb8;
// }
// .dayoff::after{
// background: gray;
// }
[dir=ltr] .monthview-container .swiper-slide,

Loading…
Cancel
Save