1
0
Fork 0

added missing web interface files

This commit is contained in:
Jan Steemann 2013-11-07 18:49:54 +01:00
parent 5510a4abc2
commit a9d586a354
7 changed files with 476 additions and 0 deletions

View File

@ -0,0 +1,98 @@
#databaseDiv {
background-color: rgba(0,0,0,0.15);
padding: 5px;
}
.databaseButtons {
clear:both;
width: 100%;
}
.databaseButtons #createDatabase {
margin-left: 0;
}
.databaseButtons {
margin-bottom: 10px;
}
#databaseTable thead {
text-align: left;
}
#databaseTable thead tr {
border-bottom: 1px solid #C2C2C2;
background-color: #FFFFFF !important;
}
#databaseTable {
width: 100%;
margin-bottom: 10px;
}
#databaseTable .dbThFirst {
width: 90%;
}
#databaseTable .dbThSecond {
width: 10%;
}
#databaseTable td.dbThSecond span {
color: #8AA050;
}
#databaseTable td span {
float: right;
color: #B30000;
font-size: 18px;
}
#databaseTable td {
padding:12px 18px;
}
#databaseTable tr:nth-child(odd) {
background-color: #F1F0EE;
}
#databaseTable tr:nth-child(even) {
background-color: #FFFFFF;
}
#createDatabaseModal table {
width: 100%;
}
#databaseTable .collectionThSec {
width: 80%;
margin-right: 0;
}
#databaseTable .collectionTh {
width: 5%;
margin-right: 0;
}
.databaseActive {
background-color: #BDCC92 !important;
font-weight: 400;
}
.databaseActive a {
color: black !important;
}
.databaseActive span {
display:none;
}
.databaseInactive a {
color: black !important;
}
.databaseInactive a:hover {
font-weight: 400;
color: black !important;
cursor: pointer;
}

View File

@ -37,6 +37,9 @@ window.arangoCollections = Backbone.Collection.extend({
else if (status === 5) {
returnString = 'deleted';
}
else if (status === 6) {
returnString = 'loading';
}
return returnString;
},
translateTypePicture : function (type) {

View File

@ -0,0 +1,94 @@
/*jslint indent: 2, nomen: true, maxlen: 100, sloppy: true, vars: true, white: true, plusplus: true */
/*global window, Backbone, $, window, _*/
(function() {
window.ArangoDatabase = Backbone.Collection.extend({
model: window.Database,
comparator: "name",
sync: function(method, model, options) {
'use strict';
if (method === "read") {
options.url = model.url() + "user";
}
return Backbone.sync(method, model, options);
},
url: function() {
return '/_api/database/';
},
parse: function(response) {
return _.map(response.result, function(v) {
return {name:v};
});
},
initialize: function() {
var self = this;
this.fetch().done(function() {
self.sort();
});
},
getDatabases: function() {
var self = this;
this.fetch().done(function() {
self.sort();
});
return this.models;
},
createDatabaseURL: function(name, protocol, port) {
var loc = window.location;
var hash = window.location.hash;
if (protocol) {
if (protocol === "SSL" || protocol === "https:") {
protocol = "https:";
} else {
protocol = "http:";
}
} else {
protocol = loc.protocol;
}
port = port || loc.port;
var url = protocol
+ "//"
+ window.location.hostname
+ ":"
+ port
+ "/_db/"
+ encodeURIComponent(name)
+ "/_admin/aardvark/index.html";
if (hash) {
url += hash;
}
return url;
},
getCurrentDatabase: function() {
var returnVal;
$.ajax({
type: "GET",
cache: false,
url: "/_api/database/current",
contentType: "application/json",
processData: false,
async: false,
success: function(data) {
if (data.code === 200) {
returnVal = data.result.name;
return;
}
returnVal = data;
},
error: function(data) {
returnVal = data;
}
});
return returnVal;
}
});
}());

View File

@ -0,0 +1,30 @@
/*jslint indent: 2, nomen: true, maxlen: 120, vars: true, white: true, plusplus: true */
/*global require, window, Backbone */
window.Database = Backbone.Model.extend({
idAttribute: "name",
initialize: function () {
'use strict';
},
isNew: function() {
'use strict';
return false;
},
sync: function(method, model, options) {
'use strict';
if (method === "update") {
method = "create";
}
return Backbone.sync(method, model, options);
},
url: "/_api/database",
defaults: {
}
});

View File

@ -0,0 +1,71 @@
<ul class="thumbnails2" id="databaseHeader">
<div id="transparentHeader">
<a class="arangoHeader">Databases</a>
</div>
</ul>
<div id="databaseDiv">
<table id="databaseTable">
<thead>
<tr>
<td class="dbThFirst">Name</td>
<td class="dbThSecond">
<span id="createDatabase" class="glyphicon glyphicon-plus-sign" data-original-title="Create a database"></span>
</td>
</tr>
</thead>
<tbody id="databaseTableBody">
</tbody>
</table>
</div>
<div id="createDatabaseModal" 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">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="btn btn-close" data-dismiss="modal" aria-hidden="true">Close</button>
<button id="submitCreateDatabase" class="btn btn-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>
<div class="modal-body">
<table>
<tr>
<th>Really delete?</th>
<th></th>
</tr>
</table>
</div>
<div class="modal-footer">
<button class="btn btn-close" data-dismiss="modal" aria-hidden="true">Close</button>
<button id="submitDeleteDatabase" class="btn btn-danger pull-right">Delete</button>
</div>
</div>

View File

@ -0,0 +1,16 @@
<%
if (list.length > 1) {
%>
<select id="dbSelectionList">
<%
list.each(function(o) {
var i = o.get("name");
%>
<option id=<%=i%> <%=i===current?"selected":""%>><%=i%></option>
<%
});
%>
</select>
<%
}
%>

View File

@ -0,0 +1,164 @@
/*jslint indent: 2, nomen: true, maxlen: 100, sloppy: true, vars: true, white: true, plusplus: true */
/*global window, document, Backbone, EJS, SwaggerUi, hljs, $, arangoHelper */
window.databaseView = Backbone.View.extend({
el: '#content',
template: new EJS({url: 'js/templates/databaseView.ejs'}),
currentDB: "",
events: {
"click #createDatabase" : "createDatabase",
"click #submitCreateDatabase" : "submitCreateDatabase",
"click #selectDatabase" : "updateDatabase",
"click #databaseTable .glyphicon-minus-sign" : "removeDatabase",
"click #submitDeleteDatabase" : "submitRemoveDatabase",
"click .databaseInactive a" : "changeDatabase"
},
initialize: function() {
var self = this;
this.collection.fetch({async:false});
},
render: function(){
this.currentDatabase();
$(this.el).html(this.template.render({}));
this.renderTable();
this.selectCurrentDatabase();
return this;
},
renderTable: function () {
this.collection.map(function(dbs) {
$("#databaseTable tbody").append(
'<tr><td><a>' + dbs.get("name") + '</a></td>' +
'<td><span class="glyphicon glyphicon-minus-sign"' +
'data-original-title="Delete database"></span></td></tr>'
);
});
},
selectedDatabase: function () {
return $('#selectDatabases').val();
},
handleError: function(status, text, dbname) {
if (status === 409) {
arangoHelper.arangoError("Database " + dbname + " already exists.");
return;
}
if (status === 400) {
arangoHelper.arangoError("Invalid Parameters");
return;
}
if (status === 403) {
arangoHelper.arangoError("Insufficent rights. Execute this from _system database");
return;
}
},
validateDatabaseInfo: function (db, user, pw) {
if (user === "") {
arangoHelper.arangoError("You have to define an owner for the new database");
return false;
}
if (db === "") {
arangoHelper.arangoError("You have to define a name for the new database");
return false;
}
if (db.indexOf("_") === 0) {
arangoHelper.arangoError("Databasename should not start with _");
return false;
}
if (!db.match(/^[a-zA-Z][a-zA-Z0-9_\-]*$/)) {
arangoHelper.arangoError("Databasename may only contain numbers, letters, _ and -");
return false;
}
return true;
},
submitCreateDatabase: function() {
var self = this;
var name = $('#newDatabaseName').val();
var userName = $('#newUser').val();
var userPassword = $('#newPassword').val();
if (!this.validateDatabaseInfo(name, userName, userPassword)) {
return;
}
var options = {
name: name,
users: [
{
username: userName,
passwd: userPassword,
active: true
}
]
};
this.collection.create(options, {
wait:true,
error: function(data, err) {
self.handleError(err.status, err.statusText, name);
},
success: function(data) {
arangoHelper.arangoNotification("Database " + name + " created.");
self.hideModal();
self.updateDatabases();
}
});
},
hideModal: function() {
$('#createDatabaseModal').modal('hide');
},
showModal: function() {
$('#createDatabaseModal').modal('show');
},
createDatabase: function() {
this.showModal();
},
submitRemoveDatabase: function(e) {
var toDelete = this.collection.where({name: this.dbToDelete});
toDelete[0].destroy({wait: true, url:"/_api/database/"+this.dbToDelete});
arangoHelper.arangoNotification("Database " + this.dbToDelete + " deleted.");
this.dbToDelete = '';
$('#deleteDatabaseModal').modal('hide');
this.updateDatabases();
},
removeDatabase: function(e) {
this.dbToDelete = $(e.currentTarget).parent().parent().children().first().text();
$('#deleteDatabaseModal').modal('show');
},
currentDatabase: function() {
this.currentDB = this.collection.getCurrentDatabase();
},
selectCurrentDatabase: function() {
$('#databaseTableBody tr').addClass('databaseInactive');
var tr = $('#databaseTableBody td:contains('+this.currentDB+')').parent();
$(tr).removeClass('databaseInactive').addClass('databaseActive');
},
changeDatabase: function(e) {
var dbname = $(e.currentTarget).text();
var route = '/_db/' + encodeURIComponent(dbname) + '/_admin/aardvark/index.html#databases';
window.location = "http://"+window.location.host + route;
},
updateDatabases: function() {
var self = this;
this.collection.fetch({
success: function() {
self.render();
}
});
}
});