Implemented GET call requests to see the events and also each event detail

src/app/home/home-routing.module.ts

@@ -50,6 +50,15 @@ const routes: Routes = [
           }
         ]
       },
+      {
+        path: 'view-event',
+        children: [
+          {
+            path:'',
+            loadChildren: ()=> import('../pages/view-event/view-event.module').then(m => m.ViewEventPageModule)
+          }
+        ]
+      },
       /* PROVISORIO */
      /*  {
         path: 'view-event',

src/app/models/event.model.ts

@@ -1,6 +1,7 @@
 import { EventBody } from './eventbody.model';
 import { EventPerson } from './eventperson.model';
 import { EventAttachment } from './eventattachment.model';
+import { EventOrganizer } from './organizer.model';
 
 export interface Event{
    

src/app/models/eventattachment.model.ts

@@ -1,8 +1,8 @@
 export interface EventAttachment{
-    name: string;
-    ownerId: string;
-    subject: string;
-    location: string;
-    externalEntities: string;
-    createdIn: string;
+    Name: string;
+    OwnerId: string;
+    Subject: string;
+    Location: string;
+    ExternalEntities: string;
+    CreatedIn: string;
 }

src/app/models/eventbody.model.ts

@@ -1,4 +1,4 @@
 export interface EventBody{
     bodyType: string;
-    text: string;
+    Text: string;
 }

src/app/models/eventperson.model.ts

@@ -1,4 +1,4 @@
 export interface EventPerson{
-    emailAddress: string;
-    text: string;
+    EmailAddress: string;
+    Name: string;
 }

src/app/models/organizer.model.ts

@@ -0,0 +1,4 @@
+export interface EventOrganizer{
+    EmailAddress: string;
+    Text: string;
+}

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

@@ -3,13 +3,59 @@
     <ion-buttons slot="start">
       <ion-back-button defaultHref="/events"></ion-back-button>
     </ion-buttons>
-    <ion-title>Event detail</ion-title>
+    <ion-title>Visualizar Evento</ion-title>
   </ion-toolbar>
 </ion-header>
 
-<ion-content>
-  <ion-item>
-    <ion-label>{{loadedEvent.Subject}}</ion-label>
-  </ion-item>
-
+<ion-content *ngIf="eventItem | async as event" padding>
+  <ion-item-group>
+    <ion-item>
+      <ion-label position="stacked">Assunto</ion-label>
+      <ion-input value='{{event.Subject}}'></ion-input>
+    </ion-item>
+    <ion-item>
+      <ion-label position="stacked">Descrição</ion-label>
+      <ion-input value='{{event.Body.Text}}'></ion-input>
+    </ion-item>
+    <ion-item>
+      <ion-label position="stacked">Localização</ion-label>
+      <ion-input value='{{event.Location}}'></ion-input>
+    </ion-item>
+    <ion-item>
+      <ion-label position="stacked">Intervenientes</ion-label>
+      <ion-list>
+        <ion-item *ngFor="let inter of event.RequiredAttendees">
+          <ion-input value='{{inter.Name}}'></ion-input>
+        </ion-item>
+      </ion-list>
+    </ion-item>
+    <ion-item>
+      <ion-label position="stacked">Carácter</ion-label>
+      <ion-input value='{{event.CalendarName}}'></ion-input>
+    </ion-item>
+    <ion-item>
+      <ion-label position="stacked">Tipo do evento</ion-label>
+      <ion-input value='{{event.EventType}}'></ion-input>
+    </ion-item>
+    <ion-item>
+      <ion-label position="stacked">Data Início: </ion-label>
+      <ion-input value='{{event.StartDate}}'></ion-input>
+    </ion-item>
+    <ion-item>
+      <ion-label position="stacked">Data Fim</ion-label>
+      <ion-input value='{{event.EndDate}}'></ion-input>
+    </ion-item>
+    <ion-list>
+      <ion-list-header>Anexos</ion-list-header>
+      <ion-item>
+        <ion-icon name="attach" slot="start"></ion-icon>
+        <ion-label>Lei do orçamento geral do Estado</ion-label>
+      </ion-item>
+    </ion-list>
+  </ion-item-group>
+  <div class="event-detail-buttons">
+    <ion-button fill="outline" class="ion-button-left">Recusar</ion-button>
+    <ion-button class="ion-button-right">Aprovar</ion-button>
+  </div>
 </ion-content>
+

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

@@ -0,0 +1,14 @@
+.event-detail-buttons{
+    width: 80%;
+    margin: 10px auto;
+}
+.event-detail-buttons ion-button{
+    width: 40%;
+}
+.ion-button-left{
+    float: left;
+    background: none;
+}
+.ion-button-right{
+    float: right;
+}

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

@@ -3,6 +3,7 @@ import { ActivatedRoute } from '@angular/router';
 import { EventsService } from 'src/app/services/events.service';
 
 import { Event } from '../../../models/event.model';
+import { Observable } from 'rxjs';
 
 @Component({
   selector: 'app-event-detail',
@@ -12,6 +13,7 @@ import { Event } from '../../../models/event.model';
 export class EventDetailPage implements OnInit {
 
   loadedEvent: Event;
+  eventItem: Observable<Event>;
 
   constructor(private activatedRoute: ActivatedRoute, private eventsService: EventsService) { }
 
@@ -24,7 +26,8 @@ export class EventDetailPage implements OnInit {
       }
       const eventId = paramMap.get('eventId');
       /* Load my event detail */
-      this.loadedEvent = this.eventsService.getEvent(eventId);
+      /* this.loadedEvent = this.eventsService.getEvent(eventId); */
+      this.eventItem = this.eventsService.getEvent(eventId);
     });
   }
 

src/app/pages/events/events.page.html

@@ -40,16 +40,13 @@
   </ion-toolbar>
   <!-- List of Text Items -->
   <div [ngSwitch]="segment">
-    <ion-list *ngSwitchCase="'combinada'">
+    <ion-list *ngSwitchCase="'combinada'" >
 
-      <ion-item-group>
-        <!-- [routerLink]="['/events', event.id]" 
-        (click)="gotTo(event.id)"-->
+      <ion-item-group *ngIf="eventsList | async as events">
         <ion-item-sliding>
           <ion-item lines="none" 
-          *ngFor="let event of events" 
+          *ngFor="let event of events"
           [routerLink]="['/home/events', event.EventId]">
-
             <div class="div-item">
               <div class="div-up">
                 <div class="div-icon">

src/app/pages/events/events.page.ts

@@ -4,6 +4,7 @@ import { Event } from '../../models/event.model';
 import { EventsService } from 'src/app/services/events.service';
 import { Router } from '@angular/router';
 import { ActivatedRoute } from '@angular/router';
+import { Observable } from 'rxjs';
 
 
 @Component({
@@ -28,6 +29,7 @@ timeDate = this.today.getHours() + ":" + this.today.getMinutes();
  segment:string;
 
  events: Event[];
+ eventsList: Observable<Event[]>;
 
  constructor(private eventService: EventsService, private router: Router, public activatedRoute: ActivatedRoute) { }
 
@@ -37,6 +39,7 @@ timeDate = this.today.getHours() + ":" + this.today.getMinutes();
    this.showGreeting();
    /* Call Get events method */
    this.events = this.eventService.getAllEvents();
+   this.eventsList = this.eventService.allEvents();/* .subscribe(prods=>console.log(prods)); */
  }
 
  showGreeting(){

src/app/services/auth.service.ts

@@ -54,6 +54,7 @@ export class AuthService {
               return false;
             }
     }
+    
 
    /* logout(){
       this.storageService.removeStorageItem(AuthConnstants.AUTH).then(res =>{

src/app/services/events.service.ts

@@ -2,6 +2,8 @@ import { Injectable } from '@angular/core';
 
 import { Event } from '../models/event.model';
 import axios from 'axios'
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
 
 
 @Injectable({
@@ -9,27 +11,8 @@ import axios from 'axios'
 })
 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 eventos: Event[];
+ 
  private events: Event[] = [
   {
     EventId: '1',
@@ -37,7 +20,7 @@ export class EventsService {
     Body: null,
     Location: 'Luanda, Palácio presidencial',
     CalendarId: '',
-    CalendarName: 'poo',
+    CalendarName: 'pessoal',
     StartDate: '10:30',
     EndDate: '11:00',
     EventType: '',
@@ -58,7 +41,7 @@ export class EventsService {
     Body: null,
     Location: 'Luanda, Palácio presidencial',
     CalendarId: '',
-    CalendarName: 'poo',
+    CalendarName: 'pessoal',
     StartDate: '10:30',
     EndDate: '11:00',
     EventType: '',
@@ -75,54 +58,41 @@ export class EventsService {
   }
 ];
 
-  constructor() { }
+  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';
+  options = { headers: {'Authorization': 'Basic cGF1bG8ucGludG86dGFidGVzdGVAMDA2'}};
 
-  getAllEvents(){
-    /* Return a copy of the events in my array */
-    console.log("All eventes loaded");
+  constructor(private http: HttpClient) { }
 
-    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]; */
+  allEvents(): Observable<Event[]>{
+    return this.http.get<Event[]>(`${this.url}`, this.options)
+  }
+  getEvent(ev: string): Observable<Event>{
+    const url = 'http://gpr-dev-01.gabinetedigital.local/GabineteDigital.Services/api/calendar/GetEvent?EventId=';
+    return this.http.get<Event>(`${url + ev}`, this.options)
   }
 
-  getEvent(eventId: string){
+   getAllEvents(){
+    //Return a copy of the events in my array
+    console.log("All eventes loaded");
+    const options = { headers: {'Authorization': 'Basic cGF1bG8ucGludG86dGFidGVzdGVAMDA2'}};
+    axios.get(this.url, options)
+    .then((response) => {
+      console.log(this.eventos);
+        this.eventos = response.data;
+        console.log(this.eventos);
+        return this.events;
+    });
+    return this.eventos;
+    //return [...this.events];
+  }
+
+  getStaticEvent(eventId: string){
     return {
-      /* The find() function looks for an event in a array and return true if found */
+      // 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 */
+      //Compare if the event found is the same as the event passed in as parameter
       return event.EventId === eventId;
-    })
-  };
+      })
+    };
   }
 }