Added events to Agenda

package-lock.json

@@ -1948,6 +1948,79 @@
         }
       }
     },
+    "@fullcalendar/angular": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/@fullcalendar/angular/-/angular-5.3.0.tgz",
+      "integrity": "sha512-6i1BzG72UbQOWaRWnS8HgKZ19rInJuWk7IC5vvR4OCWwxfTwHfZd6Z+nWAOFTSpT1BGtoBpfdoTB0GwV9+iaYA==",
+      "requires": {
+        "@fullcalendar/core": "~5.3.0",
+        "fast-deep-equal": "^3.1.1"
+      }
+    },
+    "@fullcalendar/common": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/@fullcalendar/common/-/common-5.3.0.tgz",
+      "integrity": "sha512-TYWV2hx9tKNWjRWX8Im3nyikXMekpPBurqxM6jRxEdKzfhzKEHlJEyBi8Buz8Xg4Qyg2KkjuWwq2+ImGg0hcOw==",
+      "requires": {
+        "tslib": "^2.0.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.1.tgz",
+          "integrity": "sha512-SgIkNheinmEBgx1IUNirK0TUD4X9yjjBRTqqjggWCU3pUEqIk3/Uwl3yRixYKT6WjQuGiwDv4NomL3wqRCj+CQ=="
+        }
+      }
+    },
+    "@fullcalendar/core": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/@fullcalendar/core/-/core-5.3.0.tgz",
+      "integrity": "sha512-blA6r4dFKRyFxB3tiG8eeF2kl75rep8aavYZGpALGZEfPLf/T3xqPf4ulgYZ5bojsUXS9FQM0NqFM9jD/XSnOg==",
+      "requires": {
+        "@fullcalendar/common": "~5.3.0",
+        "preact": "^10.0.5",
+        "tslib": "^2.0.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.1.tgz",
+          "integrity": "sha512-SgIkNheinmEBgx1IUNirK0TUD4X9yjjBRTqqjggWCU3pUEqIk3/Uwl3yRixYKT6WjQuGiwDv4NomL3wqRCj+CQ=="
+        }
+      }
+    },
+    "@fullcalendar/daygrid": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/@fullcalendar/daygrid/-/daygrid-5.3.0.tgz",
+      "integrity": "sha512-YDE7Pnxf+jkkQjogYPEgHDn4mahgUl2eNJRSytQOBJDVrsWcR/nAXI0PhsWHKi86BZVviEiEjzuLv+e4jeIVCg==",
+      "requires": {
+        "@fullcalendar/common": "~5.3.0",
+        "tslib": "^2.0.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.1.tgz",
+          "integrity": "sha512-SgIkNheinmEBgx1IUNirK0TUD4X9yjjBRTqqjggWCU3pUEqIk3/Uwl3yRixYKT6WjQuGiwDv4NomL3wqRCj+CQ=="
+        }
+      }
+    },
+    "@fullcalendar/interaction": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/@fullcalendar/interaction/-/interaction-5.3.0.tgz",
+      "integrity": "sha512-ls1OlE55axFUEVHdk3k+gRThx6dvOtk7XKTYHCy1nQmKafWhvW8wuf8v8Pa5uUAndRkNVZZNfbha842P4zb+NA==",
+      "requires": {
+        "@fullcalendar/common": "~5.3.0",
+        "tslib": "^2.0.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.1.tgz",
+          "integrity": "sha512-SgIkNheinmEBgx1IUNirK0TUD4X9yjjBRTqqjggWCU3pUEqIk3/Uwl3yRixYKT6WjQuGiwDv4NomL3wqRCj+CQ=="
+        }
+      }
+    },
     "@ionic-native/core": {
       "version": "5.27.0",
       "resolved": "https://registry.npmjs.org/@ionic-native/core/-/core-5.27.0.tgz",
@@ -6565,8 +6638,7 @@
     "fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
-      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
-      "dev": true
     },
     "fast-glob": {
       "version": "3.2.4",
@@ -11074,6 +11146,11 @@
       "integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==",
       "dev": true
     },
+    "preact": {
+      "version": "10.4.7",
+      "resolved": "https://registry.npmjs.org/preact/-/preact-10.4.7.tgz",
+      "integrity": "sha512-DtnnPbOm7oxW7Sxf5Co+KSIOxo7bGm0vLfJN/wGey7G2sAGKnGP5+bFyE2YIgutMISQl6xFVTsOd6l/Au88VVw=="
+    },
     "prepend-http": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-1.0.4.tgz",

package.json

@@ -21,6 +21,9 @@
     "@angular/router": "~9.1.6",
     "@capacitor/android": "^2.4.0",
     "@capacitor/core": "2.4.0",
+    "@fullcalendar/angular": "^5.3.0",
+    "@fullcalendar/daygrid": "^5.3.0",
+    "@fullcalendar/interaction": "^5.3.0",
     "@ionic-native/core": "^5.0.7",
     "@ionic-native/splash-screen": "^5.0.0",
     "@ionic-native/status-bar": "^5.0.0",

src/app/pages/agenda/agenda.page.html

@@ -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-refresher  name="refresher" slot="fixed" (ionRefresh)="refreshAgenda($event)">
-      <ion-segment [(ngModel)]="segment">
+      <ion-refresher-content 
-        <ion-segment-button value="combinada">
+      pullingIcon="chevron-down-circle-outline"
-          Combinada
+      pullingText="deslize para actualizar"
-        </ion-segment-button>
+      refreshingSpinner="circles"
-        <ion-segment-button value="oficial">
+      refreshingText="a actualizar...">
-          Oficial
+      </ion-refresher-content>
-        </ion-segment-button>
+    </ion-refresher>
-        <ion-segment-button value="pessoal">
-          Pessoal
-        </ion-segment-button>
-      </ion-segment>
-    </ion-toolbar>
    
     <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>

src/app/pages/agenda/agenda.page.ts

@@ -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){
+  async onEventSelected(ev: { event: Event}){
-    //Using Angular date pipe for conversion
+    console.log(ev.event.EventId);
-    let start = formatDate(event.startTime, 'medium', this.locale);
+    this.router.navigate(["/home/events", ev.event.EventId]);
-    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();
   }
 
-  createRandomEvents(){
+  onRangeChanged (ev: { startTime: Date, endTime: Date }) {
-    var events = [];
+    this.loadRangeEvents(ev.startTime, ev.endTime);
-    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){
-    
-  }
   async openCalModal() {
     const modal = await this.modalCtrl.create({
       component: CalModalPage,
       cssClass: 'cal-modal',
       backdropDismiss: false
     });
-  
     await modal.present();
-  
+    modal.onDidDismiss();
-    modal.onDidDismiss().then((result) => {
+    this.loading();
-      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();
-      }
-    });
   }
 
-
+  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(
-  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(
       response => {
         this.eventsList = response;
-
+        this.eventsList.forEach(element => {
-        console.log(this.eventsList[0].EventId);
+          this.eventSource.push({
-        
+            title: element.Subject,
-        for(let i=0; i<this.eventsList.length; i++){
+            startTime: new Date(element.StartDate),
-          console.log(this.eventsList[i].EndDate);
+            endTime: new Date(element.EndDate),
-
+            allDay: false,
-          /* 2020-08-14 23:59:59 */
+            event: element
-
+          });
-          let eventCopy = {
+          this.loading();
-            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);
-        }
       }
     );
-
-    /* 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);
+  }
 
 }

src/app/pages/events/event-detail/event-detail.page.ts

@@ -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;