[BACK]Return to index.html CVS log [TXT][DIR] Up to [local] / todotxt / Text-Todo-REST-API / example / htdocs
File: [local] / todotxt / Text-Todo-REST-API / example / htdocs / index.html (download) (as text)

Revision 1.11, Thu Feb 18 05:35:04 2010 UTC (14 years, 4 months ago) by andrew
Branch: MAIN
Changes since 1.10: +118 -78 lines 

more fun than can be imagined.  So far, I just do everything :-)

<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>