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.
mohemmionic5/Mohem/src/app/hmg-common/ui/circle-calendar/circle-calendar.component.ts

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();
}
}