143 lines
4.3 KiB
TypeScript
143 lines
4.3 KiB
TypeScript
import { AfterViewInit, Component, effect, ElementRef, inject, OnInit, signal, ViewChild } from '@angular/core';
|
|
import { FullCalendarComponent, FullCalendarModule } from '@fullcalendar/angular';
|
|
import { CalendarOptions, EventInput } from '@fullcalendar/core';
|
|
|
|
import dayGridPlugin from '@fullcalendar/daygrid';
|
|
import timeGridPlugin from '@fullcalendar/timegrid';
|
|
import listPlugin from '@fullcalendar/list';
|
|
import interactionPlugin from '@fullcalendar/interaction';
|
|
import { Modal } from '@rschneider/ng-daisyui';
|
|
import { CreateEventForm } from '../create-event-form/create-event-form';
|
|
import { CalendarService } from '../../services/calendar.service';
|
|
import { CalendarEventDto, EventsInRangeDTO } from '../../models/events-in-range-dto.model';
|
|
import { map } from 'rxjs';
|
|
import { SingleEventDashboard } from './single-event-dashboard/single-event-dashboard';
|
|
import { JsonPipe } from '@angular/common';
|
|
|
|
@Component({
|
|
selector: 'app-calendar-view',
|
|
imports: [FullCalendarModule, Modal, CreateEventForm, SingleEventDashboard, JsonPipe],
|
|
templateUrl: './calendar-view.html',
|
|
styleUrl: './calendar-view.css',
|
|
})
|
|
export class CalendarView implements OnInit, AfterViewInit {
|
|
|
|
@ViewChild('startHour') startHour!: ElementRef;
|
|
@ViewChild('calendar') calendarComponent: FullCalendarComponent | undefined;
|
|
|
|
calendarService = inject(CalendarService);
|
|
|
|
workflow = signal<string>('');
|
|
selectedDate = signal<Date|undefined>(undefined);
|
|
selectedEvent = signal<CalendarEventDto|undefined>(undefined)
|
|
|
|
calendarOptions: CalendarOptions;
|
|
|
|
constructor() {
|
|
|
|
this.calendarOptions = {
|
|
plugins: [dayGridPlugin, timeGridPlugin, listPlugin, interactionPlugin],
|
|
initialView: 'dayGridMonth',
|
|
weekends: true,
|
|
firstDay: 1,
|
|
headerToolbar: {
|
|
left: 'prev,next,today',
|
|
center: 'title',
|
|
right: 'dayGridMonth,dayGridWeek,dayGridDay,timeGridWeek,timeGridDay,listWeek',
|
|
|
|
},
|
|
events: this.fetchEvents.bind(this), // Bind the context
|
|
|
|
eventClick: (info) => {
|
|
this.selectedEvent.set(info.event.extendedProps['event']);
|
|
this.workflow.set('event-dashboard');
|
|
},
|
|
|
|
dateClick: (info) => {
|
|
console.info('create new evet for day ',info);
|
|
this.workflow.set('create');
|
|
this.selectedDate.set(info.date);
|
|
this.selectedEvent.set(undefined);
|
|
},
|
|
|
|
};
|
|
|
|
}
|
|
|
|
fetchEvents(fetchInfo: any, successCallback: (events: EventInput[]) => void, failureCallback: (error: any) => void): void {
|
|
|
|
console.info('fetching events', fetchInfo);
|
|
const start = fetchInfo.start;
|
|
const end = fetchInfo.end;
|
|
// if ( fetchInfo ){
|
|
// console.info("fetchinfo", fetchInfo);
|
|
// successCallback([]);
|
|
// return;
|
|
// }
|
|
this.calendarService.getEventsInRange({
|
|
startTime: start,
|
|
endTime: end,
|
|
})
|
|
.pipe(
|
|
map(value => {
|
|
console.info("vent got" , value );
|
|
const events: EventInput[] = value.map( (model) => {
|
|
const calendarEvent: EventInput = {
|
|
start: new Date(model.startTime),
|
|
// end: model.end_time,
|
|
title: model.title,
|
|
extendedProps: {
|
|
event: model
|
|
}
|
|
};
|
|
if ( model.eventType){
|
|
calendarEvent.borderColor = model.eventType.color;
|
|
}
|
|
// calendarEvent.backgroundColor = "#00ff00"
|
|
return calendarEvent;
|
|
})
|
|
return events;
|
|
}),
|
|
)
|
|
.subscribe({
|
|
next: (events) => {
|
|
console.info("calendar events", events);
|
|
successCallback(events);
|
|
}
|
|
,
|
|
error: (error) => {
|
|
console.error('Error fetching events', error);
|
|
failureCallback(error);
|
|
},
|
|
},
|
|
);
|
|
}
|
|
|
|
ngAfterViewInit(): void {
|
|
|
|
}
|
|
|
|
ngOnInit(): void {
|
|
|
|
}
|
|
|
|
protected addEvent($event: PointerEvent) {
|
|
let hourStr = this.startHour.nativeElement.value;
|
|
const hour = parseInt(hourStr, 10);
|
|
const date = new Date();
|
|
const start = new Date(date.getTime());
|
|
start.setHours(hour, 0, 0);
|
|
const end = new Date(date.getTime());
|
|
// end.setHours(3,0,0)
|
|
|
|
this.calendarComponent?.getApi().addEvent({
|
|
title: 'Event at ' + hour,
|
|
start,
|
|
});
|
|
}
|
|
|
|
closeDialog() {
|
|
this.workflow.set('');
|
|
}
|
|
}
|