Add shared component header MD in events page

This commit is contained in:
Peter Maquiran
2020-12-29 11:09:46 +01:00
parent 969d169159
commit 97be935768
3 changed files with 23 additions and 228 deletions
+13 -227
View File
@@ -1,234 +1,20 @@
<ion-header class="ion-no-border">
<ion-toolbar class="ion-no-border" class="bg-blue">
<div class="div-top-header">
<div class="div-search">
<ion-icon src='assets/images/icons-search.svg'></ion-icon>
</div>
<div class="div-logo">
<img src='assets/images/logo-no-bg.png' alt='logo'>
</div>
<div class="div-profile">
<ion-icon src='assets/images/icons-profile.svg'></ion-icon>
</div>
</div>
</ion-toolbar>
</ion-header>
<ion-header translucent="true">
<ion-toolbar class="bg-blue">
<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 class="bg-blue">
<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>
<app-header></app-header>
</ion-header>
<ion-content >
<ion-content class="main bg-blue">
<ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
<ion-label>
<p class="p-small">{{customDate}}</p>
<p class="p-small ion-text-center">{{customDate}}</p>
</ion-label>
<ion-label>
<p class="p-small ion-text-center"> <bold>5</bold> eventtos agendados para hoje</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>
<div class="next-meeting">
<div class="meeting-time">08:30</div>
<div class="meeting-description">Reunião de Conselho de Ministros no Palácio Presidencial</div>
</div>
</ion-content>