2017-01-20 09:02:50 +00:00
var Calendar = function ( dom , property _id ) {
c = this ;
this . title = $ ( "#current_title" ) ;
this . calendar = $ ( dom ) ;
this . nextBtn = $ ( "#next_month_btn" ) ;
this . prevBtn = $ ( "#prev_month_btn" ) ;
this . todayBtn = $ ( "#today_btn" ) ;
this . modeBtns = $ ( ".calendar_mode button" ) ;
this . refreshBtn = $ ( "#refresh_btn" ) ;
this . dialog = new EventDialog ( c ) ;
this . loading = $ ( '#calendar-loading' ) ;
this . agenda _space = $ ( "#calendar_agenda" ) ;
this . currentView = "month" ;
this . property _id = property _id ;
this . navigation = $ ( "#navigation" ) ;
this . rangeSelection = $ ( "#range_selection" ) ;
var agendaView = new AgendaView ( c ) ;
var loadeventsonviewchange = false ;
this . initialize = function ( ) {
var date = new Date ( ) ;
var d = date . getDate ( ) ;
var m = date . getMonth ( ) ;
var y = date . getFullYear ( ) ;
var dview = ( c . currentView == "agenda" ? "month" : c . currentView ) ;
c . calendar . fullCalendar ( {
editable : false ,
selectable : false ,
events : "/xhr/property_hires/get_bookings?property_id=" + c . property _id ,
header : false ,
default : dview ,
height : $ ( "body" ) . height ( ) - 141 ,
loading : function ( bool ) {
if ( bool ) c . loading . css ( "left" , ( $ ( window ) . width ( ) / 2 - 60 ) + "px" ) . show ( ) ;
else c . loading . hide ( ) ;
} ,
windowResize : function ( view ) {
view . setHeight ( $ ( "body" ) . height ( ) - 141 ) ;
c . calendar . fullCalendar ( "refetchEvents" ) ;
} ,
viewDisplay : function ( view ) {
c . title . html ( view . title ) ;
} ,
eventClick : function ( calEvent , e , view ) {
c . dialog . dismiss ( ) ;
c . dialog . inflate ( calEvent ) ;
c . dialog . show ( { "x" : e . originalEvent . clientX , "y" : e . originalEvent . clientY } ) ;
}
} ) ;
c . nextBtn . click ( function ( ) {
c . dialog . dismiss ( ) ;
c . calendar . fullCalendar ( 'next' ) ;
} ) ;
c . prevBtn . click ( function ( ) {
c . dialog . dismiss ( ) ;
c . calendar . fullCalendar ( 'prev' ) ;
} ) ;
c . todayBtn . click ( function ( ) {
c . dialog . dismiss ( ) ;
c . calendar . fullCalendar ( 'today' ) ;
} ) ;
c . modeBtns . click ( function ( ) {
c . dialog . dismiss ( ) ;
toggleViews ( $ ( this ) . data ( "mode" ) ) ;
} ) ;
c . refreshBtn . click ( function ( ) {
c . dialog . dismiss ( ) ;
if ( c . currentView == "agenda" )
agendaView . refresh ( ) ;
else
c . calendar . fullCalendar ( "refetchEvents" ) ;
} ) ;
var toggleViews = function ( view ) {
c . modeBtns . removeClass ( "active" ) ;
c . modeBtns . each ( function ( ) {
if ( $ ( this ) . data ( "mode" ) == view )
$ ( this ) . addClass ( "active" ) ;
} )
if ( view != "agenda" ) {
if ( c . currentView == "agenda" ) {
// $("#sec1").addClass("span3").removeClass("span7");
$ ( "#sec2" ) . show ( ) ;
// $("#sec3").addClass("span4").removeClass("span5");
agendaView . hide ( ) ;
}
c . calendar . fullCalendar ( 'changeView' , view ) ;
} else {
// $("#sec1").addClass("span7").removeClass("span3");
$ ( "#sec2" ) . hide ( ) ;
// $("#sec3").addClass("span5").removeClass("span4");
agendaView . inflate ( ) ;
}
c . currentView = view ;
if ( loadeventsonviewchange ) {
c . calendar . fullCalendar ( "refetchEvents" ) ;
loadeventsonviewchange = false ;
}
}
if ( c . currentView == "agenda" ) { toggleViews ( "agenda" ) ; loadeventsonviewchange = true ; }
}
this . renderEvent = function ( eventStick ) {
if ( eventStick . recurring == true )
c . calendar . fullCalendar ( "refetchEvents" ) ;
else
c . calendar . fullCalendar ( "renderEvent" , eventStick ) ;
}
$ ( document ) . ready ( function ( ) {
c . initialize ( ) ;
} ) ;
}
var EventDialog = function ( calendar , event ) {
_t = this ;
var event _quick _view = null ;
var template = "" ;
var _this _event = null ;
var month _names = [ "Jan" , "Feb" , "March" , "April" , "May" , "June" , "July" , "Aug" , "Sep" , "Oct" , "Nov" , "Dec" ] ;
this . inflate = function ( _event ) {
if ( ! _event ) throw new UserException ( "EventStick can't be null!" ) ;
_this _event = _event ;
var start _time = "" ,
end _time = "" ,
time _string = null ;
if ( _event . allDay ) {
start _time = $ . fullCalendar . formatDate ( _event . _start , "MMM dd, yyyy" ) ;
if ( _event . _end )
end _time = $ . fullCalendar . formatDate ( _event . _end , "MMM dd, yyyy" ) ;
time _string = ( _event . _start === _event . _end || ! _event . _end ? "<p class='start-date'><i class='icons-calendar' /> " + start _time + "</p>" : "<i class='icons-calendar' /> " + start _time + " <i class='icons-arrow-right-5' /> " + end _time + "" ) ;
} else {
var sh = _event . _start . getHours ( ) > 12 ? _event . _start . getHours ( ) - 12 : _event . _start . getHours ( ) ,
eh = _event . _end . getHours ( ) > 12 ? _event . _end . getHours ( ) - 12 : _event . _end . getHours ( ) ,
sm = _event . _start . getMinutes ( ) < 10 ? '0' + _event . _start . getMinutes ( ) : _event . _start . getMinutes ( ) ,
em = _event . _end . getMinutes ( ) < 10 ? '0' + _event . _end . getMinutes ( ) : _event . _end . getMinutes ( ) ,
stime = _event . _start . getHours ( ) > 12 ? sh + ':' + sm + " PM" : sh + ':' + sm + " AM" ,
etime = _event . _end . getHours ( ) > 12 ? eh + ':' + em + " PM" : eh + ':' + em + " AM" ,
same = ( _event . _start . getDate ( ) == _event . _end . getDate ( ) && _event . _start . getMonth ( ) == _event . _end . getMonth ( ) && _event . _start . getFullYear ( ) == _event . _end . getFullYear ( ) ) ;
start _time = month _names [ _event . _start . getMonth ( ) ] + " " + _event . _start . getDate ( ) + ", " + _event . _start . getFullYear ( ) ;
end _time = month _names [ _event . _end . getMonth ( ) ] + " " + _event . _end . getDate ( ) + ", " + _event . _end . getFullYear ( ) ;
time _string = ( same ? "<p class='date'><i class='icons-calendar' /> " + start _time + "</p><p class='time'><i class='icons-clock' /> " + stime + " <i class='icons-arrow-right-5' /> " + etime : "<p class='start-date'><i class='icons-arrow-right-2' /> " + start _time + "<span class='pull-right'>" + stime + "</span></p><p class='end-date'><i class='icons-arrow-left-2' /> " + end _time + "<span class='pull-right'>" + etime + "</p>" ) ;
}
event _quick _view = $ ( '<div class="calendar-modal" style="display:none;"></div>' ) ;
template = '<div class="modal-content">' +
'<div class="modal-header">' +
'<button type="button" class="close event-close-btn" data-dismiss="modal" aria-hidden="true">×</button>' +
'<h3>' + _event . title + '</h3>' +
'</div>' +
'<div class="modal-body">' +
2019-07-01 04:14:28 +00:00
'<div class="event_summary">' + time _string + '<br>' + _event . hiring _person _name + '</div>'
2017-01-20 09:02:50 +00:00
_event . note +
'</div>' +
'<div class="modal-footer" />' +
'</div>' ;
}
this . show = function ( pos ) {
if ( pos ) {
var pos = getPosition ( pos ) ;
event _quick _view . css ( { "left" : pos . x + "px" , "top" : pos . y + "px" } ) ;
}
event _quick _view . html ( template ) . appendTo ( "body" ) . show ( ) ;
event _quick _view . find ( ".event-close-btn" ) . one ( "click" , function ( ) { _t . dismiss ( ) ; } ) ;
event _quick _view . find ( "a.delete" ) . one ( "click" , function ( ) { calendar . deleteEvent ( _this _event . delete _url , _this _event . _id ) ; return false ; } ) ;
event _quick _view . find ( "a.edit" ) . one ( "click" , function ( ) { calendar . editEvent ( _this _event . edit _url , _this _event . allDay ) ; return false ; } ) ;
}
this . dismiss = function ( ) {
if ( event _quick _view )
event _quick _view . remove ( ) ;
}
var getPosition = function ( pos ) {
var x = pos . x ,
y = pos . y ,
winheight = $ ( window ) . height ( ) ;
if ( ( x + event _quick _view . width ( ) ) > $ ( window ) . width ( ) ) {
x = x - event _quick _view . width ( ) ;
}
if ( ( y + event _quick _view . height ( ) ) > winheight ) {
y = y - event _quick _view . height ( ) ;
}
return { "x" : x , "y" : y } ;
}
if ( event )
_t . inflate ( event ) ;
}
var UserException = function ( message ) {
this . message = message ;
this . name = "UserException" ;
this . toString = function ( ) {
return this . message ;
}
}
var AgendaView = function ( calendar ) {
var av = this ;
var _calendar = calendar ;
var agenda _space = _calendar . agenda _space ;
var today = new Date ( ) ;
var minDifference = 6 ;
var start _month = today . getMonth ( ) ;
var start _year = today . getFullYear ( ) ;
var end _month = ( ( start _month + minDifference ) > 11 ? ( start _month + minDifference ) - 11 : start _month + minDifference ) ;
var end _year = ( ( start _month + minDifference ) > 11 ? start _year + 1 : start _year ) ;
var monthNames = [ 'January' , 'February' , 'March' , 'April' , 'May' , 'June' , 'July' , 'August' , 'September' , 'October' , 'November' , 'December' ] ;
var month _template = '<div class="col-md-4">' +
'<h4></h4>' +
'<div class="tiny_calendar">' +
'<table class="table table-condensed table-bordered">' +
'<tbody>' +
'<tr>' +
'<th class="week_title">Sun</th>' +
'<th class="week_title">Mon</th>' +
'<th class="week_title">Tue</th>' +
'<th class="week_title">Wed</th>' +
'<th class="week_title">Thu</th>' +
'<th class="week_title">Fri</th>' +
'<th class="week_title">Sat</th>' +
'</tr>' +
'</tbody>' +
'</table>' +
'</div>' +
'</div>' ;
var event _list _template = '<div class="col-md-8 agenda-event">' +
'<table class="table table-condensed table-bordered event_list">' +
'<thead>' +
'<tr>' +
'<th>Date</th>' +
'<th>Time</th>' +
'<th>Events</th>' +
'</tr>' +
'</thead>' +
'<tbody>' +
'<tr>' +
'<td colspan="3" class="no_events">No events for this month.</td>' +
'</tr>' +
'</tbody>' +
'</table>' +
'</div>' ;
var head _template = '<div>' +
'<label>From</label>' +
'<select name="start_month" class="form-control input-sm" />' +
'<select name="start_year" class="form-control input-sm" />' +
'<label>To</label>' +
'<select name="end_month" class="form-control input-sm" />' +
'<select name="end_year" class="form-control input-sm" />' +
'<button id="show_events" class="btn btn-sm bt-filter btn-primary">Show Events</button>' +
'</div>' ;
var event _template = '<tr>' +
'<td />' +
'<td class="event_time" />' +
'<td>' +
'<div class="event" />' +
'</td>' +
'</tr>' ;
// var month_template = '<div class="span4"><h4></h4><div class="tiny_calendar"><table class="table"><tbody><tr><th class="week_title">Sun</th><th class="week_title">Mon</th><th class="week_title">Tue</th><th class="week_title">Wed</th><th class="week_title">Thu</th><th class="week_title">Fri</th><th class="week_title">Sat</th></tr></tbody></table></div></div>';
// var event_list_template = '<div class="span8"><table class="table event_list"><thead><tr height="0"><th class="span3"></th><th class="span2"></th><th class=""></th></tr></thead><tbody><tr><td colspan="3" class="no_events">No events for this month.</td></tr></tbody></table></div>';
// var head_template = '<div><label>From</label> <select name="start_month" class="input-small"></select><select name="start_year" class="input-small"></select><label>To</label> <select name="end_month" class="input-small"></select><select name="end_year" class="input-small"></select><button id="show_events" class="btn bt-filter">Show Events</button></div>';
// var event_template = "<tr><th></th><td class='event_time'></td><td><div class='event'></div></td></tr>";
var cache = false ;
var show _event _clicked = false ;
this . refresh = function ( ) {
av . inflate ( true ) ;
}
this . inflate = function ( forceInflation ) {
loading ( true ) ;
_calendar . calendar . hide ( ) ;
_calendar . navigation . hide ( ) ;
if ( ! forceInflation ) {
if ( cache ) {
av . show ( ) ;
loading ( false ) ;
return ;
}
}
agenda _space . empty ( ) ;
if ( ! show _event _clicked ) {
_calendar . rangeSelection . empty ( ) ;
_calendar . rangeSelection . append ( renderHead ( ) . html ( ) ) . show ( ) ;
_calendar . rangeSelection . find ( "button#show_events" ) . click ( function ( ) {
show _event _clicked = true ;
start _month = parseInt ( $ ( "select[name=start_month]" ) . val ( ) ) ;
end _month = parseInt ( $ ( "select[name=end_month]" ) . val ( ) ) ;
start _year = parseInt ( $ ( "select[name=start_year]" ) . val ( ) ) ;
end _year = parseInt ( $ ( "select[name=end_year]" ) . val ( ) ) ;
av . inflate ( true ) ;
} )
}
show _event _clicked = false ;
eventsManager ( ) ;
var s = start _month ,
e = end _month
y = start _year ;
e = ( e > s && start _year == end _year ? e : e + 11 ) ;
if ( end _year > start _year )
e = e + ( ( end _year - start _year - 1 ) * 12 ) ;
else e -- ;
for ( var i = s ; i <= e + 1 ; i ++ ) {
var m = new Month ( s , y ) ;
s ++ ;
if ( s > 11 ) {
s = 0 ;
y ++ ;
}
if ( e == 0 )
agenda _space . text ( "Invalid Range of Dates." )
else
agenda _space . append ( m . monthDom ) ;
}
loading ( false ) ;
}
this . hide = function ( ) {
cache = true ;
_calendar . rangeSelection . hide ( ) ;
agenda _space . hide ( ) ;
_calendar . navigation . show ( ) ;
_calendar . calendar . show ( ) ;
}
this . show = function ( ) {
_calendar . rangeSelection . show ( ) ;
agenda _space . show ( ) ;
}
var copyObject = function ( x ) {
return x . clone ( ) ;
}
var eventsManager = function ( ) {
var url = "/xhr/calendars/agenda" ,
sd = new Date ( start _year , start _month , 1 ) ,
ed = new Date ( end _year , end _month + 1 , 0 ) ,
usd = Math . round ( sd / 1000 ) ,
ued = Math . round ( ed / 1000 ) ;
$ . ajax ( {
type : "get" ,
url : url ,
data : { "agenda_start" : sd . toLocaleString ( ) , "agenda_end" : ed . toLocaleString ( ) , "page_id" : _calendar . page _id , "unix_start" : usd , "unix_end" : ued } ,
success : function ( data ) {
$ . each ( data . events , function ( i , e ) {
var ed = eventDom ( e ) ,
s = new Date ( e . start ) ,
e = new Date ( e . end ) ,
e _m = ( ( e . getMonth ( ) > s . getMonth ( ) || s . getMonth ( ) == e . getMonth ( ) ) && s . getFullYear ( ) == e . getFullYear ( ) ? e . getMonth ( ) : e . getMonth ( ) + 12 )
s _m = s . getMonth ( ) ,
s _y = s . getFullYear ( ) ;
if ( e . getFullYear ( ) > s . getFullYear ( ) )
e _m = e _m + ( ( e . getFullYear ( ) - s . getFullYear ( ) - 1 ) * 12 ) ;
for ( var i = s _m ; i < e _m + 1 ; i ++ ) {
var temp _ed = copyObject ( ed ) ;
var list = agenda _space . find ( "div[data-month=" + s _m + "][data-year=" + s _y + "] table.event_list tbody" ) ;
list . append ( temp _ed ) ;
s _m ++ ;
if ( s _m > 11 ) {
s _m = 0 ;
s _y ++ ;
}
}
if ( s . getDate ( ) == e . getDate ( ) && s . getMonth ( ) == s . getMonth ( ) && e . getFullYear ( ) == e . getFullYear ( ) ) {
var td = agenda _space . find ( "td[data-date-node=" + s . getDate ( ) + "-" + s . getMonth ( ) + "-" + s . getFullYear ( ) + "]" ) ;
td . addClass ( "has_event" ) ;
} else {
var timeDiff = Math . abs ( e . getTime ( ) - s . getTime ( ) ) ,
diffDays = Math . ceil ( timeDiff / ( 1000 * 3600 * 24 ) ) ,
c _m = s . getMonth ( ) ,
c _d = s . getDate ( ) ,
c _y = s . getFullYear ( ) ,
end _of _c _month = new Date ( s . getFullYear ( ) , s . getMonth ( ) + 1 , 0 ) . getDate ( ) ;
for ( var i = 0 ; i <= diffDays ; i ++ ) {
var td = agenda _space . find ( "td[data-date-node=" + c _d + "-" + c _m + "-" + c _y + "]" ) ;
td . addClass ( "has_event" ) ;
c _d ++ ;
if ( c _d > end _of _c _month ) {
c _d = 1 ;
c _m ++ ;
if ( c _m > 11 ) {
c _m = 0 ;
c _y ++ ;
}
}
}
}
} )
agenda _space . find ( "table.event_list tbody" ) . each ( function ( ) {
if ( $ ( this ) . find ( "tr" ) . length > 1 )
$ ( this ) . find ( "td.no_events" ) . parent ( ) . remove ( ) ;
} )
// nano scroller here
}
} )
var eventDom = function ( event ) {
var e _t = $ ( event _template ) ,
s = new Date ( event . start ) ,
e = new Date ( event . end ) ,
dateFormat = "" ;
if ( s . getDate ( ) == e . getDate ( ) && s . getMonth ( ) == s . getMonth ( ) && e . getFullYear ( ) == e . getFullYear ( ) )
dateFormat = $ . fullCalendar . formatDate ( s , "ddd dd" ) ;
else
dateFormat = $ . fullCalendar . formatDates ( s , e , "ddd dd, MMM - {ddd dd, MMM}" ) ;
e _t . find ( "td:first" ) . text ( dateFormat ) ;
e _t . find ( "td.event_time" ) . text ( ( event . allDay ? "All Day" : $ . fullCalendar . formatDate ( s , "hh:mm" ) ) ) ;
e _t . find ( "div.event" ) . text ( event . title ) . css ( "color" , event . color ) ;
return e _t ;
}
}
var loading = function ( bool ) {
if ( bool ) _calendar . loading . css ( "left" , ( $ ( window ) . width ( ) / 2 - 60 ) + "px" ) . show ( ) ;
else _calendar . loading . hide ( ) ;
}
var renderHead = function ( ) {
var head = $ ( head _template ) ;
var start _month _select = head . find ( "select[name=start_month]" ) ;
for ( var i = 0 ; i < 12 ; i ++ ) {
var option = $ ( "<option value='" + i + "'>" + monthNames [ i ] + "</option>" ) ;
if ( i == start _month )
option . attr ( "selected" , "selected" ) ;
start _month _select . append ( option ) ;
}
var end _month _select = head . find ( "select[name=end_month]" ) ;
for ( var i = 0 ; i < 12 ; i ++ ) {
var option = $ ( "<option value='" + i + "'>" + monthNames [ i ] + "</option>" ) ;
if ( i == end _month )
option . attr ( "selected" , "selected" ) ;
end _month _select . append ( option ) ;
}
var start _year _select = head . find ( "select[name=start_year]" ) ;
var y = start _year - 5 ;
for ( var i = 0 ; i < 10 ; i ++ ) {
var option = $ ( "<option value='" + y + "'>" + y + "</option>" ) ;
if ( y == start _year )
option . attr ( "selected" , "selected" ) ;
start _year _select . append ( option ) ;
y ++ ;
}
var end _year _select = head . find ( "select[name=end_year]" ) ;
y = start _year - 5 ;
for ( var i = 0 ; i < 10 ; i ++ ) {
var option = $ ( "<option value='" + y + "'>" + y + "</option>" ) ;
if ( y == end _year )
option . attr ( "selected" , "selected" ) ;
end _year _select . append ( option ) ;
y ++ ;
}
return head ;
}
var Month = function ( month , year ) {
_this = this ;
this . monthDom = $ ( "<div class='row' data-year='" + year + "' data-month='" + month + "'></div>" ) ;
var template = $ ( month _template ) ;
var list _template = $ ( event _list _template ) ;
var firstDay = new Date ( year , month , 1 ) ;
var lastDay = new Date ( year , month + 1 , 0 ) ;
var last _inserted _date = 1 ;
var renderMonth = function ( ) {
var num _of _rows = getNumberOfRows ( year , month )
for ( var i = 0 ; i < num _of _rows ; i ++ ) {
var tr = null ;
if ( i == 0 )
tr = makeRow ( "first" ) ;
else if ( i == ( num _of _rows - 1 ) ) {
tr = makeRow ( "last" ) ;
} else {
tr = makeRow ( "middle" ) ;
}
if ( tr == null ) {
break ;
}
template . find ( "table.table tbody" ) . append ( tr ) ;
template . find ( "h4" ) . text ( monthNames [ firstDay . getMonth ( ) ] + " - " + firstDay . getFullYear ( ) ) ;
}
_this . monthDom . append ( template ) ;
_this . monthDom . append ( list _template ) ;
}
function getNumberOfRows ( year , month ) {
var day = 1 ,
sat _counter = 0 ,
sunday _counter = 0 ,
date = new Date ( year , month , day ) ;
while ( date . getMonth ( ) === month ) {
if ( date . getDay ( ) === 0 ) {
sunday _counter ++ ;
} else if ( date . getDay ( ) === 6 ) {
sat _counter ++ ;
}
day ++ ;
date = new Date ( year , month , day ) ;
}
return ( sunday _counter == 5 && sat _counter == 5 ? 6 : 5 ) ;
}
var makeRow = function ( position ) {
if ( last _inserted _date <= lastDay . getDate ( ) ) {
var row = $ ( "<tr></tr>" ) ;
switch ( position ) {
case "first" :
for ( var i = 0 ; i < 7 ; i ++ ) {
var td = $ ( "<td></td>" ) ;
if ( i >= firstDay . getDay ( ) ) {
td . text ( last _inserted _date ) ;
td . attr ( "data-date-node" , last _inserted _date + "-" + firstDay . getMonth ( ) + "-" + firstDay . getFullYear ( ) ) ;
last _inserted _date ++ ;
}
row . append ( td ) ;
}
break ;
case "middle" :
for ( var i = 0 ; i < 7 ; i ++ ) {
var td = $ ( "<td></td>" ) ;
td . text ( last _inserted _date ) ;
td . attr ( "data-date-node" , last _inserted _date + "-" + firstDay . getMonth ( ) + "-" + firstDay . getFullYear ( ) ) ;
last _inserted _date ++ ;
row . append ( td ) ;
}
break ;
case "last" :
for ( var i = 0 ; i < 7 ; i ++ ) {
var td = $ ( "<td></td>" ) ;
if ( i <= lastDay . getDay ( ) ) {
td . text ( last _inserted _date ) ;
td . attr ( "data-date-node" , last _inserted _date + "-" + firstDay . getMonth ( ) + "-" + firstDay . getFullYear ( ) ) ;
last _inserted _date ++ ;
}
row . append ( td ) ;
}
break ;
}
} else {
var row = null ;
}
return row ;
}
renderMonth ( ) ;
}
}