EVOgeek
/
Vmeda.Online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MOBILE-3021 calendar: Add a button to view current month or day

main
Dani Palou 2019-07-19 15:52:43 +02:00
parent 2615710081
commit 12e61f1f58
5 changed files with 106 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/addon/calendar/components/calendar/addon-calendar-calendar.html
View File

@ -1,3 +1,11 @@
<!-- Add buttons to the nav bar. -->
<core-navbar-buttons end>
<button [hidden]="!canNavigate || isCurrentMonth || !displayNavButtons" ion-button icon-only clear (click)="goToCurrentMonth()">
<core-icon name="fa-calendar-times-o"></core-icon>
</button>
</core-navbar-buttons>
<core-loading [hideUntil]="loaded" class="core-loading-center">
<!-- Period name and arrows to navigate. -->
<ion-grid padding-top>

43
src/addon/calendar/components/calendar/calendar.ts
View File

@ -37,6 +37,7 @@ export class AddonCalendarCalendarComponent implements OnInit, OnChanges, OnDest
@Input() courseId: number | string;
@Input() categoryId: number | string; // Category ID the course belongs to.
@Input() canNavigate?: string | boolean; // Whether to include arrows to change the month. Defaults to true.
@Input() displayNavButtons?: string | boolean; // Whether to display nav buttons created by this component. Defaults to true.
@Output() onEventClicked = new EventEmitter<number>();
@Output() onDayClicked = new EventEmitter<{day: number, month: number, year: number}>();
@ -45,6 +46,7 @@ export class AddonCalendarCalendarComponent implements OnInit, OnChanges, OnDest
weeks: any[];
loaded = false;
timeFormat: string;
isCurrentMonth: boolean;
protected year: number;
protected month: number;
@ -106,7 +108,8 @@ export class AddonCalendarCalendarComponent implements OnInit, OnChanges, OnDest
this.year = this.initialYear ? Number(this.initialYear) : now.getFullYear();
this.month = this.initialMonth ? Number(this.initialMonth) : now.getMonth() + 1;
this.canNavigate = typeof this.canNavigate == 'undefined' ? true : this.utils.isTrueOrOne(this.canNavigate);
this.calculateIsCurrentMonth();
this.fetchData();
}
@ -115,6 +118,9 @@ export class AddonCalendarCalendarComponent implements OnInit, OnChanges, OnDest
* Detect changes on input properties.
*/
ngOnChanges(changes: {[name: string]: SimpleChange}): void {
this.canNavigate = typeof this.canNavigate == 'undefined' ? true : this.utils.isTrueOrOne(this.canNavigate);
this.displayNavButtons = typeof this.displayNavButtons == 'undefined' ? true :
this.utils.isTrueOrOne(this.displayNavButtons);
if ((changes.courseId || changes.categoryId) && this.weeks) {
this.filterEvents();
@ -274,6 +280,7 @@ export class AddonCalendarCalendarComponent implements OnInit, OnChanges, OnDest
this.domUtils.showErrorModalDefault(error, 'addon.calendar.errorloadevents', true);
this.decreaseMonth();
}).finally(() => {
this.calculateIsCurrentMonth();
this.loaded = true;
});
}
@ -290,6 +297,7 @@ export class AddonCalendarCalendarComponent implements OnInit, OnChanges, OnDest
this.domUtils.showErrorModalDefault(error, 'addon.calendar.errorloadevents', true);
this.increaseMonth();
}).finally(() => {
this.calculateIsCurrentMonth();
this.loaded = true;
});
}
@ -312,6 +320,39 @@ export class AddonCalendarCalendarComponent implements OnInit, OnChanges, OnDest
this.onDayClicked.emit({day: day, month: this.month, year: this.year});
}
/**
* Check if user is viewing the current month.
*/
calculateIsCurrentMonth(): void {
const now = new Date();
this.isCurrentMonth = this.year == now.getFullYear() && this.month == now.getMonth() + 1;
}
/**
* Go to current month.
*/
goToCurrentMonth(): void {
const now = new Date(),
initialMonth = this.month,
initialYear = this.year;
this.month = now.getMonth() + 1;
this.year = now.getFullYear();
this.loaded = false;
this.fetchEvents().then(() => {
this.isCurrentMonth = true;
}).catch((error) => {
this.domUtils.showErrorModalDefault(error, 'addon.calendar.errorloadevents', true);
this.year = initialYear;
this.month = initialMonth;
}).finally(() => {
this.loaded = true;
});
}
/**
* Decrease the current month.
*/

3
src/addon/calendar/pages/day/day.html
View File

@ -5,6 +5,9 @@
<button *ngIf="courses && courses.length" ion-button icon-only (click)="openCourseFilter($event)" [attr.aria-label]="'core.courses.filter' | translate">
<ion-icon name="funnel"></ion-icon>
</button>
<button *ngIf="!isCurrentDay" ion-button icon-only clear (click)="goToCurrentDay()">
<core-icon name="fa-calendar-times-o"></core-icon>
</button>
<core-context-menu>
<core-context-menu-item [hidden]="!loaded || !hasOffline || !isOnline" [priority]="400" [content]="'core.settings.synchronizenow' | translate" (action)="doRefresh(null, $event, true)" [iconAction]="syncIcon" [closeOnClick]="false"></core-context-menu-item>
</core-context-menu>

52
src/addon/calendar/pages/day/day.ts
View File

@ -73,6 +73,7 @@ export class AddonCalendarDayPage implements OnInit, OnDestroy {
hasOffline = false;
isOnline = false;
syncIcon: string;
isCurrentDay: boolean;
constructor(localNotificationsProvider: CoreLocalNotificationsProvider,
navParams: NavParams,
@ -196,7 +197,8 @@ export class AddonCalendarDayPage implements OnInit, OnDestroy {
* View loaded.
*/
ngOnInit(): void {
this.currentMoment = moment().year(this.year).month(this.month - 1).date(this.day);
this.calculateCurrentMoment();
this.calculateIsCurrentDay();
this.fetchData(true, false);
}
@ -533,6 +535,52 @@ export class AddonCalendarDayPage implements OnInit, OnDestroy {
this.navCtrl.push('AddonCalendarEditEventPage', params);
}
/**
* Calculate current moment.
*/
calculateCurrentMoment(): void {
this.currentMoment = moment().year(this.year).month(this.month - 1).date(this.day);
}
/**
* Check if user is viewing the current day.
*/
calculateIsCurrentDay(): void {
const now = new Date();
this.isCurrentDay = this.year == now.getFullYear() && this.month == now.getMonth() + 1 && this.day == now.getDate();
}
/**
* Go to current day.
*/
goToCurrentDay(): void {
const now = new Date(),
initialDay = this.day,
initialMonth = this.month,
initialYear = this.year;
this.day = now.getDate();
this.month = now.getMonth() + 1;
this.year = now.getFullYear();
this.calculateCurrentMoment();
this.loaded = false;
this.fetchEvents().then(() => {
this.isCurrentDay = true;
}).catch((error) => {
this.domUtils.showErrorModalDefault(error, 'addon.calendar.errorloadevents', true);
this.year = initialYear;
this.month = initialMonth;
this.day = initialDay;
this.calculateCurrentMoment();
}).finally(() => {
this.loaded = true;
});
}
/**
* Load next month.
*/
@ -545,6 +593,7 @@ export class AddonCalendarDayPage implements OnInit, OnDestroy {
this.domUtils.showErrorModalDefault(error, 'addon.calendar.errorloadevents', true);
this.decreaseDay();
}).finally(() => {
this.calculateIsCurrentDay();
this.loaded = true;
});
}
@ -561,6 +610,7 @@ export class AddonCalendarDayPage implements OnInit, OnDestroy {
this.domUtils.showErrorModalDefault(error, 'addon.calendar.errorloadevents', true);
this.increaseDay();
}).finally(() => {
this.calculateIsCurrentDay();
this.loaded = true;
});
}

4
src/addon/calendar/pages/index/index.html
View File

@ -6,7 +6,7 @@
<ion-icon name="list"></ion-icon>
</button>
<button *ngIf="!showCalendar" ion-button icon-only (click)="toggleDisplay()" [attr.aria-label]="'addon.calendar.monthlyview' | translate">
<ion-icon name="calendar"></ion-icon>
<core-icon name="fa-calendar-o"></core-icon>
</button>
<button *ngIf="courses && courses.length" ion-button icon-only (click)="openCourseFilter($event)" [attr.aria-label]="'core.courses.filter' | translate">
<ion-icon name="funnel"></ion-icon>
@ -28,7 +28,7 @@
<ion-icon name="warning"></ion-icon> {{ 'core.hasdatatosync' | translate:{$a: 'addon.calendar.calendar' | translate} }}
</ion-card>
<addon-calendar-calendar [hidden]="!showCalendar" [initialYear]="year" [initialMonth]="month" [courseId]="courseId" [categoryId]="categoryId" (onEventClicked)="gotoEvent($event)" (onDayClicked)="gotoDay($event)"></addon-calendar-calendar>
<addon-calendar-calendar [hidden]="!showCalendar" [initialYear]="year" [initialMonth]="month" [courseId]="courseId" [categoryId]="categoryId" [displayNavButtons]="showCalendar" (onEventClicked)="gotoEvent($event)" (onDayClicked)="gotoDay($event)"></addon-calendar-calendar>
<addon-calendar-upcoming-events *ngIf="loadUpcoming" [hidden]="showCalendar" [courseId]="courseId" [categoryId]="categoryId" (onEventClicked)="gotoEvent($event)"></addon-calendar-upcoming-events>