Skip to content

jio
jio
Commit e37bf29c authored by Tristan Cavelier's avatar Tristan Cavelier
Browse files
Options

jio dashboard improved

parent 770b0bd1
Show whitespace changes
Inline Side-by-side
Showing with 198 additions and 156 deletions
examples/jio_dashboard.html
View file @ e37bf29c
...@@ -5,102 +5,40 @@ ...@@ -5,102 +5,40 @@
<title>jIO Dashboard</title> <title>jIO Dashboard</title>
</head> </head>
<body> <body>
<script type="text/javascript">
<!--
var log_color = 'cyan';
var logGetColor = function () {
if (log_color === 'white') {
log_color = 'cyan';
} else {
log_color = 'white';
}
return log_color;
};
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%;"> <table border="1" style="width: 100%;">
<tr style="font-style:italic;"> <tr style="font-style:italic;">
<th>simple storage</th><!-- <th>multi storage</th><th>distant storage</th> --> <th>Storage Description</th>
<!-- <th>revision managing</th> --><th>custom storage description</th>
</tr>
<tr>
<th>local</th><!-- <th>crypt & local</th><th>dav</th> -->
<!-- <th>revision & local</th> --><th>custom</th>
</tr> </tr>
<tr> <tr>
<th>
<input type="text" id="localuser" value="localuser" placeholder="username" /><br />
<input type="text" id="localapp" value="localapp" placeholder="application_name" /><br />
</th>
<!-- <th> -->
<!-- <input type="text" id="cryptuser" value="cryptuser" placeholder="username" /><br /> -->
<!-- <input type="text" id="cryptapp" value="cryptapp" placeholder="application_name" /><br /> -->
<!-- <input type="password" id="cryptpassword" value="pwd" placeholder="password" /><br /> -->
<!-- </th> -->
<!-- <th> -->
<!-- <input type="text" id="davurl" value="http://dav.com/uploads" placeholder="url" /><br /> -->
<!-- <input type="text" id="davauthtype" value="basic" placeholder="auth_type" disabled /> <br /> -->
<!-- <input type="text" id="davuser" value="davuser" placeholder="username" /><br /> -->
<!-- <input type="password" id="davpassword" value="pwd" placeholder="password" /><br /> -->
<!-- </th> -->
<!-- <th> -->
<!-- <input type="text" id="revisionuser" value="localuser" placeholder="username" /><br /> -->
<!-- <input type="text" id="revisionapp" value="localapp" placeholder="application_name" /><br /> -->
<!-- </th> -->
<th style="width:100%;"> <th style="width:100%;">
<textarea id="customstorage" style="width:98%;">{&quot;type&quot;:&quot;local&quot;,&quot;username&quot;:&quot;customuser&quot;,&quot;application_name&quot;:&quot;customapp&quot;,&quot;customkey&quot;:&quot;customvalue&quot;}</textarea> <textarea id="storagedescription" rows="10"
style="width:98%;"></textarea>
</th> </th>
</tr> </tr>
<tr> <tr>
<th><button onclick="newLocalJio()">Create New jIO</button></th> <td style="text-align: center;">
<!-- <th><button onclick="newCryptJio()">Create New jIO</button></th> --> <button onclick="fillMemoryDescription()">Memory</button>
<!-- <th><button onclick="newDavJio()">Create New jIO</button></th> --> <button onclick="fillLocalDescription()">Local</button>
<!-- <th><button onclick="newRevisionJio()">Create New jIO</button></th> --> <button onclick="fillDavDescription()">WebDAV</button>
<th><button onclick="newCustomJio()">Create New jIO</button></th> <button onclick="fillERP5Description()">ERP5</button>
<button onclick="fillCustomDescription()">Custom</button>
<button onclick="fillLastDescription()">Last</button>
</td>
</tr>
<tr>
<th><button onclick="createJIO()">Create JIO</button></th>
</tr> </tr>
</table> </table>
<br /> <br />
<table border="1" style="width: 100%;"> <table border="1" style="width: 100%;">
<tr> <tr>
<td colspan="1" style="width: 50%;"> <td colspan="1" style="width: 50%;">
<label for="metadata">Metadata or document id:</label> <label for="metadata">Metadata or Parameters:</label>
<textarea id="metadata" rows="3" style="width: 98%;">{}</textarea> <textarea id="metadata" rows="3" style="width: 98%;">{}</textarea>
</td> </td>
<td colspan="1" style="text-align: center;"> <td colspan="1" style="text-align: center;">
Options:<br /> Options:<br />
<label for="show_conflicts">Get Conflicts</label> <textarea id="options" rows="3" style="width: 98%;">{}</textarea>
<input type="checkbox" id="show_conflicts" /><br />
<label for="show_revision_history">Get Revision History</label>
<input type="checkbox" id="show_revision_history" /><br />
<label for="show_revision_info">Get 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: 3em;"/>
(0 = infinite)
</td> </td>
</tr> </tr>
<tr> <tr>
...@@ -112,31 +50,17 @@ var clearlog = function () { ...@@ -112,31 +50,17 @@ var clearlog = function () {
- <button onclick="putAttachment()">putAttachment</button> - <button onclick="putAttachment()">putAttachment</button>
<button onclick="getAttachment()">getAttachment</button> <button onclick="getAttachment()">getAttachment</button>
<button onclick="removeAttachment()">removeAttachment</button> <button onclick="removeAttachment()">removeAttachment</button>
</td> - <button onclick="allDocs()">allDocs</button>
</tr> - <button onclick="check()">check</button>
<tr> <button onclick="repair()">repair</button>
<td colspan="1" style="width: 50%;">
<label for="query">AllDocs Query:</label>
<textarea id="query" rows="3" style="width: 98%;">a: 2</textarea>
</td>
<td colspan="1" style="text-align: center;">
AllDocs Options:<br />
<label for="include_docs">Include Docs</label>
<input type="checkbox" id="include_docs" /><br />
<label for="wildcard">Wildcard char: </label>
<input type="text" id="wildcard" name="wildcard" value="%" maxlength="1" style="width: 1em;"/><br />
<label for="sort_on">Sort on: </label>
<input type="text" id="sort_on" name="sort_on" value="[[&quot;author&quot;, &quot;ascending&quot;], [&quot;title&quot;, &quot;descending&quot;]]"
style="width: 80%;"/><br />
<label for="select_list">Select_list: </label>
<input type="text" id="select_list" name="select_list" value="[&quot;author&quot;, &quot;title&quot;]" style="width: 80%;"/><br />
<label for="limit">Limit: </label>
<input type="text" id="limit" name="limit" value="[0, 100]" style="width: 80%;"/><br />
</td> </td>
</tr> </tr>
<tr> <tr>
<td colspan="2" style="text-align: center;"> <td colspan="2" style="text-align: center;">
<button onclick="allDocs()">allDocs</button> <label for="times">Times</label>
<input id="times" type="text" value="1" />
<input id="times-lock" type="checkbox" checked="1" />
<label for="times-lock">lock</label>
</td> </td>
</tr> </tr>
</table> </table>
...@@ -149,92 +73,210 @@ var clearlog = function () { ...@@ -149,92 +73,210 @@ var clearlog = function () {
<hr /> <hr />
<div id="log"> <div id="log">
</div> </div>
<script type="text/javascript">
<!--
var log_color = "white";
function select(string) {
return document.querySelector(string);
}
function logGetColor() {
if (log_color === "white") {
log_color = "cyan";
} else {
log_color = "white";
}
return log_color;
}
function log(o) {
var node = document.createElement("pre");
node.setAttribute(
"style",
"background-color:" + logGetColor() +
";margin:0;padding:0;"
);
if (typeof o === "string") {
node.textContent = o;
} else {
node.textContent = JSON.stringify(o, null, " ");
}
select("#log").appendChild(node);
}
function error(o) {
var node = document.createElement("pre");
node.setAttribute(
"style",
"background-color:" + logGetColor() +
";margin:0;padding:0;"
);
if (typeof o === "string") {
node.textContent = o;
} else {
node.textContent = JSON.stringify(o);
}
select("#log").appendChild(node);
}
function clearlog() {
select("#log").innerHTML = "";
}
// clear log on Alt+L
document.addEventListener("keypress", function (event) {
if (event.altKey === true && event.charCode === 108) {
clearlog();
}
});
//-->
</script>
<script src="../lib/rsvp/rsvp-custom.js"></script> <script src="../lib/rsvp/rsvp-custom.js"></script>
<script src="../src/sha256.amd.js"></script> <script src="../src/sha256.amd.js"></script>
<script src="../jio.js"></script> <script src="../jio.js"></script>
<script src="../complex_queries.js"></script> <script src="../complex_queries.js"></script>
<script src="../src/jio.storage/localstorage.js"></script> <script src="../src/jio.storage/localstorage.js"></script>
<script src="../lib/jquery/jquery.min.js"></script> <script src="http://git.erp5.org/gitweb/uritemplate-js.git/blob_plain/HEAD:/bin/uritemplate-min.js"></script>
<script src="../src/jio.storage/erp5storage.js"></script>
<script type="text/javascript"> <script type="text/javascript">
<!-- <!--
var my_jio = null; var my_jio = null;
function newLocalJio() {
var spec = local_storage.createDescription($('#localuser').val(), function fillMemoryDescription() {
$('#localapp').val()); select("#storagedescription").value = JSON.stringify({
log('local storage description object: ' + JSON.stringify(spec)); "type": "local",
my_jio = jIO.createJIO(spec); "username": "<username>",
}; "application_name": "<app_name>",
function newCustomJio() { "mode": "memory"
var spec = JSON.parse($('#customstorage').val()); }, null, " ")
log('custom storage description object: '+JSON.stringify(spec)); }
my_jio = jIO.newJio(spec); function fillLocalDescription() {
}; select("#storagedescription").value = JSON.stringify({
function printLocalStorage() { "type": "local",
var i; "username": "<username>",
log('LOCALSTORAGE'); "application_name": "<app_name>"
for (i in localStorage) { }, null, " ")
log('- '+ i +': '+localStorage[i]); }
function fillDavDescription() {
select("#storagedescription").value = JSON.stringify({
"type": "dav",
"auth_type": "basic",
"username": "<username>",
"password": "<password>"
}, null, " ")
}
function fillERP5Description() {
select("#storagedescription").value = JSON.stringify({
"type": "erp5",
"url": "<url/hateoas>"
}, null, " ")
}
function fillCustomDescription() {
select("#storagedescription").value = JSON.stringify({
"type": "<type>"
}, null, " ")
}
function fillLastDescription() {
select("#storagedescription").value =
localStorage.getItem("last_jio_description") || "{}";
}
fillLastDescription();
function createJIO() {
var description;
try {
description = JSON.parse(select("#storagedescription").value);
my_jio = jIO.createJIO(description);
description = JSON.stringify(description, null, " ");
log("JIO created\n" + description);
localStorage.setItem("last_jio_description", description);
} catch (e) {
error("Storage description is not JSON parsable");
} }
log('------------------------------'); }
};
function printLocalStorage() {
log("localStorage content\n" + JSON.stringify(localStorage, null, " "));
}
function callback(err, val, begin_date) { function callback(err, val, begin_date) {
log('time : ' + (Date.now() - begin_date)); log('time : ' + (Date.now() - begin_date));
if (err) { if (err) {
return error('return :' + JSON.stringify(err)); return error('return :' + JSON.stringify(err, null, " "));
} }
log('return : ' + JSON.stringify(val)); log('return : ' + JSON.stringify(val, null, " "));
}; }
function command(method) { function command(method) {
var begin_date = Date.now(), doc = {}, opts = {}; var begin_date = Date.now(), doc = {}, opts = {};
log(method);
if (!my_jio) { if (!my_jio) {
return error('no jio set'); return error('no jio set');
} }
opts.query = $('#query').val(); doc = JSON.parse(select('#metadata').value);
opts.include_docs = $('#include_docs').attr('checked') ? true : false; opts = JSON.parse(select("#options").value);
opts.wildcard_character = $('#wildcard').val() || "";
opts.sort_on = JSON.parse($('#sort_on').val() || null);
opts.select_list = JSON.parse($('#select_list').val() || null);
opts.limit = JSON.parse($('#limit').val() || null);
opts.conflicts = $('#show_conflicts').attr('checked') ? true : false; log(method + '\ndoc: ' + JSON.stringify(doc, null, " ") +
opts.revs = $('#show_revision_history').attr('checked') ? true : false; '\nopts: ' + JSON.stringify(opts, null, " "));
opts.revs_info = $('#show_revision_info').attr('checked') ? true : false;
opts.max_retry = parseInt($('#max_retry').val() || '0');
doc = JSON.parse($('#metadata').val()); if (method === "allDocs") {
log('doc: ' + JSON.stringify(doc)); my_jio.allDocs(opts).then(function (answer) {
log('opts: ' + JSON.stringify(opts)); callback(undefined, answer, begin_date);
}, function (error) {
my_jio[method](doc, opts, function (err, val) { callback(error, undefined, begin_date);
callback(err, val, begin_date); });
} else {
my_jio[method](doc, opts).then(function (answer) {
callback(undefined, answer, begin_date);
}, function (error) {
callback(error, undefined, begin_date);
}); });
}; }
}
function doCommandNTimes(method) {
var i = -1, n = 0, lock;
n = parseInt(select("#times").value, 10);
lock = select("#times-lock").checked;
if (!lock) {
select("#times").value = "1";
}
if (!isFinite(n)) {
n = 1;
}
while (++i < n) {
command(method);
}
}
function post() { function post() {
command('post'); doCommandNTimes("post");
}; }
function put() { function put() {
command('put'); doCommandNTimes("put");
}; }
function get() { function get() {
command('get'); doCommandNTimes("get");
}; }
function remove() { function remove() {
command('remove'); doCommandNTimes("remove");
}; }
function allDocs() {
command('allDocs');
};
function putAttachment() { function putAttachment() {
command('putAttachment'); doCommandNTimes("putAttachment");
}; }
function getAttachment() { function getAttachment() {
command('getAttachment'); doCommandNTimes("getAttachment");
}; }
function removeAttachment() { function removeAttachment() {
command('removeAttachment'); doCommandNTimes("removeAttachment");
}; }
function allDocs() {
doCommandNTimes("allDocs");
}
function check() {
doCommandNTimes("check");
}
function repair() {
doCommandNTimes("repair");
}
//--> //-->
</script> </script>
</body> </body>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7