Search:
Template:MindTouch > ToBeDeveloped > Task/To Do Lists > Template:ToDoMaster

Template:ToDoMaster

    Table of contents
    No headers
    // 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>
    

    Files (0)

     

    Comments (0)

    You must login to post a comment.