Template:ToDoMaster

// 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, 'dd/MM/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));
        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://mindtouch.jankifoundation.org/@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>