Add calendar timeline

src/app/home/home.page.html

@@ -28,6 +28,10 @@
           <ion-icon class="nav-icon" src="assets/images/icons-nav-chat-inactive.svg"></ion-icon>
           <ion-label>Chat</ion-label>
         </ion-tab-button>
+        <ion-tab-button tab="search">
+          <ion-icon name="search"></ion-icon>
+          <ion-label>Pesquisa</ion-label>
+        </ion-tab-button> 
     </ion-tab-bar> 
   
   </ion-tabs>

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

@@ -16,219 +16,207 @@
 <ion-header>
   <ion-toolbar class="bg-blue">
   <div class="main-content">
+  <!-- Toolbar -->
   <ion-toolbar>
-<!--     <ion-segment [(ngModel)]="segment">
+
-      <ion-segment-button value="Combinada">
+    <!--  Calendar is here -->
-        Combinada
+    <div [ngSwitch]="segment">
-      </ion-segment-button>
+      <div *ngSwitchCase="'Combinada'">
-      <ion-segment-button value="Oficial">
+
-        Oficial
+        <ion-row class="ion-justify-content-between calendar-tool-tip">
-      </ion-segment-button>
+          <ion-row class="ion-align-items-center">
-      <ion-segment-button value="Pessoal">
+            <!-- Move back one screen of the slides -->
-        Pessoal
+            <ion-button fill="clear" (click)="back()">
-      </ion-segment-button>
+              <ion-icon  slot="icon-only"  src="assets/images/icons-calendar-arrow-left.svg"></ion-icon>
-    </ion-segment>
+            </ion-button>
-   -->
+             <!-- Move forward one screen of the slides -->
+            <h2 class="capitaliseText">{{ viewTitle }}</h2>
+            <ion-icon class="arrow-down" src="assets/images/icons-arrow-arrow-down.svg"></ion-icon>
+            <!-- Move forward one screen of the slides -->
+            <ion-button fill="clear" (click)="next()">
+              <ion-icon  slot="icon-only" src="assets/images/icons-calendar-arrow-right.svg"></ion-icon>
+            </ion-button>
+          </ion-row>
+          <ion-row class="ion-align-items-center">
+            <ion-icon name="add-circle-outline"></ion-icon>
+            <ion-icon name="add-circle-outline"></ion-icon>
+            <ion-icon name="add" (click)="openCalModal()" ></ion-icon>
+          </ion-row> 
+        </ion-row> 
+      
+        <calendar
+          [eventSource]="eventSource"
+          [calendarMode]="calendar.mode"
+          [currentDate]="calendar.currentDate"
+          (onEventSelected)="onEventSelected($event)"
+          (onTitleChanged)="onViewTitleChanged($event)"
+          (onRangeChanged)="onRangeChanged($event)"
+          (onCurrentDateChanged)="onCurrentChanged($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">
+            <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)"
+          (onCurrentDateChanged)="onCurrentChanged($event)"
+          queryMode="remote"
+          startHour="6"
+          endHour="20"
+          step="30"
+          startingDayMonth="1"
+          noEventsLabel="Sem Eventos"
+          allDayLabel="Todo o dia"
+          [monthviewDisplayEventTemplate]="template"
+        >
+        </calendar>
+        <!-- (onTimeSelected)="onTimeSelected($event)" -->
+  
+        <!-- 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="'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)"
+          (onCurrentDateChanged)="onCurrentChanged($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>
   </ion-toolbar>
   </div>
   </ion-toolbar>
 </ion-header>
 <ion-content>
 
-  <!--  Calendar is here -->
+  <!-- Progress bar -->
-
   <ion-refresher  name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
     <ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
     <ion-refresher-content>
     </ion-refresher-content>
   </ion-refresher>
-  <div [ngSwitch]="segment">
-    <div *ngSwitchCase="'Combinada'">
-      <ion-row>
-        <!-- Move back one screen of the slides -->
-        <ion-col size="2">
-          <ion-button fill="clear" (click)="back()">
-            <ion-icon  slot="icon-only"  src="assets/images/icons-calendar-arrow-left.svg"></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 -->
+  <!-- Calendar currente date -->
-        <ion-col size="2">
-          <ion-button fill="clear" (click)="next()">
-            <ion-icon  slot="icon-only" src="assets/images/icons-calendar-arrow-right.svg"></ion-icon>
-          </ion-button>
-        </ion-col>
-      </ion-row>
 
-      <calendar
+  <ion-row class="ion-justify-content-between ion-align-items-center currente-date-timelien">
-        [eventSource]="eventSource"
+    <ion-row class="timeline-date">
-        [calendarMode]="calendar.mode"
+      Hoje, {{ timelineDate }}
-        [currentDate]="calendar.currentDate"
+    </ion-row>
-        (onEventSelected)="onEventSelected($event)"
+    <ion-row class="filter ion-align-items-center">
-        (onTitleChanged)="onViewTitleChanged($event)"
+      <div class="filter-name">Tudos</div>
-        (onRangeChanged)="onRangeChanged($event)"
+      <ion-icon class="arrow-down" src="assets/images/icons-arrow-arrow-down.svg"></ion-icon>
-        (onCurrentDateChanged)="onCurrentChanged($event)"
+    </ion-row>
-        queryMode="remote"
+  </ion-row>
-        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">
-          <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)"
-        (onCurrentDateChanged)="onCurrentChanged($event)"
-        queryMode="remote"
-        startHour="6"
-        endHour="20"
-        step="30"
-        startingDayMonth="1"
-        noEventsLabel="Sem Eventos"
-        allDayLabel="Todo o dia"
-        [monthviewDisplayEventTemplate]="template"
-      >
-      </calendar>
-      <!-- (onTimeSelected)="onTimeSelected($event)" -->
-
-      <!-- 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="'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)"
-        (onCurrentDateChanged)="onCurrentChanged($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" (click)="openCalModal()">
-      <ion-fab-button>
-        <ion-icon name="add" ></ion-icon>
-      </ion-fab-button>
-    </ion-fab>
-  </div>
 
+  <!-- Timelien -->
   <div *ngIf="showTimeline">
     <mwl-demo-utils-calendar-header class="timeline" 
       [(view)]="view" 
       [(viewDate)]="viewDate"
-      [dayStartHour]="9"
+      [dayStartHour]="0"
-      [dayEndHour]="17">
+      [dayEndHour]="23">
     </mwl-demo-utils-calendar-header>
     
     <div [ngSwitch]="view">
-      <mwl-calendar-month-view
-        *ngSwitchCase="'month'"
-        [viewDate]="viewDate"
-        [events]="events"
-      >
-      </mwl-calendar-month-view>
-      <mwl-calendar-week-view
-        *ngSwitchCase="'week'"
-        [viewDate]="viewDate"
-        [events]="events"
-      >
-      </mwl-calendar-week-view>
       <mwl-calendar-day-view
         *ngSwitchCase="'day'"
         [viewDate]="viewDate"
         [events]="events"
+        (eventClicked)="eventClicked($event)"
       >
       </mwl-calendar-day-view>
     </div>

src/app/pages/agenda/agenda.page.scss

@@ -282,3 +282,35 @@ label{
   background-color: #42b9fe !important;
 }
 
+.calendar-tool-tip{
+  ion-icon{
+    font-size: 35px;
+  }
+  .arrow-down{
+    font-size: 28px;
+  }
+}
+
+
+
+.currente-date-timelien{
+  padding: 10px 20px;
+  .timeline-date{
+    font-size: 15px;
+    font-weight: bold;
+  }
+  .filter{
+    font-size: 15px;
+    font-weight: normal;
+    ion-icon{
+      font-size: 35px;
+      color: #0d89d1;
+    }
+    .filter-name{
+      font-family: Roboto;
+      font-size: 15px;
+      margin-left: 10px;
+    
+    }
+  }
+}

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

@@ -31,8 +31,6 @@ import { CustomDateFormatter } from './custom-date-formatter.provider';
 })
 export class AgendaPage implements OnInit {
   
-  title = 'my-dream-app';
-  
   view: CalendarView = CalendarView.Day;
 
   viewDate: Date = new Date();
@@ -43,6 +41,8 @@ export class AgendaPage implements OnInit {
 
   CalendarView = CalendarView;
 
+  timelineDate: string;
+
   setView(view: CalendarView) {
     this.view = view;
   }
@@ -115,6 +115,9 @@ export class AgendaPage implements OnInit {
     private router: Router,
     private alertCrontroller: AlertService
     ) {
+      
+      this.timelineDate = formatDate(new Date,'dd MMMM yyyy', 'pt');
+
       setTimeout(()=>{
         // console.log(JSON.stringify(this.events));
         // console.log(this.events);
@@ -156,13 +159,26 @@ export class AgendaPage implements OnInit {
   onViewTitleChanged(title){
     this.viewTitle = title;
   }
+
+  // Show information of the event for timeline
+  eventClicked({ event }: { event: CalendarEvent }): void {
+    console.log('Event clicked', event);
+    this.eventSelectedDate =  event.start;
+    this.router.navigate(["/home/agenda", event.id, 'agenda']);
+  }
+
   //Show information of the event
   async onEventSelected(ev: { event: Event}){
     this.router.navigate(["/home/agenda", ev.event.EventId, 'agenda']);
   }
 
+  
   onCurrentChanged = (ev: Date) => {
-      this.eventSelectedDate =  ev;
+    // timeline change date
+    this.timelineDate = formatDate(ev,'dd MMMM yyyy', 'pt');
+    this.viewDate = new Date(formatDate(ev,'yyyy-MM-dd', 'pt'));
+    // calendar change date
+    this.eventSelectedDate =  ev;
   };
 
   /* onTimeSelected = (ev: { selectedTime: Date, events: any[] }) => {
@@ -173,6 +189,7 @@ export class AgendaPage implements OnInit {
   onRangeChanged (ev: { startTime: Date, endTime: Date }) {
     this.rangeStartDate = ev.startTime;
     this.rangeEndDate = ev.endTime;
+    console.log('!!!')
 
     this.loadRangeEvents(this.rangeStartDate, this.rangeEndDate);
   };
@@ -224,6 +241,9 @@ export class AgendaPage implements OnInit {
   }
   
   loadRangeEvents(startTime: Date, endTime: Date){
+    
+    console.log('Update date');
+
     this.showTimeline = false;
     this.showLoader = true;
 
@@ -236,7 +256,7 @@ export class AgendaPage implements OnInit {
         
         
         if(this.profile == "mdgpr"){
-           this.eventService.getAllMdEvents(formatDate(startTime, 'yyyy-MM-dd HH:mm:ss', 'pt'), formatDate(endTime, 'yyyy-MM-dd HH:mm:ss', 'pt')).subscribe(
+           this.eventService.getAllMdEvents(formatDate(startTime, 'yyyy-MM-dd', 'pt'), formatDate(endTime, 'yyyy-MM-dd', 'pt')).subscribe(
             response => {
               this.eventsList = response;
               // loop
@@ -250,8 +270,8 @@ export class AgendaPage implements OnInit {
                   event: element
                 });
 
-                const startHours =  formatDate(new Date(element.StartDate), 'HH:mm', 'pt');
+                const startHours =  formatDate(new Date(element.StartDate), 'HH', 'pt');
-                const EndHours = formatDate(new Date(element.EndDate), 'HH:mm', 'pt');
+                const EndHours = formatDate(new Date(element.EndDate), 'HH', 'pt');
 
                 this.events.push({
                   title: this.timeLineTemplate(startHours, element.Location, element.Body, element.CalendarName),
@@ -261,6 +281,7 @@ export class AgendaPage implements OnInit {
                     primary: 'white',
                     secondary: 'white'
                   },
+                  id: element.EventId
                 });
 
               });
@@ -377,6 +398,10 @@ export class AgendaPage implements OnInit {
     } 
   }
 
+  actions(){
+
+  } 
+
   doRefresh(ev: any){
     this.loadRangeEvents(this.rangeStartDate, this.rangeEndDate);
     setTimeout(() => {

src/app/pages/search/search.page.html

@@ -94,7 +94,14 @@
       <!-- most searched word-->
       <div class="most-searched-words" *ngIf="!showDocuments">
         <p class="title ion-text-center">Palavras mais pesquisadas</p>
-
+        <div>
+          <angular-tag-cloud class="world-cloud"
+            [data]="data"
+            [width]=width
+            [height]=height
+            [overflow]=true>
+          </angular-tag-cloud>
+        </div>
       </div>
       
       <!-- search result document-->

src/app/pages/search/search.page.ts

@@ -33,18 +33,16 @@ export class SearchPage implements OnInit {
   showDocuments = false;
   showAdvanceSearch = false;
 
-  options: CloudOptions = {
+  height: number = 411;
-    // if width is between 0 and 1 it will be set to the width of the upper element multiplied by the value
+  width: number = 411;
-    width: 1000,
-    // if height is between 0 and 1 it will be set to the height of the upper element multiplied by the value
-    height: 400,
-    overflow: false,
-  };
 
   data: CloudData[] = [
-    {text: 'Weight-8-link-color', weight: 8, link: 'https://google.com', color: '#ffaaee'},
+    {text: 'Docents', weight: 0.1,  color: '#ffaaee'},
-    {text: 'Weight-10-link', weight: 10, link: 'https://google.com', tooltip: 'display a tooltip'},
+    {text: '1232', weight: 0.2, tooltip: 'display a tooltip'},
-    // ...
+    {text: 'Dcuments', weight: 0.1,  color: '#ffaaee'},
+    {text: 'Cat', weight: 0.3,  color: '#ffaaee'},
+    {text: 'Dogs', weight: 0.1, tooltip: 'display a tooltip'},
+    {text: 'cars', weight: 0.2,  color: '#ffaaee'},
   ];
  
   // See http://idangero.us/swiper/api/ for valid options.

src/assets/images/icons-arrow-arrow-down.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25">
+    <g fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g stroke="#42B9FE" stroke-width="2">
+            <g>
+                <g>
+                    <path d="M15.5 7.5L9.5 13 15.5 18.5" transform="translate(-161 -114) translate(0 109) matrix(-1 0 0 1 186 5) matrix(0 -1 -1 0 25.5 25.5)"/>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/global.scss

@@ -45,7 +45,6 @@ td.monthview-current{
         text-align: center;
         padding-left: 9px;
         color: white;
-        background: #42b9fe;
     }
 }
 
@@ -69,9 +68,6 @@ td.monthview-selected {
     background-color: #42b9fe !important;
   }
 .timeline .cal-event, .cal-event{
-    background-color: white !important;
-    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07) !important;
-    border: solid 1px #e9e9e9 !important;
     padding: 0px !important;
 }
 
@@ -89,7 +85,7 @@ td.monthview-selected {
     left: 55px;
     position: absolute;
     border-radius: 91px;
-    top: -2.5px;
+    top: -3.5px;
 
 }
 
@@ -100,6 +96,10 @@ td.monthview-selected {
 }
 
 .timeline-box{
+    padding: 3px;
+    background-color: white !important;
+    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07) !important;
+    border: solid 1px #e9e9e9 !important;
     color: black;
     .timeline-start-time, .timeline-location{
         font-family: Roboto;
@@ -123,7 +123,26 @@ td.monthview-selected {
     height: 100%;
 }
 
+.table-bordered, .table-bordered{
+    border: none !important;
+    td, th {
+        border: none !important;
+    }
+}
+.cal-tooltip, .cal-tooltip-top{
+    display: none;
+}
+
+// ionic calendar2
+.event-detail-container{
+    display: none;
+}
+
+.cal-week-view {
+    border-top: none !important;
+}
 
 .timeline-box-{}
 /* angular-cli file: src/styles.css */
 @import "../node_modules/angular-calendar/css/angular-calendar.css";
+