| 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207 | 2×
2×
2×
2×
2×
2×
2×
2×
2×
2×
2×
2×
2×
2×
2×
2×
2×
88×
13×
2×
4×
4×
4×
4×
35×
4×
4×
31×
30×
30×
30×
30×
30×
150×
150×
150×
44×
44×
44×
44×
44×
44×
3×
3×
44×
44×
44×
44×
44×
44×
44×
1540×
1540×
1540×
505×
1035×
40×
995×
1540×
1540×
105×
105×
105×
3×
1540×
1540×
1540×
44×
44×
44×
44×
44×
44×
44×
42×
44×
2×
| var BS, Calendar, CourseAdd, CourseAddMenuMixin, CourseCalendarHeader, CourseDuration, CourseMonth, CoursePlan, Day, Month, React, TeacherTaskPlanActions, TimeHelper, TimeStore, Week, _, classnames, moment, ref, twix;
moment = require('moment-timezone');
twix = require('twix');
_ = require('underscore');
classnames = require('classnames');
React = require('react');
BS = require('react-bootstrap');
ref = require('react-calendar'), Calendar = ref.Calendar, Month = ref.Month, Week = ref.Week, Day = ref.Day;
TimeStore = require('../../flux/time').TimeStore;
TeacherTaskPlanActions = require('../../flux/teacher-task-plan').TeacherTaskPlanActions;
TimeHelper = require('../../helpers/time');
CourseCalendarHeader = require('./header');
CourseDuration = require('./duration');
CoursePlan = require('./plan');
CourseAdd = require('./add');
CourseAddMenuMixin = require('./add-menu-mixin');
CourseMonth = React.createClass({
displayName: 'CourseMonth',
mixins: [CourseAddMenuMixin],
contextTypes: {
router: React.PropTypes.func
},
propTypes: {
plansList: React.PropTypes.array,
date: TimeHelper.PropTypes.moment
},
childContextTypes: {
date: TimeHelper.PropTypes.moment
},
getChildContext: function() {
return {
date: this.props.date
};
},
getInitialState: function() {
return {
isCourseTimezone: TimeHelper.isCourseTimezone(),
activeAddDate: null
};
},
getDefaultProps: function() {
return {
date: moment(TimeStore.getNow())
};
},
setDateParams: function(date) {
var params;
params = this.context.router.getCurrentParams();
params.date = date.format(this.props.dateFormat);
return this.context.router.transitionTo('calendarByDate', params);
},
setDate: function(date) {
if (!moment(date).isSame(this.props.date, 'month')) {
this.setDateParams(date);
return TeacherTaskPlanActions.load(this.props.courseId);
}
},
componentDidUpdate: function() {
if (this.refs.courseDurations != null) {
return this.setDayHeight(this.refs.courseDurations.state.ranges);
}
},
setDayHeight: function(ranges) {
var calendar, nodesWithHeights;
calendar = React.findDOMNode(this.refs.calendar);
nodesWithHeights = calendar.querySelectorAll('.rc-Week');
return Array.prototype.forEach.call(nodesWithHeights, function(node, nthRange) {
var range;
range = _.findWhere(ranges, {
nthRange: nthRange
});
return node.style.height = range.dayHeight + 'rem';
});
},
getDurationInfo: function(date) {
var calendarDuration, calendarWeeks, endMonthBlock, startMonthBlock;
startMonthBlock = date.clone().startOf('month').startOf('week');
endMonthBlock = date.clone().endOf('month').endOf('week').add(1, 'millisecond');
calendarDuration = moment(startMonthBlock).twix(endMonthBlock);
calendarWeeks = calendarDuration.split(moment.duration(1, 'week'));
return {
calendarDuration: calendarDuration,
calendarWeeks: calendarWeeks
};
},
handleClick: function(componentName, dayMoment, mouseEvent) {
this.refs.addOnDay.updateState(dayMoment, mouseEvent.pageX, mouseEvent.pageY);
return this.setState({
activeAddDate: dayMoment
});
},
checkAddOnDay: function(componentName, dayMoment, mouseEvent) {
if (mouseEvent.relatedTarget !== React.findDOMNode(this.refs.addOnDay)) {
return this.hideAddOnDay(componentName, dayMoment, mouseEvent);
}
},
undoActives: function(componentName, dayMoment, mouseEvent) {
if (!((dayMoment != null) && dayMoment.isSame(this.refs.addOnDay.state.addDate, 'day'))) {
return this.hideAddOnDay(componentName, dayMoment, mouseEvent);
}
},
hideAddOnDay: function(componentName, dayMoment, mouseEvent) {
this.refs.addOnDay.close();
return this.setState({
activeAddDate: null
});
},
renderDays: function(calendarDuration, referenceDate) {
var day, dayIter, days, durationDays, hasActiveAddDate, key, modifiers, otherProps;
Eif (referenceDate == null) {
referenceDate = moment(TimeStore.getNow());
}
durationDays = calendarDuration.iterateInner('days');
days = [];
hasActiveAddDate = this.state.activeAddDate != null;
while (durationDays.hasNext()) {
dayIter = durationDays.next();
modifiers = {};
if (dayIter.isBefore(referenceDate, 'day')) {
modifiers.past = true;
} else if (dayIter.isSame(referenceDate, 'day')) {
modifiers.current = true;
} else {
modifiers.upcoming = true;
}
otherProps = {
onClick: this.handleClick
};
if (hasActiveAddDate) {
otherProps.onMouseLeave = this.checkAddOnDay;
otherProps.onMouseEnter = this.undoActives;
if (this.state.activeAddDate.isSame(dayIter, 'day')) {
otherProps.classes = {
active: true
};
}
}
key = "day-" + (dayIter.format(this.props.dateFormat));
day = React.createElement(Day, React.__spread({
"date": dayIter,
"modifiers": modifiers,
"key": key
}, otherProps));
days.push(day);
}
return days;
},
render: function() {
var calendarClassName, calendarDuration, calendarWeeks, className, courseId, date, days, plans, plansList, ref1, ref2;
ref1 = this.props, plansList = ref1.plansList, courseId = ref1.courseId, className = ref1.className, date = ref1.date;
ref2 = this.getDurationInfo(date), calendarDuration = ref2.calendarDuration, calendarWeeks = ref2.calendarWeeks;
days = this.renderDays(calendarDuration);
calendarClassName = classnames('calendar-container', className);
if (plansList != null) {
plans = React.createElement(CourseDuration, {
"referenceDate": moment(TimeStore.getNow()),
"durations": plansList,
"viewingDuration": calendarDuration,
"groupingDurations": calendarWeeks,
"courseId": courseId,
"ref": 'courseDurations'
}, React.createElement(CoursePlan, {
"courseId": courseId
}));
}
return React.createElement(BS.Grid, {
"className": calendarClassName,
"fluid": true
}, React.createElement(CourseAdd, {
"ref": 'addOnDay'
}), React.createElement(CourseCalendarHeader, {
"duration": 'month',
"date": date,
"setDate": this.setDate,
"ref": 'calendarHeader'
}), React.createElement(BS.Row, {
"className": 'calendar-body'
}, React.createElement(BS.Col, {
"xs": 12.
}, React.createElement(Month, {
"date": date,
"monthNames": false,
"weekdayFormat": 'ddd',
"ref": 'calendar'
}, days), plans)));
}
});
module.exports = CourseMonth;
|