Improve agenda

This commit is contained in:
Peter Maquiran
2021-05-07 17:21:05 +01:00
parent 5f48fc3a56
commit 6c5a5708e6
2 changed files with 8 additions and 196 deletions
+4 -192
View File
@@ -15,7 +15,7 @@
<div>
<!-- Calendar is here -->
<div [ngSwitch]="segment">
<div class="calendar-container" *ngSwitchCase="'Combinado'" [style.height]="calendarHeight">
<div class="calendar-container" [style.height]="calendarHeight">
<ion-row class="ion-justify-content-between calendar-tool-tip">
<ion-row class="ion-align-items-center">
@@ -108,196 +108,8 @@
</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">
@@ -363,7 +175,7 @@
<div>
<div class="timeline-container d-flex" >
<div [ngSwitch]="view" class="ss-timeline timeline-mobile flex-grow-1 d-md-none" *ngIf="showTimeline">
<div [ngSwitch]="view" class="ss-timeline timeline-mobile flex-grow-1 d-md-none">
<mwl-calendar-day-view
*ngSwitchCase="'day'"
[viewDate]="viewDate"
@@ -373,7 +185,7 @@
</mwl-calendar-day-view>
</div>
<div [ngSwitch]="view" class="fs-timeline flex-grow-1 d-none d-md-block" *ngIf="showTimelineMD">
<div [ngSwitch]="view" class="fs-timeline flex-grow-1 d-none d-md-block" >
<mwl-calendar-day-view
*ngSwitchCase="'day'"
[viewDate]="viewDate"
@@ -383,7 +195,7 @@
</mwl-calendar-day-view>
</div>
<div [ngSwitch]="view" class="sd-timeline flex-grow-1 d-none d-md-block timeline-md" *ngIf="showTimelinePR">
<div [ngSwitch]="view" class="sd-timeline flex-grow-1 d-none d-md-block timeline-md" >
<mwl-calendar-day-view
*ngSwitchCase="'day'"
[viewDate]="viewDate"