Update timelien

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

@@ -35,10 +35,8 @@
 
             </ion-row>
             <ion-row class="ion-align-items-center">
-              <div class="arrow">
+              <ion-icon  *ngIf="profile == 'mdgpr' " (click)="changeProfile()" class="right-icons" src="assets/images/icons-profile-calendar-md.svg"></ion-icon>
-                <ion-icon *ngIf="profile == 'mdgpr' " (click)="changeProfile()" class="right-icons" slot="icon-only"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 == 'pr' " (click)="changeProfile()" class="right-icons" slot="icon-only"src="assets/images/icons-profile-calendar-pr.svg"></ion-icon>
-              </div>
               <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> 
@@ -222,10 +220,17 @@
         <ion-row class="timeline-date">
           <span *ngIf="timelineIsCurrentDate()">Hoje, &nbsp;</span> {{ timelineDate }}
         </ion-row>
-    <!--     <ion-row class="filter ion-align-items-center">
+        <ion-row class="filter ion-align-items-center">
-          <div class="filter-name">Todos</div>
+          <div class="filter-name">{{timelineFilterState}}</div>
-          <ion-icon class="arrow-down" src="assets/images/icons-arrow-arrow-down.svg"></ion-icon>
+          <!-- Icon -->
-        </ion-row> -->
+          <ion-icon (click)="showTimelineFilterState=true" class="arrow-down" src="assets/images/icons-arrow-arrow-down.svg"></ion-icon>
+          <!-- List -->
+          <ul *ngIf="showTimelineFilterState">
+            <li (click)="timelineFilter('Todos')">Todos</li>
+            <li (click)="timelineFilter('Oficial')">Oficial</li>
+            <li (click)="timelineFilter('Pessoal')">Pessoal</li>
+          </ul>
+        </ion-row>
       </ion-row>
     </div>
   </div>

src/app/pages/agenda/agenda.page.scss

@@ -7,7 +7,6 @@
   display: table-cell;
 }
  
-
 ion-slide{
     td{
         div {
@@ -47,7 +46,6 @@ ion-slide{
 }
  
 
-
 .main-header{
   width: 100%; /* 400px */
   height: 100%;
@@ -338,31 +336,6 @@ td.monthview-primary-with-event {
 
 
 
-.currente-date-timelien{
-  padding: 10px 20px;
-  .timeline-date{
-    font-size: 15px;
-    font-weight: bold;
-  }
-  .filter{
-    font-size: 15px;
-    font-weight: normal;
-    .filter-name{
-      color: #0d89d1;
-    }
-    ion-icon{
-      font-size: 35px;
-      color: #0d89d1;
-    }
-    .filter-name{
-      font-family: Roboto;
-      font-size: 15px;
-      margin-left: 10px;
-    
-    }
-  }
-}
-
 
 
 .drop-down{
@@ -433,3 +406,48 @@ td.monthview-primary-with-event {
   }
 }
 
+
+
+
+
+.currente-date-timelien{
+  padding: 10px 20px;
+  .timeline-date{
+    font-size: 15px;
+    font-weight: bold;
+  }
+  .filter{
+    font-size: 15px;
+    font-weight: normal;
+    ion-icon{
+      font-size: 35px;
+      color: #0d89d1;
+    }
+    .filter-name{
+      color: #0d89d1;
+      font-family: Roboto;
+      font-size: 15px;
+      margin-right: 25px;
+    }
+
+    ul{
+      background-color: white !important;
+      position: absolute;
+      padding: 0px;
+      margin: 0px;
+      list-style: none;
+      margin-top: 140px;
+      padding: 10px;
+      box-shadow: 0px 0px 10px gray !important;
+      border-radius: 5px;
+      width: 110px;
+      z-index: 1000000;
+      li{
+        padding: 5px 0px;
+        font-size: 15px;
+        font-weight: normal;
+      }
+    }
+  }
+}
+

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

@@ -68,24 +68,11 @@ export class AgendaPage implements OnInit {
 
   showTimeline: boolean= false;
   
-  events: CalendarEvent[] = [
+  // for timeline
-/*     {
+  events: CalendarEvent[] = [];
-      title: '123',
+  // timeline filter
-      start: setHours(setMinutes(new Date(), 0), 3),
+  timelineFilterState: string = 'Todos';
-      color: {
+  showTimelineFilterState: boolean= false;
-        primary: 'red',
-        secondary: 'yellow'
-      },
-    },
-    {
-      title: '123123',
-      start: setHours(setMinutes(new Date(), 0), 5),
-      color: {
-        primary: 'red',
-        secondary: 'yellow'
-      },
-    }, */
-  ];
   
   /* List of events of our calendar */
   eventSource = [];
@@ -171,24 +158,6 @@ export class AgendaPage implements OnInit {
 
   }
 
-  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);
-  }
-
-  timelineIsCurrentDate(): Boolean {
-    return formatDate(new Date(),'dd MMMM yyyy', 'pt') == formatDate(this.eventSelectedDate,'dd MMMM yyyy', 'pt');
-  }
-
   //Go to the next view of the calendar month/week/day
   next(){
     this.myCal.slideNext();
@@ -202,33 +171,6 @@ export class AgendaPage implements OnInit {
     this.viewTitle = title;
   }
 
-  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 "";
-  }
-
   // Show information of the event for timeline
   eventClicked({ event }: { event: CalendarEvent }): void {
     console.log('Event clicked', event);
@@ -250,12 +192,13 @@ export class AgendaPage implements OnInit {
     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);
@@ -306,11 +249,76 @@ export class AgendaPage implements OnInit {
     });
   }
 
-  timeLineTemplate(startTime: string, eventlocation: string, eventDiscription: any, calendarName: string, subject: string): string{
+
+  // 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-${this.profile}-box-${calendarName}">
+      <div class="timeline-box timeline-box-event-${eventIndex} timeline-${this.profile}-box-${calendarName} calendar-top${top}">
         <div>
-          <span class="timeline-start-time">${startTime}</span><span class="timeline-location">${eventlocation}</span>
+          <span class="timeline-start-time">${startTimeWisthS}</span><span class="timeline-location">${eventlocation}</span>
         </div>
         <div class="timeline-event-discription">
           ${subject}
@@ -318,6 +326,78 @@ export class AgendaPage implements OnInit {
       </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){
 
@@ -329,7 +409,6 @@ export class AgendaPage implements OnInit {
       case "Combinada":
         //Inicializa o array eventSource
         this.eventSource=[];
-        this.events=[];
         
         
         if(this.profile == "mdgpr"){
@@ -337,7 +416,7 @@ export class AgendaPage implements OnInit {
             response => {
               this.eventsList = response;
               // loop
-              this.eventsList.forEach(element => {
+              this.eventsList.forEach((element, eventIndex) => {
 
                 this.eventSource.push({
                   title: element.Subject,
@@ -347,24 +426,9 @@ export class AgendaPage implements OnInit {
                   event: element,
                   calendarName: element.CalendarName
                 });
-
-                // timeline start
-                const startHours =  formatDate(new Date(element.StartDate), 'HH', 'pt');
-                const EndHours = formatDate(new Date(element.EndDate), 'HH', 'pt');
-
-                this.events.push({
-                  title: this.timeLineTemplate(startHours, element.Location, element.Body, element.CalendarName, element.Subject),
-                  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
-                });
-                // timeline end
-
               });
+
+              this.timelineFilter(this.timelineFilterState);
               
               this.myCal.update();
               this.myCal.loadEvents();
@@ -372,6 +436,7 @@ export class AgendaPage implements OnInit {
               this.showLoader = false;
               this.showTimeline = true;
 
+              this.timelineBoxCorrectHeight(500);
               this.centralizeTimeline(500);
              
             });
@@ -381,7 +446,7 @@ export class AgendaPage implements OnInit {
           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 => {
+              this.eventsList.forEach((element, eventIndex) => {
                 this.eventSource.push({
                   title: element.Subject,
                   startTime: new Date(element.StartDate),
@@ -391,30 +456,16 @@ export class AgendaPage implements OnInit {
                   calendarName: element.CalendarName
                 });
 
-                // timeline start
-                const startHours =  formatDate(new Date(element.StartDate), 'HH', 'pt');
-                const EndHours = formatDate(new Date(element.EndDate), 'HH', 'pt');
-
-                this.events.push({
-                  
-                  title: this.timeLineTemplate(startHours, element.Location, element.Body, element.CalendarName, element.Subject),
-                  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
-                });
-                // timeline end
-
               });
 
+              this.timelineFilter(this.timelineFilterState);
+
               this.myCal.update();
               this.myCal.loadEvents();
               this.showLoader = false;
               this.showTimeline = true;
 
+              this.timelineBoxCorrectHeight(500);
               this.centralizeTimeline(500);
 
             });
@@ -592,8 +643,5 @@ export class AgendaPage implements OnInit {
     });
     await modal.present();
     modal.onDidDismiss();
-  }
+  } 
-
+}
-
-  
-}

src/global.scss

@@ -122,6 +122,10 @@ td.monthview-secondary-with-event, td.monthview-secondary-with-event[_ngcontent-
 }
 
 .timeline-box{
+
+    position: relative;
+    width: calc(100% - 0px);
+    border-radius: 5px;
     padding: 3px;
     background-color: white !important;
     box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07) !important;
@@ -141,22 +145,22 @@ td.monthview-secondary-with-event, td.monthview-secondary-with-event[_ngcontent-
 
 
 .timeline-pr-box-Pessoal{
+    border-left: 5px solid #958bfc !important;
 
-    border-left: 5px solid #99e47b !important;
     height: 100%;
 }
 .timeline-pr-box-Oficial{
-
+    border-left: 5px solid #99e47b !important;
-    border-left: 5px solid #958bfc !important;
     height: 100%;
 }
 
 
 .timeline-mdgpr-box-Oficial{
-    border-left: 5px solid #ffb703 !important;
+    border-left: 5px solid #f05d5e !important;
+
 }
 .timeline-mdgpr-box-Pessoal{
-    border-left: 5px solid #f05d5e !important;
+    border-left: 5px solid #ffb703 !important;
 }
 
 
@@ -181,10 +185,10 @@ td.monthview-secondary-with-event, td.monthview-secondary-with-event[_ngcontent-
     width: 35px !important;
 }
 .calendar-mdgpr-event-type-Oficial{
-    border-right: 3px solid #f05d5e !important;
+    border-left: 3px solid #ffb703 !important;
 }
 .calendar-mdgpr-event-type-Pessoal{
-    border-left: 3px solid #ffb703 !important;
+    border-right: 3px solid #f05d5e !important;
 }
 .calendar-mdgpr-event-type-both{
     border-left: 3px solid #ffb703 !important;
@@ -198,6 +202,7 @@ td.monthview-secondary-with-event, td.monthview-secondary-with-event[_ngcontent-
 .calendar-pr-event-type-Oficial{
     border-left: 3px solid #99e47b !important;
 }
+
 .calendar-pr-event-type-Pessoal{
     border-left: 3px solid #958bfc !important;
 }
@@ -222,4 +227,35 @@ td.monthview-secondary-with-event, td.monthview-secondary-with-event[_ngcontent-
     thead{
       display: none;
     }
-}
+}
+
+
+.calendar-top0{
+    margin-top: 0px;
+}
+
+.calendar-top15{
+    margin-top: 15px;
+}
+
+.calendar-top30{
+    margin-top: 30px;
+}
+
+.calendar-top45{
+    margin-top: 45px;
+}
+
+
+.cal-event{
+    overflow: visible !important;
+}
+
+
+
+
+
+/* .cal-week-view mwl-calendar-week-view-hour-segment, .cal-week-view .cal-hour-segment {
+    display: block;
+    height: 60px !important;
+} */