peter/doneit-web
1
0
Fork 0
mirror of https://code.equilibrium.co.ao/ITO/doneit-web.git synced 2026-04-19 04:57:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve

Browse Source
This commit is contained in:
Peter Maquiran
2021-06-08 11:24:01 +01:00
parent 30997157e5
commit 5c9d253915
5 changed files with 493 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/pages/agenda/agenda.page.html
+130 -2
View File
@@ -173,9 +173,9 @@
<!-- Timeline -->
<div>
<div class="timeline-container d-flex" >
<div class="timeline-container d-flex py-20" >
<div [ngSwitch]="view" class="ss-timeline timeline-mobile flex-grow-1 d-md-none">
<!-- <div [ngSwitch]="view" class="ss-timeline timeline-mobile flex-grow-1 d-md-none">
<mwl-calendar-day-view
*ngSwitchCase="'day'"
[viewDate]="viewDate"
@@ -203,6 +203,134 @@
(eventClicked)="clearContact();eventClicked($event)"
>
</mwl-calendar-day-view>
</div> -->
<!-- <div class="ss-timeline timeline-mobile flex-grow-1 text-black d-md-none">
<div *ngFor="let events of TimelineMDList | keyvalue; let i = index ">
{{ i }}
<div *ngFor="let event of events">
{{ event.Subject}}
</div>
</div>
</div> -->
<div class="ss-timeline timeline-mobile flex-grow-1 d-md-none text-black pl-20" >
<div *ngFor="let events of TimelineMDList | keyvalue;" >
<div >
<div class="day mt-10">
{{ TimelineDayEvent(events.key)}}
</div>
<div *ngFor="let event of events.value" >
<div class="d-flex content-{{event.Profile}}-{{event.event.CalendarName}} mt-10 cursor-pointer width-100 " (click)="eventClicked(event)" *ngIf="eventListVisible(event.start)">
<div class="schedule-time" *ngIf="!event.event.IsAllDayEvent">
<div *ngIf="!event.endMany && !event.middle" class="time-start">{{event.event.StartDate | date: 'HH:mm'}}</div>
<div *ngIf="event.endMany && !event.middle" class="time-start">--</div>
<div *ngIf="!event.startMany && !event.middle" class="time-end">{{event.event.EndDate | date: 'HH:mm'}}</div>
<div *ngIf="event.startMany && !event.middle" class="time-end"> -- </div>
<div *ngIf="event.middle" class="time-start"> Todo </div>
<div *ngIf="event.middle" class="time-end text-center"> o dia </div>
</div>
<div class="schedule-time" *ngIf="event.event.IsAllDayEvent">
<div class="time-start">Todo</div>
<div class="time-end text-center">o dia</div>
</div>
<div class="schedule-details">
{{ event.event.CalendarName }}
<div class="location">{{event.event.Location}}</div>
<div class="description">{{event.event.Subject}}</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="fs-timeline flex-grow-1 d-none d-md-block d-md-block text-black pl-20 pr-20" *ngIf="loggeduser.Profile == 'MDGPR'">
<div *ngFor="let events of TimelineMDList | keyvalue;" >
<div >
<div class="day mt-10">
{{ TimelineDayEvent(events.key)}}
</div>
<div *ngFor="let event of events.value" >
<div class="d-flex content-mdgpr-{{event.event.CalendarName}} mt-10 cursor-pointer" (click)="eventClicked(event)">
<div class="schedule-time" *ngIf="!event.event.IsAllDayEvent">
<div *ngIf="!event.endMany && !event.middle" class="time-start">{{event.event.StartDate | date: 'HH:mm'}}</div>
<div *ngIf="event.endMany && !event.middle" class="time-start">--</div>
<div *ngIf="!event.startMany && !event.middle" class="time-end">{{event.event.EndDate | date: 'HH:mm'}}</div>
<div *ngIf="event.startMany && !event.middle" class="time-end"> -- </div>
<div *ngIf="event.middle" class="time-start"> Todo </div>
<div *ngIf="event.middle" class="time-end text-center"> o dia </div>
</div>
<div class="schedule-time" *ngIf="event.event.IsAllDayEvent">
<div class="time-start">Todo</div>
<div class="time-end">o dia</div>
</div>
<div class="schedule-details">
<div class="location">{{event.event.Location}}</div>
<div class="description">{{event.event.Subject}}</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="sd-timeline flex-grow-1 d-none d-md-block timeline-md text-black pr-20" >
<div *ngFor="let events of TimelinePRList | keyvalue;">
<div >
<div class="day mt-10">
{{ TimelineDayEvent(events.key)}}
</div>
<div *ngFor="let event of events.value" >
<div class="d-flex content-pr-{{event.event.CalendarName}} mt-10 cursor-pointer" (click)="eventClicked(event)">
<div class="schedule-time" *ngIf="!event.event.IsAllDayEvent">
<div *ngIf="!event.endMany && !event.middle" class="time-start">{{event.event.StartDate | date: 'HH:mm'}}</div>
<div *ngIf="event.endMany && !event.middle" class="time-start">--</div>
<div *ngIf="!event.startMany && !event.middle" class="time-end">{{event.event.EndDate | date: 'HH:mm'}}</div>
<div *ngIf="event.startMany && !event.middle" class="time-end"> -- </div>
<div *ngIf="event.middle" class="time-start"> Todo </div>
<div *ngIf="event.middle" class="time-end text-center"> o dia </div>
</div>
<div class="schedule-time" *ngIf="event.event.IsAllDayEvent">
<div class="time-start">Todo</div>
<div class="time-end">o dia</div>
</div>
<div class="schedule-details">
<div class="location">{{event.event.Location}}</div>
<div class="description">{{event.event.Subject}}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
src/app/pages/agenda/agenda.page.scss
+101
View File
@@ -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%;
}
src/app/pages/agenda/agenda.page.ts
+258 -61
View File
@@ -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');
src/app/shared/fingerprint/fingerprint.page.ts
+1 -1
View File
@@ -66,7 +66,7 @@ export class FingerprintPage implements OnInit {
// this.badRequest()
// });
}
}
async successMessage(message?: string) {