2018-12-04 12:18:27 +00:00
|
|
|
import ngModule from '../module';
|
2019-10-24 10:44:36 +00:00
|
|
|
import Component from 'core/lib/component';
|
2019-06-26 11:35:38 +00:00
|
|
|
import './style.scss';
|
2018-09-24 12:51:27 +00:00
|
|
|
|
2019-10-24 10:44:36 +00:00
|
|
|
class Controller extends Component {
|
|
|
|
constructor($element, $) {
|
|
|
|
super($element, $);
|
2019-10-23 15:38:35 +00:00
|
|
|
this.nMonths = 4;
|
2019-09-25 18:06:42 +00:00
|
|
|
|
2019-10-23 15:38:35 +00:00
|
|
|
let date = new Date();
|
|
|
|
date.setDate(1);
|
|
|
|
date.setHours(0, 0, 0, 0);
|
|
|
|
this.date = date;
|
2018-11-12 10:31:58 +00:00
|
|
|
}
|
|
|
|
|
2019-10-23 15:38:35 +00:00
|
|
|
get date() {
|
|
|
|
return this._date;
|
2019-10-01 11:45:43 +00:00
|
|
|
}
|
|
|
|
|
2019-10-23 15:38:35 +00:00
|
|
|
set date(value) {
|
|
|
|
this._date = value;
|
|
|
|
let stamp = value.getTime();
|
|
|
|
|
|
|
|
let firstDay = new Date(stamp);
|
|
|
|
firstDay.setDate(1);
|
|
|
|
this.firstDay = firstDay;
|
|
|
|
|
|
|
|
let lastDay = new Date(stamp);
|
|
|
|
lastDay.setMonth(lastDay.getMonth() + this.nMonths);
|
|
|
|
lastDay.setDate(0);
|
|
|
|
this.lastDay = lastDay;
|
|
|
|
|
|
|
|
this.months = [];
|
|
|
|
for (let i = 0; i < this.nMonths; i++) {
|
|
|
|
let monthDate = new Date(stamp);
|
|
|
|
monthDate.setMonth(value.getMonth() + i);
|
|
|
|
this.months.push(monthDate);
|
|
|
|
}
|
|
|
|
|
|
|
|
this.refreshEvents();
|
2019-01-21 10:45:53 +00:00
|
|
|
}
|
|
|
|
|
2019-10-23 15:38:35 +00:00
|
|
|
step(direction) {
|
|
|
|
let date = new Date(this.date.getTime());
|
|
|
|
date.setMonth(date.getMonth() + (this.nMonths * direction));
|
|
|
|
this.date = date;
|
2019-01-21 10:45:53 +00:00
|
|
|
}
|
|
|
|
|
2019-10-23 15:38:35 +00:00
|
|
|
get data() {
|
|
|
|
return this._data;
|
|
|
|
}
|
2019-06-26 11:35:38 +00:00
|
|
|
|
2019-10-23 15:38:35 +00:00
|
|
|
set data(value) {
|
|
|
|
this._data = value;
|
|
|
|
|
|
|
|
value = value || {};
|
|
|
|
this.events = value.events;
|
|
|
|
this.exclusions = value.exclusions;
|
2019-01-21 10:45:53 +00:00
|
|
|
|
2019-10-23 15:38:35 +00:00
|
|
|
if (this.events) {
|
|
|
|
let codes = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'];
|
|
|
|
for (event of this.events) {
|
|
|
|
if (!event.weekDays) continue;
|
|
|
|
let weekDays = event.weekDays.split(',');
|
|
|
|
event.wdays = [];
|
|
|
|
for (let wday of weekDays) {
|
|
|
|
let index = codes.indexOf(wday);
|
|
|
|
if (index !== -1) event.wdays[index] = true;
|
|
|
|
}
|
|
|
|
}
|
2019-09-25 18:06:42 +00:00
|
|
|
}
|
2019-01-21 10:45:53 +00:00
|
|
|
|
2019-10-23 15:38:35 +00:00
|
|
|
this.refreshEvents();
|
2019-01-21 10:45:53 +00:00
|
|
|
|
2019-10-23 15:38:35 +00:00
|
|
|
let calendars = this.element.querySelectorAll('vn-calendar');
|
|
|
|
for (let calendar of calendars)
|
|
|
|
calendar.$ctrl.repaint();
|
2019-09-25 18:06:42 +00:00
|
|
|
}
|
2019-04-03 09:34:58 +00:00
|
|
|
|
2019-10-23 15:38:35 +00:00
|
|
|
refreshEvents() {
|
|
|
|
function getDate(date) {
|
|
|
|
return date && new Date(date).setHours(0, 0, 0, 0);
|
|
|
|
}
|
2019-01-21 10:45:53 +00:00
|
|
|
|
2019-10-23 15:38:35 +00:00
|
|
|
let exclusionsMap = {};
|
|
|
|
if (this.exclusions) {
|
|
|
|
for (let exclusion of this.exclusions)
|
|
|
|
exclusionsMap[getDate(exclusion.day)] = exclusion;
|
|
|
|
}
|
2019-01-21 10:45:53 +00:00
|
|
|
|
2019-10-23 15:38:35 +00:00
|
|
|
this.days = {};
|
|
|
|
let day = new Date(this.firstDay.getTime());
|
|
|
|
|
|
|
|
while (day < this.lastDay) {
|
|
|
|
let stamp = day.getTime();
|
|
|
|
let wday = day.getDay();
|
|
|
|
let dayEvents = [];
|
|
|
|
|
|
|
|
if (this.events) {
|
|
|
|
for (let event of this.events) {
|
|
|
|
let match;
|
|
|
|
let from = getDate(event.from);
|
|
|
|
let to = getDate(event.to);
|
|
|
|
|
|
|
|
if (event.from && event.to) {
|
|
|
|
match = stamp >= from && stamp <= to
|
|
|
|
&& event.wdays[wday];
|
|
|
|
} else if (event.from)
|
|
|
|
match = from == stamp;
|
|
|
|
else
|
|
|
|
match = event.wdays[wday];
|
|
|
|
|
|
|
|
if (match)
|
|
|
|
dayEvents.push(event);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
let exclusion = exclusionsMap[stamp];
|
|
|
|
|
|
|
|
if (dayEvents.length || exclusion) {
|
|
|
|
let dayData = {};
|
|
|
|
if (dayEvents.length) dayData.events = dayEvents;
|
|
|
|
if (exclusion) dayData.exclusion = exclusion;
|
|
|
|
this.days[stamp] = dayData;
|
|
|
|
}
|
|
|
|
|
|
|
|
day.setDate(day.getDate() + 1);
|
|
|
|
}
|
2019-09-25 18:06:42 +00:00
|
|
|
}
|
2019-01-21 10:45:53 +00:00
|
|
|
|
2019-10-23 15:38:35 +00:00
|
|
|
onSelection($days, $type, $weekday) {
|
|
|
|
let $data = [];
|
|
|
|
for (let day of $days) {
|
|
|
|
let dayData = this.days[day.getTime()];
|
|
|
|
if (dayData) $data.push(dayData);
|
|
|
|
}
|
|
|
|
|
|
|
|
this.emit('selection', {
|
|
|
|
$days,
|
|
|
|
$type,
|
|
|
|
$weekday,
|
|
|
|
$data
|
|
|
|
});
|
2019-06-26 11:35:38 +00:00
|
|
|
}
|
2019-01-21 10:45:53 +00:00
|
|
|
|
2019-09-25 18:06:42 +00:00
|
|
|
hasEvents(day) {
|
2019-10-23 15:38:35 +00:00
|
|
|
return this.days[day.getTime()] != null;
|
2019-01-21 10:45:53 +00:00
|
|
|
}
|
|
|
|
|
2019-09-25 18:06:42 +00:00
|
|
|
getClass(day) {
|
2019-10-23 15:38:35 +00:00
|
|
|
let dayData = this.days[day.getTime()];
|
|
|
|
return dayData && dayData.exclusion ? 'excluded' : '';
|
2018-09-24 12:51:27 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
ngModule.component('vnZoneCalendar', {
|
|
|
|
template: require('./index.html'),
|
|
|
|
controller: Controller,
|
|
|
|
bindings: {
|
2019-10-23 15:38:35 +00:00
|
|
|
data: '<?'
|
2018-09-24 12:51:27 +00:00
|
|
|
}
|
|
|
|
});
|