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(); console.log("1") } 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'); } 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(); } }