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 { IonSlides } from '@ionic/angular'; import { CommonService } from 'src/app/hmg-common/services/common/common.service'; @Component({ selector: 'app-date-info-modal', templateUrl: './date-info-modal.component.html', styleUrls: ['./date-info-modal.component.scss'], }) export class DateInfoModalComponent implements OnInit { @ViewChild('slides') slides: IonSlides; [x: string]: any; gaugeType = 'full'; gaugeValue = 28.3; gaugeLabel = 'Days'; @Input() TODAYDATE: any; @Input() SHIFTDETAILS: any; today: 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; year: any; nameMonth: any; nameDay: any; public weekDaysEn = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']; public weekDaysAr = ['الاحد', 'الاثنين', 'الثلاثاء', 'الاربعاء', 'الخميس', 'الجمعه', 'السبت']; public direction: string; 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, public common: CommonService ) { this.direction = TranslatorService.getCurrentDirection(); } ngOnInit() { console.log(this.TODAYDATE); this.excess = this.TODAYDATE.EXCESS_HRS; this.lateIn = this.TODAYDATE.LATE_IN_HRS; this.shortage = this.TODAYDATE.SHORTAGE_HRS; this.earlyOut = this.TODAYDATE.EARLY_OUT_HRS ; this.scheduleDate = this.TODAYDATE.SCHEDULE_DATE; this.assignData(this.SHIFTDETAILS.GetScheduleShiftsDetailsList[0]); } assignData(shiftDetails) { this.scheduled = shiftDetails.SHT_TYPE_DESC; this.shiftTime = shiftDetails.SHT_NAME; this.actualCheckIn = shiftDetails.SHT_ACTUAL_START_TIME; this.actualCheckOut = shiftDetails.SHT_ACTUAL_END_TIME; this.approvedCheckIn = shiftDetails.APPROVED_START_TIME; this.approvedCheckOut = shiftDetails.APPROVED_END_TIME; this.percentage = shiftDetails.PERCENTAGE; this.percChart = this.percentage.substring(0, this.percentage.indexOf('%')); // const test = this.scheduleDate; const splitdate = this.scheduleDate.split(' '); const date = splitdate[0]; const localDate = date.split('/'); this.day = localDate[1]; this.year = localDate[2]; // tslint:disable-next-line: radix this.month = parseInt(localDate[0]) + 1; this.nameMonth = this.direction === 'ltr' ? this.common.getMonthName(this.month) : this.common.getMonthNameAr(this.month); this.nameDay = this.getHeaderDay(new Date(date)); const d = new Date(date); this.data = { labels: ['percentage'], datasets: [ { data: [this.percChart], backgroundColor: [ '#094875' ], borderWidth: 2 }] }; } slideChanged(ev) { this.slides.getActiveIndex().then(index => { const shiftDetails = this.SHIFTDETAILS.GetScheduleShiftsDetailsList[index]; this.assignData(shiftDetails); }); } getHeaderDay(date: any) { if (this.direction === 'ltr') { return this.weekDaysEn[date.getDay()]; } else { return this.weekDaysAr[date.getDay()]; } } }