mirror of
https://code.equilibrium.co.ao/ITO/doneit-web.git
synced 2026-04-18 20:47:54 +00:00
Add generic modal
This commit is contained in:
@@ -1,279 +1,321 @@
|
||||
<ion-header>
|
||||
<app-header></app-header>
|
||||
<ion-header class="ion-no-border bg-blue">
|
||||
<app-header class="bg-blue"></app-header>
|
||||
</ion-header>
|
||||
<ion-header>
|
||||
<div class="bg-blue">
|
||||
<div class="main-content">
|
||||
<!-- Toolbar -->
|
||||
<ion-progress-bar class="calendar-progress-bar" type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
|
||||
<div>
|
||||
<!-- Calendar is here -->
|
||||
<div [ngSwitch]="segment">
|
||||
<div class="calendar-container" *ngSwitchCase="'Combinada'" [style.height]="calendarHeight">
|
||||
|
||||
<ion-row class="ion-justify-content-between calendar-tool-tip">
|
||||
<ion-row class="ion-align-items-center">
|
||||
<!-- Move back one screen of the slides -->
|
||||
<ion-content id="timeline-conteiner agenda-container" class="timeline bg-blue">
|
||||
|
||||
<div class="d-flex bg-blue container-wrapper">
|
||||
|
||||
<div class="calendar-timeline bg-blue">
|
||||
<div class="calendar-wrapper">
|
||||
|
||||
<div class="main-content">
|
||||
<!-- Toolbar -->
|
||||
<ion-progress-bar class="calendar-progress-bar" type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
|
||||
<div>
|
||||
<!-- Calendar is here -->
|
||||
<div [ngSwitch]="segment">
|
||||
<div class="calendar-container" *ngSwitchCase="'Combinada'" [style.height]="calendarHeight">
|
||||
|
||||
<ion-row class="ion-justify-content-between calendar-tool-tip">
|
||||
<ion-row class="ion-align-items-center">
|
||||
<!-- Move back one screen of the slides -->
|
||||
|
||||
<div (click)="back()" class="arrow">
|
||||
<ion-icon slot="icon-only" src="assets/images/icons-calendar-arrow-left.svg"></ion-icon>
|
||||
</div>
|
||||
|
||||
<!-- Move forward one screen of the slides -->
|
||||
<h2 class="capitaliseText">{{ viewTitle }}</h2>
|
||||
<!-- <div class="drop-down">
|
||||
<ion-icon slot="icon-only" class="arrow-down" src="assets/images/icons-arrow-arrow-down.svg"></ion-icon>
|
||||
<div class="drop-down-container">
|
||||
<ul>
|
||||
<li *ngFor="let month of monthList" (click)="dropDownChangeDate(month.id)" >{{ month.name }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div> -->
|
||||
<!-- Move forward one screen of the slides -->
|
||||
<div (click)="next()" class="arrow">
|
||||
<ion-icon slot="icon-only" src="assets/images/icons-calendar-arrow-right.svg"></ion-icon>
|
||||
</div>
|
||||
|
||||
</ion-row>
|
||||
<ion-row class="ion-align-items-center">
|
||||
<ion-icon *ngIf="profile == 'mdgpr' " (click)="changeProfile()" class="right-icons" src="assets/images/icons-profile-calendar-md.svg"></ion-icon>
|
||||
<ion-icon *ngIf="profile == 'pr' " (click)="changeProfile()" class="right-icons" src="assets/images/icons-profile-calendar-pr.svg"></ion-icon>
|
||||
<ion-icon (click)="viewEventsToApprove()" class="right-icons" src="assets/images/icons-received-event.svg"></ion-icon>
|
||||
<ion-icon (click)="openAddEvent()" class="right-icons" src="assets/images/icons-add-new-event.svg" ></ion-icon>
|
||||
</ion-row>
|
||||
</ion-row>
|
||||
|
||||
<div (click)="back()" class="arrow">
|
||||
<ion-icon slot="icon-only" src="assets/images/icons-calendar-arrow-left.svg"></ion-icon>
|
||||
</div>
|
||||
|
||||
<!-- Move forward one screen of the slides -->
|
||||
<h2 class="capitaliseText">{{ viewTitle }}</h2>
|
||||
<!-- <div class="drop-down">
|
||||
<ion-icon slot="icon-only" class="arrow-down" src="assets/images/icons-arrow-arrow-down.svg"></ion-icon>
|
||||
<div class="drop-down-container">
|
||||
<ul>
|
||||
<li *ngFor="let month of monthList" (click)="dropDownChangeDate(month.id)" >{{ month.name }}</li>
|
||||
</ul>
|
||||
<table class="custom-calendar-header">
|
||||
<thead>
|
||||
<th>S</th>
|
||||
<th>T</th>
|
||||
<th>Q</th>
|
||||
<th>Q</th>
|
||||
<th>S</th>
|
||||
<th>S</th>
|
||||
<th>D</th>
|
||||
</thead>
|
||||
</table>
|
||||
|
||||
<calendar
|
||||
class="calendar-component"
|
||||
[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 [className]="currentDayEventDisplayBorder(view.dates, row*7+col)" [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>
|
||||
</div> -->
|
||||
<!-- Move forward one screen of the slides -->
|
||||
<div (click)="next()" class="arrow">
|
||||
<ion-icon slot="icon-only" src="assets/images/icons-calendar-arrow-right.svg"></ion-icon>
|
||||
</div>
|
||||
|
||||
</ng-template>
|
||||
</div>
|
||||
<div class="calendar-container" *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>
|
||||
|
||||
|
||||
<table class="custom-calendar-header">
|
||||
<thead>
|
||||
<th>S</th>
|
||||
<th>T</th>
|
||||
<th>Q</th>
|
||||
<th>Q</th>
|
||||
<th>S</th>
|
||||
<th>S</th>
|
||||
<th>D</th>
|
||||
</thead>
|
||||
</table>
|
||||
|
||||
<calendar
|
||||
class="calendar-component"
|
||||
[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 class="calendar-container" *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>
|
||||
|
||||
|
||||
<table class="custom-calendar-header">
|
||||
<thead>
|
||||
<th>S</th>
|
||||
<th>T</th>
|
||||
<th>Q</th>
|
||||
<th>Q</th>
|
||||
<th>S</th>
|
||||
<th>S</th>
|
||||
<th>D</th>
|
||||
</thead>
|
||||
</table>
|
||||
|
||||
<calendar
|
||||
class="calendar-component"
|
||||
[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>
|
||||
|
||||
<div class="calendar-border">
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Calendar currente date -->
|
||||
<ion-row class="timeline-header ion-justify-content-between ion-align-items-center currente-date-timelien">
|
||||
<ion-row class="timeline-date align-center">
|
||||
<ion-icon *ngIf="showCalendar" (click)="calendarHeight='75px';showCalendar=false" class="collaps" src="assets/images/icons-collaps-up.svg" ></ion-icon>
|
||||
<ion-icon *ngIf="!showCalendar" (click)="calendarHeight='430.5px';showCalendar=true" class="collaps" src="assets/images/icons-collaps-down.svg" ></ion-icon>
|
||||
</ion-row>
|
||||
<ion-row class="timeline-date align-center">
|
||||
<span *ngIf="timelineIsCurrentDate()">Hoje, </span> {{ timelineDate }}
|
||||
</ion-row>
|
||||
<ion-row class="filter ion-align-items-center">
|
||||
<div class="filter-name">{{timelineFilterState}}</div>
|
||||
<!-- Icon -->
|
||||
<ion-icon (click)="showTimelineFilterState=true" class="arrow-down" src="assets/images/icons-arrow-arrow-down.svg"></ion-icon>
|
||||
<!-- List -->
|
||||
<ul *ngIf="showTimelineFilterState">
|
||||
<li [class.active]="timelineFilterState == 'Todos' " (click)="timelineFilter('Todos')">Todos</li>
|
||||
<li [class.active]="timelineFilterState == 'Oficial' " (click)="timelineFilter('Oficial')">Oficial</li>
|
||||
<li [class.active]="timelineFilterState == 'Pessoal' " (click)="timelineFilter('Pessoal')">Pessoal</li>
|
||||
</ul>
|
||||
</ion-row>
|
||||
<ion-row class="ion-align-items-center">
|
||||
<ion-icon *ngIf="profile == 'mdgpr' " (click)="changeProfile()" class="right-icons" src="assets/images/icons-profile-calendar-md.svg"></ion-icon>
|
||||
<ion-icon *ngIf="profile == 'pr' " (click)="changeProfile()" class="right-icons" src="assets/images/icons-profile-calendar-pr.svg"></ion-icon>
|
||||
<ion-icon (click)="viewEventsToApprove()" class="right-icons" src="assets/images/icons-received-event.svg"></ion-icon>
|
||||
<ion-icon (click)="openAddEvent()" class="right-icons" src="assets/images/icons-add-new-event.svg" ></ion-icon>
|
||||
</ion-row>
|
||||
</ion-row>
|
||||
|
||||
<table class="custom-calendar-header">
|
||||
<thead>
|
||||
<th>S</th>
|
||||
<th>T</th>
|
||||
<th>Q</th>
|
||||
<th>Q</th>
|
||||
<th>S</th>
|
||||
<th>S</th>
|
||||
<th>D</th>
|
||||
</thead>
|
||||
</table>
|
||||
|
||||
<calendar
|
||||
class="calendar-component"
|
||||
[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 [className]="currentDayEventDisplayBorder(view.dates, row*7+col)" [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 class="calendar-container" *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>
|
||||
|
||||
|
||||
<table class="custom-calendar-header">
|
||||
<thead>
|
||||
<th>S</th>
|
||||
<th>T</th>
|
||||
<th>Q</th>
|
||||
<th>Q</th>
|
||||
<th>S</th>
|
||||
<th>S</th>
|
||||
<th>D</th>
|
||||
</thead>
|
||||
</table>
|
||||
|
||||
<calendar
|
||||
class="calendar-component"
|
||||
[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 class="calendar-container" *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>
|
||||
|
||||
</div>
|
||||
|
||||
<table class="custom-calendar-header">
|
||||
<thead>
|
||||
<th>S</th>
|
||||
<th>T</th>
|
||||
<th>Q</th>
|
||||
<th>Q</th>
|
||||
<th>S</th>
|
||||
<th>S</th>
|
||||
<th>D</th>
|
||||
</thead>
|
||||
</table>
|
||||
</div>
|
||||
<div class="timeline-wrapper" [style.height]="sanitizer.bypassSecurityTrustStyle('calc(100% - ('+calendarHeight+' + 84.5px))')" >
|
||||
<!-- Progress bar -->
|
||||
<ion-refresher name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
|
||||
<ion-refresher-content>
|
||||
</ion-refresher-content>
|
||||
</ion-refresher>
|
||||
|
||||
<!-- Timeline -->
|
||||
<div class="timeline-container" *ngIf="showTimeline">
|
||||
<mwl-demo-utils-calendar-header class="timeline"
|
||||
[(view)]="view"
|
||||
[(viewDate)]="viewDate"
|
||||
[dayStartHour]="0"
|
||||
[dayEndHour]="23">
|
||||
</mwl-demo-utils-calendar-header>
|
||||
|
||||
<calendar
|
||||
class="calendar-component"
|
||||
[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 [ngSwitch]="view">
|
||||
<mwl-calendar-day-view
|
||||
*ngSwitchCase="'day'"
|
||||
[viewDate]="viewDate"
|
||||
[events]="events"
|
||||
(eventClicked)="eventClicked($event)"
|
||||
>
|
||||
</mwl-calendar-day-view>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="calendar-border">
|
||||
<div class="event-details bg-blue ">
|
||||
|
||||
<!-- New -->
|
||||
<app-new-event *ngIf="mobileComponent.showAddNewEvent"
|
||||
style="height: 100%;display: flex;flex-wrap: wrap;"
|
||||
|
||||
[profile]="profile"
|
||||
[selectedSegment]=segment
|
||||
[selectedDate]="eventSelectedDate"
|
||||
(onAddEvent)="openAddEventDismiss($event)"
|
||||
|
||||
</div>
|
||||
></app-new-event>
|
||||
<!-- Edit -->
|
||||
<app-edit-event *ngIf="mobileComponent.showEditEvent"
|
||||
style="height: 100%;display: flex;flex-wrap: wrap;"
|
||||
|
||||
[profile]="profile"
|
||||
[selectedSegment]="segment"
|
||||
[postEvent]="postEvent"
|
||||
(cloneAllmobileComponent)="cloneAllmobileComponent($event)"
|
||||
|
||||
></app-edit-event>
|
||||
|
||||
<!-- Calendar currente date -->
|
||||
<ion-row class="timeline-header ion-justify-content-between ion-align-items-center currente-date-timelien">
|
||||
<ion-row class="timeline-date align-center">
|
||||
<ion-icon *ngIf="showCalendar" (click)="calendarHeight='75px';showCalendar=false" class="collaps" src="assets/images/icons-collaps-up.svg" ></ion-icon>
|
||||
<ion-icon *ngIf="!showCalendar" (click)="calendarHeight='347px';showCalendar=true" class="collaps" src="assets/images/icons-collaps-down.svg" ></ion-icon>
|
||||
</ion-row>
|
||||
<ion-row class="timeline-date align-center">
|
||||
<span *ngIf="timelineIsCurrentDate()">Hoje, </span> {{ timelineDate }}
|
||||
</ion-row>
|
||||
<ion-row class="filter ion-align-items-center">
|
||||
<div class="filter-name">{{timelineFilterState}}</div>
|
||||
<!-- Icon -->
|
||||
<ion-icon (click)="showTimelineFilterState=true" class="arrow-down" src="assets/images/icons-arrow-arrow-down.svg"></ion-icon>
|
||||
<!-- List -->
|
||||
<ul *ngIf="showTimelineFilterState">
|
||||
<li [class.active]="timelineFilterState == 'Todos' " (click)="timelineFilter('Todos')">Todos</li>
|
||||
<li [class.active]="timelineFilterState == 'Oficial' " (click)="timelineFilter('Oficial')">Oficial</li>
|
||||
<li [class.active]="timelineFilterState == 'Pessoal' " (click)="timelineFilter('Pessoal')">Pessoal</li>
|
||||
</ul>
|
||||
</ion-row>
|
||||
</ion-row>
|
||||
<!-- View -->
|
||||
<app-view-event *ngIf="mobileComponent.showEventDitails"
|
||||
[profile]="profile"
|
||||
[eventId]="selectedEventId"
|
||||
|
||||
(viewEventDetailDismiss)="viewEventDetailDismiss($event)"
|
||||
></app-view-event>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ion-header>
|
||||
<ion-content id="timeline-conteiner" class="timeline">
|
||||
|
||||
<!-- Progress bar -->
|
||||
<ion-refresher name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
|
||||
<ion-refresher-content>
|
||||
</ion-refresher-content>
|
||||
</ion-refresher>
|
||||
|
||||
<!-- Timeline -->
|
||||
<div class="timeline-container" *ngIf="showTimeline">
|
||||
<mwl-demo-utils-calendar-header class="timeline"
|
||||
[(view)]="view"
|
||||
[(viewDate)]="viewDate"
|
||||
[dayStartHour]="0"
|
||||
[dayEndHour]="23">
|
||||
</mwl-demo-utils-calendar-header>
|
||||
|
||||
<div [ngSwitch]="view">
|
||||
<mwl-calendar-day-view
|
||||
*ngSwitchCase="'day'"
|
||||
[viewDate]="viewDate"
|
||||
[events]="events"
|
||||
(eventClicked)="eventClicked($event)"
|
||||
>
|
||||
</mwl-calendar-day-view>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</ion-content>
|
||||
Reference in New Issue
Block a user