You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
150 lines
5.1 KiB
TypeScript
150 lines
5.1 KiB
TypeScript
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);
|
|
}
|
|
});
|
|
}
|
|
}
|