[BACK]Return to index.html CVS log [TXT][DIR] Up to [local] / todotxt / Text-Todo-REST-API / example / htdocs

Annotation of todotxt/Text-Todo-REST-API/example/htdocs/index.html, Revision 1.12

1.2       andrew      1: <html><head>
1.12    ! andrew      2:         <!-- $AFresh1: index.html,v 1.11 2010/02/18 05:35:04 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:
1.12    ! andrew     18:         if (!id) {
        !            19:             id = 'entry_' + entry.line;
        !            20:         }
        !            21:
        !            22:         if (editors[id]) {
        !            23:                 editors[id].dispose();
        !            24:                 delete editors[id];
        !            25:         }
        !            26:
        !            27:         editors[id] = new Ajax.InPlaceEditor( id, url + '.json', {
        !            28:                 cols: 80,
        !            29:                 rows: 1,
        !            30:                 callback: function(form, value) {
        !            31:                     entry.oldText = entry.text;
        !            32:                     entry.text = value;
        !            33:                     return entry;
        !            34:                 },
        !            35:                 onComplete: function (transport, element) {
        !            36:                     if (transport && transport.responseJSON) {
        !            37:                         updateEntry( list, transport.responseJSON, element);
1.10      andrew     38:                     }
1.11      andrew     39:                 }
1.12    ! andrew     40:             }
        !            41:         );
1.10      andrew     42:     },
                     43:
1.12    ! andrew     44:     updateEntry = function(list, entry, element) {
        !            45:         if (!entry.id) {
        !            46:             entry.id = 'entry_' + entry.line;
        !            47:         }
        !            48:         var liId = 'li_' + entry.id;
1.10      andrew     49:
1.12    ! andrew     50:         if (parseInt(entry.line) !== $(liId).value) {
1.11      andrew     51:             for (k in editors) {
                     52:                 if (editors.hasOwnProperty(k)) {
1.12    ! andrew     53:                     editors[k].dispose();
1.11      andrew     54:                     delete editors[k];
                     55:                 }
1.10      andrew     56:             }
1.11      andrew     57:             return getList(list);
1.10      andrew     58:         }
1.12    ! andrew     59:
        !            60:         $(liId).update(
        !            61:             new Element('span', { id: entry.id }). update(entry.text)
        !            62:         ).insert({
        !            63:             top: new Element('input', {
        !            64:                 type: 'checkbox' ,
        !            65:                 id:   'do_' + entry.line,
        !            66:                 checked: entry.done,
        !            67:                 disabled: true,
        !            68:             })
        !            69:         });
        !            70:
        !            71:         makeEntryEditor(list, entry);
1.10      andrew     72:     },
                     73:
1.11      andrew     74:     updateList = function (list, transport) {
                     75:         var i,
1.9       andrew     76:           todo = transport.responseJSON,
1.12    ! andrew     77:           element = new Element('ol'),
        !            78:           entryElement;
1.9       andrew     79:
1.11      andrew     80:         $("list").update( element );
1.9       andrew     81:
                     82:         for (i=0; i <= todo.length; i++) {
1.11      andrew     83:             todo[i].id = 'entry_' + todo[i].line;
                     84:
1.12    ! andrew     85:             entryElement = new Element('li', {
        !            86:                 id: 'li_' + todo[i].id,
        !            87:                 value: todo[i].line
        !            88:             });
        !            89:
        !            90:             element.insert(entryElement);
1.9       andrew     91:
1.12    ! andrew     92:             updateEntry(list, todo[i], entryElement);
1.9       andrew     93:         }
1.11      andrew     94:     },
                     95:
                     96:     getFiles = function () {
                     97:         $('files').update("Getting Files . . .");
                     98:
                     99:         new Ajax.Updater('files', base_url, {
                    100:             method: 'get',
                    101:         });
                    102:     },
                    103:
                    104:     getTags = function (list) {
                    105:             $('tags').update("Getting Tags. . .");
                    106:
                    107:             var url = base_url + '/' + list + '/tags';
1.9       andrew    108:
1.11      andrew    109:             new Ajax.Request(url + '.json', {
                    110:             method: 'get',
                    111:             onSuccess: function (transport) {
                    112:                 var k,
                    113:                     data = transport.responseJSON,
                    114:                     element = new Element('ul');
                    115:
                    116:                 $("tags").update(element);
                    117:                 for (k in data) {
                    118:                     if (data.hasOwnProperty(k)) {
                    119:                     element.insert(
                    120:                         new Element('li', {
                    121:                             id: 'tag_' + k,
                    122:                             }).update( k + ": " + data[k]  )
                    123:                     );
                    124:                     getTag(list, k);
                    125:                     }
                    126:                 }
                    127:             },
                    128:         });
                    129:     },
1.9       andrew    130:
1.11      andrew    131:     getTag = function( list, tag ) {
                    132:         new Ajax.Request(base_url + '/' + list + '/tags/' + tag + '.json', {
                    133:             method: 'get',
                    134:             onSuccess: function (transport) {
                    135:                 if (transport && transport.responseJSON) {
                    136:                     var i,
                    137:                         myTags = transport.responseJSON,
                    138:                         element = new Element('ul');
                    139:
                    140:                     if (myTags.length) {
                    141:                         $('tag_' + tag).insert(element);
                    142:
                    143:                         for (i=0; i<myTags.length; i++) {
                    144:                             element.insert( new Element('li').
                    145:                                 update( myTags[i] ));
1.9       andrew    146:                         }
                    147:                     }
1.11      andrew    148:                 }
                    149:             }
                    150:         });
                    151:     },
1.9       andrew    152:
1.11      andrew    153:     getList = function (list) {
                    154:         $('list').update("Getting List . . .");
                    155:
                    156:         new Ajax.Request(base_url + '/' + list + '.json', {
                    157:             method:    'get',
                    158:             onSuccess: function (transport) { updateList(list, transport) },
                    159:         });
1.9       andrew    160:
1.11      andrew    161:     };
                    162:
                    163:     return {
                    164:         getList:  getList,
                    165:         getFiles: getFiles,
                    166:         getTags:  getTags,
1.9       andrew    167:     };
                    168: }();
1.7       andrew    169:
1.2       andrew    170: </script>
                    171: </head>
1.6       andrew    172:
1.9       andrew    173: <body onLoad="TODO.getList('todo');TODO.getTags('todo');TODO.getFiles()">
1.7       andrew    174:     <h1>Files:</h1><div id='files'></div>
1.11      andrew    175:     <h1>List:</h1> <div id='list'></div>
1.9       andrew    176:     <h1>Tags:</h1> <div id='tags'></div>
1.1       andrew    177: </body></html>

FreeBSD-CVSweb <freebsd-cvsweb@FreeBSD.org>