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';
import { AlertService } from 'src/app/services/alert.service';
import { NewEventPage } from './new-event/new-event.page';
import { ViewEventPage } from './view-event/view-event.page';

// showTimeline
import { setHours, setMinutes } from 'date-fns';
import {
  CalendarDateFormatter,
  CalendarEvent,
  CalendarView,
  DAYS_OF_WEEK,
} from 'angular-calendar';
import { CustomDateFormatter } from './custom-date-formatter.provider';
import { ApproveEventModalPage } from './approve-event-modal/approve-event-modal.page';
import { EventListPage } from '../gabinete-digital/event-list/event-list.page';

@Component({
  selector: 'app-agenda',
  templateUrl: './agenda.page.html',
  styleUrls: ['./agenda.page.scss'],
  providers: [
    {
      provide: CalendarDateFormatter,
      useClass: CustomDateFormatter,
    },
  ],
})
export class AgendaPage implements OnInit {
  
  view: CalendarView = CalendarView.Day;

  viewDate: Date = new Date();

  weekStartsOn: number = DAYS_OF_WEEK.MONDAY;

  weekendDays: number[] = [DAYS_OF_WEEK.FRIDAY, DAYS_OF_WEEK.SATURDAY];

  CalendarView = CalendarView;

  timelineDate: string;

  setView(view: CalendarView) {
    this.view = view;
  }

  monthList = [
    { name: 'Janeiro', id: 'Jan' },
    { name: 'Fevereiro', id: 'Feb' },
    { name: 'Março', id: 'Mar' },
    { name: 'Abril', id: 'Apr' },
    { name: 'Maio', id: 'May' },
    { name: 'Junho', id: 'June' },
    { name: 'Julho', id: 'July' },
    { name: 'Agosto', id: 'Aug' },
    { name: 'Setembro', id: 'Sept' },
    { name: 'Outubro', id: 'Oct' },
    { name: 'Novembro', id: 'Nov' },
    { name: 'Dezembro', id: 'Dec' }
  ]

  showTimeline: boolean= false;
  
  // for timeline
  events: CalendarEvent[] = [];
  // timeline filter
  timelineFilterState: string = 'Todos';
  showTimelineFilterState: boolean= false;
  
  /* 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;
  eventSelectedDate: Date = new Date();
  eventSelectedDate2: Date;
  rangeStartDate: Date;
  rangeEndDate: Date;

  @ViewChild(CalendarComponent) myCal: CalendarComponent;

  segment:string;
  profile:string;

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

  prEventList: Event[];
  mdEventList: Event[];

  showLoader: boolean;

  startTime: Date;
  endTime: Date;



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

      // timeline inicial date
      this.timelineDate = formatDate(new Date,'dd MMMM yyyy', 'pt');


      function setCookie(cname, cvalue, exdays) {
        var d = new Date();
        d.setTime(d.getTime() + (exdays*24*60*60*1000));
        var expires = "expires="+ d.toUTCString();
        document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
      }

      //  AccoesPresidenciais =  Correspondencia = 0
      setCookie('searchModalAPPType','0', 99999999);

      this.showLoader = false;

    }

  ngOnInit() {
    this.profile = "mdgpr";
    //Inicializar segment
   /*  localStorage.setItem('test', this.eventSelectedDate.toString()); */

    this.router.events.forEach((event) => {
      if(event instanceof NavigationEnd && event.url == "/home/agenda") {
        if (this.segment == null)
        {
          this.segment = "Combinada";
        }
        else
        {
          this.loadRangeEvents(this.rangeStartDate, this.rangeEndDate);
        }
      }
    });


  }

  //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 for timeline
  eventClicked({ event }: { event: CalendarEvent }): void {
    console.log('Event clicked', event);
    
    this.eventSelectedDate =  event.start;
    this.viewEventDetail(event.id);
    /* this.router.navigate(["/home/agenda", event.id, 'agenda']); */
  }

  //Show information of the event
  async onEventSelected(ev: { event: Event}){
    this.viewEventDetail(ev.event.EventId);
   /*  this.router.navigate(["/home/agenda", ev.event.EventId, 'agenda']); */
  }

  onCurrentChanged = (ev: Date) => {
    // timeline change date
    this.timelineDate = formatDate(ev,'dd MMMM yyyy', 'pt');
    this.viewDate = new Date(formatDate(ev,'yyyy-MM-dd', 'pt'));
    // calendar change date
    this.eventSelectedDate = new Date(ev);

    this.centralizeTimeline(500);
    this.timelineBoxCorrectHeight(500);
  };

  // changedate
  dropDownChangeDate(id: string){
    const currentCandarDayYear = formatDate(this.eventSelectedDate,'dd -- yyyy', 'pt');
    const newDate = new Date(currentCandarDayYear.replace('--',id));
    this.onCurrentChanged(newDate);
  }

  /* onTimeSelected = (ev: { selectedTime: Date, events: any[] }) => {
        console.log('Selected time: ' + ev.selectedTime + ', hasEvents: ' + (ev.events !== undefined && ev.events.length !== 0));
        this.eventSelectedDate2 = ev.selectedTime;
    }; */

  onRangeChanged (ev: { startTime: Date, endTime: Date }) {
    this.rangeStartDate = ev.startTime;
    this.rangeEndDate = ev.endTime;

    this.loadRangeEvents(this.rangeStartDate, this.rangeEndDate);
  };

  async openCalModal() {
    const modal = await this.modalCtrl.create({
      component: CalModalPage,
      componentProps:{
        segment: this.segment,
        profile: this.profile,
        eventSelectedDate: this.eventSelectedDate,
      },
      cssClass: 'cal-modal',
      backdropDismiss: false
    });

    await modal.present();

    modal.onDidDismiss().then((data) => {
      let postEvent: Event = data['data'];
      if (postEvent.Subject != null)
      {
        this.eventSource.push({
          title: postEvent.Subject,
          startTime: new Date(postEvent.StartDate),
          endTime: new Date(postEvent.EndDate),
          allDay: false,
          event: postEvent
        });

        this.myCal.update();
        this.myCal.loadEvents();
        this.loadRangeEvents(this.rangeStartDate, this.rangeEndDate);
      }
    });
  }


  // for calendar
  currentDayEventDisplayBorder(day: any, id: any){

    const events = day[id].events;
    if (events.length == 0) {
      return "";
    } else if (events.length >= 1) {
      
      /** @description store all event type */
      let eventType = {};
      let eventTypeNum: number;

      events.forEach(element => {
        eventType[element.calendarName] = 1;
      });

      eventTypeNum = (Object.keys(eventType)).length

      if (eventTypeNum == 2) { 
        return ` calendar-event-border calendar-${this.profile}-event-type-both`;
      } else {
        return ` calendar-event-border calendar-${this.profile}-event-type-`+(Object.keys(eventType))[0];
      }
    }

    return "";
  }

  // for timeline
  centralizeTimeline(timeout: number) {
    // auto scroll timeline
    setTimeout(() => {
      const timelineMarker = document.querySelector('.cal-current-time-marker');
      const timelineContainer = document.querySelectorAll('ion-content')[2];
      const shadowRoot = timelineContainer.shadowRoot;

      const scrollContainer = shadowRoot.querySelector('main');

      scrollContainer.scrollTop = timelineMarker['offsetTop'] - ((scrollContainer.offsetHeight/2) - 60);
      
    }, timeout);
  }

  // for timeline
  timelineIsCurrentDate(): Boolean {
    return formatDate(new Date(),'dd MMMM yyyy', 'pt') == formatDate(this.eventSelectedDate,'dd MMMM yyyy', 'pt');
  }

  // for timeline
  timeLineTemplate(startTime: string, eventlocation: string, eventDiscription: any, calendarName: string, subject: string, startTimeWisthS: string, endTime: string, eventIndex: number): string{
    
    const startHours = parseInt(startTimeWisthS.split(':')[0]);
    const startMinutos = parseInt(startTimeWisthS.split(':')[1]);

    const endHours =  parseInt(endTime.split(':')[0]);
    const endMinutos = parseInt(endTime.split(':')[1]);

    let top = '0';
    
    if(startHours < endHours){
      if (startMinutos != 0 ){
        top = `${ Math.abs((startMinutos - 60)) }`
      }
    }

    return `
      <div class="timeline-box timeline-box-event-${eventIndex} timeline-${this.profile}-box-${calendarName} calendar-top${top}">
        <div>
          <span class="timeline-start-time">${startTimeWisthS}</span><span class="timeline-location">${eventlocation}</span>
        </div>
        <div class="timeline-event-discription">
          ${subject}
        </div>
      </div>
    `
  }

  // for timeline
  timelineBoxCorrectHeight(timeout){

    setTimeout(()=>{
      this.eventSource.forEach((el, eventIndex)=>{ 

        const startEvent =  new Date(el.startTime);
        const endEvent = new Date(el.endTime);

        var minutes = ((endEvent.getTime() - startEvent.getTime()) / 1000) / 60;
        const top = (startEvent.getTime() - (new Date(2020, 1, 3)).getTime()) /60;
        
        document.querySelectorAll('.timeline-box').forEach(ele => {
          
          if(ele.className.indexOf(`timeline-box-event-${eventIndex}`)>=0){
            ele.setAttribute('style',`height:${minutes}px`);
          }
        });

      });
    },timeout)
  }

  // for timeline

  timelineFilter(calendarName){

    this.timelineFilterState = calendarName;

    // remove all event
    this.events = [];

    this.eventsList.forEach((element, eventIndex) => {
      
      // timeline start
      const startHours =  formatDate(new Date(element.StartDate), 'HH', 'pt');
      const EndHours = formatDate(new Date(element.EndDate), 'HH', 'pt');

      const startHoursOtherFormate =  formatDate(new Date(element.StartDate), 'HH:mm', 'pt');
      const EndHoursOtherFormate = formatDate(new Date(element.EndDate), 'HH:mm', 'pt');

      if (element.CalendarName == calendarName) {
        this.events.push({
          title: this.timeLineTemplate(startHours, element.Location, element.Body, element.CalendarName, element.Subject,startHoursOtherFormate,EndHoursOtherFormate, eventIndex),
          start: setHours(setMinutes(new Date(element.StartDate), 0), parseInt(startHours)),
          end: setHours(setMinutes(new Date(element.EndDate), 0), parseInt(EndHours)),
          color: {
            primary: 'white',
            secondary: 'white'
          },
          id: element.EventId
        });
      } else if (calendarName == 'Todos'){
        this.events.push({
          title: this.timeLineTemplate(startHours, element.Location, element.Body, element.CalendarName, element.Subject,startHoursOtherFormate,EndHoursOtherFormate, eventIndex),
          start: setHours(setMinutes(new Date(element.StartDate), 0), parseInt(startHours)),
          end: setHours(setMinutes(new Date(element.EndDate), 0), parseInt(EndHours)),
          color: {
            primary: 'white',
            secondary: 'white'
          },
          id: element.EventId
        });
      }
      
    });

    this.onCurrentChanged(this.eventSelectedDate);
    //
    this.showTimelineFilterState = false;
  }
  
  loadRangeEvents(startTime: Date, endTime: Date){

    this.showTimeline = false;
    this.showLoader = true;

    switch (this.segment)
    {
      case "Combinada":
        //Inicializa o array eventSource
        this.eventSource=[];
        
        
        if(this.profile == "mdgpr"){
           this.eventService.getAllMdEvents(formatDate(startTime, 'yyyy-MM-dd', 'pt'), formatDate(endTime, 'yyyy-MM-dd', 'pt')).subscribe(
            response => {
              this.eventsList = response;
              // loop
              this.eventsList.forEach((element, eventIndex) => {

                this.eventSource.push({
                  title: element.Subject,
                  startTime: new Date(element.StartDate),
                  endTime: new Date(element.EndDate),
                  allDay: false,
                  event: element,
                  calendarName: element.CalendarName
                });
              });

              this.timelineFilter(this.timelineFilterState);
              
              this.myCal.update();
              this.myCal.loadEvents();

              this.showLoader = false;
              this.showTimeline = true;

              this.timelineBoxCorrectHeight(500);
              this.centralizeTimeline(500);
             
            });
    
        }
        else{
          this.eventService.getAllPrEvents(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, eventIndex) => {
                this.eventSource.push({
                  title: element.Subject,
                  startTime: new Date(element.StartDate),
                  endTime: new Date(element.EndDate),
                  allDay: false,
                  event: element,
                  calendarName: element.CalendarName
                });

              });

              this.timelineFilter(this.timelineFilterState);

              this.myCal.update();
              this.myCal.loadEvents();
              this.showLoader = false;
              this.showTimeline = true;

              this.timelineBoxCorrectHeight(500);
              this.centralizeTimeline(500);

            });
        }
      break;

      case "Pessoal":
        //Inicializa o array eventSource
        this.eventSource=[];
        if(this.profile == "mdgpr"){
          this.eventService.getAllMdEvents(formatDate(startTime, 'yyyy-MM-dd HH:mm:ss', 'pt'), formatDate(endTime, 'yyyy-MM-dd HH:mm:ss', 'pt')).subscribe(response => {
              this.eventsListPessoal = response.filter(data => data.CalendarName == "Pessoal");
              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.myCal.update();
              this.myCal.loadEvents();
              this.showLoader = false;
            });
        }
        else{
          this.eventService.getAllPrEvents(formatDate(startTime, 'yyyy-MM-dd HH:mm:ss', 'pt'), formatDate(endTime, 'yyyy-MM-dd HH:mm:ss', 'pt')).subscribe(response => {
            this.eventsListPessoal = response.filter(data => data.CalendarName == "Pessoal");
            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.myCal.update();
            this.myCal.loadEvents();
            this.showLoader = false;
          });
        }
        break;

      case "Oficial":
        //Inicializa o array eventSource
        this.eventSource=[];
        if(this.profile == "mdgpr"){
          this.eventService.getAllMdEvents(formatDate(startTime, 'yyyy-MM-dd HH:mm:ss', 'pt'), formatDate(endTime, 'yyyy-MM-dd HH:mm:ss', 'pt')).subscribe(res => {
              this.eventsListOficial = res.filter(data => data.CalendarName == "Oficial");
              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.myCal.update();
              this.myCal.loadEvents();
              this.showLoader = false;
            });
        }else{
          this.eventService.getAllPrEvents(formatDate(startTime, 'yyyy-MM-dd HH:mm:ss', 'pt'), formatDate(endTime, 'yyyy-MM-dd HH:mm:ss', 'pt')).subscribe(res => {
            this.eventsListOficial = res.filter(data => data.CalendarName == "Oficial");
            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.myCal.update();
            this.myCal.loadEvents();
            this.showLoader = false;
          });
        }
        break;

    } 
  }

  actions(){

  } 

  doRefresh(ev: any){
    this.loadRangeEvents(this.rangeStartDate, this.rangeEndDate);
    setTimeout(() => {
      ev.target.complete();
    }, 250)
  }
  showAlert(){
    this.alertCrontroller.presentAlert("Funcionalidade em desenvolvimento.");
  }
  changeProfile(){

    if(this.profile == "mdgpr"){
      console.log('pr');
      this.profile ="pr";
      this.loadRangeEvents(this.rangeStartDate, this.rangeEndDate);
    }
    else{
      console.log('mdgpr');
      this.profile ="mdgpr";
      this.loadRangeEvents(this.rangeStartDate, this.rangeEndDate);
    }

    // change header profile picture
    window['header'](this.profile);

  }

  async openAddEvent() {
    const modal = await this.modalCtrl.create({
      component: NewEventPage,
      componentProps:{
        segment: this.segment,
        profile: this.profile,
        eventSelectedDate: this.eventSelectedDate
      },
      cssClass: 'modal',
      backdropDismiss: false
    });
    await modal.present();
    modal.onDidDismiss().then((data) => {
      let postEvent: Event = data['data'];
      if (postEvent.Subject != null)
      {
        this.eventSource.push({
          title: postEvent.Subject,
          startTime: new Date(postEvent.StartDate),
          endTime: new Date(postEvent.EndDate),
          allDay: false,
          event: postEvent
        });
        this.myCal.update();
        this.myCal.loadEvents();
        this.loadRangeEvents(this.rangeStartDate, this.rangeEndDate);
      }
    });
  }

  async viewEventDetail(eventId:any) {
    console.log(this.profile);
    
    const modal = await this.modalCtrl.create({
      component: ViewEventPage,
      componentProps:{
        eventId: eventId
      },
      cssClass: 'modal',
      backdropDismiss: false
    });
    await modal.present();
    modal.onDidDismiss().then((res)=>{
      if(res){
        console.log(res);
        this.loadRangeEvents(this.rangeStartDate, this.rangeEndDate);
      }
    });
  }

  async viewEventsToApprove(){
    const modal = await this.modalCtrl.create({
      component: EventListPage,
      componentProps:{
      },
      cssClass: 'modal',
      backdropDismiss: false
    });
    await modal.present();
    modal.onDidDismiss();
  } 
}