1
0
Fork 0

added example graphs to webui

This commit is contained in:
hkernbach 2015-11-24 15:35:44 +01:00
parent 94d2e83981
commit 8e6bdaec65
3 changed files with 188 additions and 110 deletions

View File

@ -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>

View File

@ -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;

View File

@ -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;