mirror of https://gitee.com/bigwinds/arangodb
added example graphs to webui
This commit is contained in:
parent
94d2e83981
commit
8e6bdaec65
|
@ -1,122 +1,158 @@
|
|||
<script id="modalGraphTable.ejs" type="text/template">
|
||||
<%
|
||||
var createTR = function(row, disableSubmitOnEnter) {
|
||||
var mandatory = '';
|
||||
if (row.mandatory) {
|
||||
mandatory = '*';
|
||||
}
|
||||
|
||||
%>
|
||||
<tr class="tableRow" id="<%='row_' + row.id%>">
|
||||
<th class="collectionTh"><%=row.label%><%=mandatory%>:</th>
|
||||
<th class="collectionTh">
|
||||
<%
|
||||
switch(row.type) {
|
||||
case "text":
|
||||
%>
|
||||
<input type="text" id="<%=row.id%>" value="<%=row.value||''%>" placeholder="<%=row.placeholder||''%>"></input>
|
||||
<%
|
||||
break;
|
||||
case "password":
|
||||
%>
|
||||
<input type="password" id="<%=row.id%>" value="<%=row.value||''%>" placeholder="<%=row.placeholder||''%>"></input>
|
||||
<%
|
||||
break;
|
||||
case "readonly":
|
||||
%>
|
||||
<input type="text" id="<%=row.id%>" value="<%=row.value||''%>" placeholder="<%=row.placeholder||''%>" disabled></input>
|
||||
<%
|
||||
break;
|
||||
case "checkbox":
|
||||
var checked = '',
|
||||
disabled = '';
|
||||
if (row.checked) {
|
||||
checked = 'checked';
|
||||
}
|
||||
if (row.disabled) {
|
||||
disabled = 'disabled';
|
||||
}
|
||||
%>
|
||||
<input type="checkbox" id="<%=row.id%>" value="<%=row.value%>" <%=checked%> <%=disabled%>></input>
|
||||
<%
|
||||
break;
|
||||
case "select":
|
||||
%>
|
||||
<select id="<%=row.id%>" class="modalSelect">
|
||||
<%
|
||||
_.each(row.options, function(opt) {
|
||||
%>
|
||||
<option value="<%=opt.value%>" <%=row.selected === opt.value?"selected":""%>><%=opt.label%></option>
|
||||
<%
|
||||
});
|
||||
%>
|
||||
</select>
|
||||
<%
|
||||
break;
|
||||
case "select2":
|
||||
%>
|
||||
<input type="hidden" id="<%=row.id%>" value="<%=row.value||''%>" placeholder="<%=row.placeholder||''%>"></input>
|
||||
<% if (row.addAdd) {%>
|
||||
<button id="<%='addAfter_' + row.id%>" class="graphViewer-icon-button gv-icon-small add"></button>
|
||||
<% } %>
|
||||
<% if (row.addDelete) {%>
|
||||
<button id="<%='remove_' + row.id%>" class="graphViewer-icon-button gv_internal_remove_line gv-icon-small delete"></button>
|
||||
<% } %>
|
||||
<%
|
||||
break;
|
||||
}
|
||||
<ul id="graphTab" class="nav nav-tabs">
|
||||
<li class="active"><a href="#createGraph" data-toggle="tab" id="tab-createGraph">Create Graph</a></li>
|
||||
<li><a href="#exampleGraphs" data-toggle="tab" id="tab-exampleGraphs">Example Graphs</a></li>
|
||||
</ul>
|
||||
|
||||
if (row.info) {
|
||||
%>
|
||||
<th>
|
||||
<a class="modalTooltips" title="<%=row.info%>">
|
||||
<span class="arangoicon icon_arangodb_info"></span>
|
||||
</a>
|
||||
</th>
|
||||
<%
|
||||
}
|
||||
%>
|
||||
</tr>
|
||||
<div class="tab-content" id="tab-content-create-graph">
|
||||
|
||||
<div class="tab-pane" id="exampleGraphs">
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Knows Graph</td>
|
||||
<td>
|
||||
<button style="float: right" graph-id="knows_graph" class="button-success createExampleGraphs">Create</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Social Graph</td>
|
||||
<td>
|
||||
<button style="float: right" graph-id="social" class="button-success createExampleGraphs">Create</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Routeplanner Graph</td>
|
||||
<td>
|
||||
<button style="float: right" graph-id="routeplanner" class="button-success createExampleGraphs">Create</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="active tab-pane" id="createGraph">
|
||||
<%
|
||||
}//createTR
|
||||
%>
|
||||
var createTR = function(row, disableSubmitOnEnter) {
|
||||
var mandatory = '';
|
||||
if (row.mandatory) {
|
||||
mandatory = '*';
|
||||
}
|
||||
|
||||
<table>
|
||||
<tbody>
|
||||
<%
|
||||
_.each(content, function(row) {
|
||||
createTR(row);
|
||||
});
|
||||
%>
|
||||
<tr class="tableRow" id="<%='row_' + row.id%>">
|
||||
<th class="collectionTh"><%=row.label%><%=mandatory%>:</th>
|
||||
<th class="collectionTh">
|
||||
<%
|
||||
switch(row.type) {
|
||||
case "text":
|
||||
%>
|
||||
<input type="text" id="<%=row.id%>" value="<%=row.value||''%>" placeholder="<%=row.placeholder||''%>"></input>
|
||||
<%
|
||||
break;
|
||||
case "password":
|
||||
%>
|
||||
<input type="password" id="<%=row.id%>" value="<%=row.value||''%>" placeholder="<%=row.placeholder||''%>"></input>
|
||||
<%
|
||||
break;
|
||||
case "readonly":
|
||||
%>
|
||||
<input type="text" id="<%=row.id%>" value="<%=row.value||''%>" placeholder="<%=row.placeholder||''%>" disabled></input>
|
||||
<%
|
||||
break;
|
||||
case "checkbox":
|
||||
var checked = '',
|
||||
disabled = '';
|
||||
if (row.checked) {
|
||||
checked = 'checked';
|
||||
}
|
||||
if (row.disabled) {
|
||||
disabled = 'disabled';
|
||||
}
|
||||
%>
|
||||
<input type="checkbox" id="<%=row.id%>" value="<%=row.value%>" <%=checked%> <%=disabled%>></input>
|
||||
<%
|
||||
break;
|
||||
case "select":
|
||||
%>
|
||||
<select id="<%=row.id%>" class="modalSelect">
|
||||
<%
|
||||
_.each(row.options, function(opt) {
|
||||
%>
|
||||
<option value="<%=opt.value%>" <%=row.selected === opt.value?"selected":""%>><%=opt.label%></option>
|
||||
<%
|
||||
});
|
||||
%>
|
||||
</select>
|
||||
<%
|
||||
break;
|
||||
case "select2":
|
||||
%>
|
||||
<input type="hidden" id="<%=row.id%>" value="<%=row.value||''%>" placeholder="<%=row.placeholder||''%>"></input>
|
||||
<% if (row.addAdd) {%>
|
||||
<button id="<%='addAfter_' + row.id%>" class="graphViewer-icon-button gv-icon-small add"></button>
|
||||
<% } %>
|
||||
<% if (row.addDelete) {%>
|
||||
<button id="<%='remove_' + row.id%>" class="graphViewer-icon-button gv_internal_remove_line gv-icon-small delete"></button>
|
||||
<% } %>
|
||||
<%
|
||||
break;
|
||||
}
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
<%
|
||||
if (advancedContent) {
|
||||
if (row.info) {
|
||||
%>
|
||||
<th>
|
||||
<a class="modalTooltips" title="<%=row.info%>">
|
||||
<span class="arangoicon icon_arangodb_info"></span>
|
||||
</a>
|
||||
</th>
|
||||
<%
|
||||
}
|
||||
%>
|
||||
</tr>
|
||||
<%
|
||||
}//createTR
|
||||
%>
|
||||
<div class="accordion" id="accordion2">
|
||||
<div class="accordion-group">
|
||||
<div class="accordion-heading">
|
||||
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
|
||||
<span><%=advancedContent.header%></span><span><b class="caret"></b></span>
|
||||
</a>
|
||||
</div>
|
||||
<div id="collapseOne" class="accordion-body collapse out">
|
||||
<div class="accordion-inner">
|
||||
<table>
|
||||
<tbody>
|
||||
<%
|
||||
_.each(advancedContent.content, function(row) {
|
||||
createTR(row);
|
||||
});
|
||||
%>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<table>
|
||||
<tbody>
|
||||
<%
|
||||
_.each(content, function(row) {
|
||||
createTR(row);
|
||||
});
|
||||
%>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
<%
|
||||
if (advancedContent) {
|
||||
%>
|
||||
<div class="accordion" id="accordion2">
|
||||
<div class="accordion-group">
|
||||
<div class="accordion-heading">
|
||||
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
|
||||
<span><%=advancedContent.header%></span><span><b class="caret"></b></span>
|
||||
</a>
|
||||
</div>
|
||||
<div id="collapseOne" class="accordion-body collapse out">
|
||||
<div class="accordion-inner">
|
||||
<table>
|
||||
<tbody>
|
||||
<%
|
||||
_.each(advancedContent.content, function(row) {
|
||||
createTR(row);
|
||||
});
|
||||
%>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<%
|
||||
}
|
||||
%>
|
||||
</div>
|
||||
<%
|
||||
}
|
||||
%>
|
||||
</script>
|
||||
</div>
|
||||
</script>
|
||||
|
|
|
@ -26,6 +26,13 @@
|
|||
"change #graphSortDesc" : "sorting"
|
||||
},
|
||||
|
||||
toggleTab: function(e) {
|
||||
var id = e.currentTarget.id;
|
||||
id = id.replace('tab-', '');
|
||||
$('#tab-content-create-graph .tab-pane').removeClass('active');
|
||||
$('#tab-content-create-graph #' + id).addClass('active');
|
||||
},
|
||||
|
||||
redirectToGraphViewer: function(e) {
|
||||
var name = $(e.currentTarget).attr("id");
|
||||
name = name.substr(0, name.length - 5);
|
||||
|
@ -125,6 +132,35 @@
|
|||
this.render();
|
||||
},
|
||||
|
||||
createExampleGraphs: function(e) {
|
||||
var graph = $(e.currentTarget).attr('graph-id'), self = this;
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: "/_admin/aardvark/graph-examples/create/" + encodeURIComponent(graph),
|
||||
success: function () {
|
||||
window.modalView.hide();
|
||||
self.updateGraphManagementView();
|
||||
arangoHelper.arangoNotification('Example Graphs', 'Graph: ' + graph + ' created.');
|
||||
},
|
||||
error: function (err) {
|
||||
window.modalView.hide();
|
||||
console.log(err);
|
||||
if (err.responseText) {
|
||||
try {
|
||||
var msg = JSON.parse(err.responseText);
|
||||
arangoHelper.arangoError('Example Graphs', msg.errorMessage);
|
||||
}
|
||||
catch (e) {
|
||||
arangoHelper.arangoError('Example Graphs', 'Could not create example graph: ' + graph);
|
||||
}
|
||||
}
|
||||
else {
|
||||
arangoHelper.arangoError('Example Graphs', 'Could not create example graph: ' + graph);
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
render: function() {
|
||||
this.collection.fetch({
|
||||
async: false
|
||||
|
@ -147,6 +183,8 @@
|
|||
this.events["click .tableRow"] = this.showHideDefinition.bind(this);
|
||||
this.events['change tr[id*="newEdgeDefinitions"]'] = this.setFromAndTo.bind(this);
|
||||
this.events["click .graphViewer-icon-button"] = this.addRemoveDefinition.bind(this);
|
||||
this.events["click #graphTab a"] = this.toggleTab.bind(this);
|
||||
this.events["click .createExampleGraphs"] = this.createExampleGraphs.bind(this);
|
||||
arangoHelper.setCheckboxStatus("#graphManagementDropdown");
|
||||
|
||||
return this;
|
||||
|
|
|
@ -111,6 +111,7 @@
|
|||
}
|
||||
|
||||
#infoTab,
|
||||
#graphTab,
|
||||
#collectionTab {
|
||||
border-bottom: 0;
|
||||
margin-bottom: 1px;
|
||||
|
@ -119,11 +120,13 @@
|
|||
}
|
||||
|
||||
#infoTab li,
|
||||
#graphTab li,
|
||||
#collectionTab li {
|
||||
float: right;
|
||||
}
|
||||
|
||||
#infoTab a,
|
||||
#graphTab a,
|
||||
#collectionTab a {
|
||||
background-color: $c-new-grey;
|
||||
border-bottom: 1px solid $c-darker-grey;
|
||||
|
@ -138,6 +141,7 @@
|
|||
}
|
||||
|
||||
#infoTab .active > a,
|
||||
#graphTab .active > a,
|
||||
#collectionTab .active > a {
|
||||
background-color: $c-modal-header;
|
||||
border-color: $c-collection-tab-border-bottom $c-collection-tab-border-bottom transparent !important;
|
||||
|
|
Loading…
Reference in New Issue