doneit-web/src/app/pages/agenda/agenda.page.ts

import { Component, OnInit, ViewChild, Inject, LOCALE_ID } from '@angular/core';
import { CalendarComponent } from 'ionic2-calendar';
import { AlertController, ModalController } from '@ionic/angular';
import { formatDate } from '@angular/common';
import { CalModalPage } from '../cal-modal/cal-modal.page';
import { EventsService } from 'src/app/services/events.service';
import { Event } from '../../models/event.model';
import { Router, NavigationEnd } from '@angular/router';

@Component({
  selector: 'app-agenda',
  templateUrl: './agenda.page.html',
  styleUrls: ['./agenda.page.scss'],
})
export class AgendaPage implements OnInit {

  /* List of events of our calendar */
  eventSource = [];
  /* The title of the calendar */
  viewTitle: string;

  calendar = {
    /* Se the view of the calendar to a month view */
    mode: 'month',
    currentDate: new Date(),
  };

  selectedDate: Date;

  @ViewChild(CalendarComponent) myCal: CalendarComponent;

  segment:string;
  eventsList: Event[];
  eventsListPessoal: Event[];
  eventsListOficial: Event[];

  showLoader: boolean = true;

  startTime: Date;
  endTime: Date;


  constructor( 
    private alertCtrl: AlertController,
    @Inject(LOCALE_ID) private locale: string,
    private modalCtrl: ModalController,
    private eventService: EventsService,
    private router: Router
    ) {}

  ngOnInit() {
    //Inicializar segment
    this.segment = "Combinada";

    this.router.events.forEach((event) => {
      if(event instanceof NavigationEnd && event.url == this.router.url) {
        this.loading();
      }
    });
  }

  //Go to the next view of the calendar month/week/day
  next(){
    this.myCal.slideNext();
  }
  //Go to the previous view of the calendar
  back(){
    this.myCal.slidePrev();
  }
  //Shows the title of your view
  onViewTitleChanged(title){
    this.viewTitle = title;
  }
  //Show information of the event
  async onEventSelected(ev: { event: Event}){
    this.router.navigate(["/home/events", ev.event.EventId]);
  }

  onRangeChanged (ev: { startTime: Date, endTime: Date }) {
    this.loadRangeEvents(ev.startTime, ev.endTime);
  };

  async openCalModal() {
    const modal = await this.modalCtrl.create({
      component: CalModalPage,
      cssClass: 'cal-modal',
      backdropDismiss: false
    });
    await modal.present();
    modal.onDidDismiss();
    /* this.loading(); */
  }
  
  
  async loadRangeEvents(startTime: Date, endTime: Date){
    this.showLoader = true;
    switch (this.segment)
    {
      case "Combinada":
        //Inicializa o array eventSource
        this.eventSource=[];
        this.eventService.getAllEvents(formatDate(startTime, 'yyyy-MM-dd HH:mm:ss', 'pt'), formatDate(endTime, 'yyyy-MM-dd HH:mm:ss', 'pt')).subscribe(
        response => {
          this.eventsList = response;
          this.eventsList.forEach(element => {
            this.eventSource.push({
              title: element.Subject,
              startTime: new Date(element.StartDate),
              endTime: new Date(element.EndDate),
              allDay: false,
              event: element
            });
            this.loading();
          });
        }
      );
      break;

      case "Pessoal":
        //Inicializa o array eventSource
        this.eventSource=[];
        this.eventService.getEvents(this.segment, formatDate(startTime, 'yyyy-MM-dd HH:mm:ss', 'pt'), formatDate(endTime, 'yyyy-MM-dd HH:mm:ss', 'pt')).subscribe(
          response => {
            this.eventsListPessoal = response;
            this.eventsListPessoal.forEach(element => {
              this.eventSource.push({
                title: element.Subject,
                startTime: new Date(element.StartDate),
                endTime: new Date(element.EndDate),
                allDay: false,
                event: element
              });
              this.loading();
            });
          }
        );
        break;
      
      case "Oficial":
        //Inicializa o array eventSource
        this.eventSource=[];
        this.eventService.getEvents(this.segment, formatDate(startTime, 'yyyy-MM-dd HH:mm:ss', 'pt'), formatDate(endTime, 'yyyy-MM-dd HH:mm:ss', 'pt')).subscribe(
          response => {
            this.eventsListOficial = response;
            this.eventsListOficial.forEach(element => {
              this.eventSource.push({
                title: element.Subject,
                startTime: new Date(element.StartDate),
                endTime: new Date(element.EndDate),
                allDay: false,
                event: element
              });
              this.loading();
            });
          }
        );
        break;
    } 
    this.showLoader = false;
  }

  RefreshEvents(ev: { startTime: Date, endTime: Date }){
    this.loadRangeEvents(ev.startTime, ev.endTime);
  }
  
  loading(){
    this.myCal.loadEvents();
  } 

  doRefresh(ev){
    this.loading();

    setTimeout(() => {
      ev.target.complete();
    }, 2000);
  }

}