Annotation of todotxt/Text-Todo-REST-API/example/htdocs/index.html, Revision 1.11
1.2 andrew 1: <html><head>
1.11 ! andrew 2: <!-- $AFresh1: index.html,v 1.10 2010/02/17 02:16:28 andrew Exp $ -->
1.7 andrew 3: <title>todo.txt - ajax client</title>
4: <link rel="stylesheet" href="todo.css">
1.9 andrew 5:
1.7 andrew 6: <script src="scriptaculous/lib/prototype.js"></script>
7: <script src="scriptaculous/src/scriptaculous.js?load=effects,controls"></script>
1.2 andrew 8: <script type='text/javascript'>
1.4 andrew 9:
1.9 andrew 10: var TODO = function () {
11: var base_url = '/~andrew/user-bin/todo.cgi',
1.11 ! andrew 12: editors = {},
1.10 andrew 13:
1.11 ! andrew 14: makeEntryEditor = function(list, entry) {
! 15: var url = base_url + '/' + list + '/entry/' + entry.line,
! 16: id = entry.id;
! 17:
! 18: if (editors[id]) {
! 19: editors[id].editor.dispose();
! 20: delete editors[id];
! 21: }
! 22:
! 23: editors[id] = {
! 24: list: list,
! 25: editor: new Ajax.InPlaceEditor(
! 26: id, url + '.json', {
! 27: cols: 80,
! 28: rows: 1,
! 29: callback: function(form, value) {
! 30: entry.oldText = entry.text;
! 31: entry.text = value;
! 32: return entry;
! 33: },
! 34: onComplete: function (transport, element) {
! 35: if (transport && transport.responseJSON) {
! 36: updateEntry(transport.responseJSON, element);
! 37: }
1.10 andrew 38: }
1.11 ! andrew 39: }
! 40: ),
! 41: };
1.10 andrew 42: },
43:
1.11 ! andrew 44: updateEntry = function(entry, element) {
! 45: var list = editors[element.id].list;
1.10 andrew 46:
1.11 ! andrew 47: element.update(entry.text);
1.10 andrew 48:
1.11 ! andrew 49: if (parseInt(entry.line) !== element.value) {
! 50: for (k in editors) {
! 51: if (editors.hasOwnProperty(k)) {
! 52: editors[k].editor.dispose();
! 53: delete editors[k];
! 54: }
1.10 andrew 55: }
1.11 ! andrew 56: return getList(list);
1.10 andrew 57: }
58: },
59:
1.11 ! andrew 60: updateList = function (list, transport) {
! 61: var i,
1.9 andrew 62: todo = transport.responseJSON,
1.11 ! andrew 63: element = new Element('ol');
1.9 andrew 64:
1.11 ! andrew 65: $("list").update( element );
1.9 andrew 66:
67: for (i=0; i <= todo.length; i++) {
1.11 ! andrew 68: todo[i].id = 'entry_' + todo[i].line;
! 69:
! 70: element.insert( new Element('li', {
! 71: id: 'entry_' + todo[i].line,
! 72: value: todo[i].line
! 73: }).update(todo[i].text)
1.10 andrew 74: );
1.9 andrew 75:
1.11 ! andrew 76: makeEntryEditor(list, todo[i]);
1.9 andrew 77: }
1.11 ! andrew 78: },
! 79:
! 80: getFiles = function () {
! 81: $('files').update("Getting Files . . .");
! 82:
! 83: new Ajax.Updater('files', base_url, {
! 84: method: 'get',
! 85: });
! 86: },
! 87:
! 88: getTags = function (list) {
! 89: $('tags').update("Getting Tags. . .");
! 90:
! 91: var url = base_url + '/' + list + '/tags';
1.9 andrew 92:
1.11 ! andrew 93: new Ajax.Request(url + '.json', {
! 94: method: 'get',
! 95: onSuccess: function (transport) {
! 96: var k,
! 97: data = transport.responseJSON,
! 98: element = new Element('ul');
! 99:
! 100: $("tags").update(element);
! 101: for (k in data) {
! 102: if (data.hasOwnProperty(k)) {
! 103: element.insert(
! 104: new Element('li', {
! 105: id: 'tag_' + k,
! 106: }).update( k + ": " + data[k] )
! 107: );
! 108: getTag(list, k);
! 109: }
! 110: }
! 111: },
! 112: });
! 113: },
1.9 andrew 114:
1.11 ! andrew 115: getTag = function( list, tag ) {
! 116: new Ajax.Request(base_url + '/' + list + '/tags/' + tag + '.json', {
! 117: method: 'get',
! 118: onSuccess: function (transport) {
! 119: if (transport && transport.responseJSON) {
! 120: var i,
! 121: myTags = transport.responseJSON,
! 122: element = new Element('ul');
! 123:
! 124: if (myTags.length) {
! 125: $('tag_' + tag).insert(element);
! 126:
! 127: for (i=0; i<myTags.length; i++) {
! 128: element.insert( new Element('li').
! 129: update( myTags[i] ));
1.9 andrew 130: }
131: }
1.11 ! andrew 132: }
! 133: }
! 134: });
! 135: },
1.9 andrew 136:
1.11 ! andrew 137: getList = function (list) {
! 138: $('list').update("Getting List . . .");
! 139:
! 140: new Ajax.Request(base_url + '/' + list + '.json', {
! 141: method: 'get',
! 142: onSuccess: function (transport) { updateList(list, transport) },
! 143: });
1.9 andrew 144:
1.11 ! andrew 145: };
! 146:
! 147: return {
! 148: getList: getList,
! 149: getFiles: getFiles,
! 150: getTags: getTags,
1.9 andrew 151: };
152: }();
1.7 andrew 153:
1.2 andrew 154: </script>
155: </head>
1.6 andrew 156:
1.9 andrew 157: <body onLoad="TODO.getList('todo');TODO.getTags('todo');TODO.getFiles()">
1.7 andrew 158: <h1>Files:</h1><div id='files'></div>
1.11 ! andrew 159: <h1>List:</h1> <div id='list'></div>
1.9 andrew 160: <h1>Tags:</h1> <div id='tags'></div>
1.1 andrew 161: </body></html>
FreeBSD-CVSweb <freebsd-cvsweb@FreeBSD.org>