Update timelien

2026-04-20 21:35:50 +00:00 · 2021-02-03 17:13:32 +01:00
parent c8bba4570f
commit 51a95430e8
4 changed files with 259 additions and 152 deletions
@@ -68,24 +68,11 @@ export class AgendaPage implements OnInit {

  showTimeline: boolean= false;
  
-  events: CalendarEvent[] = [
-/*     {
-      title: '123',
-      start: setHours(setMinutes(new Date(), 0), 3),
-      color: {
-        primary: 'red',
-        secondary: 'yellow'
-      },
-    },
-    {
-      title: '123123',
-      start: setHours(setMinutes(new Date(), 0), 5),
-      color: {
-        primary: 'red',
-        secondary: 'yellow'
-      },
-    }, */
-  ];
+  // for timeline
+  events: CalendarEvent[] = [];
+  // timeline filter
+  timelineFilterState: string = 'Todos';
+  showTimelineFilterState: boolean= false;
  
  /* 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();
-  }
-
-
-  
-}
+  } 
+}