import { Component, OnInit, ViewChild, Input } 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 { ModalController, IonSlides } from '@ionic/angular'; import { SelectPeriodComponent } from '../select-period/select-period.component'; 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 { MenuResponse } from 'src/app/hmg-common/services/menu/models/menu-response'; import * as moment from 'moment'; import { TranslatorService } from 'src/app/hmg-common/services/translator/translator.service'; @Component({ selector: 'app-time-card-details', templateUrl: './time-card-details.component.html', styleUrls: ['./time-card-details.component.scss'], }) export class TimeCardDetailsComponent implements OnInit { slideView: any; sliderOne: any; month: any; year: any; preMonth: number; nextMonth: any; constructor( public timeCardService: TimeCardService, public common: CommonService, public modalController: ModalController, public sharedData: SharedDataService, public ts: TranslatorService ) { } public showMore: any = true; public menuType: any; public selEmp: string; public dateFrom: any = new Date(); public dateTo: any = new Date(); public selMenu: MenuResponse = new MenuResponse(); public respID: number; 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; public attendedDays: number; public futrueDays = 0; public totalAttendancePrecentage = 0; public arrDaysAttendance: any = []; public arrDaysAbsent: any = []; public arrDaysOff: 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 dayHoursTypeDetailsList = []; public normalDays: any = []; public currentDate = new Date(); public options = { cutoutPercentage: 80, tooltips: { enabled: false }, legend: { display: false } }; public data = {}; ngOnInit() { this.showData = false; this.nextMonth = new Date().getMonth() + 2; this.preMonth = new Date().getMonth(); this.calendarConfig(this.getMonthName(new Date().getMonth() + 1) , new Date().getFullYear()); } calendarConfig(month?, year?) { this.arrDaysOff = []; this.arrDaysAttendance = []; this.arrDaysAbsent = []; this.month = month; this.year = year; this.getTimeCardSummaryDetails(month, year); this.getDayHoursTypeDetails(month, year); } public getDayHoursTypeDetails(month?, year?) { console.log('getDayHoursTypeDetails'); const dayAndHoursReqObj = new GetDayAndHoursDetailsRequest(); 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; 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; 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.dayHoursTypeDetailsList = result.GetDayHoursTypeDetailsList; } }); } countAllAttendDays(allDays) { // tslint:disable-next-line:prefer-for-of for (let i = 0; i < allDays.length; i++) { // 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; } public getTimeCardSummaryDetails(month?, year?) { const timeCardSummaryReqObj = new GetTimeCardSummaryRequest(); 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_RESP_ID = this.respID; timeCardSummaryReqObj.SearchMonth = this.monthName; timeCardSummaryReqObj.SearchYear = this.yearDate; this.timeCardService.getTimeCardSummary(timeCardSummaryReqObj).subscribe((result) => { if (this.common.validResponse(result)) { this.timeCardSummaryData = result.GetTimeCardSummaryList[0]; this.absentDays = this.timeCardSummaryData.ABSENT_DAYS; this.attendedDays = this.timeCardSummaryData.ATTENDED_DAYS; // 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 }] }; } } }); } 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; } } 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; } changeMonthTitle(title) { this.monthTitle = title; this.getTimeCardSummaryDetails(); } changeYear(year) { this.yearTitle = year; } 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'; } } }