Hawkin
/
arangodb
mirror of https://gitee.com/bigwinds/arangodb
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

254
js/apps/system/_admin/aardvark/APP/frontend/js/templates/modalGraphTable.ejs
View File

@ -1,122 +1,158 @@
<script id="modalGraphTable.ejs" type="text/template"> <script id="modalGraphTable.ejs" type="text/template">
<%
var createTR = function(row, disableSubmitOnEnter) {
var mandatory = '';
if (row.mandatory) {
mandatory = '*';
}
%> <ul id="graphTab" class="nav nav-tabs">
<tr class="tableRow" id="<%='row_' + row.id%>"> <li class="active"><a href="#createGraph" data-toggle="tab" id="tab-createGraph">Create Graph</a></li>
<th class="collectionTh"><%=row.label%><%=mandatory%>:</th> <li><a href="#exampleGraphs" data-toggle="tab" id="tab-exampleGraphs">Example Graphs</a></li>
<th class="collectionTh"> </ul>
<%
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;
}
if (row.info) { <div class="tab-content" id="tab-content-create-graph">
%>
<th> <div class="tab-pane" id="exampleGraphs">
<a class="modalTooltips" title="<%=row.info%>"> <table>
<span class="arangoicon icon_arangodb_info"></span> <tbody>
</a> <tr>
</th> <td>Knows Graph</td>
<% <td>
} <button style="float: right" graph-id="knows_graph" class="button-success createExampleGraphs">Create</button>
%> </td>
</tr> </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> if (row.info) {
</table> %>
<% <th>
if (advancedContent) { <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"> <table>
<div class="accordion-heading"> <tbody>
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne"> <%
<span><%=advancedContent.header%></span><span><b class="caret"></b></span> _.each(content, function(row) {
</a> createTR(row);
</div> });
<div id="collapseOne" class="accordion-body collapse out"> %>
<div class="accordion-inner">
<table> </tbody>
<tbody> </table>
<% <%
_.each(advancedContent.content, function(row) { if (advancedContent) {
createTR(row); %>
}); <div class="accordion" id="accordion2">
%> <div class="accordion-group">
</tbody> <div class="accordion-heading">
</table> <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>
</div> </div>
<%
}
%>
</div> </div>
<% </div>
}
%>
</script> </script>

38
js/apps/system/_admin/aardvark/APP/frontend/js/views/graphManagementView.js
View File

@ -26,6 +26,13 @@
"change #graphSortDesc" : "sorting" "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) { redirectToGraphViewer: function(e) {
var name = $(e.currentTarget).attr("id"); var name = $(e.currentTarget).attr("id");
name = name.substr(0, name.length - 5); name = name.substr(0, name.length - 5);
@ -125,6 +132,35 @@
this.render(); 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() { render: function() {
this.collection.fetch({ this.collection.fetch({
async: false async: false
@ -147,6 +183,8 @@
this.events["click .tableRow"] = this.showHideDefinition.bind(this); this.events["click .tableRow"] = this.showHideDefinition.bind(this);
this.events['change tr[id*="newEdgeDefinitions"]'] = this.setFromAndTo.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 .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"); arangoHelper.setCheckboxStatus("#graphManagementDropdown");
return this; return this;

4
js/apps/system/_admin/aardvark/APP/frontend/scss/_collection.scss
View File

@ -111,6 +111,7 @@
} }
#infoTab, #infoTab,
#graphTab,
#collectionTab { #collectionTab {
border-bottom: 0; border-bottom: 0;
margin-bottom: 1px; margin-bottom: 1px;
@ -119,11 +120,13 @@
} }
#infoTab li, #infoTab li,
#graphTab li,
#collectionTab li { #collectionTab li {
float: right; float: right;
} }
#infoTab a, #infoTab a,
#graphTab a,
#collectionTab a { #collectionTab a {
background-color: $c-new-grey; background-color: $c-new-grey;
border-bottom: 1px solid $c-darker-grey; border-bottom: 1px solid $c-darker-grey;
@ -138,6 +141,7 @@
} }
#infoTab .active > a, #infoTab .active > a,
#graphTab .active > a,
#collectionTab .active > a { #collectionTab .active > a {
background-color: $c-modal-header; background-color: $c-modal-header;
border-color: $c-collection-tab-border-bottom $c-collection-tab-border-bottom transparent !important; border-color: $c-collection-tab-border-bottom $c-collection-tab-border-bottom transparent !important;