mirror of https://gitee.com/bigwinds/arangodb
Merge branch 'devel' of ssh://github.com/triAGENS/ArangoDB into devel
This commit is contained in:
commit
aca081ebaa
|
@ -181,7 +181,7 @@
|
|||
.pagination-small ul > li.disabled:first-child > span {
|
||||
pointer-events: none;
|
||||
cursor: default;
|
||||
background-color: ##777;
|
||||
background-color: #777;
|
||||
color:#666666;
|
||||
}
|
||||
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -8,7 +8,7 @@
|
|||
|
||||
model: window.Database,
|
||||
|
||||
comparator: "name",
|
||||
comparator: function(item) { return item.get('name').toLowerCase(); },
|
||||
|
||||
sync: function(method, model, options) {
|
||||
if (method === "read") {
|
||||
|
|
|
@ -24,7 +24,7 @@
|
|||
</table>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button id="cancel" class="button-warning">Cancel</button>
|
||||
<button id="cancel" class="button-close">Cancel</button>
|
||||
<button id="createGraph" class="button-success pull-right">Create</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -1,71 +1,169 @@
|
|||
<script id="databaseView.ejs" type="text/template">
|
||||
<div class="headerBar">
|
||||
<a class="arangoHeader">Databases</a>
|
||||
</div>
|
||||
<div class="headerBar">
|
||||
<!-- <div class="headerButtonBar pull-right">
|
||||
<ul class="headerButtonList">
|
||||
<li class="enabled">
|
||||
<a id="databaseToggle" class="headerButton">
|
||||
<span class="icon_arangodb_settings2" title="Settings"></span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>-->
|
||||
|
||||
<div class="contentDiv">
|
||||
<table id="databaseTable" class="arangoDataTable contentTables">
|
||||
<thead>
|
||||
<tr>
|
||||
<td class="dbThFirst">Name</td>
|
||||
<td class="dbThSecond">
|
||||
<span id="createDatabase" class="icon_arangodb_roundplus" data-original-title="Create a database"></span>
|
||||
</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="databaseTableBody">
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div id="createDatabaseModal" class="modal hide fade createModalDialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display:none">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||||
<a class="arangoHeader">Create Database</a>
|
||||
<div class="pull-left">
|
||||
<a class="arangoHeader">Databases</a>
|
||||
</div>
|
||||
<div class="searchField pull-left">
|
||||
<input type="text" value="<%=searchString%>" id="databaseSearchInput" class="searchInput" placeholder="Search..."/><img id="databaseSearchSubmit"
|
||||
width="16" height="16"
|
||||
src="img/enter_icon.png" class="searchSubmitIcon">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
<table>
|
||||
<tr>
|
||||
<th>Name:</th>
|
||||
<th><input type="text" id="newDatabaseName" name="databasename" value="" placeholder="Database Name"/></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2">Please define the owner of this database. This will be the only user having initial access to this database. If the user is different to your account you will not be able to see the database. If there is a failure you will be informed.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Username:</th>
|
||||
<th><input type="text" id="newUser" name="username" value="" placeholder="Database Owner"/></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Password:</th>
|
||||
<th><input type="password" id="newPassword" name="password" value=""/></th>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="button-close" data-dismiss="modal" aria-hidden="true">Close</button>
|
||||
<button id="submitCreateDatabase" class="button-success pull-right">Create</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="deleteDatabaseModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display:none">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||||
<a class="arangoHeader">Delete Database</a>
|
||||
<div id="databaseDropdown2" class="headerDropdown">
|
||||
|
||||
<div id="databaseDropdown" class="dropdownInner">
|
||||
<ul>
|
||||
<li class="nav-header">Sorting</li>
|
||||
|
||||
<li><a href="#">
|
||||
<label class="checkbox checkboxLabel">
|
||||
<input class="css-checkbox" type="checkbox" id="sortName">
|
||||
<label class="css-label css-label-round"></label>Sort by ?
|
||||
</label>
|
||||
</a></li>
|
||||
|
||||
<li><a href="#">
|
||||
<label class="checkbox checkboxLabel">
|
||||
<input class="css-checkbox" type="checkbox" id="sortType">
|
||||
<label class="css-label css-label-round"></label>Sort by ?
|
||||
</label>
|
||||
</a></li>
|
||||
|
||||
<li><a href="#">
|
||||
<label class="checkbox checkboxLabel">
|
||||
<input class="css-checkbox" type="checkbox" id="sortOrder">
|
||||
<label class="css-label"></label>Sort descending
|
||||
</label>
|
||||
</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
<table>
|
||||
<tr>
|
||||
<th>Really delete?</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<div class="contentDiv" id="arangoCollectionsContainer">
|
||||
<div class="containerdivNewLine"/>
|
||||
<ul id="userManagementThumbnailsIn" class="tileList">
|
||||
<li class="tile">
|
||||
<a href="#" id="createDatabase" class="add">
|
||||
<span id="newDatabase" class="pull-left icon_arangodb_roundplus arangoicon add-Icon"/>
|
||||
Add Database
|
||||
</a>
|
||||
</li>
|
||||
<% collection.forEach(function(db) {
|
||||
var name = db.get("name");
|
||||
%>
|
||||
|
||||
<li class="tile">
|
||||
<div class="iconSet">
|
||||
<span class="icon_arangodb_settings2 editDatabase" id="<%=name %>" alt="Edit database" title="Edit database"></span>
|
||||
</div>
|
||||
<img src="img/databaseIcon.svg" class="tile-icon-svg svgToReplace"/>
|
||||
<div class="tileBadge">
|
||||
<span>
|
||||
<%
|
||||
if(name === currentDB) {
|
||||
%>
|
||||
<div class="corneredBadge loaded">active</div>
|
||||
<%
|
||||
} else {
|
||||
%>
|
||||
<div class="corneredBadge unloaded">inactive</div>
|
||||
<%
|
||||
}
|
||||
%>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h5 class="collectionName"><%=name %></h5>
|
||||
</li>
|
||||
<%});%>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="button-close" data-dismiss="modal" aria-hidden="true">Close</button>
|
||||
<button id="submitDeleteDatabase" class="button-danger pull-right">Delete</button>
|
||||
|
||||
|
||||
<div id="createDatabaseModal" class="modal hide fade createModalDialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display:none">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||||
<a class="arangoHeader">Create Database</a>
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
<table>
|
||||
<tr>
|
||||
<th>Name:</th>
|
||||
<th><input type="text" id="newDatabaseName" name="databasename" value="" placeholder="Database Name"/></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2">Please define the owner of this database. This will be the only user having initial access to this database. If the user is different to your account you will not be able to see the database. If there is a failure you will be informed.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Username:</th>
|
||||
<th><input type="text" id="newUser" name="username" value="" placeholder="Database Owner"/></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Password:</th>
|
||||
<th><input type="password" id="newPassword" name="password" value=""/></th>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="button-close" data-dismiss="modal" aria-hidden="true">Close</button>
|
||||
<button id="submitCreateDatabase" class="button-success pull-right">Create</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="editDatabaseModal" class="modal hide fade createModalDialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display:none">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||||
<a class="arangoHeader">Edit database</a>
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
<table>
|
||||
<tr>
|
||||
<th>Name:</th>
|
||||
<th id="editDatabaseName"></th>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="button-close" data-dismiss="modal" aria-hidden="true">Close</button>
|
||||
<button id="deleteDatabase" class="button-danger pull-right" >Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="deleteDatabaseModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display:none">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||||
<a class="arangoHeader">Delete Database</a>
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
<table>
|
||||
<tr>
|
||||
<th>Really delete?</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="button-close" data-dismiss="modal" aria-hidden="true">Close</button>
|
||||
<button id="submitDeleteDatabase" class="button-danger pull-right">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</script>
|
||||
|
|
|
@ -10,7 +10,7 @@
|
|||
</span>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button id="cancel" class="button-warning">Cancel</button>
|
||||
<button id="cancel" class="button-close">Cancel</button>
|
||||
<button id="confirmDelete" class="button-danger pull-right">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -0,0 +1,140 @@
|
|||
<script id="graphManagementView.ejs" type="text/template">
|
||||
<div class="headerBar">
|
||||
<!-- <div class="headerButtonBar pull-right">
|
||||
<ul class="headerButtonList">
|
||||
<li class="enabled">
|
||||
<a id="graphManagementToggle" class="headerButton">
|
||||
<span class="icon_arangodb_settings2" title="Settings"></span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>-->
|
||||
<div class="pull-left">
|
||||
<a class="arangoHeader">Graph Management</a>
|
||||
</div>
|
||||
<div class="searchField pull-left">
|
||||
<input type="text" value="<%=searchString%>" id="graphManagementSearchInput" class="searchInput" placeholder="Search..."/><img id="graphManagementSearchSubmit"
|
||||
width="16" height="16"
|
||||
src="img/enter_icon.png" class="searchSubmitIcon">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="graphManagementDropdown2" class="headerDropdown">
|
||||
|
||||
<div id="graphManagementDropdown" class="dropdownInner">
|
||||
<ul>
|
||||
<li class="nav-header">Sorting</li>
|
||||
|
||||
<li><a href="#">
|
||||
<label class="checkbox checkboxLabel">
|
||||
<input class="css-checkbox" type="checkbox" id="sortName">
|
||||
<label class="css-label css-label-round"></label>Sort by ?
|
||||
</label>
|
||||
</a></li>
|
||||
|
||||
<li><a href="#">
|
||||
<label class="checkbox checkboxLabel">
|
||||
<input class="css-checkbox" type="checkbox" id="sortType">
|
||||
<label class="css-label css-label-round"></label>Sort by ?
|
||||
</label>
|
||||
</a></li>
|
||||
|
||||
<li><a href="#">
|
||||
<label class="checkbox checkboxLabel">
|
||||
<input class="css-checkbox" type="checkbox" id="sortOrder">
|
||||
<label class="css-label"></label>Sort descending
|
||||
</label>
|
||||
</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="contentDiv" id="arangoCollectionsContainer">
|
||||
<div class="containerdivNewLine"/>
|
||||
<ul id="graphManagementThumbnailsIn" class="tileList">
|
||||
<li class="tile">
|
||||
<a href="#" id="createGraph" class="add">
|
||||
<span id="newGraph" class="pull-left icon_arangodb_roundplus arangoicon add-Icon"/>
|
||||
Add Graph
|
||||
</a>
|
||||
</li>
|
||||
|
||||
|
||||
<% graphs.forEach(function(graph) {
|
||||
var graphName = graph.get("_key");
|
||||
%>
|
||||
|
||||
<li class="tile">
|
||||
<div class="iconSet">
|
||||
<span class="icon_arangodb_settings2 editGraph" id="<%=graphName %>_settings" alt="Edit graph" title="Edit graph"></span>
|
||||
<span class="icon_arangodb_info" id="<%=graphName %>_info" alt="Show graph properties" title="Show graph properties"></span>
|
||||
</div>
|
||||
<span class="icon_arangodb_edge5 tile-icon"></span>
|
||||
<div class="tileBadge">
|
||||
</div>
|
||||
|
||||
<h5 class="collectionName"><%=graphName %></h5>
|
||||
</li>
|
||||
<%});%>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="editGraphModal" class="modal hide fade createModalDialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display:none">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||||
<a class="arangoHeader">Edit Graph</a>
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
<table>
|
||||
<tr>
|
||||
<th>Name:</th>
|
||||
<th id="editGraphName"></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Vertices:</th>
|
||||
<th id="editVertices"></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Edges:</th>
|
||||
<th id="editEdges"></th>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="button-close" data-dismiss="modal" aria-hidden="true">Close</button>
|
||||
<button id="deleteGraph" class="button-danger pull-right">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="infoGraphModal" class="modal hide fade createModalDialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display:none">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||||
<a class="arangoHeader">Graph properties</a>
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
<table>
|
||||
<tr>
|
||||
<th>Name:</th>
|
||||
<th id="infoGraphName"></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Vertices:</th>
|
||||
<th id="infoVertices"></th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Edges:</th>
|
||||
<th id="infoEdges"></th>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="button-close" data-dismiss="modal" aria-hidden="true">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</script>
|
|
@ -1,4 +1,7 @@
|
|||
<script id="manageGraphsView.ejs" type="text/template">
|
||||
|
||||
|
||||
|
||||
<script id="graphManagementView1.ejs" type="text/template">
|
||||
<div class="headerBar">
|
||||
<div class="pull-left">
|
||||
<a class="arangoHeader">Manage Graphs</a>
|
|
@ -12,12 +12,16 @@
|
|||
currentDB: "",
|
||||
|
||||
events: {
|
||||
"click #createDatabase" : "createDatabase",
|
||||
"click #submitCreateDatabase" : "submitCreateDatabase",
|
||||
"click #selectDatabase" : "updateDatabase",
|
||||
"click #databaseTable .icon_arangodb_roundminus" : "removeDatabase",
|
||||
"click #submitDeleteDatabase" : "submitRemoveDatabase",
|
||||
"click .contentRowInactive a" : "changeDatabase"
|
||||
"click #createDatabase" : "createDatabase",
|
||||
"click #submitCreateDatabase" : "submitCreateDatabase",
|
||||
"click .editDatabase" : "editDatabase",
|
||||
"click .icon" : "editDatabase",
|
||||
"click #selectDatabase" : "updateDatabase",
|
||||
"click #deleteDatabase" : "deleteDatabase",
|
||||
"click #submitDeleteDatabase" : "submitDeleteDatabase",
|
||||
"click .contentRowInactive a" : "changeDatabase",
|
||||
"keyup #databaseSearchInput" : "search",
|
||||
"click #databaseSearchSubmit" : "search"
|
||||
},
|
||||
|
||||
initialize: function() {
|
||||
|
@ -26,20 +30,15 @@
|
|||
|
||||
render: function(){
|
||||
this.currentDatabase();
|
||||
$(this.el).html(this.template.render({}));
|
||||
this.renderTable();
|
||||
this.selectCurrentDatabase();
|
||||
return this;
|
||||
},
|
||||
this.collection.sort();
|
||||
|
||||
renderTable: function () {
|
||||
this.collection.forEach(function(dbs) {
|
||||
$("#databaseTable tbody").append(
|
||||
'<tr><td><a id="' + dbs.get("name") + '">' + dbs.get("name") + '</a></td>' +
|
||||
'<td><span class="arangoicon icon_arangodb_roundminus"' +
|
||||
'data-original-title="Delete database"></span></td></tr>'
|
||||
);
|
||||
});
|
||||
$(this.el).html(this.template.render({
|
||||
collection : this.collection,
|
||||
searchString : '',
|
||||
currentDB : this.currentDB
|
||||
}));
|
||||
this.replaceSVGs();
|
||||
return this;
|
||||
},
|
||||
|
||||
selectedDatabase: function () {
|
||||
|
@ -105,47 +104,43 @@
|
|||
self.handleError(err.status, err.statusText, name);
|
||||
},
|
||||
success: function(data) {
|
||||
self.hideModal();
|
||||
self.hideModal('createDatabaseModal');
|
||||
self.updateDatabases();
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
hideModal: function() {
|
||||
$('#createDatabaseModal').modal('hide');
|
||||
hideModal: function(modal) {
|
||||
$('#' + modal).modal('hide');
|
||||
},
|
||||
|
||||
showModal: function() {
|
||||
$('#createDatabaseModal').modal('show');
|
||||
showModal: function(modal) {
|
||||
$('#' + modal).modal('show');
|
||||
},
|
||||
|
||||
createDatabase: function() {
|
||||
this.showModal();
|
||||
createDatabase: function(e) {
|
||||
e.preventDefault();
|
||||
this.showModal('createDatabaseModal');
|
||||
},
|
||||
|
||||
submitRemoveDatabase: function(e) {
|
||||
submitDeleteDatabase: function(e) {
|
||||
var toDelete = this.collection.where({name: this.dbToDelete});
|
||||
toDelete[0].destroy({wait: true, url:"/_api/database/"+this.dbToDelete});
|
||||
this.dbToDelete = '';
|
||||
$('#deleteDatabaseModal').modal('hide');
|
||||
this.hideModal('deleteDatabaseModal');
|
||||
this.updateDatabases();
|
||||
},
|
||||
|
||||
removeDatabase: function(e) {
|
||||
this.dbToDelete = $(e.currentTarget).parent().parent().children().first().text();
|
||||
$('#deleteDatabaseModal').modal('show');
|
||||
deleteDatabase: function(e) {
|
||||
this.hideModal('editDatabaseModal');
|
||||
this.dbToDelete = $('#editDatabaseName').html();
|
||||
this.showModal('deleteDatabaseModal')
|
||||
},
|
||||
|
||||
currentDatabase: function() {
|
||||
this.currentDB = this.collection.getCurrentDatabase();
|
||||
},
|
||||
|
||||
selectCurrentDatabase: function() {
|
||||
$('#databaseTableBody tr').addClass('contentRowInactive');
|
||||
var tr = $('#databaseTableBody td:contains('+this.currentDB+')').parent();
|
||||
$(tr).removeClass('contentRowInactive').addClass('contentRowActive');
|
||||
},
|
||||
|
||||
changeDatabase: function(e) {
|
||||
var changeTo = $(e.currentTarget).attr("id");
|
||||
var url = this.collection.createDatabaseURL(changeTo);
|
||||
|
@ -160,7 +155,66 @@
|
|||
window.App.handleSelectDatabase();
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
editDatabase: function(e) {
|
||||
var dbName = $(e.currentTarget).attr("id");
|
||||
$('#editDatabaseName').html(dbName);
|
||||
var button = $('#deleteDatabase');
|
||||
if(dbName === this.currentDB) {
|
||||
var element
|
||||
button.prop('disabled', true);
|
||||
button.removeClass('button-danger');
|
||||
button.addClass('button-neutral');
|
||||
} else {
|
||||
button.prop('disabled', false);
|
||||
button.removeClass('button-neutral');
|
||||
button.addClass('button-danger');
|
||||
}
|
||||
this.showModal('editDatabaseModal');
|
||||
},
|
||||
|
||||
search: function() {
|
||||
var searchInput,
|
||||
searchString,
|
||||
strLength,
|
||||
reducedCollection;
|
||||
|
||||
searchInput = $('#databaseSearchInput');
|
||||
searchString = $("#databaseSearchInput").val();
|
||||
reducedCollection = this.collection.filter(
|
||||
function(u) {
|
||||
return u.get("name").indexOf(searchString) !== -1;
|
||||
}
|
||||
);
|
||||
$(this.el).html(this.template.render({
|
||||
collection : reducedCollection,
|
||||
searchString : searchString
|
||||
}));
|
||||
|
||||
//after rendering, get the "new" element
|
||||
searchInput = $('#databaseSearchInput');
|
||||
//set focus on end of text in input field
|
||||
strLength= searchInput.val().length;
|
||||
searchInput.focus();
|
||||
searchInput[0].setSelectionRange(strLength, strLength);
|
||||
},
|
||||
|
||||
replaceSVGs: function() {
|
||||
$(".svgToReplace").each(function() {
|
||||
var img = $(this);
|
||||
var id = img.attr("id");
|
||||
var src = img.attr("src");
|
||||
$.get(src, function(d) {
|
||||
var svg = $(d).find("svg");
|
||||
svg.attr("id", id)
|
||||
.attr("class", "tile-icon-svg")
|
||||
.removeAttr("xmlns:a");
|
||||
img.replaceWith(svg);
|
||||
}, "xml");
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
}());
|
||||
|
|
|
@ -6,19 +6,25 @@
|
|||
|
||||
window.GraphManagementView = Backbone.View.extend({
|
||||
el: '#content',
|
||||
template: templateEngine.createTemplate("manageGraphsView.ejs"),
|
||||
template: templateEngine.createTemplate("graphManagementView.ejs"),
|
||||
|
||||
events: {
|
||||
"click .deleteButton": "deleteGraph",
|
||||
"click #addGraphButton": "addNewGraph"
|
||||
"click #deleteGraph" : "deleteGraph",
|
||||
"click .icon_arangodb_settings2" : "editGraph",
|
||||
"click .icon_arangodb_info" : "info",
|
||||
"click #createGraph" : "addNewGraph",
|
||||
"keyup #graphManagementSearchInput" : "search",
|
||||
"click #graphManagementSearchSubmit" : "search"
|
||||
},
|
||||
|
||||
addNewGraph: function() {
|
||||
addNewGraph: function(e) {
|
||||
e.preventDefault();
|
||||
window.App.navigate("graphManagement/add", {trigger: true});
|
||||
},
|
||||
|
||||
deleteGraph: function(e) {
|
||||
var key = $(e.target).closest("a").attr("id");
|
||||
$('#editGraphModal').modal('hide');
|
||||
var key = this.graphToEdit;
|
||||
window.App.navigate("graphManagement/delete/" + key, {trigger: true});
|
||||
},
|
||||
|
||||
|
@ -27,10 +33,65 @@
|
|||
async: false
|
||||
});
|
||||
$(this.el).html(this.template.render({
|
||||
graphs: this.collection
|
||||
graphs: this.collection,
|
||||
searchString : ''
|
||||
}));
|
||||
return this;
|
||||
},
|
||||
|
||||
editGraph : function(e) {
|
||||
this.collection.fetch();
|
||||
this.graphToEdit = this.evaluateGraphName($(e.currentTarget).attr("id"), '_settings');
|
||||
$('#editGraphModal').modal('show');
|
||||
var graph = this.collection.findWhere({_key: this.graphToEdit});
|
||||
$('#editGraphName').html(this.graphToEdit);
|
||||
$('#editVertices').html(graph.get("vertices"));
|
||||
$('#editEdges').html(graph.get("edges"));
|
||||
},
|
||||
|
||||
info : function(e) {
|
||||
this.collection.fetch();
|
||||
$('#infoGraphModal').modal('show');
|
||||
var graph = this.collection.findWhere(
|
||||
{_key: this.evaluateGraphName($(e.currentTarget).attr("id"), '_info')}
|
||||
);
|
||||
$('#infoGraphName').html(graph.get('_key'));
|
||||
$('#infoVertices').html(graph.get('vertices'));
|
||||
$('#infoEdges').html(graph.get('edges'));
|
||||
},
|
||||
|
||||
evaluateGraphName : function(str, substr) {
|
||||
var index = str.lastIndexOf(substr);
|
||||
return str.substring(0, index);
|
||||
},
|
||||
|
||||
search: function() {
|
||||
var searchInput,
|
||||
searchString,
|
||||
strLength,
|
||||
reducedCollection;
|
||||
|
||||
searchInput = $('#graphManagementSearchInput');
|
||||
searchString = $("#graphManagementSearchInput").val();
|
||||
reducedCollection = this.collection.filter(
|
||||
function(u) {
|
||||
return u.get("_key").indexOf(searchString) !== -1;
|
||||
}
|
||||
);
|
||||
$(this.el).html(this.template.render({
|
||||
graphs : reducedCollection,
|
||||
searchString : searchString
|
||||
}));
|
||||
|
||||
//after rendering, get the "new" element
|
||||
searchInput = $('#graphManagementSearchInput');
|
||||
//set focus on end of text in input field
|
||||
strLength= searchInput.val().length;
|
||||
searchInput.focus();
|
||||
searchInput[0].setSelectionRange(strLength, strLength);
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
|
||||
}());
|
||||
|
|
|
@ -18,7 +18,7 @@ $c_notification: #FAA020;
|
|||
$c_notification_hover: #F87C0F;
|
||||
|
||||
$c_inactive: lightgrey;
|
||||
$c_inactive_hover: grey;
|
||||
$c_inactive_hover: grey;
|
||||
|
||||
$c_header_btn_bg: #DDDDDD;
|
||||
$c_header_btn_fg: #555555;
|
||||
|
@ -53,3 +53,5 @@ $c_navBarSpacerShadow : #C8C8C8;
|
|||
$c_btn_inverse : #736B68;
|
||||
|
||||
$c_notification_red: #CC0000;
|
||||
|
||||
$c_icon_grey: #686766;
|
||||
|
|
|
@ -52,6 +52,19 @@ li.tile {
|
|||
}
|
||||
}
|
||||
|
||||
svg.tile-icon-svg {
|
||||
margin-top: 10px;
|
||||
height: $iconSize;
|
||||
width: $iconSize;
|
||||
fill: $c_icon_grey;
|
||||
}
|
||||
|
||||
span.tile-icon {
|
||||
line-height: 1.2;
|
||||
font-size: $iconSize;
|
||||
color: $c_icon_grey;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 12px;
|
||||
white-space: nowrap !important;
|
||||
|
|
|
@ -547,6 +547,15 @@ li.tile, li.bigtile {
|
|||
li.tile a svg.icon, li.bigtile a svg.icon {
|
||||
height: 50px;
|
||||
width: 50px; }
|
||||
li.tile svg.tile-icon-svg, li.bigtile svg.tile-icon-svg {
|
||||
margin-top: 10px;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
fill: #686766; }
|
||||
li.tile span.tile-icon, li.bigtile span.tile-icon {
|
||||
line-height: 1.2;
|
||||
font-size: 50px;
|
||||
color: #686766; }
|
||||
li.tile h5, li.bigtile h5 {
|
||||
font-size: 12px;
|
||||
white-space: nowrap !important;
|
||||
|
|
Loading…
Reference in New Issue