Stub for nodes add/remove dialog

This commit is contained in:
Vitaly Kramskikh 2012-06-14 19:29:19 +04:00
parent e092991513
commit d093fafd97
7 changed files with 89 additions and 23 deletions

View File

@ -35,7 +35,6 @@ behavior: url(css/pie.htc);
.roles {
display: block;
max-height: 74px;
height: 74px;
overflow: auto;
overflow-y: none;

View File

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

View File

@ -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() {

View File

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

View File

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

View File

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

View File

@ -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.
<% } %>