This commit is contained in:
Peter Maquiran
2023-08-24 22:19:40 +01:00
parent 7302918ed8
commit f3f84ed475
7 changed files with 79 additions and 59 deletions
+26 -23
View File
@@ -14,11 +14,11 @@
<!-- Toolbar -->
<ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
<div [class]="weeksToShow" >
<div class="weeksToShow">
<!-- Calendar is here -->
<div class="calendar-segment-{{profile}}" [class.calendar-segment-pr-force]="SessionStore.user.Profile =='PR'">
<div class="calendar-container" [class]="calendarHeight">
<div class="calendar-container" class="calendarHeight" >
<ion-row class="ion-justify-content-between calendar-tool-tip">
<ion-row class="ion-align-items-center first-row">
@@ -140,25 +140,28 @@
</thead>
</table>
<calendar
class="calendar-component"
[eventSource]="listToPresent"
[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>
<div class="calendar-conteiner-height overflow-hidden" [style.height]="height">
<calendar
class="calendar-component"
[eventSource]="listToPresent"
[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>
</div>
<!-- Adding a customized ng-template -->
<ng-template #template let-view="view" let-row="row" let-col="col">
@@ -183,12 +186,12 @@
<div class="calendar-title-container px-20 d-flex">
<ion-row class="timeline-date align-center pr-10">
<button class="no-color" *ngIf="showCalendar" (click)="calendarHeight=['height-75'];showCalendar=false">
<button class="no-color" *ngIf="showCalendar" (click)="height='0px';showCalendar=false">
<ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="collaps font-25" src="assets/images/icons-collaps-up.svg" ></ion-icon>
<ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="collaps font-25" src="assets/images/theme/gov/icons-collaps-up.svg" ></ion-icon>
<ion-icon *ngIf="ThemeService.currentTheme == 'doneIt' " class="collaps font-25" src="assets/images/theme/{{ThemeService.currentTheme}}/icons-collaps-up.svg"></ion-icon>
</button>
<button class="no-color" *ngIf="!showCalendar" (click)="calendarHeight=['height-356'];showCalendar=true">
<button class="no-color" *ngIf="!showCalendar" (click)="weekToShow();showCalendar=true">
<ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="collaps font-25" src="assets/images/icons-collaps-down.svg" ></ion-icon>
<ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="collaps font-25" src="assets/images/theme/gov/icons-collaps-down.svg" ></ion-icon>
<ion-icon *ngIf="ThemeService.currentTheme == 'doneIt' " class="collaps font-25" src="assets/images/theme/{{ThemeService.currentTheme}}/icons-collaps-down.svg" ></ion-icon>
+12 -2
View File
@@ -242,7 +242,7 @@ label{
color: #e16817;
}
td.monthview-primary-with-event {
background-color: red !important;
background-color: white !important;
}
.header-title{
font-family: Roboto;
@@ -1031,7 +1031,7 @@ $font-size: rem(15);
}
.height-356 {
height: 369px;
height: 360px;
}
}
@@ -1066,3 +1066,13 @@ $font-size: rem(15);
}
.calendar-conteiner-height {
height: 100%;
transition: 0.5s;
animation: 0.5s;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
-webkit-animation: 0.5s;
}
+22 -19
View File
@@ -291,34 +291,37 @@ export class AgendaPage implements OnInit {
}, 1000)
}
weeksToShow = []
height = '75px'
weekToShow() {
setTimeout(() => {
let num = 0;
try {
let weekNum = 0;
function Week(a) {
for(let b of a.querySelectorAll('td')) {
if(!b.className.includes('text-muted')) {
num++;
return true
function Week(a) {
for(let b of a.querySelectorAll('td')) {
if(!b.className.includes('text-muted')) {
weekNum++;
return true
}
}
}
}
for (let a of document.querySelectorAll('.monthview-container .swiper-container .swiper-slide-active table tbody tr') as any ){
Week(a)
}
if(num <= 5) {
this.weeksToShow = ["week-5"]
} else {
this.weeksToShow = ["week-6"]
}
const dayBoxHeight = document.querySelector('.monthview-container .swiper-container .swiper-slide-active table tbody tr td').clientHeight
const weeks = document.querySelectorAll('.monthview-container .swiper-container .swiper-slide-active table tbody tr');
for (let week of weeks as any ){
Week(week)
}
this.showCalendar = true
this.height = (weekNum * dayBoxHeight) +'px'
} catch (e) {
setTimeout(()=> {
this.weekToShow()
}, 100)
}
}, 250)
}