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.
209 lines
5.6 KiB
TypeScript
209 lines
5.6 KiB
TypeScript
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();
|
|
}
|
|
|
|
|
|
}
|