Merge branch 'feature/calendar' into feature/chat

2026-04-18 20:47:54 +00:00 · 2021-03-25 10:10:12 +01:00
parent a34d2b341e 5194ff69b5
commit 314400e04d
24 changed files with 539 additions and 322 deletions
@@ -6,7 +6,7 @@

  <div class="d-flex bg-blue container-wrapper">
    
-    <div class="calendar-timeline bg-blue">
+    <div class="calendar-timeline d-flex flex-column height-100 bg-blue">
      <div class="calendar-wrapper">
        
        <div class="main-content">
@@ -42,8 +42,8 @@
      
                </ion-row>
                <ion-row class="ion-align-items-center">
-                  <ion-icon  *ngIf="profile == 'mdgpr' " (click)="changeProfile()" class="right-icons" src="assets/images/icons-profile-calendar-md.svg"></ion-icon>
-                  <ion-icon *ngIf="profile == 'pr' " (click)="changeProfile()" class="right-icons" src="assets/images/icons-profile-calendar-pr.svg"></ion-icon>
+                  <ion-icon  *ngIf="profile == 'mdgpr' " (click)="changeProfile()" class="right-icons d-md-none" src="assets/images/icons-profile-calendar-md.svg"></ion-icon>
+                  <ion-icon *ngIf="profile == 'pr' " (click)="changeProfile()" class="right-icons d-md-none" src="assets/images/icons-profile-calendar-pr.svg"></ion-icon>
                  <ion-icon (click)="viewEventsToApprove()" class="right-icons" src="assets/images/icons-received-event.svg"></ion-icon>
                  <ion-icon (click)="openAddEvent()" class="right-icons" src="assets/images/icons-add-new-event.svg" ></ion-icon>
                </ion-row> 
@@ -83,11 +83,12 @@
      
              <!-- Adding a customized ng-template -->
              <ng-template #template let-view="view" let-row="row" let-col="col">
-                <div [className]="currentDayEventDisplayBorder(view.dates, row*7+col)" [class.with-event]="view.dates[row*7+col].events.length">
-                  {{ view.dates[row*7+col].label }} 
-                  <div class="indicator-container">
-                    <!-- <div class="event-indicator" *ngFor="let e of view.dates[row*7+col].events"></div> -->
-                  </div>
+                <div [className]="currentDayEventDisplayBorder(view.dates, row*7+col)" class="d-flex justify-center align-center" [class.with-event]="view.dates[row*7+col].events.length">
+                   
+                  <div class="day">
+                    {{ view.dates[row*7+col].label }}
+                  </div>  
+                   
                </div>
              </ng-template>
            </div>
@@ -230,10 +231,10 @@
      
      
          <!-- Calendar currente date -->
-          <ion-row class="timeline-header ion-justify-content-between ion-align-items-center currente-date-timelien">
+          <ion-row class="timeline-header ion-justify-content-between ion-align-items-center currente-date-timelien pb-5">
            <ion-row class="timeline-date align-center">
              <ion-icon *ngIf="showCalendar" (click)="calendarHeight='75px';showCalendar=false" class="collaps" src="assets/images/icons-collaps-up.svg" ></ion-icon>
-              <ion-icon *ngIf="!showCalendar" (click)="calendarHeight='430.5px';showCalendar=true" class="collaps" src="assets/images/icons-collaps-down.svg" ></ion-icon>
+              <ion-icon *ngIf="!showCalendar" (click)="calendarHeight='333px';showCalendar=true" class="collaps" src="assets/images/icons-collaps-down.svg" ></ion-icon>
            </ion-row>
            <ion-row class="timeline-date align-center">
              <span *ngIf="timelineIsCurrentDate()">Hoje, &nbsp;</span> {{ timelineDate }}
@@ -250,11 +251,23 @@
              </ul>
            </ion-row>
          </ion-row>
+          
+          <div class="pb-5  d-none d-md-flex">
+            <div class="flex-grow-1 text-grey d-flex justify-center align-center">
+              <div>Prória</div>
+            </div>
+            <div class="flex-grow-1 text-black">
+              <div class="flex-grow-1 text-grey d-flex justify-center align-center">
+                <div>Presidente da Republica</div>
+              </div>
+            </div>
+          </div>
+
        </div>
        </div>

      </div>
-      <div class="timeline-wrapper"  [style.height]="sanitizer.bypassSecurityTrustStyle('calc(100% - ('+calendarHeight+' + 84.5px))')" >
+      <div class="timeline-wrapper flex-grow-1" >
          <!-- Progress bar -->
        <ion-refresher  name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
          <ion-refresher-content>
@@ -262,24 +275,44 @@
        </ion-refresher>

        <!-- Timeline -->
-        <div class="timeline-container"  *ngIf="showTimeline">
-          <mwl-demo-utils-calendar-header class="timeline" 
-            [(view)]="view" 
-            [(viewDate)]="viewDate"
-            [dayStartHour]="0"
-            [dayEndHour]="23">
-          </mwl-demo-utils-calendar-header>
-          
-          <div [ngSwitch]="view">
-            <mwl-calendar-day-view
-              *ngSwitchCase="'day'"
-              [viewDate]="viewDate"
-              [events]="events"
-              (eventClicked)="eventClicked($event)"
-            >
-            </mwl-calendar-day-view>
+        <div>
+          <div class="timeline-container d-flex" >
+            
+            <div [ngSwitch]="view" class="fs-timeline timeline-mobile flex-grow-1  d-md-none" *ngIf="showTimeline">
+              <mwl-calendar-day-view
+                *ngSwitchCase="'day'"
+                [viewDate]="viewDate"
+                [events]="events"
+                (eventClicked)="eventClicked($event)"
+              >
+              </mwl-calendar-day-view>
+            </div>
+  
+            <div [ngSwitch]="view" class="fs-timeline flex-grow-1 d-none d-md-block"
+              *ngIf="showTimelineMD">
+              <mwl-calendar-day-view
+                *ngSwitchCase="'day'"
+                [viewDate]="viewDate"
+                [events]="TimelineMD"
+                (eventClicked)="eventClicked($event)"
+              >
+              </mwl-calendar-day-view>
+            </div>
+
+            <div [ngSwitch]="view" class="sd-timeline flex-grow-1 d-none d-md-block timeline-md"
+              *ngIf="showTimelinePR">
+              <mwl-calendar-day-view
+                *ngSwitchCase="'day'"
+                [viewDate]="viewDate"
+                [events]="TimelinePR"
+                (eventClicked)="eventClicked($event)"
+              >
+              </mwl-calendar-day-view>
+            </div>
+
          </div>
        </div>
+
      </div>
    </div>

@@ -299,7 +332,6 @@
      
      <!-- New -->
      <app-new-event  *ngIf="mobileComponent.showAddNewEvent"
-
        [profile]="profile"
        [selectedSegment]=segment
        [selectedDate]="eventSelectedDate"
@@ -308,7 +340,6 @@
      ></app-new-event>
      <!-- Edit -->
      <app-edit-event  *ngIf="mobileComponent.showEditEvent"
-        
        [profile]="profile"
        [selectedSegment]="segment"
        [postEvent]="postEvent"
@@ -320,7 +351,6 @@
      <app-view-event *ngIf="mobileComponent.showEventDitails"
        [profile]="profile"
        [eventId]="selectedEventId"
-
        (viewEventDetailDismiss)="viewEventDetailDismiss($event)"
      ></app-view-event>

@@ -501,7 +501,6 @@ td.monthview-primary-with-event {
 .container-wrapper{
  height: 100%;
  .calendar-timeline{
-    flex-wrap: wrap;
    border-top-right-radius: 24px;
    width: calc(100%);

@@ -535,10 +534,14 @@ td.monthview-primary-with-event {
    height: 100%;
    
    .calendar-timeline{
-      flex-wrap: wrap;
      border-top-right-radius: 0px;
      width: calc(100% - 40%);
      border-right: 1px solid #d8d8d8;
+
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      flex-wrap: unset;
    }
  }
  .event-details{
@@ -600,4 +603,5 @@ app-approve-event{
  display: flex;
  align-items: center;
  height: 100%;
-}
+}
+
@@ -58,10 +58,16 @@ export class AgendaPage implements OnInit {

  // for timeline
  events: CalendarEvent[] = [];
+  TimelinePR:  CalendarEvent[] = [];
+  TimelineMD: CalendarEvent[] = [];
+
+  showTimelinePR = false;
+  showTimelineMD = false;
+  
  // timeline filter
  timelineFilterState: string = 'Todos';
  showTimelineFilterState: boolean;
-  showTimeline: boolean;
+  showTimeline=true;
  
  /* List of events of our calendar */
  eventSource = [];
@@ -117,7 +123,7 @@ export class AgendaPage implements OnInit {
    saveData: {}
  }

-  constructor( 
+  constructor(
    private alertCtrl: AlertController,
    @Inject(LOCALE_ID) private locale: string,
    private modalCtrl: ModalController,
@@ -127,7 +133,7 @@ export class AgendaPage implements OnInit {
    private sanitizer: DomSanitizer
    ) {

-      this.calendarHeight = "347px";
+      this.calendarHeight = "333px";
      this.showCalendar = true;
      this.timelineDate = momentG(new Date(),'dd MMMM yyyy');

@@ -135,7 +141,7 @@ export class AgendaPage implements OnInit {
      this.showTimelineFilterState = false;
      this.showTimeline = false;

-    }
+  }

  ngOnInit() {
    this.profile = "mdgpr";
@@ -274,27 +280,27 @@ export class AgendaPage implements OnInit {

  // 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;
+      return "";
+
+    } else if (events.length >= 1) {
+    
+      let classs = [];

      events.forEach(element => {
-        eventType[element.calendarName] = 1;
+
+        const profile_ = element.profile == 'md'? 'mdgpr': 'pr';
+        const eventtype = element.event.CalendarName;
+
+        classs.push(`calendar-event-border calendar-${profile_}-event-type-${eventtype}`);
+
      });

-      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 classs.join(' ');
    }

    return "";
@@ -326,7 +332,7 @@ export class AgendaPage implements OnInit {
  }

  // for timeline
-  timeLineTemplate(startTime: string, eventlocation: string, eventDiscription: any, calendarName: string, subject: string, startTimeWisthS: string, endTime: string, eventIndex: number): string{
+  timeLineTemplate(startTime: string, eventlocation: string, eventDiscription: any, calendarName: string, subject: string, startTimeWisthS: string, endTime: string, eventIndex: number, profile: string): string{
    
    const startHours = parseInt(startTimeWisthS.split(':')[0]);
    const startMinutos = parseInt(startTimeWisthS.split(':')[1]);
@@ -342,8 +348,13 @@ export class AgendaPage implements OnInit {
      }
    }

+    console.log(profile);
+
+    const profile_ = profile == 'md'? 'mdgpr': 'pr';
+    
+
    return `
-      <div class="timeline-box timeline-box-event-${eventIndex} timeline-${this.profile}-box-${calendarName} calendar-top${top}">
+      <div class="timeline-box timeline-box-event-${eventIndex} timeline-${profile_}-box-${calendarName} calendar-top${top}">
        <div>
          <span class="timeline-start-time">${startTimeWisthS}</span><span class="timeline-location">${eventlocation}</span>
        </div>
@@ -366,7 +377,26 @@ export class AgendaPage implements OnInit {
        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 => {
+        document.querySelectorAll('.fs-timeline .timeline-box').forEach(ele => {
+          
+          if(ele.className.indexOf(`timeline-box-event-${eventIndex}`)>=0){
+            ele.setAttribute('style',`height:${minutes}px`);
+          }
+        });
+
+      });
+    },timeout)
+
+    setTimeout(()=>{
+      this.TimelinePR.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('.sd-timeline .timeline-box').forEach(ele => {
          
          if(ele.className.indexOf(`timeline-box-event-${eventIndex}`)>=0){
            ele.setAttribute('style',`height:${minutes}px`);
@@ -379,14 +409,18 @@ export class AgendaPage implements OnInit {

  // for timeline

-  timelineFilter(calendarName){
+  timelineFilter(calendarName, eventsList, profile){

    this.timelineFilterState = calendarName;

    // remove all event
-    this.events = [];
+    let events = [];

-    this.eventsList.forEach((element, eventIndex) => {
+    console.log(eventsList);
+
+    this.showTimelineFilterState = false;
+
+    eventsList.forEach((element, eventIndex) => {
      
      // timeline start
      const startHours =  new Date(element.StartDate).getHours().toLocaleString();
@@ -395,207 +429,274 @@ export class AgendaPage implements OnInit {
      const startHoursOtherFormate =  new Date(element.StartDate).getHours().toLocaleString()+':'+new Date(element.StartDate).getMinutes().toLocaleString();
      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
-        });
-      }
-      
+      events.push({
+        title: this.timeLineTemplate(startHours, element.Location, element.Body, element.CalendarName, element.Subject,startHoursOtherFormate,EndHoursOtherFormate, eventIndex, profile),
+        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;
+
+    return events;
  }
  
  loadRangeEvents(startTime: Date, endTime: Date){

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

-    switch (this.segment)
-    {
-      case "Combinada":
-        //Inicializa o array eventSource
-        this.eventSource=[];
-        
+    if(window.innerWidth < 1024){
+      
+      this.showTimeline = false;

-        if(this.profile == "mdgpr"){
-           this.eventService.getAllMdEvents( momentG(new Date(startTime),'yyyy-MM-dd HH:mm:ss'), momentG(new Date(endTime),'yyyy-MM-dd 23:59:59') ).subscribe(
-            response => {
-              
-              this.eventSource=[];
-
-              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
+      switch (this.segment) {
+        case "Combinada":
+          //Inicializa o array eventSource
+          this.eventSource=[];
+          
+  
+          if(this.profile == "mdgpr"){
+             this.eventService.getAllMdEvents( momentG(new Date(startTime),'yyyy-MM-dd HH:mm:ss'), momentG(new Date(endTime),'yyyy-MM-dd 23:59:59') ).subscribe(
+              response => {
+                
+                this.eventSource=[];
+  
+                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,
+                    profile: 'md'
+                  });
                });
+  
+                this.events = this.timelineFilter(this.timelineFilterState, this.eventsList, 'md');
+                
+                this.myCal.update();
+                this.myCal.loadEvents();
+  
+                this.showLoader = false;
+                this.showTimeline = true;
+  
+                this.timelineBoxCorrectHeight(500);
+                this.centralizeTimeline(500);
+               
              });
-
-              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(momentG(new Date(startTime),'yyyy-MM-dd HH:mm:ss'), momentG(new Date(endTime),'yyyy-MM-dd 23:59:59')).subscribe(
-            response => {
-              
-              this.eventSource=[];
-
-              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
+      
+          }
+          else{
+            this.eventService.getAllPrEvents(momentG(new Date(startTime),'yyyy-MM-dd HH:mm:ss'), momentG(new Date(endTime),'yyyy-MM-dd 23:59:59')).subscribe(
+              response => {
+                
+                this.eventSource=[];
+  
+                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,
+                    profile: 'pr'
+                  });
+  
                });
-
+  
+                this.events = this.timelineFilter(this.timelineFilterState, this.eventsList, 'pr');
+  
+                this.myCal.update();
+                this.myCal.loadEvents();
+                this.showLoader = false;
+                this.showTimeline = true;
+  
+                this.timelineBoxCorrectHeight(500);
+                this.centralizeTimeline(500);
+  
              });
-
-              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(momentG(new Date(startTime),'yyyy-MM-dd HH:mm:ss'), momentG(new Date(endTime),'yyyy-MM-dd 23:59:59')).subscribe(response => {
-              
-            this.eventSource=[];
-            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(momentG(new Date(startTime),'yyyy-MM-dd HH:mm:ss'), momentG(new Date(endTime),'yyyy-MM-dd 23:59:59')).subscribe(response => {
-            this.eventSource=[];
-
-            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(momentG(new Date(startTime),'yyyy-MM-dd HH:mm:ss'), momentG(new Date(endTime),'yyyy-MM-dd 23:59:59')).subscribe(res => {
-            this.eventSource=[];  
-            this.eventsListOficial = res.filter(data => data.CalendarName == "Oficial");
+  
+        case "Pessoal":
+          //Inicializa o array eventSource
+          this.eventSource=[];
+          if(this.profile == "mdgpr"){
+            this.eventService.getAllMdEvents(momentG(new Date(startTime),'yyyy-MM-dd HH:mm:ss'), momentG(new Date(endTime),'yyyy-MM-dd 23:59:59')).subscribe(response => {
+                
+              this.eventSource=[];
+              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,
+                  profile: 'md'
+                });
+              });
+              this.myCal.update();
+              this.myCal.loadEvents();
+              this.showLoader = false;
+            });
+  
+          }
+          else{
+            this.eventService.getAllPrEvents(momentG(new Date(startTime),'yyyy-MM-dd HH:mm:ss'), momentG(new Date(endTime),'yyyy-MM-dd 23:59:59')).subscribe(response => {
+              this.eventSource=[];
+  
+              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,
+                  profile: 'pr'
+                });
+              });
+              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(momentG(new Date(startTime),'yyyy-MM-dd HH:mm:ss'), momentG(new Date(endTime),'yyyy-MM-dd 23:59:59')).subscribe(res => {
+              this.eventSource=[];  
+              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,
+                    profile: 'md'
+                  });
+                });
+                this.myCal.update();
+                this.myCal.loadEvents();
+                this.showLoader = false;
+              });
+          }else{
+            this.eventService.getAllPrEvents(momentG(new Date(startTime),'yyyy-MM-dd HH:mm:ss'), momentG(new Date(endTime),'yyyy-MM-dd 23:59:59')).subscribe(res => {
+              this.eventSource=[];  
+              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
+                  event: element,
+                  profile: 'pr'
                });
              });
              this.myCal.update();
              this.myCal.loadEvents();
              this.showLoader = false;
            });
-        }else{
-          this.eventService.getAllPrEvents(momentG(new Date(startTime),'yyyy-MM-dd HH:mm:ss'), momentG(new Date(endTime),'yyyy-MM-dd 23:59:59')).subscribe(res => {
-            this.eventSource=[];  
-            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;
+          }
+          break;
+  
+      } 
+    } else {
+      
+      this.showTimelinePR = false;
+      this.showTimelineMD = false;
+      this.eventSource=[];
+      
+      this.eventService.getAllMdEvents( momentG(new Date(startTime),'yyyy-MM-dd HH:mm:ss'), momentG(new Date(endTime),'yyyy-MM-dd 23:59:59') ).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,
+              profile: 'md'
+            });
+          });
+          
+
+          this.TimelineMD = this.timelineFilter(this.timelineFilterState, this.eventsList, 'md');
+          this.events = this.timelineFilter(this.timelineFilterState, this.eventsList, 'md');
+
+          this.myCal.update();
+          this.myCal.loadEvents();
+
+          this.showTimelineMD = true;
+
+          this.timelineBoxCorrectHeight(500);
+          this.centralizeTimeline(500);
+          
+      });
+ 
+      this.eventService.getAllPrEvents(momentG(new Date(startTime),'yyyy-MM-dd HH:mm:ss'), momentG(new Date(endTime),'yyyy-MM-dd 23:59:59')).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,
+              profile:'pr'
+            });
+
+          });
+
+          this.TimelinePR = this.timelineFilter(this.timelineFilterState, this.eventsList, 'pr');
+
+          console.log(this.TimelinePR);
+          
+          this.myCal.update();
+          this.myCal.loadEvents();
+
+          this.showTimelinePR = true;
+          
+          this.timelineBoxCorrectHeight(500);
+          this.centralizeTimeline(500);
+
+          this.showLoader = false;
+      });
+     
+    }

-    } 
  }

  actions(){

-  } 
+  }

  doRefresh(ev: any){
    this.loadRangeEvents(this.rangeStartDate, this.rangeEndDate);