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 = []; @Input() normalDays: any = []; @Input() dayHoursTypeDetailsList: any = []; @Input() currentDateParent: string; @Output() monthTitle = new EventEmitter(); @Output() currentYear = new EventEmitter(); 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 = []; eventsdata: any = []; public calendar = { mode: 'month' }; 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; public isFirst = false; public selectedIndexData: any; 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.reRenderCalendar(); console.log(this.currentDateParent); } // tslint:disable-next-line: use-life-cycle-interface ngAfterViewInit() { setTimeout(() => { this.reRenderCalendar(); }, 1000); } reRenderCalendar() { this.renderDate(this.eventsdateAbsent, 'absent'); this.renderDate(this.eventsdateAttend, 'present'); this.renderDate(this.eventsdateDayOff, 'dayoff'); this.renderDate(this.normalDays, 'scheduleDay'); } public async dateModal(shiftDetails) { const modal = await this.mod.create({ component: DateInfoModalComponent, showBackdrop: true, backdropDismiss: true, componentProps: { TODAYDATE: this.selectedIndexData, 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(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; this.timeCardService.getShiftDetail(GetShiftDetailRequestObject).subscribe((result) => { if (this.common.validResponse(result)) { console.log(result); this.shiftDetailsData = result.GetScheduleShiftsDetailsList; this.dateModal(result); } }); } }