Update timelien

2026-04-18 20:47:54 +00:00 · 2021-02-03 17:13:32 +01:00
parent c8bba4570f
commit 51a95430e8
4 changed files with 259 additions and 152 deletions
@@ -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" slot="icon-only"src="assets/images/icons-profile-calendar-md.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  *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 (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">
-          <div class="filter-name">Todos</div>
-          <ion-icon class="arrow-down" src="assets/images/icons-arrow-arrow-down.svg"></ion-icon>
-        </ion-row> -->
+        <ion-row class="filter ion-align-items-center">
+          <div class="filter-name">{{timelineFilterState}}</div>
+          <!-- Icon -->
+          <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>
@@ -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;
+      }
+    }
+  }
+}
+
@@ -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();
-  }
-
-
-  
-}
+  } 
+}
@@ -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 #958bfc !important;
+    border-left: 5px solid #99e47b !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;
+} */