Stub for nodes add/remove dialog
This commit is contained in:
parent
e092991513
commit
d093fafd97
|
@ -35,7 +35,6 @@ behavior: url(css/pie.htc);
|
|||
|
||||
.roles {
|
||||
display: block;
|
||||
max-height: 74px;
|
||||
height: 74px;
|
||||
overflow: auto;
|
||||
overflow-y: none;
|
||||
|
|
|
@ -1,11 +1,11 @@
|
|||
define(
|
||||
[
|
||||
'text!templates/cluster/add_remove_nodes_dialog.html',
|
||||
'views/node_dialog',
|
||||
'text!templates/cluster/list.html',
|
||||
'text!templates/cluster/info.html',
|
||||
'text!templates/cluster/node.html'
|
||||
],
|
||||
function(addRemoveNodesDialogTemplate, clusterListTemplate, clusterInfoTemplate, clusterNodeTemplate) {
|
||||
function(nodeDialogViews, clusterListTemplate, clusterInfoTemplate, clusterNodeTemplate) {
|
||||
var views = {}
|
||||
|
||||
views.ClusterInfo = Backbone.View.extend({
|
||||
|
@ -15,12 +15,8 @@ function(addRemoveNodesDialogTemplate, clusterListTemplate, clusterInfoTemplate,
|
|||
'click .js-add-nodes': 'addRemoveNodes'
|
||||
},
|
||||
addRemoveNodes: function(e) {
|
||||
e.preventDefault();
|
||||
var dialog = $(_.template(addRemoveNodesDialogTemplate)({header: 'Test'}));
|
||||
dialog.on('hidden', function() {
|
||||
$(this).remove();
|
||||
});
|
||||
dialog.modal();
|
||||
e && e.preventDefault();
|
||||
(new nodeDialogViews.nodeDialog({model: this.model})).render();
|
||||
},
|
||||
initialize: function() {
|
||||
this.model.bind('change', this.render, this);
|
||||
|
|
|
@ -13,7 +13,7 @@ function(navbarTemplate, breadcrumbTemplate) {
|
|||
this.elements = _.isArray(options.elements) ? options.elements : [];
|
||||
},
|
||||
setActive: function(element) {
|
||||
this.$('.nav > li').removeClass('active');
|
||||
this.$('.nav > li.active').removeClass('active');
|
||||
this.$('a[href="#' + element + '"]').parent().addClass('active');
|
||||
},
|
||||
render: function() {
|
||||
|
|
|
@ -0,0 +1,37 @@
|
|||
define(
|
||||
[
|
||||
'text!templates/node_dialog/dialog.html',
|
||||
'text!templates/node_dialog/dialog_node_list.html'
|
||||
],
|
||||
function(nodeDialogTemplate, nodeDialogNodeListTemplate) {
|
||||
var views = {}
|
||||
|
||||
views.nodeDialog = Backbone.View.extend({
|
||||
className: 'modal fade',
|
||||
template: _.template(nodeDialogTemplate),
|
||||
events: {
|
||||
'click .js-save-changes': 'saveChanges'
|
||||
},
|
||||
saveChanges: function(e) {
|
||||
e && e.preventDefault();
|
||||
this.$el.modal('hide');
|
||||
},
|
||||
render: function() {
|
||||
this.$el.html(this.template());
|
||||
this.$('.cluster-nodes').html(new views.nodeDialogNodeList({model: this.model.get('nodes')}).render().el);
|
||||
this.$el.on('hidden', function() {$(this).remove()});
|
||||
this.$el.modal();
|
||||
return this;
|
||||
}
|
||||
});
|
||||
|
||||
views.nodeDialogNodeList = Backbone.View.extend({
|
||||
template: _.template(nodeDialogNodeListTemplate),
|
||||
render: function() {
|
||||
this.$el.html(this.template({nodes: this.model}));
|
||||
return this;
|
||||
}
|
||||
});
|
||||
|
||||
return views;
|
||||
});
|
|
@ -1,13 +0,0 @@
|
|||
<div class="modal hide fade">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal">×</button>
|
||||
<h3><%= header %></h3>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
One fine body…
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a href="#" class="btn" data-dismiss="modal">Close</a>
|
||||
<a href="#" class="btn btn-primary">Save changes</a>
|
||||
</div>
|
||||
</div>
|
|
@ -0,0 +1,23 @@
|
|||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal">×</button>
|
||||
<h3>Add nodes</h3>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<h3>Cluster Nodes</h3>
|
||||
<div class="cluster-nodes">
|
||||
</div>
|
||||
<hr>
|
||||
<h3>Available Nodes</h3>
|
||||
<div class="row-fluid available-nodes">
|
||||
<div class="span4"></div>
|
||||
<div class="span4">
|
||||
<div class="progress progress-striped progress-success active">
|
||||
<div class="bar" style="width: 100%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a href="#" class="btn" data-dismiss="modal">Close</a>
|
||||
<a href="#" class="btn btn-success js-save-changes">Save changes</a>
|
||||
</div>
|
|
@ -0,0 +1,24 @@
|
|||
<% if (nodes.length) { %>
|
||||
<% var count = 0 %>
|
||||
<div class="row-fluid">
|
||||
<% nodes.each(function(node) { %>
|
||||
<div class="span3">
|
||||
<div class="node_check">
|
||||
<i class="icon-ok icon-white"></i>
|
||||
<div class="article"><%= node.get('id') %></div>
|
||||
<ul>
|
||||
<li>CPU: X</li>
|
||||
<li>HDD: X TB</li>
|
||||
<li>RAM: X GB</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<% count++ %>
|
||||
<% if (!(count % 4)) { %>
|
||||
</div><div class="row-fluid">
|
||||
<% } %>
|
||||
<% }) %>
|
||||
</div>
|
||||
<% } else { %>
|
||||
There are no nodes.
|
||||
<% } %>
|
Loading…
Reference in New Issue