Added alert messages in login page, Edited event list border color, And few updates at the agenda module.

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

@@ -4,13 +4,13 @@
   </ion-toolbar>
   <ion-toolbar>
     <ion-segment [(ngModel)]="segment">
-      <ion-segment-button value="combinada">
+      <ion-segment-button value="Combinada">
         Combinada
       </ion-segment-button>
-      <ion-segment-button value="oficial">
+      <ion-segment-button value="Oficial">
         Oficial
       </ion-segment-button>
-      <ion-segment-button value="pessoal">
+      <ion-segment-button value="Pessoal">
         Pessoal
       </ion-segment-button>
     </ion-segment>
@@ -31,34 +31,67 @@
       </ion-segment-button>
     </ion-segment>
   </ion-toolbar> --> 
+  
   <ion-content>
-    <ion-refresher  name="refresher" slot="fixed" (ionRefresh)="refreshAgenda($event)">
+    <ion-refresher  name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
       <ion-refresher-content 
       pullingIcon="chevron-down-circle-outline"
       pullingText="deslize para actualizar"
       refreshingSpinner="circles"
-      refreshingText="a actualizar...">
+      refreshingText="A actualizar...">
       </ion-refresher-content>
     </ion-refresher>
-   
+    <div [ngSwitch]="segment">
+      <div *ngSwitchCase="'Combinada'">
         <ion-row>
-      <!-- <ion-col size="6">
+          <!-- Move back one screen of the slides -->
-        <ion-button (click)="createRandomEvents()" expand="block" fill="outline">
+          <ion-col size="2">
-          Add random events
+            <ion-button fill="clear" (click)="back()">
+              <ion-icon name="arrow-back" slot="icon-only"></ion-icon>
             </ion-button>
           </ion-col>
-      <ion-col size="6">
+          <!-- The title of the calendar in the middle -->
-        <ion-button (click)="removeEvents()" expand="block" fill="outline">
+          <ion-col size="8" class="ion-text-center">
-          Remove all events
+            <h2 class="capitaliseText">{{ viewTitle }}</h2>
+          </ion-col>
+      
+          <!-- Move forward one screen of the slides -->
+          <ion-col size="2">
+            <ion-button fill="clear" (click)="next()">
+              <ion-icon name="arrow-forward" slot="icon-only"></ion-icon>
             </ion-button>
           </ion-col>
-      <ion-col size="6">
-        <ion-button (click)="createdEvent()" expand="block" fill="outline">
-          Adicionar
-        </ion-button>
-      </ion-col>-->
         </ion-row>
       
+        <calendar
+          [eventSource]="eventSource"
+          [calendarMode]="calendar.mode"
+          [currentDate]="calendar.currentDate"
+          (onEventSelected)="onEventSelected($event)"
+          (onTitleChanged)="onViewTitleChanged($event)"
+          (onRangeChanged)="onRangeChanged($event)"
+          queryMode="remote"
+          startHour="6"
+          endHour="20"
+          step="30"
+          startingDayMonth="1"
+          noEventsLabel="Sem Eventos"
+          allDayLabel="Todo o dia"
+          [monthviewDisplayEventTemplate]="template"
+        >
+        </calendar>
+
+        <!-- Adding a customized ng-template -->
+        <ng-template #template let-view="view" let-row="row" let-col="col">
+          <div [class.with-event]="view.dates[row*7+col].events.length">
+            {{view.dates[row*7+col].label}}
+            <div class="indicator-container">
+              <div class="event-indicator" *ngFor="let e of view.dates[row*7+col].events"></div>
+            </div>
+          </div>
+        </ng-template> 
+      </div>
+      <div *ngSwitchCase="'Pessoal'">
         <ion-row>
           <!-- Move back one screen of the slides -->
           <ion-col size="2">
@@ -107,10 +140,61 @@
           </div>
         </ng-template> 
 
+      </div>
+      <div *ngSwitchCase="'Oficial'">
+        <ion-row>
+          <!-- Move back one screen of the slides -->
+          <ion-col size="2">
+            <ion-button fill="clear" (click)="back()">
+              <ion-icon name="arrow-back" slot="icon-only"></ion-icon>
+            </ion-button>
+          </ion-col>
+          <!-- The title of the calendar in the middle -->
+          <ion-col size="8" class="ion-text-center">
+            <h2 class="capitaliseText">{{ viewTitle }}</h2>
+          </ion-col>
+      
+          <!-- Move forward one screen of the slides -->
+          <ion-col size="2">
+            <ion-button fill="clear" (click)="next()">
+              <ion-icon name="arrow-forward" slot="icon-only"></ion-icon>
+            </ion-button>
+          </ion-col>
+        </ion-row>
+      
+        <calendar
+          [eventSource]="eventSource"
+          [calendarMode]="calendar.mode"
+          [currentDate]="calendar.currentDate"
+          (onEventSelected)="onEventSelected($event)"
+          (onTitleChanged)="onViewTitleChanged($event)"
+          (onRangeChanged)="onRangeChanged($event)"
+          queryMode="remote"
+          startHour="6"
+          endHour="20"
+          step="30"
+          startingDayMonth="1"
+          noEventsLabel="Sem Eventos"
+          allDayLabel="Todo o dia"
+          [monthviewDisplayEventTemplate]="template"
+        >
+        </calendar>
+
+        <!-- Adding a customized ng-template -->
+        <ng-template #template let-view="view" let-row="row" let-col="col">
+          <div [class.with-event]="view.dates[row*7+col].events.length">
+            {{view.dates[row*7+col].label}}
+            <div class="indicator-container">
+              <div class="event-indicator" *ngFor="let e of view.dates[row*7+col].events"></div>
+            </div>
+          </div>
+        </ng-template> 
+
+      </div>
       <ion-fab vertical="bottom" horizontal="end" slot="fixed">
         <ion-fab-button>
           <ion-icon name="add" (click)="openCalModal()"></ion-icon>
         </ion-fab-button>
       </ion-fab>
-  
+    </div>
   </ion-content>

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

@@ -4,10 +4,8 @@ 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, ObjectUnsubscribedError } from 'rxjs';
 import { Event } from '../../models/event.model';
-import { parse } from 'date-fns';
+import { Router, NavigationEnd } from '@angular/router';
-import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-agenda',
@@ -33,10 +31,14 @@ export class AgendaPage implements OnInit {
 
   segment:string;
   eventsList: Event[];
-  responseEventId:string = '';
+  eventsListPessoal: Event[];
+  eventsListOficial: Event[];
+
+  showLoader: boolean = true;
+
+  startTime: Date;
+  endTime: Date;
 
-  loadedEvent: Event;
-  eventItem: Observable<Event>;
 
   constructor( 
     private alertCtrl: AlertController,
@@ -48,7 +50,13 @@ export class AgendaPage implements OnInit {
 
   ngOnInit() {
     //Inicializar segment
-    this.segment = "combinada";
+    this.segment = "Combinada";
+
+    this.router.events.forEach((event) => {
+      if(event instanceof NavigationEnd && event.url == this.router.url) {
+        this.loading();
+      }
+    });
   }
 
   //Go to the next view of the calendar month/week/day
@@ -65,7 +73,6 @@ export class AgendaPage implements OnInit {
   }
   //Show information of the event
   async onEventSelected(ev: { event: Event}){
-    console.log(ev.event.EventId);
     this.router.navigate(["/home/events", ev.event.EventId]);
   }
 
@@ -81,10 +88,17 @@ export class AgendaPage implements OnInit {
     });
     await modal.present();
     modal.onDidDismiss();
-    this.loading();
+    /* this.loading(); */
   }
   
+  
   async loadRangeEvents(startTime: Date, endTime: Date){
+    this.showLoader = true;
+    switch (this.segment)
+    {
+      case "Combinada":
+        //Inicializa o array eventSource
+        this.eventSource=[];
         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;
@@ -100,17 +114,64 @@ export class AgendaPage implements OnInit {
           });
         }
       );
+      break;
+
+      case "Pessoal":
+        //Inicializa o array eventSource
+        this.eventSource=[];
+        this.eventService.getEvents(this.segment, formatDate(startTime, 'yyyy-MM-dd HH:mm:ss', 'pt'), formatDate(endTime, 'yyyy-MM-dd HH:mm:ss', 'pt')).subscribe(
+          response => {
+            this.eventsListPessoal = response;
+            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.loading();
+            });
+          }
+        );
+        break;
+      
+      case "Oficial":
+        //Inicializa o array eventSource
+        this.eventSource=[];
+        this.eventService.getEvents(this.segment, formatDate(startTime, 'yyyy-MM-dd HH:mm:ss', 'pt'), formatDate(endTime, 'yyyy-MM-dd HH:mm:ss', 'pt')).subscribe(
+          response => {
+            this.eventsListOficial = response;
+            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.loading();
+            });
+          }
+        );
+        break;
+    } 
+    this.showLoader = false;
+  }
+
+  RefreshEvents(ev: { startTime: Date, endTime: Date }){
+    this.loadRangeEvents(ev.startTime, ev.endTime);
   }
   
   loading(){
     this.myCal.loadEvents();
   } 
 
-  refreshAgenda(event){
+  doRefresh(ev){
     this.loading();
 
     setTimeout(() => {
-      event.target.complete();
+      ev.target.complete();
     }, 2000);
   }
 

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

@@ -1,7 +1,7 @@
 <ion-header>
   <ion-toolbar>
     <ion-buttons slot="start">
-      <ion-back-button defaultHref="/events"></ion-back-button>
+      <ion-back-button defaultHref="/home/events"></ion-back-button>
     </ion-buttons>
     <ion-title>Visualizar Evento</ion-title>
   </ion-toolbar>

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

@@ -31,7 +31,6 @@ export class EventDetailPage implements OnInit {
       }
       const eventId = paramMap.get('eventId');
 
-      console.log(eventId);
       /* Load my event detail */
       /* this.loadedEvent = this.eventsService.getEvent(eventId); */
       this.eventItem = this.eventsService.getEvent(eventId);

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

@@ -30,7 +30,7 @@
       pullingIcon="chevron-down-circle-outline"
       pullingText="deslize para actualizar"
       refreshingSpinner="circles"
-      refreshingText="a actualizar...">
+      refreshingText="A actualizar...">
     </ion-refresher-content>
   </ion-refresher>
   <!-- TABS -->
@@ -60,7 +60,7 @@
                 <div class="div-icon">
                   <ion-icon slot="start" name="reader"></ion-icon>
                 </div>
-                <div class="div-content-oficial">
+                <div class="div-content-{{event.CalendarName}}">
                   <h3>{{event.Subject}}</h3>
                   <p>{{event.StartDate}} - {{event.EndDate}}</p>
                 </div>
@@ -93,7 +93,7 @@
                 <div class="div-icon">
                   <ion-icon slot="start" name="reader"></ion-icon>
                 </div>
-                <div class="div-content-oficial">
+                <div class="div-content-{{event.CalendarName}}">
                   <h3>{{event.Subject}}</h3>
                   <p>{{event.StartDate}} - {{event.EndDate}}</p>
                 </div>
@@ -126,7 +126,7 @@
                 <div class="div-icon">
                   <ion-icon slot="start" name="reader"></ion-icon>
                 </div>
-                <div class="div-content-oficial">
+                <div class="div-content-{{event.CalendarName}}">
                   <h3>{{event.Subject}}</h3>
                   <p>{{event.StartDate}} - {{event.EndDate}}</p>
                 </div>

src/app/pages/events/events.page.scss

@@ -75,16 +75,16 @@
       margin: 0 auto;
     
     }
-    .div-content-oficial{
+    .div-content-Oficial{
       width: 85%;
       float: left;
-      border-left: 3px solid #cab0dc;
+      border-left: 4px solid #cab0dc;
       padding: 0 0 0 12px;
     }
-    .div-content-pessoal{
+    .div-content-Pessoal{
       width: 85%;
       float: left;
-      border-left: 3px solid #cbeecb;
+      border-left: 4px solid #cbeecb;
       padding: 0 0 0 12px;
     }
     .div-content-oficial h3, .div-content-pessoal h3{

src/app/pages/login/login.page.ts

@@ -4,6 +4,7 @@ import { AuthService } from 'src/app/services/auth.service';
 import { User } from 'src/app/models/user.model';
 import { ToastService } from 'src/app/services/toast.service';
 import { environment } from 'src/environments/environment';
+import { AlertController } from '@ionic/angular';
 
 
 @Component({
@@ -21,7 +22,8 @@ export class LoginPage implements OnInit {
   constructor(
     private router: Router, 
     private authService: AuthService,
-    private toastService: ToastService) { }
+    private toastService: ToastService,
+    public alertController: AlertController) { }
 
   ngOnInit() {
     
@@ -41,6 +43,17 @@ export class LoginPage implements OnInit {
       );
   }
 
+  async presentAlert(message:string) {
+    const alert = await this.alertController.create({
+      cssClass: 'my-custom-class',
+      header: 'Mensagem do sistema',
+      message: message,
+      buttons: ['OK']
+    });
+
+    await alert.present();
+  }
+
     async Login(){
     //Go to our home in home/feed.
     if(this.validateInput()){
@@ -50,11 +63,13 @@ export class LoginPage implements OnInit {
       }
       else
       {
-        this.toastService.presentToast('Não foi possível fazer login"');  
+        /* this.toastService.presentToast('Não foi possível fazer login"'); */
+        this.presentAlert('O nome de utilizador e palavra-passe estão incorretas ou verifique a sua conexão com a internet e volte a tentar.');  
       } 
     }
     else{
-      this.toastService.presentToast('Preencha todos campos');   
+      /* this.toastService.presentToast('Preencha todos campos'); */
+      this.presentAlert('Por favor, insira o seu nome de utilizador e palavra-passe.');
     }
   }
 }

src/environments/environment.ts

@@ -6,7 +6,7 @@ export const environment = {
   production: false,
   apiURL: 'http://gpr-dev-01.gabinetedigital.local/GabineteDigital.Services/v1/api/',
   domain: 'gabinetedigital.local',
-  defaultuser: 'paulo.pinto',
+  defaultuser: 'tiago.kayaya',
   defaultuserpwd: 'tabteste@006'
 };