From 51a95430e86a8d1129558acdda405d7c175aaf21 Mon Sep 17 00:00:00 2001 From: Peter Maquiran Date: Wed, 3 Feb 2021 17:13:32 +0100 Subject: [PATCH] Update timelien --- src/app/pages/agenda/agenda.page.html | 21 +- src/app/pages/agenda/agenda.page.scss | 72 ++++--- src/app/pages/agenda/agenda.page.ts | 266 +++++++++++++++----------- src/global.scss | 52 ++++- 4 files changed, 259 insertions(+), 152 deletions(-) diff --git a/src/app/pages/agenda/agenda.page.html b/src/app/pages/agenda/agenda.page.html index 4e1f62b7e..1b2aa2d8d 100644 --- a/src/app/pages/agenda/agenda.page.html +++ b/src/app/pages/agenda/agenda.page.html @@ -35,10 +35,8 @@ -
- - -
+ + @@ -222,10 +220,17 @@ Hoje,   {{ timelineDate }} - + +
{{timelineFilterState}}
+ + + + + diff --git a/src/app/pages/agenda/agenda.page.scss b/src/app/pages/agenda/agenda.page.scss index 77b9df683..2b679797c 100644 --- a/src/app/pages/agenda/agenda.page.scss +++ b/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; + } + } + } +} + diff --git a/src/app/pages/agenda/agenda.page.ts b/src/app/pages/agenda/agenda.page.ts index 57d3bbbb7..f85d07182 100644 --- a/src/app/pages/agenda/agenda.page.ts +++ b/src/app/pages/agenda/agenda.page.ts @@ -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 ` -
+
- ${startTime}${eventlocation} + ${startTimeWisthS}${eventlocation}
${subject} @@ -318,6 +326,78 @@ export class AgendaPage implements OnInit {
` } + + // 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(); - } - - - -} + } +} \ No newline at end of file diff --git a/src/global.scss b/src/global.scss index 3632634e5..01e714836 100644 --- a/src/global.scss +++ b/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 #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; } -} \ No newline at end of file +} + + +.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; +} */ \ No newline at end of file