Planner view

- When changing into planner view, keep the current time span
- Today button keeps displayed number of days
- Remove header arrows, planner now uses same navigation as others
This commit is contained in:
Nathan Gray 2015-12-22 20:07:40 +00:00
parent ff868f4539
commit 7a62f96866
3 changed files with 46 additions and 112 deletions

View File

@ -609,7 +609,10 @@ app.classes.calendar = AppJS.extend(
.css({"transform": '',height: '', width:'',overflow:''});
wrapper.parent().css({overflow: '', width: original_size.width, height: original_size.height});
original.css("display","");
wrapper[0].offsetHeight;
if(wrapper.length)
{
wrapper[0].offsetHeight;
}
wrapper.css({
"transition-duration": "",
"transition-delay": ""
@ -3300,6 +3303,13 @@ jQuery.extend(app.classes.calendar,{
return state.sortby ? state.sortby : 0;
},
start_date: function(state) {
// If there is no planner_days and a start date, just keep it
if(!state.planner_days && state.first && (
!state.date || state.first < state.date && state.last > state.date
))
{
return state.first;
}
var d = app.calendar.View.start_date.call(this, state);
if(state.sortby && state.sortby === 'month')
{
@ -3307,10 +3317,6 @@ jQuery.extend(app.classes.calendar,{
}
else if (!state.planner_days)
{
if(d.getUTCDate() < 15)
{
d.setUTCDate(1);
}
d = app.calendar.date.start_of_week(d);
d.setUTCHours(0);
d.setUTCMinutes(0);
@ -3321,6 +3327,26 @@ jQuery.extend(app.classes.calendar,{
return d;
},
end_date: function(state) {
// If no planner days and an end date, just keep it
if(!state.planner_days && state.last && state.last > state.first)
{
// Handle listview before / after a little more nicely
if(app.calendar.state.view == 'listview' && (
state.filter == 'before' || state.filter == 'after'
))
{
var d = app.calendar.View.end_date.call(this, state);
d.setUTCDate(d.getUTCDate() + 30);
d = app.calendar.date.end_of_week(d);
return d;
}
return state.last;
}
// Avoid end date before start date
if(state.last && state.first && state.last <= state.first && !state.planner_days)
{
state.planner_days = 30;
}
var d = app.calendar.View.end_date.call(this, state);
if(state.planner_days)
{
@ -3337,24 +3363,14 @@ jQuery.extend(app.classes.calendar,{
delete state.planner_days;
}
// Avoid killing the view by not showing more than 100 days
else if (state.last && (new Date(state.last) - new Date(state.first)) < (100 * 24 * 3600 * 1000) )
else if (state.last && state.last > state.first && (new Date(state.last) - new Date(state.first)) < (100 * 24 * 3600 * 1000) )
{
d = new Date(state.last);
d = app.calendar.date.end_of_week(d);
}
else if (!state.planner_days)
{
if (d.getUTCDate() < 15)
{
d.setUTCDate(0);
d.setUTCMonth(d.getUTCMonth()+1);
d = app.calendar.date.end_of_week(d);
}
else
{
d.setUTCMonth(d.getUTCMonth()+1);
d = app.calendar.date.end_of_week(d);
}
d = app.calendar.date.end_of_week(d);
}
return d;
},

View File

@ -843,7 +843,10 @@ var et2_calendar_planner = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResize
}
// Adjust header if there's a scrollbar
this.gridHeader.css('margin-right', (this.rows.width() - this.rows.children().first().width()) + 'px')
if(this.rows.children().first().length)
{
this.gridHeader.css('margin-right', (this.rows.width() - this.rows.children().first().width()) + 'px');
}
this.value = [];
},
@ -893,23 +896,6 @@ var et2_calendar_planner = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResize
var title = app.calendar.egw.lang(date('F',start))+' '+date('Y',start)+' - '+
app.calendar.egw.lang(date('F',end))+' '+date('Y',end);
// calculate date for navigation links
var time = new Date(start);
time.setUTCFullYear(time.getUTCFullYear()-1);
var last_year = time.toJSON();
time.setUTCMonth(time.getUTCMonth()+11);
var last_month = time.toJSON();
time.setUTCMonth(time.getUTCMonth()+2);
var next_month = time.toJSON();
time.setUTCMonth(time.getUTCMonth()+11);
var next_year = time.toJSON();
title = this._scroll_button('first',last_year) +
this._scroll_button('left', last_month) +
title +
this._scroll_button('right', next_month) +
this._scroll_button('last', next_year);
content += '<div class="calendar_plannerMonthScale th et2_link" style="left: 0; width: 100%;">'+
title+"</div>";
content += "</div>"; // end of plannerScale
@ -960,33 +946,6 @@ var et2_calendar_planner = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResize
if (days_in_month > 10)
{
title += ' '+t.getUTCFullYear();
// previous links
var prev = new Date(t);
prev.setUTCMonth(prev.getUTCMonth()-1);
if(prev.valueOf() < start.valueOf() - (20 * 1000*3600*24))
{
var full = prev.toJSON();
prev.setUTCDate(prev.getUTCDate() + 15);
//prev.setUTCDate(start.getUTCDate() < 15 ? 1 : 15);
var half = prev.toJSON();
title = this._scroll_button('first',full) + this._scroll_button('left',half) + title;
}
// show next scales, if there are less then 10 days in the next month or there is no next month
var days_until_end = (end - t) / (1000 * 3600 * 24);
if (days_until_end - days_in_month <= 10 || end.getUTCMonth() === t.getUTCMonth() && end.getUTCFullYear() === t.getUTCFullYear())
{
// next links
var next = new Date(t);
next.setUTCMonth(next.getUTCMonth()+1);
full = next.toJSON();
next.setUTCDate(next.getUTCDate() - 15);
//next.setUTCDate(next.getUTCDate() < 15 ? 1 : 15);
half = next.toJSON();
title += this._scroll_button('right',half) + this._scroll_button('last',full);
}
}
else
{
@ -1048,24 +1007,7 @@ var et2_calendar_planner = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResize
state.setUTCHours(0);
state.setUTCMinutes(0);
state = state.toJSON();
if (days <= 7)
{
// prev. week
var left = new Date(t);
left.setUTCHours(0);
left.setUTCMinutes(0);
left.setUTCDate(left.getUTCDate() - 7);
// next week
var right = new Date(t);
right.setUTCHours(0);
right.setUTCMinutes(0);
right.setUTCDate(right.getUTCDate() + 7);
title = this._scroll_button('left',app.calendar.date.start_of_week(left).toJSON()) +
title +
this._scroll_button('right',app.calendar.date.start_of_week(right).toJSON());
}
if(days_in_week > 1)
{
content += '<div class="calendar_plannerWeekScale et2_clickable et2_link" data-date=\'' + state + '\' style="left: '+left+'%; width: '+week_width+'%;">'+title+"</div>";
@ -1118,25 +1060,7 @@ var et2_calendar_planner = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResize
title = app.calendar.egw.lang(date('D',t)).substr(0,2)+'<br />'+date('j',t);
}
state = new Date(t.valueOf() - start.getTimezoneOffset() * 60 * 1000).toJSON();
if (days < 5)
{
if (!i) // prev. day only for the first day
{
var prev = new Date(t);
prev.setUTCDate(prev.getUTCDate() - 1);
prev.setUTCHours(0);
prev.setUTCMinutes(0);
title = this._scroll_button('left',prev.toJSON()) + title;
}
if (i == days-1) // next day only for the last day
{
var next = new Date(t);
next.setUTCDate(next.getUTCDate() + 1);
next.setUTCHours(0);
next.setUTCMinutes(0);
title += this._scroll_button('right',next.toJSON());
}
}
content += '<div class="calendar_plannerDayScale et2_clickable et2_link '+ day_class+
'" data-date=\'' + state +'\' style="left: '+left+'%; width: '+day_width+'%;"'+
(holidays ? ' title="'+holidays.join(',')+'"' : '')+'>'+title+"</div>\n";
@ -1190,15 +1114,6 @@ var et2_calendar_planner = et2_valueWidget.extend([et2_IDetachedDOM, et2_IResize
return content;
},
/**
* Create a pagination button, and inserts it
*
*/
_scroll_button: function(image, date)
{
return '<img class="et2_clickable" src="' + egw.image(image)+ '" data-date="' + (date.toJSON ? date.toJSON():date) + '"/>';
},
/**
* Applies class for today, and any holidays for current day
*

View File

@ -40,14 +40,17 @@ Egroupware
<select id="view" class="et2_fullWidth" onchange="app.calendar.update_state(JSON.parse(widget.getValue()));"/>
<textbox id="keywords" class="et2_fullWidth" blur="Search" onchange="app.calendar.update_state({view: 'listview',keywords: widget.getValue()});return false;"/>
<hbox id="date_header" class="et2_fullWidth">
<buttononly id="header_today" label="Today" onclick="var tempDate = new Date();
var today = new Date(tempDate.getFullYear(), tempDate.getMonth(), tempDate.getDate(),0,-tempDate.getTimezoneOffset(),0);
app.calendar.update_state({date: today.toJSON()});return false;"/>
<buttononly id="header_month" label="Month" onclick="var change = {date: widget.btn.attr('data-date')}; if(app.calendar.state.view == 'planner') { change.planner_days = 0;change.last=false;} else if ( app.calendar.state.view == 'listview') {change.filter='month';} else {change.view = 'month';}app.calendar.update_state(change);" />
<buttononly id="header_today" label="Today" onclick="
var tempDate = new Date();
var today = new Date(tempDate.getFullYear(), tempDate.getMonth(), tempDate.getDate(),0,-tempDate.getTimezoneOffset(),0);
var change = {date: today.toJSON()};
if(app.calendar.state.view == 'planner') { change.planner_days = Math.ceil((new Date(app.calendar.state.last) - new Date(app.calendar.state.first)) / (24*3600000));}
app.calendar.update_state(change);return false;"/>
<buttononly id="header_month" label="Month" onclick="var change = {date: widget.btn.attr('data-date')}; if(app.calendar.state.view == 'planner') { change.planner_days = 0;change.first=change.date;var d = new Date(change.date);d = new Date(d.getFullYear(),d.getUTCMonth() + 1, 0);change.last=d.toJSON();} else if ( app.calendar.state.view == 'listview') {change.filter='month';} else {change.view = 'month';}app.calendar.update_state(change);" />
</hbox>
<date id="date" class="et2_fullWidth" inline="true" onchange="var view_change = app.calendar.sidebox_changes_views.indexOf(app.calendar.state.view);
var update = {date:widget.getValue()};
if(view_change >= 0) {update.view = app.calendar.sidebox_changes_views[view_change ? view_change - 1 : view_change];} else if (app.calendar.state.view == 'listview') {update.filter = 'after';} app.calendar.update_state(update);"/>
if(view_change >= 0) {update.view = app.calendar.sidebox_changes_views[view_change ? view_change - 1 : view_change];} else if (app.calendar.state.view == 'listview') {update.filter = 'after';} else if (app.calendar.state.view =='planner') { update.planner_days = 1; } app.calendar.update_state(update);"/>
<textbox type="hidden" id="first"/>
<textbox type="hidden" id="last"/>
<select-cat id="cat_id" empty_label="All categories" width="86%" onchange="app.calendar.update_state({cat_id: widget.getValue()});" expand_multiple_rows="4"/>