mirror of
https://code.equilibrium.co.ao/ITO/doneit-web.git
synced 2026-04-19 04:57:52 +00:00
Peter Maquiran
496 lines
21 KiB
HTML
496 lines
21 KiB
HTML
<ion-header class="ion-no-border ">
|
|
<app-header ></app-header>
|
|
</ion-header>
|
|
|
|
<ion-content id="timeline-conteiner agenda-container" class="timeline ">
|
|
|
|
<div class="d-flex container-wrapper">
|
|
|
|
<div class="calendar-timeline d-flex flex-column height-100 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="'Combinado'" [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 class="arrow">
|
|
<button (click)="back()" class="btn-no-color" >
|
|
<ion-icon slot="icon-only" src="assets/images/icons-calendar-arrow-left.svg"></ion-icon>
|
|
</button>
|
|
|
|
</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">
|
|
|
|
<button *ngIf="profile == 'mdgpr' " (click)="changeProfile()" class="right-icons d-md-none btn-no-color">
|
|
<ion-icon src="assets/images/icons-profile-calendar-md.svg">ddddddd</ion-icon>
|
|
</button>
|
|
|
|
<button *ngIf="profile == 'pr' " (click)="changeProfile()" class="btn-no-color">
|
|
<ion-icon class="right-icons d-md-none" src="assets/images/icons-profile-calendar-pr.svg">dddddddd</ion-icon>
|
|
</button>
|
|
|
|
<button class="btn-no-color" (click)="viewEventsToApprove()">
|
|
<ion-icon class="right-icons" src="assets/images/icons-received-event.svg"></ion-icon>
|
|
</button>
|
|
|
|
<button class="btn-no-color" (click)="clearContact();openAddEvent();">
|
|
<ion-icon class="right-icons" src="assets/images/icons-add-new-event.svg" ></ion-icon>
|
|
</button>
|
|
|
|
</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="d-flex justify-center align-center" [class.with-event]="view.dates[row*7+col].events.length">
|
|
|
|
<div class="day">
|
|
{{ view.dates[row*7+col].label }}
|
|
</div>
|
|
|
|
</div>
|
|
</ng-template>
|
|
</div>
|
|
<div class="calendar-container" *ngSwitchCase="'Pessoal'" [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 class="arrow">
|
|
<button (click)="back()" class="btn-no-color" >
|
|
<ion-icon slot="icon-only" src="assets/images/icons-calendar-arrow-left.svg"></ion-icon>
|
|
</button>
|
|
|
|
</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">
|
|
|
|
<button *ngIf="profile == 'mdgpr' " (click)="changeProfile()" class="right-icons d-md-none btn-no-color">
|
|
<ion-icon src="assets/images/icons-profile-calendar-md.svg">ddddddd</ion-icon>
|
|
</button>
|
|
|
|
<button *ngIf="profile == 'pr' " (click)="changeProfile()" class="btn-no-color">
|
|
<ion-icon class="right-icons d-md-none" src="assets/images/icons-profile-calendar-pr.svg">dddddddd</ion-icon>
|
|
</button>
|
|
|
|
<button class="btn-no-color" (click)="viewEventsToApprove()">
|
|
<ion-icon class="right-icons" src="assets/images/icons-received-event.svg"></ion-icon>
|
|
</button>
|
|
|
|
<button class="btn-no-color" (click)="clearContact();openAddEvent();">
|
|
<ion-icon class="right-icons" src="assets/images/icons-add-new-event.svg" ></ion-icon>
|
|
</button>
|
|
|
|
</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>
|
|
<!-- (onTimeSelected)="onTimeSelected($event)" -->
|
|
|
|
<!-- 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="d-flex justify-center align-center" [class.with-event]="view.dates[row*7+col].events.length">
|
|
|
|
<div class="day">
|
|
{{ view.dates[row*7+col].label }}
|
|
</div>
|
|
|
|
</div>
|
|
</ng-template>
|
|
|
|
</div>
|
|
<div class="calendar-container" *ngSwitchCase="'Oficial'" [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 class="arrow">
|
|
<button (click)="back()" class="btn-no-color" >
|
|
<ion-icon slot="icon-only" src="assets/images/icons-calendar-arrow-left.svg"></ion-icon>
|
|
</button>
|
|
|
|
</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">
|
|
|
|
<button *ngIf="profile == 'mdgpr' " (click)="changeProfile()" class="right-icons d-md-none btn-no-color">
|
|
<ion-icon src="assets/images/icons-profile-calendar-md.svg">ddddddd</ion-icon>
|
|
</button>
|
|
|
|
<button *ngIf="profile == 'pr' " (click)="changeProfile()" class="btn-no-color">
|
|
<ion-icon class="right-icons d-md-none" src="assets/images/icons-profile-calendar-pr.svg">dddddddd</ion-icon>
|
|
</button>
|
|
|
|
<button class="btn-no-color" (click)="viewEventsToApprove()">
|
|
<ion-icon class="right-icons" src="assets/images/icons-received-event.svg"></ion-icon>
|
|
</button>
|
|
|
|
<button class="btn-no-color" (click)="clearContact();openAddEvent();">
|
|
<ion-icon class="right-icons" src="assets/images/icons-add-new-event.svg" ></ion-icon>
|
|
</button>
|
|
|
|
</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 -->
|
|
<!-- 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="d-flex justify-center align-center" [class.with-event]="view.dates[row*7+col].events.length">
|
|
|
|
<div class="day">
|
|
{{ view.dates[row*7+col].label }}
|
|
</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 pb-5">
|
|
<ion-row class="timeline-date align-center">
|
|
<button class="btn-no-color" *ngIf="showCalendar" (click)="calendarHeight='75px';showCalendar=false">
|
|
<ion-icon class="collaps btn-no-color" src="assets/images/icons-collaps-up.svg" ></ion-icon>
|
|
</button>
|
|
<button class="collaps btn-no-color" *ngIf="!showCalendar" (click)="calendarHeight='333px';showCalendar=true">
|
|
<ion-icon src="assets/images/icons-collaps-down.svg" ></ion-icon>
|
|
</button >
|
|
|
|
|
|
</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 -->
|
|
<button (click)="showTimelineFilterState=!showTimelineFilterState" class="arrow-down btn-no-color">
|
|
<ion-icon src="assets/images/icons-arrow-arrow-down.svg"></ion-icon>
|
|
</button>
|
|
|
|
<!-- List -->
|
|
<ul *ngIf="showTimelineFilterState">
|
|
<li [class.active]="segment == 'Combinado' " (click)="changeSegment('Combinado')">Todos</li>
|
|
<li [class.active]="segment == 'Oficial' " (click)="changeSegment('Oficial')">Oficial</li>
|
|
<li [class.active]="segment == 'Pessoal' " (click)="changeSegment('Pessoal')">Pessoal</li>
|
|
</ul>
|
|
|
|
</ion-row>
|
|
</ion-row>
|
|
|
|
<div class="pb-5 d-none d-md-flex">
|
|
<div class="flex-grow-1 text-grey d-flex justify-center align-center">
|
|
<div>Própria</div>
|
|
</div>
|
|
<div class="flex-grow-1 text-black">
|
|
<div class="flex-grow-1 text-grey d-flex justify-center align-center">
|
|
<div>Presidente da República</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="timeline-wrapper flex-grow-1" >
|
|
<!-- Progress bar -->
|
|
<ion-refresher name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
|
|
<ion-refresher-content>
|
|
</ion-refresher-content>
|
|
</ion-refresher>
|
|
|
|
<!-- Timeline -->
|
|
<div>
|
|
<div class="timeline-container d-flex" >
|
|
|
|
<div [ngSwitch]="view" class="ss-timeline timeline-mobile flex-grow-1 d-md-none" *ngIf="showTimeline">
|
|
<mwl-calendar-day-view
|
|
*ngSwitchCase="'day'"
|
|
[viewDate]="viewDate"
|
|
[events]="events"
|
|
(eventClicked)="clearContact();eventClicked($event)"
|
|
>
|
|
</mwl-calendar-day-view>
|
|
</div>
|
|
|
|
<div [ngSwitch]="view" class="fs-timeline flex-grow-1 d-none d-md-block" *ngIf="showTimelineMD">
|
|
<mwl-calendar-day-view
|
|
*ngSwitchCase="'day'"
|
|
[viewDate]="viewDate"
|
|
[events]="TimelineMD"
|
|
(eventClicked)="clearContact();eventClicked($event)"
|
|
>
|
|
</mwl-calendar-day-view>
|
|
</div>
|
|
|
|
<div [ngSwitch]="view" class="sd-timeline flex-grow-1 d-none d-md-block timeline-md" *ngIf="showTimelinePR">
|
|
<mwl-calendar-day-view
|
|
*ngSwitchCase="'day'"
|
|
[viewDate]="viewDate"
|
|
[events]="TimelinePR"
|
|
(eventClicked)="clearContact();eventClicked($event)"
|
|
>
|
|
</mwl-calendar-day-view>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="event-details bg-blue ">
|
|
|
|
<div *ngIf="(
|
|
mobileComponent.showAddNewEvent == false &&
|
|
mobileComponent.showEditEvent == false &&
|
|
mobileComponent.showEventDetails == false &&
|
|
mobileComponent.showEventList == false &&
|
|
mobileComponent.showEventToApprove == false &&
|
|
mobileComponent.showAttendees == false &&
|
|
mobileComponent.showAttendeeModal == false
|
|
)
|
|
"
|
|
class="text-black nothing-to-show">
|
|
Nenhum evento selecionado
|
|
</div>
|
|
|
|
<!-- New -->
|
|
<app-new-event *ngIf="mobileComponent.showAddNewEvent"
|
|
[profile]="profile"
|
|
[selectedSegment]=segment
|
|
[taskParticipants]="taskParticipants"
|
|
[taskParticipantsCc]="taskParticipantsCc"
|
|
[selectedDate]="eventSelectedDate"
|
|
(onAddEvent)="openAddEventDismiss($event)"
|
|
(openAttendeesComponent)="openAttendeesComponent($event)"
|
|
(cloneAllmobileComponent)="cloneAllmobileComponent()"
|
|
[eventAttendees]="contacts"
|
|
(clearContact)="clearContact()"
|
|
(setContact)="setContact($event)"
|
|
|
|
(setIntervenient)="setIntervenient($event)"
|
|
(setIntervenientCC)="setIntervenientCC($event)"
|
|
></app-new-event>
|
|
|
|
<!-- Edit -->
|
|
<app-edit-event *ngIf="mobileComponent.showEditEvent"
|
|
[taskParticipants]="taskParticipants"
|
|
[taskParticipantsCc]="taskParticipantsCc"
|
|
[profile]="profile"
|
|
[selectedSegment]="segment"
|
|
[postEvent]="postEvent"
|
|
(clearPostEvent)="clearPostEvent"
|
|
(clearContact)="clearContact()"
|
|
(openAttendeesComponent)="openAttendeesComponent($event)"
|
|
(setContact)="setContact($event)"
|
|
(closeComponent)="closeComponentEditEventOrAdd()"
|
|
|
|
(setIntervenient)="setIntervenient($event)"
|
|
(setIntervenientCC)="setIntervenientCC($event)"
|
|
></app-edit-event>
|
|
|
|
<!-- View -->
|
|
<app-view-event *ngIf="mobileComponent.showEventDetails"
|
|
[profile]="profile"
|
|
[eventId]="selectedEventId"
|
|
(viewEventDetailDismiss)="viewEventDetailDismiss($event)"
|
|
[eventAttendees]="contacts"
|
|
></app-view-event>
|
|
|
|
|
|
<app-event-list [class.transparent]="mobileComponent.transparentEventList" *ngIf="mobileComponent.showEventList"
|
|
[profile]="profile"
|
|
(approveEventDismiss) = "approveEventDismiss($event)"
|
|
(cloneAllmobileComponent)="viewEventDetailDismiss($event)"
|
|
>
|
|
</app-event-list>
|
|
|
|
|
|
<app-approve-event class="d-flex flex-column" *ngIf="mobileComponent.showEventToApprove" [class.transparent]="mobileComponent.transparentEventToApprove"
|
|
[serialNumber] = "eventToaprove.serialNumber"
|
|
(cloneAllmobileComponent)="viewEventDetailDismiss($event)"
|
|
(closeEventToApprove)="closeEventToApprove()"
|
|
(AproveEventEditEvent)="AproveEventEditEvent($event)"
|
|
[eventAttendees]="contacts"
|
|
>
|
|
</app-approve-event>
|
|
|
|
<app-attendee-modal
|
|
class="d-flex flex-column height-100"
|
|
*ngIf="mobileComponent.showAttendees"
|
|
(closeComponent)="GoBackEditOrAdd()"
|
|
(setContact)="setContact($event)"
|
|
[adding]="adding"
|
|
[taskParticipants]="taskParticipants"
|
|
[taskParticipantsCc]="taskParticipantsCc"
|
|
(setIntervenient)="setIntervenient($event)"
|
|
(setIntervenientCC)="setIntervenientCC($event)"
|
|
>
|
|
</app-attendee-modal>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</ion-content> |