1-Improved project structure. 2-Added new pages. 3-Prepared the environment to consume APIS. 4-Added Axios to the project. 5-Added get methods.

2026-04-18 12:37:53 +00:00 · 2020-08-18 23:32:12 +01:00
parent 6e273e6eb8
commit 63f7b08091
23 changed files with 756 additions and 34 deletions
@@ -10,10 +10,15 @@ const routes: Routes = [
    path: '',
    loadChildren: () => import('./home/home.module').then( m => m.HomePageModule)
  },
-  {
+ /*  {
    path: 'cal-modal',
    loadChildren: () => import('./pages/cal-modal/cal-modal.module').then( m => m.CalModalPageModule)
-  },
+  }, */
+  /* {
+    path: 'events',
+    loadChildren: () => import('./pages/events/events.module').then( m => m.EventsPageModule)
+  }, */
+
  /* 
  {
    path: 'gabinete-digital-menu',
@@ -2,6 +2,7 @@ import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';

 import { HomePage } from './home.page';
+import { EventsPage } from '../pages/events/events.page';

 const routes: Routes = [
  {
@@ -9,41 +10,58 @@ const routes: Routes = [
    component: HomePage,
    children: [
      {
-        path: '',
-        loadChildren: ()=> import('../pages/feed/feed.module').then(m => m.FeedPageModule)
-      },
-      {
-        path: 'feed',
-        loadChildren: ()=> import('../pages/feed/feed.module').then(m => m.FeedPageModule)
-      },
-      {
-        path: 'search',
-        loadChildren: ()=> import('../pages/search/search.module').then(m => m.SearchPageModule)
+        path: 'events',
+        children: [
+          {
+            path:'',
+          loadChildren: ()=> import('../pages/events/events.module').then(m => m.EventsPageModule)
+          },
+          {
+            path:':eventId',
+          loadChildren: ()=> import('../pages/events/event-detail/event-detail.module').then(m => m.EventDetailPageModule)
+          },
+
+        ]
      },
      {
        path: 'agenda',
-        loadChildren: ()=> import('../pages/agenda/agenda.module').then(m => m.AgendaPageModule)
-      },
-      {
-        path: 'gabinete-digital',
-        loadChildren: ()=> import('../pages/gabinete-digital/gabinete-digital.module').then(m => m.GabineteDigitalPageModule)
+        children: [
+          {
+            path:'',
+          loadChildren: ()=> import('../pages/agenda/agenda.module').then(m => m.AgendaPageModule)
+          }
+        ]
      },
      {
        path: 'gabinete-digital-menu',
-        loadChildren: ()=> import('../pages/gabinete-digital-menu/gabinete-digital-menu.module').then(m => m.GabineteDigitalMenuPageModule)
+        children: [
+          {
+            path:'',
+            loadChildren: ()=> import('../pages/gabinete-digital-menu/gabinete-digital-menu.module').then(m => m.GabineteDigitalMenuPageModule)
+          }
+        ]
+      },
+      {
+        path: 'search',
+        children: [
+          {
+            path:'',
+            loadChildren: ()=> import('../pages/search/search.module').then(m => m.SearchPageModule)
+          }
+        ]
      },
      /* PROVISORIO */
-      {
+     /*  {
        path: 'view-event',
        loadChildren: ()=> import('../pages/view-event/view-event.module').then(m => m.ViewEventPageModule)
-      },
+      }, */
    ]
-  }/* ,
+  },
  {
    path: '',
-    redirectTo: 'home/feed',
+    redirectTo: 'home/events',
    pathMatch: 'full'
-  } */
+  }
 ];

@NgModule({
@@ -1,6 +1,6 @@
 <ion-tabs>
    <ion-tab-bar slot="bottom">
-      <ion-tab-button tab="feed">
+      <ion-tab-button tab="events">
        <ion-icon name="home"></ion-icon>
        <ion-label>Home</ion-label>
      </ion-tab-button>
@@ -0,0 +1,27 @@
+import { EventBody } from './eventbody.model';
+import { EventPerson } from './eventperson.model';
+import { EventAttachment } from './eventattachment.model';
+
+export interface Event{
+   
+    EventId: string;
+    Subject: string;
+    Body: EventBody;
+    Location: string;
+    CalendarId: string;
+    CalendarName: string;
+    StartDate: string;
+    EndDate: string;
+    EventType: string;
+    RequiredAttendees: EventPerson;
+    OptionalAttendees: EventPerson;
+    HasAttachments: boolean;
+    IsMeeting: boolean;
+    IsRecurring: boolean;
+    AppointmentState: number;
+    TimeZone: string;
+    Organizer: string;
+    Categories: string[];
+    Attachments: EventAttachment;
+    
+}
@@ -0,0 +1,8 @@
+export interface EventAttachment{
+    name: string;
+    ownerId: string;
+    subject: string;
+    location: string;
+    externalEntities: string;
+    createdIn: string;
+}
@@ -0,0 +1,4 @@
+export interface EventBody{
+    bodyType: string;
+    text: string;
+}
@@ -0,0 +1,4 @@
+export interface EventPerson{
+    emailAddress: string;
+    text: string;
+}
@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { EventDetailPage } from './event-detail.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: EventDetailPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class EventDetailPageRoutingModule {}
@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { EventDetailPageRoutingModule } from './event-detail-routing.module';
+
+import { EventDetailPage } from './event-detail.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    EventDetailPageRoutingModule
+  ],
+  declarations: [EventDetailPage]
+})
+export class EventDetailPageModule {}
@@ -0,0 +1,15 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-back-button defaultHref="/events"></ion-back-button>
+    </ion-buttons>
+    <ion-title>Event detail</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <ion-item>
+    <ion-label>{{loadedEvent.Subject}}</ion-label>
+  </ion-item>
+
+</ion-content>
@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { EventDetailPage } from './event-detail.page';
+
+describe('EventDetailPage', () => {
+  let component: EventDetailPage;
+  let fixture: ComponentFixture<EventDetailPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ EventDetailPage ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(EventDetailPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,31 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { EventsService } from 'src/app/services/events.service';
+
+import { Event } from '../../../models/event.model';
+
+@Component({
+  selector: 'app-event-detail',
+  templateUrl: './event-detail.page.html',
+  styleUrls: ['./event-detail.page.scss'],
+})
+export class EventDetailPage implements OnInit {
+
+  loadedEvent: Event;
+
+  constructor(private activatedRoute: ActivatedRoute, private eventsService: EventsService) { }
+
+  ngOnInit() {
+    /* Emit new data when something changes */
+    this.activatedRoute.paramMap.subscribe(paramMap =>{
+      if(!paramMap.has('eventId')){
+        //Redirect
+        return;
+      }
+      const eventId = paramMap.get('eventId');
+      /* Load my event detail */
+      this.loadedEvent = this.eventsService.getEvent(eventId);
+    });
+  }
+
+}
@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { EventsPage } from './events.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: EventsPage
+  },
+  {
+    path: 'event-detail',
+    loadChildren: () => import('./event-detail/event-detail.module').then( m => m.EventDetailPageModule)
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class EventsPageRoutingModule {}
@@ -0,0 +1,21 @@
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { EventsPageRoutingModule } from './events-routing.module';
+
+import { EventsPage } from './events.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    EventsPageRoutingModule
+  ],
+  declarations: [EventsPage],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class EventsPageModule {}
@@ -0,0 +1,149 @@
+<ion-header translucent="true">
+  <ion-toolbar>
+    <ion-title>
+      <ion-item class="ion-text-header-top" lines="none">
+        <div class="div-logo">
+          <img src='assets/images/logo.png' alt='logo'>
+        </div>
+        <ion-label>
+          <h6 class="header-xsmall">Presidente da República</h6>
+          <h2 class="header-large">GABINETE DIGITAL</h2>
+        </ion-label>
+      </ion-item>
+      <ion-item class="ion-text-right" lines="none">
+        <ion-label class="ion-text-wrap">
+            <h3 class="header-medium"> {{greetting}} Sua Excelência <br />
+              Minístro Director do Gabinete do<br />
+              Presidente da República
+            </h3>
+          <p class="p-small">{{customDate}}</p>
+        </ion-label>
+      </ion-item>
+    </ion-title>
+  </ion-toolbar> 
+</ion-header>
+
+<ion-content>
+  <!-- TABS -->
+  <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>
+  <!-- List of Text Items -->
+  <div [ngSwitch]="segment">
+    <ion-list *ngSwitchCase="'combinada'">
+
+      <ion-item-group>
+        <!-- [routerLink]="['/events', event.id]" 
+        (click)="gotTo(event.id)"-->
+        <ion-item-sliding>
+          <ion-item lines="none" 
+          *ngFor="let event of events" 
+          [routerLink]="['/home/events', event.EventId]">
+
+            <div class="div-item">
+              <div class="div-up">
+                <div class="div-icon">
+                  <ion-icon slot="start" name="reader"></ion-icon>
+                </div>
+                <div class="div-content-oficial">
+                  <h3>{{event.Subject}}</h3>
+                  <p>{{event.StartDate}} - {{event.EndDate}}</p>
+                </div>
+              </div>
+              <div class="div-botton">
+                <div class="div-botton-left">
+                  <ion-icon class="ion-icon-location" slot="start" name="location"></ion-icon>
+                </div>
+                <div class="div-botton-middle">
+                  <p class="item-list-small">{{event.Location}}</p>
+                </div>
+                <div class="div-botton-right">
+                  <ion-icon class="ion-icon-attach" slot="end" name="attach-outline"></ion-icon>
+                </div>
+              </div>
+            </div>
+          </ion-item>
+      </ion-item-sliding>
+
+      </ion-item-group>
+
+    </ion-list>
+  <!-- OFICIAL -->
+    <ion-list *ngSwitchCase="'oficial'">
+      <ion-item-group>
+        <ion-item-sliding>
+          <ion-item-divider>
+            <ion-label>8:00 am</ion-label>
+          </ion-item-divider>
+          <ion-item lines="none" *ngFor="let event of events">
+            <div class="div-item">
+              <div class="div-up">
+                <div class="div-icon">
+                  <ion-icon slot="start" name="reader"></ion-icon>
+                </div>
+                <div class="div-content-oficial">
+                  <h3>{{event.Subject}}</h3>
+                  <p>{{event.StartDate}} - {{event.EndDate}}</p>
+                </div>
+              </div>
+              <div class="div-botton">
+                <div class="div-botton-left">
+                  <ion-icon class="ion-icon-location" slot="start" name="location"></ion-icon>
+                </div>
+                <div class="div-botton-middle">
+                  <p class="item-list-small">{{event.Location}}</p>
+                </div>
+                <div class="div-botton-right">
+                  <ion-icon class="ion-icon-attach" slot="end" name="attach"></ion-icon>
+                </div>
+              </div>
+            </div>
+          </ion-item>
+        </ion-item-sliding>
+      </ion-item-group>
+    </ion-list>
+
+      <ion-list *ngSwitchCase="'pessoal'">
+        <ion-item-group>
+          <ion-item-sliding>
+            <ion-item lines="none" *ngFor="let event of events">
+              <div class="div-item">
+                <div class="div-up">
+                  <div class="div-icon">
+                    <ion-icon slot="start" name="reader"></ion-icon>
+                  </div>
+                  <div class="div-content-pessoal">
+                    <h3>{{event.Subject}}</h3>
+                    <p>{{event.StartDate}} - {{event.EndDate}}</p>
+                  </div>
+                </div>
+                <div class="div-botton">
+                  <div class="div-botton-left">
+                    <ion-icon class="ion-icon-location" slot="start" name="location"></ion-icon>
+                  </div>
+                  <div class="div-botton-middle">
+                    <p class="item-list-small">{{event.Location}}</p>
+                  </div>
+                  <div class="div-botton-right">
+                    <ion-icon class="ion-icon-attach" slot="end" name="attach"></ion-icon>
+                  </div>
+                </div>
+              </div>
+            </ion-item>
+          </ion-item-sliding>
+        </ion-item-group>
+
+      </ion-list>
+  </div>
+</ion-content>
+
@@ -0,0 +1,135 @@
+/* HEADER */
+.ion-text-header-top{
+    text-align: center;
+    padding-top: 20px;
+  }
+  .div-logo{
+    width: 98px;
+  }
+  .div-logo img{
+    width: 100%;
+  }
+  .header-large{
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 16pt;
+    /* font-weight: 600; */
+  }
+  .header-medium{
+    font-size: 16pt;
+    font-family: roboto;
+  }
+  .header-xsmall{
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 12.7pt;
+    font-weight: bold;
+    padding-bottom: 3.5px;
+    margin-bottom: 3.5px;
+    border-bottom: 1px solid #ccc;
+  }
+  .p-small{
+    font-size: 12pt;
+    margin-top: 25px;
+    color:#000;
+  }
+  
+  /* CONTENT */
+  .item-list-small{
+      font-size: 14px;
+      overflow: auto;
+    }
+    .ion-item-class{
+      padding: 0;
+    
+    }
+    .label-text{
+      width: 100%;
+      padding: 0;
+      margin: 0;
+    }
+    
+    //DIV
+    .div-item{
+      width: 100%;
+      overflow: auto;
+      border-bottom: 1px solid #ccc;
+      margin: 10px 0 5px 0;
+    }
+    .div-up{
+      width: 100%;
+      overflow: auto;
+    }
+    .div-up h3{
+      margin: 0;
+      padding: 0;
+      font-size: 17px;
+      width: 100%;
+    }
+    .div-icon{
+      width: 10%;
+      font-size: 22px;
+      float: left;
+      color: #808080;
+    }
+    .div-icon ion-icon{
+      display: block;
+      margin: 0 auto;
+    
+    }
+    .div-content-oficial{
+      width: 85%;
+      float: left;
+      border-left: 3px solid #cab0dc;
+      padding: 0 0 0 12px;
+    }
+    .div-content-pessoal{
+      width: 85%;
+      float: left;
+      border-left: 3px solid #cbeecb;
+      padding: 0 0 0 12px;
+    }
+    .div-content-oficial h3, .div-content-pessoal h3{
+      font-size: 16pt;
+      /* border: 1px solid red; */
+    }
+    .div-content-oficial p, .div-content-pessoal p{
+      font-size: 14pt;
+      color: rgb(94, 92, 92);
+      padding: 0 !important;
+      margin: 0 !important;
+    }
+    .div-botton{
+      width: 100%;
+      overflow: auto;
+      margin: 10px 0 5px 0;
+    }
+    .div-botton-left{
+      width: 10%;
+      float: left;
+    }
+    .ion-icon-location{
+      text-align: center;
+      display: block;
+      color: #000;
+      font-size: 16px;
+      margin: 0 auto;
+    }
+    .div-botton-middle{
+      width: 75%;
+      float: left;
+      margin-top: 0.5px;
+    }
+    .div-botton-middle p{
+      padding: 0;
+      margin: 0;
+    }
+    .div-botton-right{
+      width: 10%;
+      float: left;
+      margin: 0;
+      padding: 0;
+    }
+    .ion-icon-attach{
+      color: #666666;
+      font-size: 20px;
+    }
+    
@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { EventsPage } from './events.page';
+
+describe('EventsPage', () => {
+  let component: EventsPage;
+  let fixture: ComponentFixture<EventsPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ EventsPage ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(EventsPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,62 @@
+import { Component, OnInit } from '@angular/core';
+
+import { Event } from '../../models/event.model';
+import { EventsService } from 'src/app/services/events.service';
+import { Router } from '@angular/router';
+import { ActivatedRoute } from '@angular/router';
+
+
+@Component({
+  selector: 'app-events',
+  templateUrl: './events.page.html',
+  styleUrls: ['./events.page.scss'],
+})
+export class EventsPage implements OnInit {
+
+ /* Get current system date */
+ today = new Date();
+ months = ["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"];
+ days = ["Domingo", "Segunda-feira", "Terça-feira", "Quarta-feira", "Quinta-feira", "Sexta-feira", "Sábado"];
+ customDate = this.days[this.today.getDay()]+ ", "
+ + this.today.getDate() +" de "
+ + ( this.months[this.today.getMonth()]);
+ /* Setting appropriate greeting according to the time */
+ grettings = ["Bom dia", "Boa tarde", "Boa noite"];
+ greetting='';
+timeDate = this.today.getHours() + ":" + this.today.getMinutes();
+/* Set segment variable */
+ segment:string;
+
+ events: Event[];
+
+ constructor(private eventService: EventsService, private router: Router, public activatedRoute: ActivatedRoute) { }
+
+ ngOnInit() {
+   //Inicializar segment
+   this.segment = "combinada";
+   this.showGreeting();
+   /* Call Get events method */
+   this.events = this.eventService.getAllEvents();
+ }
+
+ showGreeting(){
+  if(this.today.getHours() >= 6 && this.today.getHours() < 12){
+    console.log(this.grettings[0]+this.today.getHours());
+    this.greetting = this.grettings[0];
+  }
+  else if(this.today.getHours() >= 12 && this.today.getHours() < 18){
+   console.log(this.grettings[1]+this.today.getHours());
+   this.greetting = this.grettings[1];
+  }
+  else /* if(this.today.getHours() < 6 && this.today.getHours() >= 18) */{
+   console.log(this.grettings[2]+this.today.getHours());
+   this.greetting = this.grettings[2];
+
+  }
+}
+gotTo(ev){
+  this.router.navigate(['/home/events']);
+}
+
+}
+
@@ -1,11 +1,4 @@
-/* .div-logo{
-  width: 100px;
-  border: 1px solid blue;
-} */
-/* img{
-  width: 100px;
-  border: 1px solid red;
-} */
+
 /* HEADER */
 .ion-text-header-top{
  text-align: center;
@@ -20,7 +13,7 @@
 .header-large{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16pt;
-  font-weight: bold;
+  /* font-weight: 600; */
 }
 .header-medium{
  font-size: 16pt;
@@ -85,7 +85,7 @@ export class LoginPage implements OnInit {
    //Go to our home in home/feed.

    if(this.validateInput()){
-      this.router.navigate(['/home/feed']);
+      this.router.navigate(['/home/events']);
      /* if (await this.authService.login(this.postData))
      {
        this.router.navigate(['/home/feed']);
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { EventsService } from './events.service';
+
+describe('EventsService', () => {
+  let service: EventsService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(EventsService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
@@ -0,0 +1,128 @@
+import { Injectable } from '@angular/core';
+
+import { Event } from '../models/event.model';
+import axios from 'axios'
+
+
+@Injectable({
+  providedIn: 'root'
+})
+export class EventsService {
+ /*  Set events */
+ private eventos: Event =  {
+    EventId: '1',
+    Subject: 'Reunião do Conselho de Ministros',
+    Body: null,
+    Location: 'Luanda, Palácio presidencial',
+    CalendarId: '',
+    CalendarName: 'poo',
+    StartDate: '10:30',
+    EndDate: '11:00',
+    EventType: '',
+    RequiredAttendees: null,
+    OptionalAttendees: null,
+    HasAttachments: false,
+    IsMeeting: false,
+    IsRecurring: false,
+    AppointmentState: 0,
+    TimeZone: '',
+    Organizer: '',
+    Categories: null,
+    Attachments: null,
+};
+ private events: Event[] = [
+  {
+    EventId: '1',
+    Subject: 'Reunião do Conselho de Ministros',
+    Body: null,
+    Location: 'Luanda, Palácio presidencial',
+    CalendarId: '',
+    CalendarName: 'poo',
+    StartDate: '10:30',
+    EndDate: '11:00',
+    EventType: '',
+    RequiredAttendees: null,
+    OptionalAttendees: null,
+    HasAttachments: false,
+    IsMeeting: false,
+    IsRecurring: false,
+    AppointmentState: 0,
+    TimeZone: '',
+    Organizer: '',
+    Categories: null,
+    Attachments: null,
+  },
+  {
+    EventId: '2',
+    Subject: 'Conference call Particular',
+    Body: null,
+    Location: 'Luanda, Palácio presidencial',
+    CalendarId: '',
+    CalendarName: 'poo',
+    StartDate: '10:30',
+    EndDate: '11:00',
+    EventType: '',
+    RequiredAttendees: null,
+    OptionalAttendees: null,
+    HasAttachments: false,
+    IsMeeting: false,
+    IsRecurring: false,
+    AppointmentState: 0,
+    TimeZone: '',
+    Organizer: '',
+    Categories: null,
+    Attachments: null,
+  }
+];
+
+  constructor() { }
+
+  getAllEvents(){
+    /* Return a copy of the events in my array */
+    console.log("All eventes loaded");
+
+    const options = {
+      headers: {'Authorization': 'Basic cGF1bG8ucGludG86dGFidGVzdGVAMDA2'}
+    };
+    const url = 'http://gpr-dev-01.gabinetedigital.local/GabineteDigital.Services/api/calendar/GetEvents?StartDate=2020-08-14 00:00:00&EndDate=2020-08-19 23:59:00&CalendarName=Pessoal';
+
+  
+    axios.get(url, options)
+    .then((response) => {
+        console.log(response.data[0].EventId);
+        /* console.log(response.data[0].Subject);
+        console.log(response.status);
+        console.log(response.statusText);
+        console.log(response.headers); */
+        console.log(response.data[0]);
+        console.log(this.eventos);
+        this.eventos = response.data[0];
+        console.log(this.events[0].CalendarName);
+        console.log(this.events[0].CalendarName);
+        console.log("THEN");
+        
+        console.log([this.eventos.CalendarName])
+        /* return [this.events[0]]; */
+        console.log(response.data);
+        console.log(this.eventos);
+        console.log(this.events[0].CalendarName);
+
+        this.events = response.data;
+
+        /* return [...this.events]; */
+    });
+  
+  return [...this.events];
+    /* return [...this.events]; */
+  }
+
+  getEvent(eventId: string){
+    return {
+      /* The find() function looks for an event in a array and return true if found */
+      ...this.events.find(event => {
+      /* Compare if the event found is the same as the event passed in as parameter */
+      return event.EventId === eventId;
+    })
+  };
+  }
+}