Improve calendar page

src/app/pages/agenda/agenda.page.html

@@ -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> 
@@ -251,7 +251,7 @@
             </ion-row>
           </ion-row>
           
-          <div class="d-flex pb-5  d-none d-md-flex">
+          <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>
@@ -275,20 +275,9 @@
 
         <!-- Timeline -->
         <div>
-          <div class="timeline-container d-flex"  *ngIf="showTimeline">
-
-            <div [ngSwitch]="view" class="timeline-mobile flex-grow-1">
-              <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="flex-grow-1 d-none d-md-block timeline-md">
+            <div [ngSwitch]="view" class="fs-timeline timeline-mobile flex-grow-1  d-md-none" *ngIf="showTimeline">
               <mwl-calendar-day-view
                 *ngSwitchCase="'day'"
                 [viewDate]="viewDate"
@@ -298,6 +287,28 @@
               </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>
 
@@ -320,7 +331,6 @@
       
       <!-- New -->
       <app-new-event  *ngIf="mobileComponent.showAddNewEvent"
-
         [profile]="profile"
         [selectedSegment]=segment
         [selectedDate]="eventSelectedDate"
@@ -329,7 +339,6 @@
       ></app-new-event>
       <!-- Edit -->
       <app-edit-event  *ngIf="mobileComponent.showEditEvent"
-        
         [profile]="profile"
         [selectedSegment]="segment"
         [postEvent]="postEvent"
@@ -341,7 +350,6 @@
       <app-view-event *ngIf="mobileComponent.showEventDitails"
         [profile]="profile"
         [eventId]="selectedEventId"
-
         (viewEventDetailDismiss)="viewEventDetailDismiss($event)"
       ></app-view-event>
 

src/app/pages/agenda/agenda.page.ts

@@ -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 = '333px';
+      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";
@@ -276,6 +282,7 @@ export class AgendaPage implements OnInit {
   currentDayEventDisplayBorder(day: any, id: any){
 
     const events = day[id].events;
+
     if (events.length == 0) {
       return "";
     } else if (events.length >= 1) {
@@ -326,7 +333,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 +349,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 +378,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 +410,16 @@ 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);
+
+    eventsList.forEach((element, eventIndex) => {
       
       // timeline start
       const startHours =  new Date(element.StartDate).getHours().toLocaleString();
@@ -395,207 +428,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,
+                  });
                 });
+  
+                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
+                  });
+  
                 });
-
+  
+                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);