<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>jIO Complex Example</title> </head> <body> <script type="text/javascript"> <!-- var logcolor = 'cyan'; var logGetColor = function () { if (logcolor === 'white') { logcolor = 'cyan'; } else { logcolor = 'white'; } return logcolor; }; var log = function (o) { var node = document.createElement ('div'); node.setAttribute('style','background-color:'+logGetColor()+';'); if (typeof o === 'string') { node.textContent = o; } else { node.textContent = JSON.stringify (o); } document.getElementById('log').appendChild(node); }; var error = function (o) { var node = document.createElement ('div'); node.setAttribute('style','background-color:'+logGetColor()+ ';color:red;font-weight:bold'); if (typeof o === 'string') { node.textContent = o; } else { node.textContent = JSON.stringify (o); } document.getElementById('log').appendChild(node); }; var clearlog = function () { document.getElementById('log').innerHTML = ''; }; //--> </script> <table border="1" style="width: 100%;"> <tr style="font-style:italic;"> <th>simple storage</th><th>multi storage</th><th>distant storage</th> <th>conflict managing</th><th>custom storage description</th> </tr> <tr> <th>local</th><th>crypt & local</th><th>dav</th> <th>conflictmanager & local</th><th>custom</th> </tr> <tr> <th> <input type="text" id="localuser" value="localuser" placeholder="username" /><br /> <input type="text" id="localapp" value="localapp" placeholder="applicationname" /><br /> </th> <th> <input type="text" id="cryptuser" value="cryptuser" placeholder="username" /><br /> <input type="text" id="cryptapp" value="cryptapp" placeholder="applicationname" /><br /> <input type="password" id="cryptpassword" value="pwd" placeholder="password" /><br /> </th> <th> <input type="text" id="davuser" value="" placeholder="username" /><br /> <input type="text" id="davapp" value="" placeholder="applicationname" /><br /> <input type="password" id="davpassword" value="" placeholder="password" /><br /> <input type="text" id="davurl" value="" placeholder="url" /><br /> </th> <th> <input type="text" id="conflictuser" value="localuser" placeholder="username" /><br /> <input type="text" id="conflictapp" value="localapp" placeholder="applicationname" /><br /> </th> <th style="width:100%;"> <textarea id="customstorage" style="width:98%;">{"type":"local","username":"customuser","applicationname":"customapp","customkey":"customvalue"}</textarea> </th> </tr> <tr> <th><button onclick="newLocalJio()">Create New jIO</button></th> <th><button onclick="newCryptJio()">Create New jIO</button></th> <th><button onclick="newDavJio()">Create New jIO</button></th> <th><button onclick="newConflictJio()">Create New jIO</button></th> <th><button onclick="newCustomJio()">Create New jIO</button></th> </tr> </table> <br /> <table border="1" style="width: 100%;"> <tr> <td style="width: 50%;"> <label for="metadata">Metadata or document id:</label> <textarea id="metadata" rows="3" style="width: 98%;">{}</textarea> </td> <td style="width: 50%;"> <label for="document_id">Document Id:</label> <input type="text" id="document_id" value="" /> <label for="mimetype">Mime Type:</label> <input type="text" id="mimetype" value="" /><br /> <label for="content">Content:</label> <textarea id="content" rows="3" style="width: 98%;"></textarea><br /> </td> </tr> <tr> <td colspan="2" style="text-align: center;"> Options:<br /> <label for="prev_rev">Previous revision:</label> <input type="text" id="prev_rev" value="" style="width: 40em;"/><br /> <label for="show_conflicts">Show Conflicts</label> <input type="checkbox" id="show_conflicts" />, <label for="show_revision_history">Show Revision History</label> <input type="checkbox" id="show_revision_history" />, <label for="show_revision_info">Show Revision Info</label> <input type="checkbox" id="show_revision_info" />,<br /> <label for="max_retry">Max Retry</label> <input type="number" id="max_retry" value="0" style="width:30px;"/> (0 = infinite) </td> </tr> <tr> <td style="text-align: center;"> <button onclick="post()">post</button> <button onclick="put()">put</button> <button onclick="get()">get</button> <button onclick="remove()">remove</button> <button onclick="allDocs()">allDocs</button> </td> <td style="text-align: center;"> <button onclick="putAttachment()">putAttachment</button> </td> </tr> </table> <br /> <div style="text-align: center;"> <button onclick="printLocalStorage()">print localStorage</button> <button onclick="localStorage.clear()">clear localStorage</button><br /> <button onclick="clearlog()">Clear Log</button> </div> <hr /> <div id="log"> </div> <script type="text/javascript" src="../localorcookiestorage.js"></script> <script type="text/javascript" src="../lib/md5/md5.js"></script> <script type="text/javascript" src="../jio.js"></script> <script type="text/javascript" src="../lib/jquery/jquery.min.js"></script> <script type="text/javascript" src="../lib/base64/base64.js"></script> <script type="text/javascript" src="../lib/sjcl/sjcl.min.js"></script> <script type="text/javascript" src="../lib/jsSha2/sha2.js"></script> <script type="text/javascript" src="../jio.storage.js"></script> <script type="text/javascript"> <!-- var my_jio = null; var newLocalJio = function () { var localuser, localapp; localuser = $('#localuser').attr('value'); localapp = $('#localapp').attr('value'); var spec = {type: 'local', username: localuser, applicationname: localapp}; if (my_jio) { log('closing older jio'); my_jio.close(); } log ('local storage description object: ' + JSON.stringify (spec)); my_jio = jIO.newJio(spec); }; var newCryptJio = function () { var user, app, pwd; user = $('#cryptuser').attr('value'); app = $('#cryptapp').attr('value'); pwd = $('#cryptpassword').attr('value'); var spec = {type: 'crypt', username: user, password: pwd, storage:{ type: 'local', username: user, applicationname: app }}; if (my_jio) { log('closing older jio'); my_jio.close(); } log ('crypt storage description object: ' + JSON.stringify (spec)); my_jio = jIO.newJio(spec); }; var newDavJio = function () { var user, app, pwd, url; user = $('#davuser').attr('value'); app = $('#davapp').attr('value'); pwd = $('#davpassword').attr('value'); url = $('#davurl').attr('value'); var spec = { type: 'dav', username: user, applicationname: app, password: pwd, url: url }; if (my_jio) { log('closing older jio'); my_jio.close(); } log ('dav storage description object: ' + JSON.stringify (spec)); my_jio = jIO.newJio(spec); }; var newConflictJio = function () { var user, app; user = $('#conflictuser').attr('value'); app = $('#conflictapp').attr('value'); var spec = { type: 'conflictmanager', storage: { type: 'local', username: user, applicationname: app } }; if (my_jio) { log('closing older jio'); my_jio.close(); } log ('conflict manager storage description object: '+JSON.stringify (spec)); my_jio = jIO.newJio(spec); }; var newCustomJio = function () { var spec = JSON.parse ($('#customstorage').attr('value')); if (my_jio) { log('closing older jio'); my_jio.close(); } log ('custom storage description object: '+JSON.stringify (spec)); my_jio = jIO.newJio(spec); }; var printLocalStorage = function () { var i; log ('LOCALSTORAGE'); for (i in localStorage) { log ('- '+ i +': '+localStorage[i]); } log ('------------------------------'); }; var callback = function (err,val,begin_date) { log ('time : ' + (Date.now() - begin_date)); if (err) { return error ('return :' + JSON.stringify (err)); } log ('return : ' + JSON.stringify (val)); }; var command = function (method) { var begin_date = Date.now(), doc = {}, opts = {}; log (method); if (!my_jio) { return error ('no jio set'); } opts.conflicts = $('#show_conflicts').attr('checked')?true:false; opts.revs = $('#show_revision_history').attr('checked')?true:false; opts.revs_info = $('#show_revision_info').attr('checked')?true:false; opts.max_retry = parseInt($('#max_retry').attr('value') || '0'); switch (method) { case 'putAttachment': doc.id = $('#document_id').attr('value'); doc.rev = $('#prev_rev').attr('value'); doc.data = $('#content').attr('value'); doc.mimetype = $('#mimetype').attr('value'); log ('attachment: '+ JSON.stringify (doc)); break; case 'post': case 'put': doc = JSON.parse ($('#metadata').attr('value')); log ('doc: ' + JSON.stringify (doc)); break; case 'remove': doc = JSON.parse ($('#metadata').attr('value')); opts.rev = ($('#last_revision').attr('checked')?'last':undefined) || $('#prev_rev').attr('value') || undefined; log ('doc: ' + JSON.stringify (doc)); break; case 'get': doc = $('#metadata').attr('value'); log ('docid: '+ doc) case 'allDocs': break; } log ('opts: ' + JSON.stringify (opts)); switch (method) { case "putAttachment": case 'remove': case 'post': case 'put': case 'get': my_jio[method](doc,opts,function (err,val) { callback(err,val,begin_date); }); break; case 'allDocs': my_jio[method](opts,function (err,val) { callback(err,val,begin_date); }); break; } }; var post = function () { command('post'); }; var put = function () { command('put'); }; var get = function () { command('get'); }; var remove = function () { command('remove'); }; var allDocs = function () { command('allDocs'); }; var putAttachment = function () { command('putAttachment'); }; //--> </script> </body> </html>