That fixed it! I'm not seeing any problems anymore so here's the final code:
Code:
<h1>ToDo</h1>
<p> </p>
<pre class="script">
// includes
dekiapi();
jquery.ui('smoothness');
<div id="deki-todo">
// input form
<form>
<input id="todoid" type="hidden" value="" />
<div class="todo-assign">
" Task: ";
</div>
<div class="todo-who">
" Who: ";
<select id="todowho">
foreach(var u in site.users where !u.anonymous) {
<option value=(u.name) selected=((u.id == user.id) ? 'selected' : nil)>u.name</option>
}
</select>
</div>
<div class="todo-what">
"What: "; <input id="todowhat" type="text" />
</div>
<div class="todo-when">
" When: "; <input id="todowhen" type="text" value=(date.format(date.now, 'MM/dd/yyyy')) ctor="$this.datepicker();" />
</div>
<div class="todo-submit">
<input id="todoadd" type="button" value="Add" ctor="
when($this.click) {
@todoupdate({ index: #todoid.val(), entry: { what: #todowhat.val(), who: #todowho.val(), when: #todowhen.val(), author: {{user.name}}, done: false }});
#todoid.val('');
#todowhat.val('');
#todoadd.val('Add');
#tododelete.hide();
#todoadd.blur();
}
when(#tododelete.click) {
@todoupdate({ index: #todoid.val(), entry: null });
#todoid.val('');
#todowhat.val('');
#todoadd.val('Add');
#tododelete.hide();
#todoadd.blur();
}
when(@todoedit) {
Deki.Api.ReadPageProperty(null, 'urn:custom.mindtouch.com#todo', function(result) {
var data = YAHOO.lang.JSON.parse(result.value || '[]');
#todoid.val(@todoedit.index);
#todowhat.val(data[@todoedit.index].what);
#todowhen.val(data[@todoedit.index].when);
#todowho.val(data[@todoedit.index].who);
#todoadd.val('Update');
#tododelete.show();
}, function(result) {
alert('An error occurred trying to read the TODO list (status: ' + result.status + ' - ' + result.text + ')');
});
}
when(@todoupdate) {
Deki.Api.ReadPageProperty(null, 'urn:custom.mindtouch.com#todo', function(result) {
var data = eval('(' + (result.value || '[]') + ')');
if(@todoupdate.index !== '') {
if(@todoupdate.entry === null) {
data.splice(@todoupdate.index, 1);
} else {
Deki.$.extend(data[@todoupdate.index], @todoupdate.entry);
}
} else {
data.push(@todoupdate.entry);
}
if(result.etag) {
Deki.Api.UpdatePageProperty(result.href, YAHOO.lang.JSON.stringify(data), result.etag, function() {
Deki.Api.Reload(#todolist, { nocache: new Date().getTime() }, function() { ToDoWireControls(); });
}, function(result) {
alert('An error occurred trying to update the TODO list (status: ' + result.status + ' - ' + result.text + ')');
});
} else {
Deki.Api.CreatePageProperty(null, 'urn:custom.mindtouch.com#todo', YAHOO.lang.JSON.stringify(data), function() {
Deki.Api.Reload(#todolist);
}, function(result) {
alert('An error occurred trying to create the TODO list (status: ' + result.status + ' - ' + result.text + ')');
});
}
}, function(result) {
alert('An error occurred trying to read the TODO list (status: ' + result.status + ' - ' + result.text + ')');
});
}
" />
<input id="tododelete" style="display: none;" type="button" value="Delete" />
</div>
</form>
// todo list
var todo = json.parse(page.properties["todo"].text ?? "") ?? [];
let todo = [ item .. { index: __index } foreach var item in todo ];
let todo = list.sort(todo, _, true, "date.compare($left.when, $right.when)");
<table id="todolist" cellspacing="0" cellpadding="0">
<colgroup>
<col width="20" />
<col width="20%" />
<col />
<col width="15%" />
<col width="75" />
</colgroup>
<tr>
<th>string.nbsp</th>
<th>"When"</th>
<th>"What"</th>
<th>"Who"</th>
<th>string.nbsp</th>
</tr>
foreach(var entry in todo) {
var class = "";
if(entry.done) let class..= "completed ";
if(date.issameday(date.now, entry.when)) let class ..= "due-today ";
else if(date.isafter(date.now, entry.when)) let class ..= "due-past ";
var title = "Created by " .. entry.author;
<tr class=(class)>
<td><input type="checkbox" name="done" value=(entry.index) checked=(entry.done ? 'checked' : nil) /></td>
<td title=(title)><span>entry.when</span></td>
<td title=(title)><span>entry.what</span></td>
<td title=(title)><span>entry.who</span></td>
<td class="todo-edit"><a href="#" rel=(entry.index)>"edit"</a></td>
</tr>
}
</table>
</div>
<script type="text/jem">"
function ToDoWireControls() {
Deki.$('#todolist a').bind('click', function() {
@todoedit({ index: Deki.$(this).attr('rel') });
#todowhat.select();
return false;
});
Deki.$('#todolist input').bind('click', function() {
var $this = Deki.$(this);
@todoupdate({ index: $this.val(), entry: { done: this.checked } });
});
}
ToDoWireControls();
"</script>
</pre>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p><style type="text/css">/*<![CDATA[*/
#deki-todo {
margin: 0;
padding: 4px;
width: 98%;
}
#deki-todo table {
width: 100%;
margin: 0;
}
#deki-todo table td {
border-bottom: 1px solid #000;
padding: 4px 2px;
}
#deki-todo tr td.todo-edit {
text-align: right;
padding-right: 8px;
}
#deki-todo tr.due-today td {
background-color: #ff0;
}
#deki-todo tr.completed td {
background-color: #fff;
}
#deki-todo tr.completed td span {
text-decoration: line-through;
}
#deki-todo tr.due-past td,
#deki-todo tr.due-past td.todo-edit a {
color: #777;
}
#deki-todo table th {
font-size: 14px;
font-weight: bold;
text-align: left;
border-bottom: 2px solid #000;
}
#deki-todo form {
padding: 4px;
background-color: #000;
color: #fff;
overflow: hidden;
margin-bottom: 8px;
}
#deki-todo div.todo-assign {
font-weight: bold;
}
#deki-todo form,
#deki-todo form input,
#deki-todo form select {
font-size: 11px;
}
#deki-todo form div {
padding-right: 8px;
float: left;
}
#deki-todo div.todo-submit {
float: right;
padding-right: 0px;
}
#deki-todo div.todo-submit input {
margin-right: 4px;
}
#deki-todo table tr td.todo-edit a {
background: url(/skins/common/icons/silk/page_white_edit.png) no-repeat center left;
color: #000;
text-decoration: none;
padding: 3px 3px 3px 21px;
font-size: 11px;
}
#deki-todo table tr td.todo-edit a:hover {
text-decoration: underline;
}
/*]]>*/</style></p>
<p> </p>
Reply With Quote
Originally Posted by pktloss
