doneit-web/src/app/pages/events/events.page.html

<ion-header translucent="true">
  <ion-toolbar>
    <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-buttons slot="end">
<div class="toggleBox">
  <div (click)="changeProfile()" class="toggle">
    <input type="checkbox">
    <label for="" class="onbtn">PR</label>
    <label for="" class="ofbtn">MDGPR</label>
  </div> 
</div>
</ion-buttons>
</ion-toolbar>
  <ion-toolbar>
    <ion-label>
      <ion-item class="ion-text-right" lines="none">
        <ion-label class="ion-text-wrap">
            <h3 class="header-medium"> {{greetting}} Excelência <br />
              Ministro Director do Gabinete do<!-- <br /> -->
              Presidente da República
            </h3>
          
        </ion-label>
      </ion-item>
    </ion-label>
  </ion-toolbar>
  <!-- TABS -->
  <ion-toolbar >
    <ion-segment [(ngModel)]="segment" (ionChange)="onSegmentChange()">
      <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>
  <ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
  <ion-label>
    <p class="p-small">{{customDate}}</p>
  </ion-label>
  <app-calendar></app-calendar>
  <!-- <ion-item lines="none">
    <ion-icon slot="start" src="assets/images/icons-agenda.svg"></ion-icon>
    <label>A sua Agenda</label>
  </ion-item> -->
  <!-- COMBINADA -->
  <div [ngSwitch]="segment">
    <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>
    <!-- <ion-list *ngSwitchCase="'Combinada'" >
      <ion-item-group>
        <ion-item-sliding>
          <ion-item lines="none" 
          *ngFor="let event of eventsList"
          [routerLink]="['/home/events', event.EventId, 'events']">
            <div class="div-item-{{event.CalendarName}}">
              <div class="div-up">
                <div class="div-icon">
                  <ion-icon slot="start" name="reader"></ion-icon>
                </div>
                <div class="div-content-{{event.CalendarName}}">
                  <h3 class="capitalizeText">{{event.Subject}}</h3>
                  <p>{{event.StartDate | date: 'hh:mm'}} - {{event.EndDate| date: 'hh:mm'}}</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 capitalizeText">{{event.Location}}</p>
                </div>
                <div *ngIf="event.HasAttachments" 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> -->
    <ion-list *ngSwitchCase="'Combinada'">
      <div *ngIf="eventsList">
        <ion-item-sliding>
          <ion-item class="Rectangle" lines="none" 
              *ngFor="let event of eventsList"
              [routerLink]="['/home/events', event.EventId, 'events']">
              <div class="content-{{profile}}-{{event.CalendarName}}">
                <div class="approve-event-time">
                  <p>{{event.StartDate | date: 'hh:mm'}}</p>
                  <p>{{event.EndDate | date: 'hh:mm'}}</p>
                </div>
                <div class="approve-event-detail">
                  <p>{{event.Location}}</p>
                  <h3>{{event.Subject}}</h3>
                </div>
              </div>
            </ion-item>
        </ion-item-sliding>
      </div>
    </ion-list>
    <!-- OFICIAL -->
    <!-- <ion-list *ngSwitchCase="'Oficial'">
      <ion-item-group>
        <ion-item-sliding>
          <ion-item lines="none" 
          *ngFor="let event of officialeventsList"
          [routerLink]="['/home/events', event.EventId, 'events']">
            <div class="div-item-{{event.CalendarName}}">
              <div class="div-up">
                <div class="div-icon">
                  <ion-icon slot="start" name="reader"></ion-icon>
                </div>
                <div class="div-content-{{event.CalendarName}}">
                  <h3 class="capitalizeText">{{event.Subject}}</h3>
                  <p>{{event.StartDate | date: 'hh:mm'}} - {{event.EndDate | date: 'hh:mm'}}</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 capitalizeText">{{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> -->
    <ion-list *ngSwitchCase="'Oficial'">
      <div *ngIf="officialeventsList">
        <ion-item-sliding>
          <ion-item class="Rectangle" lines="none" 
              *ngFor="let event of officialeventsList"
              [routerLink]="['/home/events', event.EventId, 'events']">
              <div class="content-{{profile}}-{{event.CalendarName}}">
                <div class="approve-event-time">
                  <p>{{event.StartDate | date: 'hh:mm'}}</p>
                  <p>{{event.EndDate | date: 'hh:mm'}}</p>
                </div>
                <div class="approve-event-detail">
                  <p>{{event.Location}}</p>
                  <h3>{{event.Subject}}</h3>
                </div>
              </div>
            </ion-item>
        </ion-item-sliding>
      </div>
    </ion-list>
    <!-- OFICIAL -->
    <!-- <ion-list *ngSwitchCase="'Pessoal'">
      <ion-item-group>
        <ion-item-sliding>
          <ion-item lines="none" 
          *ngFor="let event of personaleventsList"
          [routerLink]="['/home/events', event.EventId, 'events']">
            <div class="div-item-{{event.CalendarName}}">
              <div class="div-up">
                <div class="div-icon">
                  <ion-icon slot="start" name="reader"></ion-icon>
                </div>
                <div class="div-content-{{event.CalendarName}}">
                  <h3 class="capitalizeText">{{event.Subject}}</h3>
                  <p>{{event.StartDate | date: 'hh:mm' }} - {{event.EndDate | date: 'hh:mm'}}</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 capitalizeText">{{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> -->
    <ion-list *ngSwitchCase="'Pessoal'">
      <div *ngIf="personaleventsList">
        <ion-item-sliding>
          <ion-item class="Rectangle" lines="none" 
              *ngFor="let event of personaleventsList"
              [routerLink]="['/home/events', event.EventId, 'events']">
              <div class="content-{{profile}}-{{event.CalendarName}}">
                <div class="approve-event-time">
                  <p>{{event.StartDate | date: 'hh:mm'}}</p>
                  <p>{{event.EndDate | date: 'hh:mm'}}</p>
                </div>
                <div class="approve-event-detail">
                  <p>{{event.Location}}</p>
                  <h3>{{event.Subject}}</h3>
                </div>
              </div>
            </ion-item>
        </ion-item-sliding>
      </div>
    </ion-list>
  </div>
</ion-content>