From 5c9d2539150dc1c4ae8a670d89338121574e8723 Mon Sep 17 00:00:00 2001 From: Peter Maquiran Date: Tue, 8 Jun 2021 11:24:01 +0100 Subject: [PATCH] Improve --- src/app/pages/agenda/agenda.page.html | 132 +++++++- src/app/pages/agenda/agenda.page.scss | 101 ++++++ src/app/pages/agenda/agenda.page.ts | 319 ++++++++++++++---- .../shared/fingerprint/fingerprint.page.ts | 2 +- src/plugin/momentG.js | 4 +- 5 files changed, 493 insertions(+), 65 deletions(-) diff --git a/src/app/pages/agenda/agenda.page.html b/src/app/pages/agenda/agenda.page.html index d21e793c8..65f574f11 100644 --- a/src/app/pages/agenda/agenda.page.html +++ b/src/app/pages/agenda/agenda.page.html @@ -173,9 +173,9 @@
-
+
-
+ + + + +
+
+ +
+
+ {{ TimelineDayEvent(events.key)}} +
+ +
+ + +
+
+ +
{{event.event.StartDate | date: 'HH:mm'}}
+
--
+ +
{{event.event.EndDate | date: 'HH:mm'}}
+
--
+ +
Todo
+
o dia
+ +
+
+
Todo
+
o dia
+
+
+ {{ event.event.CalendarName }} +
{{event.event.Location}}
+
{{event.event.Subject}}
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ {{ TimelineDayEvent(events.key)}} +
+ +
+ +
+
+
{{event.event.StartDate | date: 'HH:mm'}}
+
--
+ +
{{event.event.EndDate | date: 'HH:mm'}}
+
--
+ +
Todo
+
o dia
+ +
+
+
Todo
+
o dia
+
+
+
{{event.event.Location}}
+
{{event.event.Subject}}
+
+
+ +
+
+ +
+
+ +
+
+ +
+ +
+ {{ TimelineDayEvent(events.key)}} +
+ +
+ +
+
+
{{event.event.StartDate | date: 'HH:mm'}}
+
--
+ +
{{event.event.EndDate | date: 'HH:mm'}}
+
--
+ +
Todo
+
o dia
+ +
+
+
Todo
+
o dia
+
+
+
{{event.event.Location}}
+
{{event.event.Subject}}
+
+
+ +
+
+ +
diff --git a/src/app/pages/agenda/agenda.page.scss b/src/app/pages/agenda/agenda.page.scss index a1301e52d..5ed340a03 100644 --- a/src/app/pages/agenda/agenda.page.scss +++ b/src/app/pages/agenda/agenda.page.scss @@ -466,6 +466,105 @@ td.monthview-primary-with-event { .timeline-container{ + + .day { + font-weight: bold; + color: #2e2e2e !important; + font-size: 13px; + } + + .content-pr-Oficial, .content-pr-Pessoal, .content-mdgpr-Pessoal, .content-mdgpr-Oficial { + width: 100% !important; + padding: 0px 10px !important; + } + + + .schedule-time{ + margin-right: 10px; + min-width: 33px; + .time-start{ + color: #797979 !important; + font-family: Roboto; + font-size: 13px; + } + .time-end{ + color: #797979 !important; + font-family: Roboto; + font-size: 13px; + } + } + .schedule-date{ + margin-right: 10px; + width: 22%; + color: #797979 !important; + font-size: 13px; + } + .schedule-details{ + display: flex; + flex-wrap: wrap; + align-items: center; + width: 100%; + .location{ + font-family: Roboto; + font-size: 13px; + color: black; + width: 100%; + + } + .description{ + font-family: Roboto; + font-size: 15px; + font-weight: bold; + color: #0d89d1; + } + } + .color{ + width: 5px; + height: 40px; + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; + background-color: #f05d5e; + } + + .div-content-Oficial{ + width: 85%; + float: left; + border-left: 4px solid #cab0dc; + padding: 0 0 0 12px; + } + .div-content-Pessoal{ + width: 85%; + float: left; + border-left: 4px solid #cbeecb; + padding: 0 0 0 12px; + } + .div-content-Oficial h3, .div-content-Pessoal h3{ + font-size: 14pt; + /* border: 1px solid red; */ + } + .div-content-Oficial p, .div-content-Pessoal p{ + font-size: 12pt; + color: rgb(94, 92, 92); + padding: 0 !important; + margin: 0 !important; + } + + .content-pr-Pessoal{ + background-color: var(--white); + border-radius: 5px; + border-right: 5px solid #958bfc; + overflow: auto; + } + .content-mdgpr-Oficial{ + border-radius: 5px; + border-right: 5px solid #ffb703; + overflow: auto; + } + .content-mdgpr-Pessoal{ + border-radius: 5px; + border-right: 5px solid #f05d5e; + overflow: auto; + } } @@ -601,3 +700,5 @@ app-approve-event{ height: 100%; } + + diff --git a/src/app/pages/agenda/agenda.page.ts b/src/app/pages/agenda/agenda.page.ts index 56e792361..72803b4d0 100644 --- a/src/app/pages/agenda/agenda.page.ts +++ b/src/app/pages/agenda/agenda.page.ts @@ -26,6 +26,7 @@ import { ViewEventPage } from './view-event/view-event.page'; import { NewEventPage } from './new-event/new-event.page'; import { AuthService } from 'src/app/services/auth.service'; import { User } from 'src/app/models/user.model'; +import { letProto } from 'rxjs-compat/operator/let'; @Component({ selector: 'app-agenda', @@ -65,7 +66,9 @@ export class AgendaPage implements OnInit { // for timeline events: CalendarEvent[] = []; TimelinePR: CalendarEvent[] = []; + TimelinePRList = {} TimelineMD: CalendarEvent[] = []; + TimelineMDList = {} showTimelinePR = false; showTimelineMD = false; @@ -89,6 +92,7 @@ export class AgendaPage implements OnInit { selectedDate: Date; eventSelectedDate: Date = new Date(); eventSelectedDate2: Date; + rangeStartDate: Date; rangeEndDate: Date; @@ -144,7 +148,7 @@ export class AgendaPage implements OnInit { * @description determinant if edit or add event component is open */ IsEvent: "edit" | "add" | "view"; - viewingEventObject: { event: CalendarEvent }; + viewingEventObject: CalendarEvent ; loggeduser: User; constructor( @@ -213,7 +217,7 @@ export class AgendaPage implements OnInit { } // show information about the clicked event in timeline - eventClicked({ event }: { event: CalendarEvent }): void { + eventClicked(event : CalendarEvent): void { /* console.log('Event clicked', event); */ //clear @@ -223,7 +227,7 @@ export class AgendaPage implements OnInit { this.IsEvent= "view"; - this.viewingEventObject = {event}; + this.viewingEventObject = event; this.eventSelectedDate = event.start; this.selectedEventId = event.id; @@ -362,7 +366,7 @@ export class AgendaPage implements OnInit { } catch (error) { // if(!this.showLoader) { - this.selectFirstEventOfTheDay(); + //this.selectFirstEventOfTheDay(); } } @@ -377,6 +381,10 @@ export class AgendaPage implements OnInit { return momentG(new Date(),'dd MMMM yyyy', 'pt') == momentG(this.eventSelectedDate,'dd MMMM yyyy', 'pt'); } + momentG(date, formate , wgs) { + return momentG(date, formate , wgs) + } + // for timeline timeLineTemplate(startTime: string, eventlocation: string, eventDiscription: any, calendarName: string, subject: string, startTimeWisthS: string, endTime: string, eventIndex: number, profile: string): string{ @@ -512,15 +520,25 @@ export class AgendaPage implements OnInit { index: eventIndex, profile: profile, CalendarName: element.CalendarName, + event: element, + Subject: element.Subject }); }); - return events; } - eventFilter(){} + eventFilter() {} + + TimelineDayEvent(day): string { + return (day).padStart(2, '0') +' '+this.viewTitle + } + + get calendarDay(): string { + + return ((new Date(this.timelineDate)).getDate()).toString().padStart(2,'0') + } loadRangeEvents(startTime: Date, endTime: Date){ @@ -536,7 +554,6 @@ export class AgendaPage implements OnInit { case "Combinado": //Inicializa o array eventSource //this.eventSource=[]; - if(this.profile == "mdgpr" && this.loggeduser.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( @@ -563,9 +580,13 @@ export class AgendaPage implements OnInit { const list = this.timelineFilter(this.timelineFilterState, this.eventsList, 'md'); + this.TimelineMDList = this.eventListBox(list) + this.events = list; // optional this.TimelineMD = list; + + console.log('TimelineMD', this.TimelineMD) this.myCal.update(); this.myCal.loadEvents(); @@ -602,9 +623,10 @@ export class AgendaPage implements OnInit { }); }); - - + const list = this.timelineFilter(this.timelineFilterState, this.eventsList, 'pr'); + + this.TimelineMDList = this.eventListBox(list) this.events = list; @@ -627,6 +649,8 @@ export class AgendaPage implements OnInit { case "Pessoal": //Inicializa o array eventSource + alert('pessoal') + if(this.profile == "mdgpr" && this.loggeduser.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 => { @@ -651,6 +675,10 @@ export class AgendaPage implements OnInit { const list = this.timelineFilter(this.timelineFilterState, this.eventsListPessoal, 'md'); + + this.TimelineMDList = this.eventListBox(list) + + this.events = list; this.TimelineMD = list; @@ -682,6 +710,9 @@ export class AgendaPage implements OnInit { }); const list = this.timelineFilter(this.timelineFilterState, this.eventsListPessoal, 'pr'); + + + this.TimelineMDList = this.eventListBox(list) this.events = list; // optional @@ -700,6 +731,8 @@ export class AgendaPage implements OnInit { break; case "Oficial": + + alert('Oficial') //Inicializa o array eventSource this.eventsListOficial = []; @@ -721,8 +754,11 @@ export class AgendaPage implements OnInit { }); const list = this.timelineFilter(this.timelineFilterState, this.eventsListOficial, 'md'); + + this.TimelineMDList = this.eventListBox(list) this.events = list; + // Petencial error this.TimelinePR = list; this.myCal.update(); @@ -750,10 +786,11 @@ export class AgendaPage implements OnInit { }); }); - const list = this.timelineFilter(this.timelineFilterState, this.eventsListOficial, 'pr'); - + + this.TimelineMDList = this.eventListBox(list) + this.events = list; // optional this.TimelinePR = list; @@ -783,59 +820,60 @@ export class AgendaPage implements OnInit { 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 => { - - if(this.segment == 'Oficial') { - this.eventsList = response.filter(data => data.CalendarName == "Oficial"); - } else if (this.segment == 'Pessoal') { - this.eventsList = response.filter(data => data.CalendarName == "Pessoal"); - } else { - this.eventsList = response; - } + if(this.segment == 'Oficial') { + this.eventsList = response.filter(data => data.CalendarName == "Oficial"); + } else if (this.segment == 'Pessoal') { + this.eventsList = response.filter(data => data.CalendarName == "Pessoal"); + } else { + this.eventsList = response; + } - this.eventSource= this.eventSource.filter(e => e.profile != 'md'); - // loop - this.eventsList.forEach((element, eventIndex) => { + this.eventSource= this.eventSource.filter(e => e.profile != 'md'); + // loop + this.eventsList.forEach((element, eventIndex) => { + + // calendar + this.eventSource.push({ + index: eventIndex, + title: element.Subject, + startTime: new Date(element.StartDate), + endTime: new Date(element.EndDate), + allDay: false, + event: element, + calendarName: element.CalendarName, + profile: 'md', + id: element.EventId, + }); + + }); - // calendar - this.eventSource.push({ - index: eventIndex, - title: element.Subject, - startTime: new Date(element.StartDate), - endTime: new Date(element.EndDate), - allDay: false, - event: element, - calendarName: element.CalendarName, - profile: 'md', - id: element.EventId, - }); - - }); - - const MDEventList = this.timelineFilter(this.timelineFilterState, this.eventsList, 'md'); - - this.events = MDEventList; - this.TimelineMD = MDEventList; - - this.myCal.update(); - this.myCal.loadEvents(); - - this.showTimelineMD = true; - - counter++; - if(counter==2){ - this.showLoader = false; - this.timelineBoxCorrectHeight(500); - this.centralizeTimeline(500); - } + const MDEventList = this.timelineFilter(this.timelineFilterState, this.eventsList, 'md'); + + + + this.TimelineMDList = this.eventListBox(MDEventList, 'md') + + this.events = MDEventList; + this.TimelineMD = MDEventList; + + this.myCal.update(); + this.myCal.loadEvents(); + + this.showTimelineMD = true; + + counter++; + if(counter==2){ + this.showLoader = false; + 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 => { - if(this.segment == 'Oficial') { this.eventsList = response.filter(data => data.CalendarName == "Oficial"); } else if (this.segment == 'Pessoal') { @@ -848,7 +886,7 @@ export class AgendaPage implements OnInit { this.eventsList.forEach((element, eventIndex) => { - // calendar + // calendar this.eventSource.push({ index: eventIndex, title: element.Subject, @@ -865,6 +903,9 @@ export class AgendaPage implements OnInit { this.TimelinePR = this.timelineFilter(this.timelineFilterState, this.eventsList, 'pr'); + + this.TimelinePRList = this.eventListBox(this.TimelinePR) + this.myCal.update(); this.myCal.loadEvents(); @@ -883,6 +924,162 @@ export class AgendaPage implements OnInit { } } + eventListBox(list, nice?) { + let days = {}; + + list.forEach( (event:any)=> { + + var startDate = new Date(event.start); + var endDate = new Date(event.end); + + const day = (((new Date (event.start)).getDate())).toString().padStart(2,'0') + + event.manyDays = false + + if ( (new Date (this.viewDate).getMonth()) == (new Date(event.start).getMonth()) ) { + + if(!days.hasOwnProperty(day)) { + days[day] = [] + } + + var Difference_In_Days = endDate.getDate() - startDate.getDate() + + if ( endDate.getTime() > startDate.getTime() && Difference_In_Days <= 50 && !event.event.IsAllDayEvent ) { + if (Difference_In_Days >= 1) { + + if(nice == 'md') { + console.log('md', event) + } + + const StartEvent = Object.assign({}, { + title: event.title, + start: event.start, + end: event.end, + color: event.color, + id: event.id, + index: event.index, + profile: event.profile, + CalendarName: event.CalendarName, + event: { + Subject: event.event.Subject, + StartDate: event.event.StartDate, + EndDate: event.event.EndDate, + Location: event.event.Location, + EventId: event.event.EventId, + CalendarName: event.event.CalendarName + }, + startMany: true, + endMany: false, + middle: false + }) + + days[day].push(StartEvent) + + + let i = 1; + + while (startDate.getFullYear() != endDate.getFullYear() || + startDate.getMonth() != endDate.getMonth() || + startDate.getDate() != endDate.getDate()) { + + const newDate = startDate.setDate(startDate.getDate()+ i) + + let otherDays = (((new Date (newDate)).getDate())).toString().padStart(2,'0') + + + event.other = true + + event.start = newDate + if(!days.hasOwnProperty(otherDays)) { + + + days[otherDays] = [] + } + + + if (!(startDate.getFullYear() != endDate.getFullYear() || + startDate.getMonth() != endDate.getMonth() || + startDate.getDate() != endDate.getDate())) { + // last push + + const EndEvent = Object.assign({}, { + title: event.title, + start: event.start, + end: event.end, + color: event.color, + id: event.id, + index: event.index, + profile: event.profile, + CalendarName: event.CalendarName, + event: { + Subject: event.event.Subject, + StartDate: event.event.StartDate, + EndDate: event.event.EndDate, + Location: event.event.Location, + EventId: event.event.EventId, + CalendarName: event.event.CalendarName + }, + Subject: event.Subject, + startMany: false, + endMany: true, + middle: false + }) + + days[otherDays].push(EndEvent) + + } else { + const EndEvent = Object.assign({}, { + title: event.title, + start: event.start, + end: event.end, + color: event.color, + id: event.id, + index: event.index, + profile: event.profile, + CalendarName: event.CalendarName, + event: { + Subject: event.event.Subject, + StartDate: event.event.StartDate, + EndDate: event.event.EndDate, + Location: event.event.Location, + EventId: event.event.EventId, + CalendarName: event.event.CalendarName + }, + Subject: event.Subject, + startMany: false, + endMany: true, + middle: true + }) + days[otherDays].push(EndEvent) + } + + + } + + } else { + days[day].push(event) + + } + } else { + days[day].push(event) + + } + + } + + }) + + return days + } + + eventListVisible(event) { + return momentG(event,'MMMM yyyy') == momentG(this.calendar.currentDate, 'MMMM yyyy') + } + + log(event) { + console.log(event) + } + // for timeline select the first event in the timeline selectFirstEventOfTheDay(){ @@ -895,15 +1092,15 @@ export class AgendaPage implements OnInit { let filterDate = sortedDate.filter((e) => { - console.log( e.startTime.toLocaleDateString('en-US'),' == ',this.eventSelectedDate.toLocaleDateString('en-US')); + //console.log( e.startTime.toLocaleDateString('en-US'),' == ',this.eventSelectedDate.toLocaleDateString('en-US')); return e.startTime.toLocaleDateString('en-US') == this.eventSelectedDate.toLocaleDateString('en-US'); }); - console.log('Event -- ',filterDate[filterDate.length - 1], filterDate['startTime']); + // console.log('Event -- ',filterDate[filterDate.length - 1], filterDate['startTime']); const firstEventStartHours = new Date(filterDate[filterDate.length - 1].startTime).getHours(); - console.log('firstEventStartHours-- ', firstEventStartHours) + // console.log('firstEventStartHours-- ', firstEventStartHours) if(firstEventStartHours) { const scrollContainer = document.querySelector('.timeline-wrapper'); @@ -929,11 +1126,11 @@ export class AgendaPage implements OnInit { }, 250) } - showAlert(){ + showAlert() { this.alertController.presentAlert("Funcionalidade em desenvolvimento."); } - changeProfile(){ + changeProfile() { if(this.profile == "mdgpr"){ console.log('pr'); diff --git a/src/app/shared/fingerprint/fingerprint.page.ts b/src/app/shared/fingerprint/fingerprint.page.ts index 82f37e4d7..e1348100f 100644 --- a/src/app/shared/fingerprint/fingerprint.page.ts +++ b/src/app/shared/fingerprint/fingerprint.page.ts @@ -66,7 +66,7 @@ export class FingerprintPage implements OnInit { // this.badRequest() // }); - } +} async successMessage(message?: string) { diff --git a/src/plugin/momentG.js b/src/plugin/momentG.js index 6ed4d9e5b..cf1d662b1 100644 --- a/src/plugin/momentG.js +++ b/src/plugin/momentG.js @@ -15,6 +15,7 @@ var month = [ ] var week = new Array('Domingo', 'Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sábado'); +var weekV = new Array('Do', 'Seg', 'Terç', 'Qua', 'Qui', 'Sex', 'Sáb'); class momentG { static run(date, formate , wgs){ @@ -37,7 +38,8 @@ class momentG { MM : (date.getMonth()+1).toString().padStart(2,"0"), HH : date.getHours().toString().padStart(2,"0"), yy: date.getFullYear().toString().slice(2,4).padStart(2,"0") , - EEEE : week[date.getDay()].padStart(2,"0") , + EEEE : week[date.getDay()].padStart(2,"0") , + EEEEV : weekV[date.getDay()].padStart(2,"0") , MMMM : month[date.getMonth()], yyyy : date.getFullYear() , }