Added events to Agenda

This commit is contained in:
Tiago Kayaya
2020-08-24 12:45:42 +01:00
parent 88a12ffda5
commit d8f224a4e3
5 changed files with 146 additions and 190 deletions
+23 -15
View File
@@ -2,6 +2,19 @@
<ion-toolbar>
<ion-title>Agenda</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-segment [(ngModel)]="segment">
<ion-segment-button value="combinada">
Combinada
</ion-segment-button>
<ion-segment-button value="oficial">
Oficial
</ion-segment-button>
<ion-segment-button value="pessoal">
Pessoal
</ion-segment-button>
</ion-segment>
</ion-toolbar>
</ion-header>
<!--
<ion-content> -->
@@ -19,19 +32,14 @@
</ion-segment>
</ion-toolbar> -->
<ion-content>
<ion-toolbar>
<ion-segment [(ngModel)]="segment">
<ion-segment-button value="combinada">
Combinada
</ion-segment-button>
<ion-segment-button value="oficial">
Oficial
</ion-segment-button>
<ion-segment-button value="pessoal">
Pessoal
</ion-segment-button>
</ion-segment>
</ion-toolbar>
<ion-refresher name="refresher" slot="fixed" (ionRefresh)="refreshAgenda($event)">
<ion-refresher-content
pullingIcon="chevron-down-circle-outline"
pullingText="deslize para actualizar"
refreshingSpinner="circles"
refreshingText="a actualizar...">
</ion-refresher-content>
</ion-refresher>
<ion-row>
<!-- <ion-col size="6">
@@ -77,6 +85,8 @@
[currentDate]="calendar.currentDate"
(onEventSelected)="onEventSelected($event)"
(onTitleChanged)="onViewTitleChanged($event)"
(onRangeChanged)="onRangeChanged($event)"
queryMode="remote"
startHour="6"
endHour="20"
step="30"
@@ -97,8 +107,6 @@
</div>
</ng-template>
<ion-fab vertical="bottom" horizontal="end" slot="fixed">
<ion-fab-button>
<ion-icon name="add" (click)="openCalModal()"></ion-icon>
+39 -173
View File
@@ -4,9 +4,10 @@ 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 { Observable } from 'rxjs';
import { Observable, ObjectUnsubscribedError } from 'rxjs';
import { Event } from '../../models/event.model';
import { parse } from 'date-fns';
import { Router } from '@angular/router';
@Component({
selector: 'app-agenda',
@@ -15,16 +16,6 @@ import { parse } from 'date-fns';
})
export class AgendaPage implements OnInit {
event = {
title: 'Teste',
desc: 'Desc',
startTime: '2020,21,08',
endTime: '2020,22,08',
allDay: false
};
/* minDate = new Date().toDateString(); */
/* List of events of our calendar */
eventSource = [];
/* The title of the calendar */
@@ -42,31 +33,24 @@ export class AgendaPage implements OnInit {
segment:string;
eventsList: Event[];
responseEventId:string = '';
loadedEvent: Event;
eventItem: Observable<Event>;
constructor(
private alertCtrl: AlertController,
@Inject(LOCALE_ID) private locale: string,
private modalCtrl: ModalController,
private eventService: EventsService
private eventService: EventsService,
private router: Router
) {}
ngOnInit() {
//Inicializar segment
this.segment = "combinada";
this.createdEvent();
/* this.resetEvent(); */
}
/* resetEvent(){
this.event = {
title: '',
desc: '',
startTime: new Date().toDateString(),
endTime: new Date().toDateString(),
allDay: false
};
} */
//Go to the next view of the calendar month/week/day
next(){
this.myCal.slideNext();
@@ -80,172 +64,54 @@ export class AgendaPage implements OnInit {
this.viewTitle = title;
}
//Show information of the event
async onEventSelected(event){
//Using Angular date pipe for conversion
let start = formatDate(event.startTime, 'medium', this.locale);
let end = formatDate(event.endTime, 'medium', this.locale);
const alert = await this.alertCtrl.create({
header: event.title,
subHeader: event.desc,
message: 'From' + start + '<br><br>To:' + end,
buttons: ['OK'],
});
alert.present();
async onEventSelected(ev: { event: Event}){
console.log(ev.event.EventId);
this.router.navigate(["/home/events", ev.event.EventId]);
}
createRandomEvents(){
var events = [];
for(var i = 0; i < 50; i += 1 ){
var date = new Date();
var eventType = Math.floor(Math.random() * 2);
var startDay = Math.floor(Math.random() * 90) - 45;
var endDay = Math.floor(Math.random() * 2) + startDay;
var startTime;
var endTime;
if(eventType === 0){
startTime = new Date(
Date.UTC(
date.getUTCFullYear(),
date.getUTCMonth(),
date.getUTCDate() + startDay
)
);
if(endDay === startDay){
endDay += 1;
}
endTime = new Date(
Date.UTC(
date.getUTCFullYear(),
date.getUTCMonth(),
date.getUTCDate() + endDay
)
);
events.push({
title: 'Todo o dia - ' + i,
startTime: startTime,
endTime: endTime,
allDay: true,
});
} else {
var startMinute = Math.floor(Math.random() * 24 * 60);
var endMinute = Math.floor(Math.random()* 180) + startMinute;
startTime = new Date(
date.getFullYear(),
date.getMonth(),
date.getDate() + endDay,
0,
date.getMinutes() + startMinute
);
endTime = new Date(
date.getFullYear(),
date.getMonth(),
date.getDate() + endDay,
0,
date.getMinutes() + endMinute
);
events.push({
title: 'Evento - ' + i,
startTime: startTime,
endTime: endTime,
allDay: false
});
}
}
/* Here you might get your events from the API */
this.eventSource = events;
}
removeEvents(){
this.eventSource = [];
}
onTimeSelected(ev){
}
onRangeChanged (ev: { startTime: Date, endTime: Date }) {
this.loadRangeEvents(ev.startTime, ev.endTime);
};
async openCalModal() {
const modal = await this.modalCtrl.create({
component: CalModalPage,
cssClass: 'cal-modal',
backdropDismiss: false
});
await modal.present();
modal.onDidDismiss().then((result) => {
if (result.data && result.data.event) {
let event = result.data.event;
if (event.allDay) {
let start = event.startTime;
event.startTime = new Date(
Date.UTC(
start.getUTCFullYear(),
start.getUTCMonth(),
start.getUTCDate()
)
);
event.endTime = new Date(
Date.UTC(
start.getUTCFullYear(),
start.getUTCMonth(),
start.getUTCDate() + 1
)
);
}
/* Here you save the data entered */
this.eventSource.push(result.data.event);
/* Here you load the data saved */
this.myCal.loadEvents();
}
});
modal.onDidDismiss();
this.loading();
}
async createdEvent(){
var s = '01-01-1970 00:03:44';
var d = new Date(s);
console.log(d);
const defaultStartDate = new Date();
const test = parse('Fri Aug 21 2020 14:20:06 GMT+0100 (West Africa Standard Time)', 'd/M/yyyy HH:mm:ss', new Date());
console.log(test);
const defaultEndDate = new Date();
await this.eventService.getAllEvents("2020-01-01","2020-12-31").subscribe(
async loadRangeEvents(startTime: Date, endTime: Date){
this.eventService.getAllEvents(formatDate(startTime, 'yyyy-MM-dd HH:mm:ss', 'pt'), formatDate(endTime, 'yyyy-MM-dd HH:mm:ss', 'pt')).subscribe(
response => {
this.eventsList = response;
console.log(this.eventsList[0].EventId);
for(let i=0; i<this.eventsList.length; i++){
console.log(this.eventsList[i].EndDate);
/* 2020-08-14 23:59:59 */
let eventCopy = {
title: this.eventsList[i].Subject,
desc: 'Desc',
startTime: new Date(), /* this.eventsList[i].StartDate, */
endTime:new Date(), /* this.eventsList[i].EndDate, */
allDay: false
}
this.eventSource.push(eventCopy);
this.myCal.loadEvents();
console.log(eventCopy.startTime);
console.log(eventCopy.endTime);
}
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.loading();
});
}
);
/* console.log(this.eventsList[0].Subject);
console.log(this.eventsList[0].StartDate);
console.log('Size'+this.eventsList.length); */
/* this.myCal.loadEvents(); */
}
loading(){
this.myCal.loadEvents();
}
refreshAgenda(event){
this.loading();
setTimeout(() => {
event.target.complete();
}, 2000);
}
}
@@ -34,6 +34,8 @@ export class EventDetailPage implements OnInit {
/* this.loadedEvent = this.eventsService.getEvent(eventId); */
this.eventItem = this.eventsService.getEvent(eventId);
/* console.log(this.eventItem); */
this.eventsService.getEvent(eventId).subscribe(response =>
{
this.loadedEvent = response;