Add a function to select all checkboxes. rockstor#1196

priyaganti · Apr 19, 2016 · ae29fa8 · ae29fa8
1 parent d088658
commit ae29fa8
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 48 deletions.
diff --git a/src/rockstor/storageadmin/static/storageadmin/js/templates/common/disks_table.jst b/src/rockstor/storageadmin/static/storageadmin/js/templates/common/disks_table.jst
@@ -1,11 +1,11 @@
-<table id="disks-select-table" class="table table-condensed table-bordered table-hover table-striped share-table tablesorter" summary="List of disks">
+<table id="disks-select-table" class="table table-condensed table-bordered share-table tablesorter" summary="List of disks">
   <thead>
     <tr>
       <th>No.</th>
       <th>Name</th>
       <th>Size</th>
       <th>In use</th>
-      <th></th>
+      <th>Select All <input type="checkbox" id="checkAll"/></th>
     </tr>
   </thead>
   <tbody>

diff --git a/src/rockstor/storageadmin/static/storageadmin/js/views/pool/resize/add_disks.js b/src/rockstor/storageadmin/static/storageadmin/js/views/pool/resize/add_disks.js
@@ -27,6 +27,11 @@
 
 PoolAddDisks = RockstorWizardPage.extend({
 
+	events:{
+		"click #checkAll": "selectAllCheckboxes",
+		'click [class="diskname"]': 'clickCheckbox',
+	},
+
 	initialize: function() {
 		this.disks = new DiskCollection();
 		this.disks.setPageSize(100);
@@ -50,6 +55,19 @@ PoolAddDisks = RockstorWizardPage.extend({
 		this.$('#ph-disks-table').html(this.disks_template({disks: disks}));
 	},
 
+	selectAllCheckboxes: function(event){
+		$("#checkAll").change(function () {
+			$("input:checkbox").prop('checked',  $(this).prop("checked"));
+			$("input:checkbox").closest("tr").toggleClass("row-highlight", this.checked);
+		});
+	},
+
+	clickCheckbox: function (event) {
+		$("input:checkbox").change(function() {
+			$(this).closest("tr").toggleClass("row-highlight", this.checked);
+		});
+	},
+
 	save: function() {
 		var _this = this;
 		var checked = this.$(".diskname:checked").length;

diff --git a/src/rockstor/storageadmin/static/storageadmin/js/views/pool/resize/remove_disks.js b/src/rockstor/storageadmin/static/storageadmin/js/views/pool/resize/remove_disks.js
@@ -25,57 +25,74 @@
  */
 
 PoolRemoveDisks = RockstorWizardPage.extend({
+	events:{
+		"click #checkAll": "selectAllCheckboxes",
+		'click [class="diskname"]': 'clickCheckbox',
+	},
 
-    initialize: function() {
-	this.disks = new DiskCollection();
-	this.disks.setPageSize(100);
-	this.template = window.JST.pool_resize_remove_disks;
-	this.disks_template = window.JST.common_disks_table;
-	RockstorWizardPage.prototype.initialize.apply(this, arguments);
-	this.disks.on('reset', this.renderDisks, this);
-	this.initHandlebarHelpers();
-    },
+	initialize: function() {
+		this.disks = new DiskCollection();
+		this.disks.setPageSize(100);
+		this.template = window.JST.pool_resize_remove_disks;
+		this.disks_template = window.JST.common_disks_table;
+		RockstorWizardPage.prototype.initialize.apply(this, arguments);
+		this.disks.on('reset', this.renderDisks, this);
+		this.initHandlebarHelpers();
+	},
 
-    render: function() {
-	RockstorWizardPage.prototype.render.apply(this, arguments);
-	this.disks.fetch();
-	return this;
-    },
+	render: function() {
+		RockstorWizardPage.prototype.render.apply(this, arguments);
+		this.disks.fetch();
+		return this;
+	},
 
-    renderDisks: function() {
-	var disks = this.disks.filter(function(disk) {
-	    return disk.get('pool_name') == this.model.get('pool').get('name');
-	}, this);
-	this.$('#ph-disks-table').html(this.disks_template({disks: disks}));
-    },
+	renderDisks: function() {
+		var disks = this.disks.filter(function(disk) {
+			return disk.get('pool_name') == this.model.get('pool').get('name');
+		}, this);
+		this.$('#ph-disks-table').html(this.disks_template({disks: disks}));
+	},
 
-    save: function() {
-	var _this = this;
-	var checked = this.$(".diskname:checked").length;
-	var diskNames = [];
-	this.$(".diskname:checked").each(function(i) {
-	    diskNames.push($(this).val());
-	});
-	this.model.set('diskNames', diskNames);
-	return $.Deferred().resolve();
-    },
-
-    initHandlebarHelpers: function(){
-    Handlebars.registerHelper('display_disksToAdd', function(){
-		var html = '';
-		_.each(this.disks, function(disk, index) {
-			var diskName = disk.get('name');
-			html += '<tr>';
-			html += '<td>' + (index+1) + '</td>';
-			html += '<td>' + diskName + '</td>';
-			html += '<td>' + humanize.filesize(disk.get('size')*1024) + '</td>';
-			html += '<td>' + disk.get('parted') + '</td>';
-			html += '<td><input type="checkbox" name="diskname" id="' + diskName + '" value="' + diskName + '" class="diskname"></td>';
-			html += '</tr>';
+	selectAllCheckboxes: function(event){
+		$("#checkAll").change(function () {
+			$("input:checkbox").prop('checked',  $(this).prop("checked"));
+			$("input:checkbox").closest("tr").toggleClass("row-highlight", this.checked);
 		});
-		return new Handlebars.SafeString(html);
-	});
+	},
 
-}
+	clickCheckbox: function (event) {
+		$("input:checkbox").change(function() {
+			$(this).closest("tr").toggleClass("row-highlight", this.checked);
+		});
+	},
+
+	save: function() {
+		var _this = this;
+		var checked = this.$(".diskname:checked").length;
+		var diskNames = [];
+		this.$(".diskname:checked").each(function(i) {
+			diskNames.push($(this).val());
+		});
+		this.model.set('diskNames', diskNames);
+		return $.Deferred().resolve();
+	},
+
+	initHandlebarHelpers: function(){
+		Handlebars.registerHelper('display_disksToAdd', function(){
+			var html = '';
+			_.each(this.disks, function(disk, index) {
+				var diskName = disk.get('name');
+				html += '<tr>';
+				html += '<td>' + (index+1) + '</td>';
+				html += '<td>' + diskName + '</td>';
+				html += '<td>' + humanize.filesize(disk.get('size')*1024) + '</td>';
+				html += '<td>' + disk.get('parted') + '</td>';
+				html += '<td><input type="checkbox" name="diskname" id="' + diskName + '" value="' + diskName + '" class="diskname"></td>';
+				html += '</tr>';
+			});
+			return new Handlebars.SafeString(html);
+		});
+
+	}
 
 });