import { Component, OnInit, Output } 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'; @Component({ selector: 'app-circle-calendar', templateUrl: './circle-calendar.component.html', styleUrls: ['./circle-calendar.component.scss'], }) export class CircleCalendarComponent implements OnInit { eventsdata: any = [{ startTime:new Date(new Date().getTime() +( 60000*60 * 24)), endTime: new Date(new Date().getTime() +( 60000*60 * 24)), isoTime:"09:00:00", allDay: false }]; 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; constructor(public sharedData: SharedDataService, public mod: ModalController) {} ngOnInit() { this.isFirst = false; } getHeaderDay(date: any) { return this.weekDaysEnSort[date.getDay()]; } 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) { 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"); this.dateModal(this.currentDate); }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) { const modal = await this.mod.create({ component: DateInfoModalComponent, showBackdrop: true, backdropDismiss: true, componentProps: { TODAYDATE: todayDate } }); modal.cssClass = "advanced-search-modal"; await modal.present(); } }