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'; @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; tests: any; year: any; nameMonth: any; nameDay: any; public weekDaysEn = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']; 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 ) { } 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.scheduled = this.TODAYDATE.SCHEDULED_HRS; this.earlyOut = this.TODAYDATE.EARLY_OUT_HRS ; this.scheduleDate = this.TODAYDATE.SCHEDULE_DATE; this.assignData(this.SHIFTDETAILS.GetScheduleShiftsDetailsList[0]); } assignData(shiftDetails) { this.shiftTime = shiftDetails.SHT_NAME; this.startDate = shiftDetails.SHT_ACTUAL_START_TIME; this.endDate = shiftDetails.SHT_ACTUAL_END_TIME; this.percentage = shiftDetails.PERCENTAGE; this.percChart = this.percentage.substring(0, this.percentage.indexOf('%')); const test = this.scheduleDate; const splitdate = test.split(' '); const date = splitdate[0]; const test1 = date.split('/'); this.day = test1[1]; this.year = test1[2]; this.month = test1[0]; // tslint:disable-next-line: radix this.nameMonth = this.getMonthName(parseInt(this.month)); this.nameDay = this.getHeaderDay(new Date(date)); const d = new Date(date); this.data = { labels: ['percentage'], datasets: [ { data: [this.percChart], backgroundColor: [ '#22C6B3' ], borderWidth: 2 }] }; } slideChanged(ev) { this.slides.getActiveIndex().then(index => { const shiftDetails = this.SHIFTDETAILS[index]; this.assignData(shiftDetails); }); } public getMonthName(value: number): string { switch (value) { case 1: return 'Jan'; case 2: return 'Feb'; case 3: return 'Mar'; case 4: return 'Apr'; case 5: return 'May'; case 6: return 'Jun'; case 7: return 'Jul'; case 8: return 'Aug'; case 9: return 'Sep'; case 10: return 'Oct'; case 11: return 'Nov'; case 12: return 'Dec'; } } getHeaderDay(date: any) { return this.weekDaysEn[date.getDay()]; } }