[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.10, Wed Feb 17 02:16:28 2010 UTC (14 years, 4 months ago) by andrew
Branch: MAIN
Changes since 1.9: +52 -19 lines 

yay! it updates (with json) and sets new id!

<html><head>
        <!-- $AFresh1: index.html,v 1.10 2010/02/17 02:16:28 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(id, list_url) {
       var url = list_url + '/entry/' + id;

       if (!editors[id]) {
        editors[id] = {
            list_url: list_url,
            editor: new Ajax.InPlaceEditor(
                    id, url + '.json', {
                        cols: 80,
                        rows: 1,
                        onComplete: updateEntry,
                    }
                ),
            };
        }
    },

    updateEntry = function(transport, element) {
        var list_url = editors[element.id].list_url,
            entry;

        if (transport && transport.responseJSON) {
            entry = transport.responseJSON;

            element.update(entry.text);

            if (element.id !== entry.md5) {
                if (editors[element.id]) {
                    editors[element.id].editor.dispose();
                    delete editors[element.id];
                }

                element.id = entry.md5;

                makeEntryEditor(element.id, list_url);
            }
        }
    },

    updateList = function (list_url, transport) {
        var i,
          todo = transport.responseJSON,
          url  = '';

        $("list").update();

        for (i=0; i <= todo.length; i++) {
            $('list').insert({ 
                bottom: new Element('div', 
                        { id: todo[i].md5 }
                        ).update(todo[i].text) 
                }
            );

            makeEntryEditor(todo[i].md5, list_url);
        }
    };

    return { 
        getFiles: function () {
            $('files').update("Getting Files . . .");

            new Ajax.Updater('files', base_url, {
                method: 'get',
            });
        },

        getTags: function (list) {
             var url = base_url + '/' + list + '/tags';
             $('tags').update("Getting Tags. . .");

             new Ajax.Request(url + '.json', { 
                method: 'get',
                onSuccess: function (transport) { 
                    var data = transport.responseJSON,
                    k,
                    html = '';
                    for (k in data) {
                        if (data.hasOwnProperty(k)) {
                            html += k + ": " + data[k] + "<br/>\n";
                        }
                    }
                    $("tags").innerHTML = html;
                },
            });
        },

        getList: function (list) {
            var url = base_url + '/' + list;
            $('list').update("Getting List . . .");

            new Ajax.Request(url + '.json', { 
                method:    'get',
                onSuccess: function (transport) { updateList(url, transport) },
            });

        },
    };
}();

</script>
</head>

<body onLoad="TODO.getList('todo');TODO.getTags('todo');TODO.getFiles()">
    <h1>Files:</h1><div id='files'></div>
    <h1>Tags:</h1> <div id='tags'></div>
    <h1>List:</h1> <div id='list'></div>
</body></html>