improve UI for importing json APIs
This commit is contained in:
Max Ogden
parent
ce26ed6afb
commit
227ef010a4
@ -292,7 +292,7 @@
|
||||
Paste in an array of JSON objects representing the documents that you would like to insert into the database.
|
||||
</p>
|
||||
<p class="info">
|
||||
<code>[{woo: pizza}]</code>
|
||||
<code>[{woo: pizza}, {tasty: muffins}]</code>
|
||||
</p>
|
||||
<div class="menu-container data-table-cell-editor">
|
||||
<textarea class="data-table-cell-copypaste-editor" bind="textarea">{{value}}</textarea>
|
||||
@ -389,6 +389,9 @@
|
||||
</script>
|
||||
|
||||
<script type='text/mustache' class="jsonTreeTemplate">
|
||||
<p class="info">
|
||||
Please highlight the array of JSON objects to convert to documents.
|
||||
</p>
|
||||
<div id="document-container">
|
||||
<div id="document-editor"></div>
|
||||
</div>
|
||||
|
||||
@ -208,19 +208,32 @@ var util = function() {
|
||||
}
|
||||
}
|
||||
|
||||
// TODO refactor handlers so that they dont stack up as the tree gets bigger
|
||||
function handleTreeClick(e) {
|
||||
var clicked = $(e.target);
|
||||
if (clicked.children('.array').length > 0) {
|
||||
var field = clicked;
|
||||
} else if (clicked.siblings('.array').length > 0) {
|
||||
var field = clicked.parents('.doc-field:first');
|
||||
} else {
|
||||
var field = clicked.parents('.array').parents('.doc-field:first');
|
||||
}
|
||||
$('.chosen').removeClass('chosen');
|
||||
field.addClass('chosen');
|
||||
return false;
|
||||
}
|
||||
|
||||
var createTreeNode = {
|
||||
"string": function (obj, key) {
|
||||
var val = $('<div class="doc-value string-type"></div>');
|
||||
if (obj[key].length > 45) {
|
||||
val.append($('<span class="string-type"></span>')
|
||||
.click(function () { })
|
||||
.text(obj[key].slice(0, 45)))
|
||||
.append(
|
||||
$('<span class="expand">...</span>')
|
||||
.click(function () {
|
||||
val.html('')
|
||||
.append($('<span class="string-type"></span>')
|
||||
.click(function () { })
|
||||
.text(obj[key].length ? obj[key] : " ")
|
||||
)
|
||||
})
|
||||
@ -230,7 +243,6 @@ var util = function() {
|
||||
var val = $('<div class="doc-value string-type"></div>');
|
||||
val.append(
|
||||
$('<span class="string-type"></span>')
|
||||
.click(function () { })
|
||||
.text(obj[key].length ? obj[key] : " ")
|
||||
)
|
||||
}
|
||||
@ -238,31 +250,32 @@ var util = function() {
|
||||
}
|
||||
, "number": function (obj, key) {
|
||||
var val = $('<div class="doc-value number"></div>')
|
||||
val.append($('<span class="number-type">' + obj[key] + '</span>').click(function () { }))
|
||||
val.append($('<span class="number-type">' + obj[key] + '</span>'))
|
||||
return val;
|
||||
}
|
||||
, "null": function (obj, key) {
|
||||
var val = $('<div class="doc-value null"></div>')
|
||||
val.append($('<span class="null-type">' + obj[key] + '</span>').click(function () { }))
|
||||
val.append($('<span class="null-type">' + obj[key] + '</span>'))
|
||||
return val;
|
||||
}
|
||||
, "boolean": function (obj, key) {
|
||||
var val = $('<div class="doc-value null"></div>')
|
||||
val.append($('<span class="null-type">' + obj[key] + '</span>').click(function () { }))
|
||||
var val = $('<div class="fue null"></div>')
|
||||
val.append($('<span class="null-type">' + obj[key] + '</span>'))
|
||||
return val;
|
||||
}
|
||||
, "array": function (obj, key, indent) {
|
||||
if (!indent) indent = 1;
|
||||
var val = $('<div class="doc-value array"></div>')
|
||||
$('<span class="array-type">[</span><span class="expand" style="float:left">...</span><span class="array-type">]</span>')
|
||||
.click(function (i, n) {
|
||||
.click(function (e) {
|
||||
var n = $(this).parent();
|
||||
var cls = 'sub-'+key+'-'+indent
|
||||
n.html('')
|
||||
n.append('<span style="padding-left:'+((indent - 1) * 10)+'px" class="array-type">[</span>')
|
||||
for (i in obj[key]) {
|
||||
var field = $('<div class="doc-field"></div>').click(handleTreeClick);
|
||||
n.append(
|
||||
$('<div class="doc-field"></div>')
|
||||
field
|
||||
.append('<div class="array-key '+cls+'" >'+i+'</div>')
|
||||
.append(createTreeNode[getType(obj[key][i])](obj[key], i, indent + 1))
|
||||
)
|
||||
@ -277,13 +290,13 @@ var util = function() {
|
||||
if (!indent) indent = 1;
|
||||
var val = $('<div class="doc-value object"></div>')
|
||||
$('<span class="object-type">{</span><span class="expand" style="float:left">...</span><span class="object-type">}</span>')
|
||||
.click(function (i, n) {
|
||||
.click(function (e) {
|
||||
var n = $(this).parent();
|
||||
n.html('')
|
||||
n.append('<span style="padding-left:'+((indent - 1) * 10)+'px" class="object-type">{</span>')
|
||||
for (i in obj[key]) {
|
||||
var field = $('<div class="doc-field"></div>')
|
||||
var p = $('<div class="id-space" style="margin-left:'+(indent * 10)+'px"/>')
|
||||
var field = $('<div class="doc-field"></div>').click(handleTreeClick);
|
||||
var p = $('<div class="id-space" style="margin-left:'+(indent * 10)+'px"/>');
|
||||
var di = $('<div class="object-key">'+i+'</div>')
|
||||
field.append(p)
|
||||
.append(di)
|
||||
@ -302,7 +315,7 @@ var util = function() {
|
||||
function renderTree(doc) {
|
||||
var d = $('div#document-editor');
|
||||
for (i in doc) {
|
||||
var field = $('<div class="doc-field"></div>');
|
||||
var field = $('<div class="doc-field"></div>').click(handleTreeClick);
|
||||
$('<div class="id-space" />').appendTo(field);
|
||||
field.append('<div class="doc-key doc-key-base">'+i+'</div>')
|
||||
field.append(createTreeNode[getType(doc[i])](doc, i));
|
||||
|
||||
@ -40,6 +40,7 @@ a.button span.icon.loading { background-image: url(images/loader.gif); }
|
||||
.loading { background-image: url(images/loader.gif); background-repeat: no-repeat; padding-left: 15px; background-position: 0px 3px;}
|
||||
a.button:hover span.icon.loading { background-image: url(images/loader-blue.gif); }
|
||||
#couchLogo {float: left; margin-right: 5px; margin-top: 3px}
|
||||
.chosen {border: 1px solid green}
|
||||
.info { padding: 0px 0px 10px 0px}
|
||||
.menu-overlay {
|
||||
position: fixed;
|
||||
@ -93,8 +94,8 @@ div#document-editor div.id-space {
|
||||
border: none; float: left; margin: 3px 3px 0 3px; padding: 0;
|
||||
width: 15px; height: 15px;
|
||||
}
|
||||
div#document-editor div.doc-field {width:100%; padding-bottom:2px;}
|
||||
div#document-editor div.doc-field, div.doc-value, div.doc-key {float:left;}
|
||||
div#document-editor div.doc-field {width:99%; padding-bottom:2px;}
|
||||
div#document-editor div.doc-field, div.doc-value, div.doc-key {float:left; cursor:pointer; cursor: hand;}
|
||||
div#document-editor div.doc-key {padding-right:5px;font-weight:bold;}
|
||||
|
||||
div#document-editor div.string-type { white-space: pre-wrap; color:#393;}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user