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">
  <label class="switch">
    <input type="checkbox" id="togBtn">
    <div (click)="showAlert()">
    <div class="slider round">
    <!--ADDED HTML --><span class="mdgpr">MDGPR</span></div><span class="pr">PR</span><!--END-->
  </div>
</label>
</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>
  <!-- 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>{{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">{{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>
    <!-- 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]">
            <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>{{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">{{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="'Pessoal'">
      <ion-item-group>
        <ion-item-sliding>
          <ion-item lines="none" 
          *ngFor="let event of personaleventsList"
          [routerLink]="['/home/events', event.EventId]">
            <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>{{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">{{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>
  </div>
</ion-content>