Page last modified 22:59, 23 Ene 2011 by himikel
Template:@rberinger > ToDoMaster
ToDoMasterToDoMasterEdit
ToDoMaster
ToDoMasterEdit
Tabla de contenidos
No hay encabezados// includes
dekiapi();
jquery.ui('smoothness');
<div class="todomaster">
<form>
<table bgcolor="#ecf6fc" id="todoedit" cellspacing="1" cellpadding="1" border="1" width="100%" style="table-layout: fixed;">
<tbody>
<tr>
<td valign="middle" rowspan="3"><span style="align:center;">'Assignee(s):'</span>; <br/>;
<input type="text" id="user-search" />
<div id="user-suggest">
<div id="userlist">
</div>
</div>
<select id="assignee" size ="4" multiple="true" style="width:100%">
<option value=(user.name) selected='selected'>; user.name; </option>
</select>
</td>
<td align="right" valign="middle">'Assigner: '; <input id="assigner" type="text" value=(user.name)/>
</td>
<td align="right" valign="middle">'Start Date: '; <input id="start" type="text" value=(date.format(date.now, 'MM/dd/yyyy')) ctor="$this.datepicker();"/>
</td>
</tr>
<tr>
<td align="right" valign="middle">'Priority: ';
<select id="priority">
<option value="3" selected=((3 ? 'selected' : nil))>'3'</option>
<option value="2" selected=((2 ? 'selected' : nil))>'2'</option>
<option value="1" selected=((1 ? 'selected' : nil))>'1'</option>
</select>
' Percent: ';
<select id="percent">
<option value="5" selected=((5 ? 'selected' : nil))>'100%'</option>
<option value="4" selected=((4 ? 'selected' : nil))>'75%'</option>
<option value="3" selected=((3 ? 'selected' : nil))>'50%'</option>
<option value="2" selected=((2 ? 'selected' : nil))>'25%'</option>
<option value="1" selected=((1 ? 'selected' : nil))>'0%'</option>
</select>
</td>
<td align="right" valign="middle">'Due Date: '; <input id="due" type="text" value=(date.format(date.now, 'MM/dd/yyyy')) ctor="$this.datepicker();"/>
</td>
</tr>
<tr>
<td align="left" valign="middle" colspan="2">'Short Description: ';<input id="desc" type="text" value="" style="width:30em" maxlength="60" />
</td>
</tr>
<tr>
<td align="center" valign="middle" colspan="3">
<input id="save" type="button" value="Save" style="margin-top:15px;margin-bottom:15px" ctor="
when($this.click) {
$('#assignee option').each(function(i) {
$(this).attr('selected','selected');
});
// A bit of Sense Cheking
if($('#assignee option').size() == 0){alert('Must have at least 1 Assignee!'); return false;}
if($('#desc').val()==''){alert('Must have a Short Description!'); return false;}
if($('#due').val()==''){alert('Must have a Due Date!'); return false;}
if($('#start').val()==''){alert('Must have a Start Date!'); return false;}
var todoitem = ({ assignee: #assignee.val(),
assigner: #assigner.val(),
startdate: #start.val(),
priority: #priority.val(),
percent: #percent.val(),
duedate: #due.val(),
desc: #desc.val(),
done: false,
donedate: '',
hold: false,
holdreason:'',
projectpage:({{page.id}}),
whochanged:({{user.name}})
});
#save.blur();
$('div.todomaster').toggle()
Deki.publish('ch_save', todoitem);
}
" />
</td>
</tr>
</tbody>
</table>
</form>
</div>
<script type="text/jem">"
var dapi = '/@api/deki/pages/=';
var dparams = '/contents?abort=never';
var dpath;
// Create page
Deki.subscribe('ch_save', null, function(c, m, d) {
// listen for submit events.
dpath = Deki.url.encode('"..page.path..'/Tasks'.."' + '/' + m['desc'].replace(/ /g,'_').replace(/\\//g,'//'));
var edpath = Deki.url.encode(Deki.url.encode(dpath));
//@himikel #mod 2011-01-23: Adapted to local template path
var ddata = '<p><a href=" ..page.path ..">Return To: "..page.title.."</a></p><pre class=\\'script\\'> Template('rberinger/ToDoItem') </pre><p><h2>Notes:</h2></p>';
//var ddata = '<p><a href=" ..page.path ..">Return To: "..page.title.."</a></p><pre class=\\'script\\'> ToDoItem() </pre><p><h2>Notes:</h2></p>';
Deki.$.ajax({
type: 'POST',
url: dapi+edpath+dparams,
data: ddata,
complete: function(xhr){
if(xhr.status == 200) {
SaveProperty(dpath, m);
} else if(xhr.status == 400){
var response = '';
alert('Bad Requst (400): ' + response);
}
else if(xhr.status == 403) alert('Permission denied (403): Are you logged in?');
else alert('Error ' + xhr.status);
}
});
}, null);
"</script>
<script type="text/javascript">"
// Create Property
var SaveProperty = function(page, properties) {
var pageapi = '/@api/deki/pages/=' + Deki.url.encode(Deki.url.encode(page));
Deki.Api.CreatePageProperty(pageapi, 'urn:custom.mindtouch.com#todo-item', YAHOO.lang.JSON.stringify(properties), function() {
// alert('Thank you. The information has been submitted.');
location.href = '/' + page;
}, function(result) {
if(result.text == '400') {
alert('Task may already exist.');
} else {
alert('An error occurred trying to create the store (status: ' + result.status + ' - ' + result.text + ')');
}
});
}
"</script>
<html><head>
// *** HERE WE START TO DEFINE THE TASK ROLL CALL TABLE ***
// <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://developer.mindtouch.com/@api/deki/files/4844/=jquery.livequery.js" />
<script type="text/javascript">"
$(document).ready(function() {
$('div.todomaster').hide();
$('div#projectProgress').hide();
$('div#projectProgress').appendTo('#progressParent');
$('div#TaskDetailViewer').hide();
$('div#TaskDetailViewer').click(function(){$(this).hide()});
$(document).click(function(){$('div#TaskDetailViewer').hide()});
$('#user-suggest #userlist a').livequery('click', function(event) {
$('#assignee').append('<option selected=\"selected\" value=\"' + $(this).text() + '\">' + $(this).text() + '</option>');
$('#user-suggest').hide();
$('#user-search').val('');
$('#user-search').focus();
return false;
});
$('#assignee').dblclick(function() {
$('#assignee option:selected').remove();
});
});
$('body').ready( function() {
$('#user-search').keyup( function() {
if ($(this).val()==''){
$('#user-suggest').hide();
return false;
}
var q = $(this).val();
clearTimeout($.data(this, 'timer'));
var ms = 400; //milliseconds
var wait = setTimeout(function() {
loadusers(q);
}, ms);
$.data(this, 'timer', wait);
});
});
function loadusers(u) {
$('#user-suggest').hide();
var userapi = 'http://developer.mindtouch.com/@api/deki/users?sortby=username&limit=20&activatedfilter=true&usernamefilter=' + u;
jQuery.get(userapi,function(xml){
// clear the previous results
$('#user-suggest #userlist div').remove();
// Establish a place holder for our name We need to do this so that we only get 1 unique username per user.
var theuser;
$(xml).find('users > user').each(function() {
$(this).find('username').each(function() {
theuser = $(this).text();
return theuser;
});
$('#user-suggest #userlist').append('<div class=\"userpick\"><a href=\"#\" id=\"' + theuser + '\">' + theuser + '</a></div>');
});
});
$('#user-suggest').show();
}
function ShowMyDetails(pid) {
$('div#TaskDetailViewer').hide();
Deki.$.ajax({
type: 'GET',
url: 'http://developer.mindtouch.com/@api/deki/pages/' + pid + '/contents?section=1&include=true',
dataType: 'xml',
success: function(data){
$('#TaskDetailViewer').html( '<p style=\"text-align:center;\">Click to Close</p>' + $(data).find('content').text() );
}
});
// centerIt($('div#TaskDetailViewer'));
$('div#TaskDetailViewer').show();
}
// function centerIt($el) {
// var frm = $('iframe',top.document.body);
// var iframeXOffset = 0, iframeYOffset = 0, windowHeight = 0, windowWidth = 0;
// var i=frm.length;
// while (i--) {
// if (frm[i].contentDocument) {
// doc = frm[i].contentDocument;
// } else {
// doc = frm[i].contentWindow.document;
// }
// if (doc === document) {
// //located our iframe!
// iframeXOffset = $(frm[i]).offset().left;
// iframeYOffset = $(frm[i]).offset().top;
// break;
// }
// };
// if (jQuery.browser.msie) {
// windowWidth = top.window.document.documentElement.clientWidth;
// windowHeight = top.window.document.documentElement.clientHeight;
// } else {
// windowWidth = top.window.innerWidth;
// windowHeight = top.window.innerHeight;
// }
// var elHeight = $el.height();
// var newTop = ((windowHeight/2) - (elHeight/2)) - iframeYOffset + $(parent.document.documentElement).scrollTop();
// if ((newTop + elHeight) > $(document).height()) {
// newTop = $(document).height() - elHeight;
// }
// $el.css ({
// left: ((windowWidth/2) - ($el.width()/2)) - iframeXOffset + $(parent.document.documentElement).scrollLeft(),
// top: newTop
// });
// }
"</script>
<style type="text/css">"
#user-suggest {
width=650px;
position:absolute;
border:1px solid #ccc;
background:#fff;
z-index:50;
}
#user-suggest div#userlist div.userpick:hover {
text-decoration: underline;
background-color:#0099CC;
}
#user-suggest div#userlist div.userpick a {
text-decoration: none;
}
#user-suggest div#userlist div.userpick {
text-decoration: none;
background-color:#FFFFcc;
padding-left:10px;
padding-right: 10px;
}
div#TaskDetailViewer{
position:fixed;
z-index:100;
border:1px solid #000000;
margin: auto;
overflow: auto;
background-color:#FFFFCC;
height: 400px;
/*width: 600px;*/
padding: 5px;
top: 25%;
left: 25%;
width: 50%;
display: none; /* so the element does not get rendered when the page loads. */
}
div#projectProgress {
width:155px;
float: right;
position:absolute;
margin-top:25px;
overflow:hidden;
}
div#progressParent {
width:155px;
margin-bottom: 5px;
float: right;
background-color:#FFFFFF;
position:relative;
}
"</style>
</head></html>
<div style="width:100%;">
</div>
<table border="0" width="100%">
<tbody>
<tr>
<td style="vertical-align:bottom; width:33%;">
<div><strong><a style="float:left" href="#" ctor="$(this).click(function(){$('div.todomaster').toggle(); return false;});" >'New Task'</a></strong></div>
</td>
<td style="vertical-align: bottom; text-align:center; width:33%">
<div><strong><a href="#" ctor="$(this).click(function(){$('div.todolist').toggle(); return false;});" >'Current Task Item(s)'</a></strong></div>
</td>
<td style="vertical-align:bottom; text-align:center;">
<div id="progressParent"><strong><a href="#" style="float:right" ctor="when($this.click) {return false;}; when($this.mouseover){ $('div#projectProgress').show()}; when($this.mouseout) {$('div#projectProgress').hide()}">'Total Progress'</a></strong></div>
</td>
</tr>
</tbody>
</table>
var percentmap = {1:'0%',2:'25%',3:'50%',4:'75%',5:'100%',default:'0%'};
var prioritymap = {1:'1',2:'2',3:'3',default:'Unk'};
var CurProgress = 0;
var ProgressPossible=0;
var OverAllProgress=0;
<div class="todolist">
if(wiki.pageexists(page.path .."/Tasks") || #wiki.pageexists(page.path .."/Tasks")>0) {
tstable();
<table id="TaskItems" border="1" width="100%">
<tr>
<th>
'Task ID'
</th>
<th>
'Description'
</th>
<th>
'Assignee(s)'
</th>
<th>
'Priority'
</th>
<th>
'Due Date'
</th>
<th>
'Progress'
</th>
<th>
'On Hold'
</th>
<th>
'Complete Date'
</th>
<th>
'Notes'
</th>
</tr>
foreach(var taskitem in wiki.getpage(page.path ..'/Tasks').subpages) {
var taskdetail = json.parse(taskitem.properties['todo-item'].text ?? "") ?? [];
foreach(var a in taskdetail.assignee) {
let ProgressPossible = ProgressPossible + 4;
let curprogress = (curprogress + taskdetail.percent -1);
<tr>
<td>
web.link(taskitem.uri, taskitem.id);
</td>
<td>
taskdetail.desc;
</td>
<td>
a;
</td>
<td>
prioritymap[((taskdetail.priority==nil || taskdetail.priority == '') ? 'default' : taskdetail.priority)];
</td>
<td>
taskdetail.duedate;
</td>
<td>
percentmap[((taskdetail.percent==nil || taskdetail.percent=='') ? 'default' : taskdetail.percent)];
</td>
<td>
(taskdetail.hold==true);
</td>
<td>
(date.isvalid(taskdetail.donedate) ? date.format(taskdetail.donedate,'MM/dd/yyyy') : 'N/A');
</td>
<td>
<a href="#" id=(taskitem.id ..'-'..__index) taskid=(taskitem.id) ctor="when($this.click){ ShowMyDetails($this.attr('taskid')); return false; };" >'view'</a>
</td>
</tr>
}
}
</table>
} else {
<div>'No Tasks Yet Created...'</div>
}
</div>
let OverAllProgress = ( num.round( ((curprogress / progresspossible) * 100), 0) );
<div id="projectProgress">
// GoogleStatusIndicator{value: OverAllProgress, text: '' ..OverAllProgress ..'%', height: '200', width: '120'};
var text = '' ..OverAllProgress ..'%';
// web.image('http://chart.apis.google.com/chart?chs=200x120&cht=gom&chd=t:' ..OverAllProgress ..'&chl=' ..web.uriencode(text));
var theUrl = 'http://chart.apis.google.com/chart?chs=200x120&cht=gom&chd=t:' ..OverAllProgress ..'&chl=' ..web.uriencode(text);
<img style="margin-top:-15px;" src=(theUrl) />
</div>
<div id="TaskDetailViewer" height="30%"></div>