<html><head>
<!-- $AFresh1: index.html,v 1.11 2010/02/18 05:35:04 andrew Exp $ -->
<title>todo.txt - ajax client</title>
<link rel="stylesheet" href="todo.css">
<script src="scriptaculous/lib/prototype.js"></script>
<script src="scriptaculous/src/scriptaculous.js?load=effects,controls"></script>
<script type='text/javascript'>
var TODO = function () {
var base_url = '/~andrew/user-bin/todo.cgi',
editors = {},
makeEntryEditor = function(list, entry) {
var url = base_url + '/' + list + '/entry/' + entry.line,
id = entry.id;
if (editors[id]) {
editors[id].editor.dispose();
delete editors[id];
}
editors[id] = {
list: list,
editor: new Ajax.InPlaceEditor(
id, url + '.json', {
cols: 80,
rows: 1,
callback: function(form, value) {
entry.oldText = entry.text;
entry.text = value;
return entry;
},
onComplete: function (transport, element) {
if (transport && transport.responseJSON) {
updateEntry(transport.responseJSON, element);
}
}
}
),
};
},
updateEntry = function(entry, element) {
var list = editors[element.id].list;
element.update(entry.text);
if (parseInt(entry.line) !== element.value) {
for (k in editors) {
if (editors.hasOwnProperty(k)) {
editors[k].editor.dispose();
delete editors[k];
}
}
return getList(list);
}
},
updateList = function (list, transport) {
var i,
todo = transport.responseJSON,
element = new Element('ol');
$("list").update( element );
for (i=0; i <= todo.length; i++) {
todo[i].id = 'entry_' + todo[i].line;
element.insert( new Element('li', {
id: 'entry_' + todo[i].line,
value: todo[i].line
}).update(todo[i].text)
);
makeEntryEditor(list, todo[i]);
}
},
getFiles = function () {
$('files').update("Getting Files . . .");
new Ajax.Updater('files', base_url, {
method: 'get',
});
},
getTags = function (list) {
$('tags').update("Getting Tags. . .");
var url = base_url + '/' + list + '/tags';
new Ajax.Request(url + '.json', {
method: 'get',
onSuccess: function (transport) {
var k,
data = transport.responseJSON,
element = new Element('ul');
$("tags").update(element);
for (k in data) {
if (data.hasOwnProperty(k)) {
element.insert(
new Element('li', {
id: 'tag_' + k,
}).update( k + ": " + data[k] )
);
getTag(list, k);
}
}
},
});
},
getTag = function( list, tag ) {
new Ajax.Request(base_url + '/' + list + '/tags/' + tag + '.json', {
method: 'get',
onSuccess: function (transport) {
if (transport && transport.responseJSON) {
var i,
myTags = transport.responseJSON,
element = new Element('ul');
if (myTags.length) {
$('tag_' + tag).insert(element);
for (i=0; i<myTags.length; i++) {
element.insert( new Element('li').
update( myTags[i] ));
}
}
}
}
});
},
getList = function (list) {
$('list').update("Getting List . . .");
new Ajax.Request(base_url + '/' + list + '.json', {
method: 'get',
onSuccess: function (transport) { updateList(list, transport) },
});
};
return {
getList: getList,
getFiles: getFiles,
getTags: getTags,
};
}();
</script>
</head>
<body onLoad="TODO.getList('todo');TODO.getTags('todo');TODO.getFiles()">
<h1>Files:</h1><div id='files'></div>
<h1>List:</h1> <div id='list'></div>
<h1>Tags:</h1> <div id='tags'></div>
</body></html>