mirror of
https://code.equilibrium.co.ao/ITO/doneit-web.git
synced 2026-04-18 20:47:54 +00:00
545 lines
16 KiB
TypeScript
545 lines
16 KiB
TypeScript
import { Component, OnInit, ViewChild, Inject, LOCALE_ID } from '@angular/core';
|
|
import { CalendarComponent } from 'ionic2-calendar';
|
|
import { AlertController, ModalController } from '@ionic/angular';
|
|
import { formatDate } from '@angular/common';
|
|
import { CalModalPage } from '../cal-modal/cal-modal.page';
|
|
import { EventsService } from 'src/app/services/events.service';
|
|
import { Event } from '../../models/event.model';
|
|
import { Router, NavigationEnd } from '@angular/router';
|
|
import { AlertService } from 'src/app/services/alert.service';
|
|
import { NewEventPage } from './new-event/new-event.page';
|
|
import { ViewEventPage } from './view-event/view-event.page';
|
|
|
|
// showTimeline
|
|
import { setHours, setMinutes } from 'date-fns';
|
|
import {
|
|
CalendarDateFormatter,
|
|
CalendarEvent,
|
|
CalendarView,
|
|
DAYS_OF_WEEK,
|
|
} from 'angular-calendar';
|
|
import { CustomDateFormatter } from './custom-date-formatter.provider';
|
|
|
|
@Component({
|
|
selector: 'app-agenda',
|
|
templateUrl: './agenda.page.html',
|
|
styleUrls: ['./agenda.page.scss'],
|
|
providers: [
|
|
{
|
|
provide: CalendarDateFormatter,
|
|
useClass: CustomDateFormatter,
|
|
},
|
|
],
|
|
})
|
|
export class AgendaPage implements OnInit {
|
|
|
|
view: CalendarView = CalendarView.Day;
|
|
|
|
viewDate: Date = new Date();
|
|
|
|
weekStartsOn: number = DAYS_OF_WEEK.MONDAY;
|
|
|
|
weekendDays: number[] = [DAYS_OF_WEEK.FRIDAY, DAYS_OF_WEEK.SATURDAY];
|
|
|
|
CalendarView = CalendarView;
|
|
|
|
timelineDate: string;
|
|
|
|
setView(view: CalendarView) {
|
|
this.view = view;
|
|
}
|
|
|
|
monthList = [
|
|
{ name: 'Janeiro', id: 'Jan' },
|
|
{ name: 'Fevereiro', id: 'Feb' },
|
|
{ name: 'Março', id: 'Mar' },
|
|
{ name: 'Abril', id: 'Apr' },
|
|
{ name: 'Maio', id: 'May' },
|
|
{ name: 'Junho', id: 'June' },
|
|
{ name: 'Julho', id: 'July' },
|
|
{ name: 'Agosto', id: 'Aug' },
|
|
{ name: 'Setembro', id: 'Sept' },
|
|
{ name: 'Outubro', id: 'Oct' },
|
|
{ name: 'Novembro', id: 'Nov' },
|
|
{ name: 'Dezembro', id: 'Dec' }
|
|
]
|
|
|
|
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'
|
|
},
|
|
}, */
|
|
];
|
|
|
|
/* List of events of our calendar */
|
|
eventSource = [];
|
|
/* The title of the calendar */
|
|
viewTitle: string;
|
|
|
|
calendar = {
|
|
/* Se the view of the calendar to a month view */
|
|
mode: 'month',
|
|
currentDate: new Date(),
|
|
};
|
|
|
|
selectedDate: Date;
|
|
eventSelectedDate: Date = new Date();
|
|
eventSelectedDate2: Date;
|
|
rangeStartDate: Date;
|
|
rangeEndDate: Date;
|
|
|
|
@ViewChild(CalendarComponent) myCal: CalendarComponent;
|
|
|
|
segment:string;
|
|
profile:string;
|
|
|
|
eventsList: Event[];
|
|
eventsListPessoal: Event[];
|
|
eventsListOficial: Event[];
|
|
|
|
prEventList: Event[];
|
|
mdEventList: Event[];
|
|
|
|
showLoader: boolean;
|
|
|
|
startTime: Date;
|
|
endTime: Date;
|
|
|
|
|
|
|
|
constructor(
|
|
private alertCtrl: AlertController,
|
|
@Inject(LOCALE_ID) private locale: string,
|
|
private modalCtrl: ModalController,
|
|
private eventService: EventsService,
|
|
private router: Router,
|
|
private alertCrontroller: AlertService
|
|
) {
|
|
|
|
this.timelineDate = formatDate(new Date,'dd MMMM yyyy', 'pt');
|
|
|
|
setTimeout(()=>{
|
|
// console.log(JSON.stringify(this.events));
|
|
// console.log(this.events);
|
|
},5000)
|
|
|
|
// console.log(setHours(setMinutes(new Date(), 0), 12))
|
|
|
|
function setCookie(cname, cvalue, exdays) {
|
|
var d = new Date();
|
|
d.setTime(d.getTime() + (exdays*24*60*60*1000));
|
|
var expires = "expires="+ d.toUTCString();
|
|
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
|
|
}
|
|
|
|
// AccoesPresidenciais = Correspondencia = 0
|
|
setCookie('searchModalAPPType','0', 99999999);
|
|
|
|
this.showLoader = false;
|
|
}
|
|
|
|
ngOnInit() {
|
|
this.profile = "mdgpr";
|
|
//Inicializar segment
|
|
/* localStorage.setItem('test', this.eventSelectedDate.toString()); */
|
|
|
|
this.router.events.forEach((event) => {
|
|
if(event instanceof NavigationEnd && event.url == "/home/agenda") {
|
|
if (this.segment == null)
|
|
{
|
|
this.segment = "Combinada";
|
|
}
|
|
else
|
|
{
|
|
this.loadRangeEvents(this.rangeStartDate, this.rangeEndDate);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
|
|
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();
|
|
}
|
|
//Go to the previous view of the calendar
|
|
back(){
|
|
this.myCal.slidePrev();
|
|
}
|
|
//Shows the title of your view
|
|
onViewTitleChanged(title){
|
|
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-type-both';
|
|
} else {
|
|
return 'calendar-event-type-'+(Object.keys(eventType))[0];
|
|
}
|
|
|
|
}
|
|
|
|
return "";
|
|
}
|
|
|
|
// Show information of the event for timeline
|
|
eventClicked({ event }: { event: CalendarEvent }): void {
|
|
console.log('Event clicked', event);
|
|
this.eventSelectedDate = event.start;
|
|
this.router.navigate(["/home/agenda", event.id, 'agenda']);
|
|
}
|
|
|
|
//Show information of the event
|
|
async onEventSelected(ev: { event: Event}){
|
|
this.viewEventDetail(ev.event.EventId);
|
|
/* this.router.navigate(["/home/agenda", ev.event.EventId, 'agenda']); */
|
|
}
|
|
|
|
onCurrentChanged = (ev: Date) => {
|
|
// timeline change date
|
|
this.timelineDate = formatDate(ev,'dd MMMM yyyy', 'pt');
|
|
this.viewDate = new Date(formatDate(ev,'yyyy-MM-dd', 'pt'));
|
|
// calendar change date
|
|
console.log('!!this!!')
|
|
this.eventSelectedDate = new Date(ev);
|
|
};
|
|
|
|
// changedate
|
|
dropDownChangeDate(id: string){
|
|
|
|
const currentCandarDayYear = formatDate(this.eventSelectedDate,'dd -- yyyy', 'pt');
|
|
const newDate = new Date(currentCandarDayYear.replace('--',id));
|
|
this.onCurrentChanged(newDate);
|
|
}
|
|
|
|
/* onTimeSelected = (ev: { selectedTime: Date, events: any[] }) => {
|
|
console.log('Selected time: ' + ev.selectedTime + ', hasEvents: ' + (ev.events !== undefined && ev.events.length !== 0));
|
|
this.eventSelectedDate2 = ev.selectedTime;
|
|
}; */
|
|
|
|
onRangeChanged (ev: { startTime: Date, endTime: Date }) {
|
|
this.rangeStartDate = ev.startTime;
|
|
this.rangeEndDate = ev.endTime;
|
|
console.log('!!!')
|
|
|
|
this.loadRangeEvents(this.rangeStartDate, this.rangeEndDate);
|
|
};
|
|
|
|
async openCalModal() {
|
|
const modal = await this.modalCtrl.create({
|
|
component: CalModalPage,
|
|
componentProps:{
|
|
segment: this.segment,
|
|
profile: this.profile,
|
|
eventSelectedDate: this.eventSelectedDate,
|
|
},
|
|
cssClass: 'cal-modal',
|
|
backdropDismiss: false
|
|
});
|
|
|
|
await modal.present();
|
|
|
|
modal.onDidDismiss().then((data) => {
|
|
let postEvent: Event = data['data'];
|
|
if (postEvent.Subject != null)
|
|
{
|
|
this.eventSource.push({
|
|
title: postEvent.Subject,
|
|
startTime: new Date(postEvent.StartDate),
|
|
endTime: new Date(postEvent.EndDate),
|
|
allDay: false,
|
|
event: postEvent
|
|
});
|
|
|
|
this.myCal.update();
|
|
this.myCal.loadEvents();
|
|
this.loadRangeEvents(this.rangeStartDate, this.rangeEndDate);
|
|
}
|
|
});
|
|
}
|
|
|
|
timeLineTemplate(startTime: string, eventlocation: string, eventDiscription: any, calendarName: string, subject: string): string{
|
|
return `
|
|
<div class="timeline-box timeline-box-${calendarName}">
|
|
<div>
|
|
<span class="timeline-start-time">${startTime}</span><span class="timeline-location">${eventlocation}</span>
|
|
</div>
|
|
<div class="timeline-event-discription">
|
|
${subject}
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
loadRangeEvents(startTime: Date, endTime: Date){
|
|
|
|
console.log('Update date');
|
|
console.log('start ',startTime,' end', endTime)
|
|
|
|
this.showTimeline = false;
|
|
this.showLoader = true;
|
|
|
|
switch (this.segment)
|
|
{
|
|
case "Combinada":
|
|
//Inicializa o array eventSource
|
|
this.eventSource=[];
|
|
this.events=[];
|
|
|
|
|
|
if(this.profile == "mdgpr"){
|
|
this.eventService.getAllMdEvents(formatDate(startTime, 'yyyy-MM-dd', 'pt'), formatDate(endTime, 'yyyy-MM-dd', 'pt')).subscribe(
|
|
response => {
|
|
this.eventsList = response;
|
|
// loop
|
|
this.eventsList.forEach(element => {
|
|
|
|
this.eventSource.push({
|
|
title: element.Subject,
|
|
startTime: new Date(element.StartDate),
|
|
endTime: new Date(element.EndDate),
|
|
allDay: false,
|
|
event: element,
|
|
calendarName: element.CalendarName
|
|
});
|
|
|
|
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
|
|
});
|
|
|
|
});
|
|
|
|
this.myCal.update();
|
|
this.myCal.loadEvents();
|
|
|
|
this.showLoader = false;
|
|
this.showTimeline = true;
|
|
|
|
});
|
|
|
|
}
|
|
else{
|
|
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.eventSource.push({
|
|
title: element.Subject,
|
|
startTime: new Date(element.StartDate),
|
|
endTime: new Date(element.EndDate),
|
|
allDay: false,
|
|
event: element
|
|
});
|
|
});
|
|
this.myCal.update();
|
|
this.myCal.loadEvents();
|
|
this.showLoader = false;
|
|
});
|
|
}
|
|
break;
|
|
|
|
case "Pessoal":
|
|
//Inicializa o array eventSource
|
|
this.eventSource=[];
|
|
if(this.profile == "mdgpr"){
|
|
this.eventService.getAllMdEvents(formatDate(startTime, 'yyyy-MM-dd HH:mm:ss', 'pt'), formatDate(endTime, 'yyyy-MM-dd HH:mm:ss', 'pt')).subscribe(response => {
|
|
this.eventsListPessoal = response.filter(data => data.CalendarName == "Pessoal");
|
|
this.eventsListPessoal.forEach(element => {
|
|
this.eventSource.push({
|
|
title: element.Subject,
|
|
startTime: new Date(element.StartDate),
|
|
endTime: new Date(element.EndDate),
|
|
allDay: false,
|
|
event: element
|
|
});
|
|
});
|
|
this.myCal.update();
|
|
this.myCal.loadEvents();
|
|
this.showLoader = false;
|
|
});
|
|
}
|
|
else{
|
|
this.eventService.getAllPrEvents(formatDate(startTime, 'yyyy-MM-dd HH:mm:ss', 'pt'), formatDate(endTime, 'yyyy-MM-dd HH:mm:ss', 'pt')).subscribe(response => {
|
|
this.eventsListPessoal = response.filter(data => data.CalendarName == "Pessoal");
|
|
this.eventsListPessoal.forEach(element => {
|
|
this.eventSource.push({
|
|
title: element.Subject,
|
|
startTime: new Date(element.StartDate),
|
|
endTime: new Date(element.EndDate),
|
|
allDay: false,
|
|
event: element
|
|
});
|
|
});
|
|
this.myCal.update();
|
|
this.myCal.loadEvents();
|
|
this.showLoader = false;
|
|
});
|
|
}
|
|
break;
|
|
|
|
case "Oficial":
|
|
//Inicializa o array eventSource
|
|
this.eventSource=[];
|
|
if(this.profile == "mdgpr"){
|
|
this.eventService.getAllMdEvents(formatDate(startTime, 'yyyy-MM-dd HH:mm:ss', 'pt'), formatDate(endTime, 'yyyy-MM-dd HH:mm:ss', 'pt')).subscribe(res => {
|
|
this.eventsListOficial = res.filter(data => data.CalendarName == "Oficial");
|
|
this.eventsListOficial.forEach(element => {
|
|
this.eventSource.push({
|
|
title: element.Subject,
|
|
startTime: new Date(element.StartDate),
|
|
endTime: new Date(element.EndDate),
|
|
allDay: false,
|
|
event: element
|
|
});
|
|
});
|
|
this.myCal.update();
|
|
this.myCal.loadEvents();
|
|
this.showLoader = false;
|
|
});
|
|
}else{
|
|
this.eventService.getAllPrEvents(formatDate(startTime, 'yyyy-MM-dd HH:mm:ss', 'pt'), formatDate(endTime, 'yyyy-MM-dd HH:mm:ss', 'pt')).subscribe(res => {
|
|
this.eventsListOficial = res.filter(data => data.CalendarName == "Oficial");
|
|
this.eventsListOficial.forEach(element => {
|
|
this.eventSource.push({
|
|
title: element.Subject,
|
|
startTime: new Date(element.StartDate),
|
|
endTime: new Date(element.EndDate),
|
|
allDay: false,
|
|
event: element
|
|
});
|
|
});
|
|
this.myCal.update();
|
|
this.myCal.loadEvents();
|
|
this.showLoader = false;
|
|
});
|
|
}
|
|
break;
|
|
|
|
}
|
|
}
|
|
|
|
actions(){
|
|
|
|
}
|
|
|
|
doRefresh(ev: any){
|
|
this.loadRangeEvents(this.rangeStartDate, this.rangeEndDate);
|
|
setTimeout(() => {
|
|
ev.target.complete();
|
|
}, 250);
|
|
}
|
|
showAlert(){
|
|
this.alertCrontroller.presentAlert("Funcionalidade em desenvolvimento.");
|
|
}
|
|
changeProfile(){
|
|
if(this.profile == "mdgpr"){
|
|
console.log('pr');
|
|
this.profile ="pr";
|
|
this.loadRangeEvents(this.rangeStartDate, this.rangeEndDate);
|
|
}
|
|
else{
|
|
console.log('mdgpr');
|
|
this.profile ="mdgpr";
|
|
this.loadRangeEvents(this.rangeStartDate, this.rangeEndDate);
|
|
}
|
|
}
|
|
|
|
async openAddEvent() {
|
|
const modal = await this.modalCtrl.create({
|
|
component: NewEventPage,
|
|
componentProps:{
|
|
segment: this.segment,
|
|
profile: this.profile,
|
|
eventSelectedDate: this.eventSelectedDate,
|
|
},
|
|
cssClass: 'modal',
|
|
backdropDismiss: false
|
|
});
|
|
await modal.present();
|
|
modal.onDidDismiss().then((data) => {
|
|
let postEvent: Event = data['data'];
|
|
if (postEvent.Subject != null)
|
|
{
|
|
this.eventSource.push({
|
|
title: postEvent.Subject,
|
|
startTime: new Date(postEvent.StartDate),
|
|
endTime: new Date(postEvent.EndDate),
|
|
allDay: false,
|
|
event: postEvent
|
|
});
|
|
this.myCal.update();
|
|
this.myCal.loadEvents();
|
|
this.loadRangeEvents(this.rangeStartDate, this.rangeEndDate);
|
|
}
|
|
});
|
|
}
|
|
|
|
async viewEventDetail(eventId:any) {
|
|
console.log(this.profile);
|
|
|
|
const modal = await this.modalCtrl.create({
|
|
component: ViewEventPage,
|
|
componentProps:{
|
|
eventId: eventId,
|
|
},
|
|
cssClass: 'modal',
|
|
backdropDismiss: false
|
|
});
|
|
await modal.present();
|
|
modal.onDidDismiss().then((res)=>{
|
|
if(res){
|
|
console.log(res);
|
|
this.loadRangeEvents(this.rangeStartDate, this.rangeEndDate);
|
|
}
|
|
});
|
|
}
|
|
|
|
|
|
|
|
}
|