Enable configure tables to be scrollabe. Cleaned up code and added appropriate comments where needed.

git-svn-id: https://svn.code.sf.net/p/xcat/code/xcat-core/trunk@10489 8638fb3e-16cb-4fca-ae20-7b5d299a9bcd
2011-09-09 19:34:05 +00:00
parent 3345d3ad7c
commit a340b92ba4
4 changed files with 156 additions and 203 deletions
--- a/xCAT-UI/js/configure/configure.js
+++ b/xCAT-UI/js/configure/configure.js
@@ -191,7 +191,7 @@ function loadTable(data) {
 	$('#' + tabId).find('img').remove();

 	// Create info bar
-	var infoBar = createInfoBar('Click on a cell to edit.  Click outside the table to write to the cell.<br>Once you are satisfied with how the table looks, click on Save.');
+	var infoBar = createInfoBar('Click on a cell to edit. ddClick outside the table to write to the cell. Once you are satisfied with how the table looks, click on Save.');
 	$('#' + tabId).append(infoBar);

 	// Create action bar
@@ -287,82 +287,27 @@ function loadTable(data) {
 		});

 	// Turn table into datatable
-	dTable = $('#' + id + 'Datatable').dataTable();
-	setConfigDatatable(id + 'Datatable', dTable);
-
-	// Create add row button
-	var addBar = $('<div></div>');
-	$('#' + tabId).append(addBar);
-	var addRowBtn = createButton('Add row');
-	addBar.append(addRowBtn);
-
-	// Create save and undo buttons
-	var saveBtn = createButton('Save');
-	var undoBtn = createButton('Undo');
-	actionBar.append(saveBtn);
-	actionBar.append(undoBtn);
-
-	/**
-	 * Add row
-	 */
-	addRowBtn.bind('click',	function(event) {
-		// Create an empty row
-		var row = new Array();
-
-		/**
-		 * Remove button
-		 */
-		row.push('<span class="ui-icon ui-icon-close" onclick="deleteRow(this)"></span>');
-		for ( var i = 0; i < headers.length; i++) {
-			row.push('');
+	dTable = $('#' + id + 'Datatable').dataTable({
+		'iDisplayLength': 50,
+		'bLengthChange': false,
+		"sScrollX": "100%",
+		"bAutoWidth": true,
+		"fnInitComplete": function() {
+			
 		}
-
-		// Get tab ID
-		var tabId = $(this).parent().parent().attr('id');
-		// Get table name
-		var tableName = tabId.replace('Tab', '');
-		// Get table ID
-		var tableId = tableName + 'Datatable';
-
-		// Get datatable
-		var dTable = getConfigDatatable(tableId);
-		// Add the row to the data table
-		dTable.fnAddData(row);
-
-		// Enable editable columns (again)
-		// Do not make 1st column editable
-		$('#' + tabId + ' td:not(td:nth-child(1))').editable(
-			function(value, settings) {
-				// Get column index
-				var colPos = this.cellIndex;
-				// Get row index
-				var rowPos = dTable.fnGetPosition(this.parentNode);
-
-				// Update datatable
-				dTable.fnUpdate(value, rowPos, colPos);
-
-				return (value);
-			}, {
-				onblur : 'submit', // Clicking outside editable area submits changes
-				type : 'textarea',
-				placeholder: ' ',
-				height : '30px' // The height of the text area
-			});
 	});

-	/**
-	 * Save changes
-	 */
-	saveBtn.bind('click', function(event) {
-		// Get tab ID
-		var tabId = $(this).parent().parent().attr('id');
-		// Get table name
-		var tableName = tabId.replace('Tab', '');
-		// Get table ID
-		var tableId = tableName + 'Datatable';
-
+	// Create action bar
+	var actionBar = $('<div class="actionBar"></div>');
+	
+	var saveLnk = $('<a>Save</a>');
+	saveLnk.click(function() {
+		// Get table ID and name
+		var tableId = $(this).parents('.dataTables_wrapper').attr('id').replace('_wrapper', '');
+		var tableName = tableId.replace('Datatable', '');
+		
 		// Get datatable
-		var dTable = getConfigDatatable(tableId);
+		var dTable = $('#' + tableId).dataTable();
 		// Get the nodes from the table
 		var dRows = dTable.fnGetNodes();

@@ -390,9 +335,6 @@ function loadTable(data) {
 			}
 		}
 		
-		// Update datatable
-		setConfigDatatable(tableId, dTable);
-
 		// Update xCAT table
 		$.ajax( {
 			type : 'POST',
@@ -407,22 +349,15 @@ function loadTable(data) {
 			}
 		});
 	});
-
-	/**
-	 * Undo changes
-	 */
-	undoBtn.bind('click', function(event) {
-		// Get tab ID
-		var tabId = $(this).parent().parent().attr('id');
-		// Get table name
-		var tableName = tabId.replace('Tab', '');
+	
+	var undoLnk = $('<a>Undo</a>');
+	undoLnk.click(function() {
 		// Get table ID
-		var tableId = tableName + 'Datatable';
-
+		var tableId = $(this).parents('.dataTables_wrapper').attr('id').replace('_wrapper', '');
+		
 		// Get datatable
-		var dTable = getConfigDatatable(tableId);
-		// Get the nodes from the table
-
+		var dTable = $('#' + tableId).dataTable();
+		
 		// Clear entire datatable
 		dTable.fnClearTable();

@@ -451,6 +386,66 @@ function loadTable(data) {
 				height : '30px' // The height of the text area
 			});
 	});
+	
+	var addLnk = $('<a>Add row</a>');
+	addLnk.click(function() {
+		// Create an empty row
+		var row = new Array();
+
+		/**
+		 * Remove button
+		 */
+		row.push('<span class="ui-icon ui-icon-close" onclick="deleteRow(this)"></span>');
+		for ( var i = 0; i < headers.length; i++) {
+			row.push('');
+		}
+
+		// Get table ID and name
+		var tableId = $(this).parents('.dataTables_wrapper').attr('id').replace('_wrapper', '');
+		var tableName = tableId.replace('Datatable', '');
+		
+		// Get datatable
+		var dTable = $('#' + tableId).dataTable();
+		
+		// Add the row to the data table
+		dTable.fnAddData(row);
+
+		// Enable editable columns (again)
+		// Do not make 1st column editable
+		$('#' + tableId + ' td:not(td:nth-child(1))').editable(
+			function(value, settings) {
+				// Get column index
+				var colPos = this.cellIndex;
+				// Get row index
+				var rowPos = dTable.fnGetPosition(this.parentNode);
+
+				// Update datatable
+				dTable.fnUpdate(value, rowPos, colPos);
+
+				return (value);
+			}, {
+				onblur : 'submit', // Clicking outside editable area submits changes
+				type : 'textarea',
+				placeholder: ' ',
+				height : '30px' // The height of the text area
+			});
+	});
+	
+	// Actions
+	var actionsLnk = '<a>Actions</a>';
+	var actsMenu = createMenu([saveLnk, undoLnk, addLnk]);
+
+	// Create an action menu
+	var actionsMenu = createMenu([ [ actionsLnk, actsMenu ] ]);
+	actionsMenu.superfish();
+	actionsMenu.css('display', 'inline-block');
+	actionBar.append(actionsMenu);
+	
+	// Create a division to hold actions menu
+	var menuDiv = $('<div id="' + id + 'Datatable_menuDiv" class="menuDiv"></div>');
+	$('#' + id + 'Datatable_wrapper').prepend(menuDiv);
+	menuDiv.append(actionBar);	
+	$('#' + id + 'Datatable_filter').appendTo(menuDiv);
 }

 /**
@@ -462,10 +457,10 @@ function loadTable(data) {
 */
 function deleteRow(obj) {
 	// Get table ID
-	var tableId = $(obj).parent().parent().parent().parent().attr('id');
+	var tableId = $(obj).parents('table').attr('id');

 	// Get datatable
-	var dTable = getConfigDatatable(tableId);
+	var dTable = $('#' + tableId).dataTable();

 	// Get all nodes within the datatable
 	var rows = dTable.fnGetNodes();
--- a/xCAT-UI/js/configure/discover.js
+++ b/xCAT-UI/js/configure/discover.js
@@ -43,9 +43,7 @@ var discoverEnv;
 /**
 * create the discover page
 * 
- * @param 
- * 
- * @return
+ * @return nothing
 */
 function loadDiscoverPage(){
 	currentStep = 0;
@@ -60,9 +58,7 @@ function loadDiscoverPage(){
 /**
 * update the step show are on the left side of discover page
 * 
- * @param 
- * 
- * @return
+ * @return nothing
 */
 function updateDiscoverStep(){
 	$('#discoverStepDiv').empty();
@@ -81,9 +77,7 @@ function updateDiscoverStep(){
 /**
 * create the navigator buttons on the bottom of discover page
 * 
- * @param 
- * 
- * @return
+ * @return nothing
 */
 function createDiscoverButtons(){
 	var buttonDiv = $('<div style="text-align:center;padding:20px 0px 10px 0px;"></div>');
@@ -113,9 +107,7 @@ function createDiscoverButtons(){
 /**
 * create the next button base on the currentStep, the last step does not need this button
 * 
- * @param 
- * 
- * @return
+ * @return nothing
 */
 function createNextButton(){
 	var tempFlag = true;
@@ -143,9 +135,7 @@ function createNextButton(){
 /**
 * create the next button base on the currentStep, the first step does not need this button
 * 
- * @param 
- * 
- * @return
+ * @return nothing
 */
 function createBackButton(){
 	var tempFlag = true;
@@ -174,9 +164,8 @@ function createBackButton(){
 /**
 * get the input value on discover page
 * 
- * @param 
- *        envName :  value's name(discoverEnv's key)
- * 
+ * @param envName 
+ * 			value's name(discoverEnv's key)
 * @return
 *       if there is assciate value, return the value. 
 *       else return null.
@@ -193,10 +182,11 @@ function getDiscoverEnv(envName){
 /**
 * set the input value on discover page
 * 
- * @param 
- *        envName :  value's name(discoverEnv's key)
- * 	      envValue:  value
- * @return null.
+ * @param envName
+ * 			value's name(discoverEnv's key)
+ * @param envValue 
+ * 			value
+ * @return nothing
 */
 function setDiscoverEnv(envName, envValue){
 	if (envName){
@@ -207,10 +197,9 @@ function setDiscoverEnv(envName, envValue){
 /**
 * delete the input value on discover page
 * 
- * @param 
- *        envName :  value's name(discoverEnv's key)
- * 
- * @return null.
+ * @param envName
+ * 			value's name(discoverEnv's key)
+ * @return nothing
 */
 function removeDiscoverEnv(envName){
 	if (discoverEnv[envName]){
@@ -221,12 +210,8 @@ function removeDiscoverEnv(envName){
 /**
 * Expand the noderange into node names.
 * 
- * @param 
- *        nodeRange :  
- * 
- * @return
- *       node names array.
- *       
+ * @param nodeRange  
+ * @return node names array
 */
 function expandNR(nodeRange){
 	var retArray = new Array();
@@ -294,8 +279,6 @@ function expandNR(nodeRange){
 /**
 * collect all inputs' value from the page
 * 
- * @param 
- * 
 * @return true: this step is correct, can go to the next page
 *         false: this step contains error.
 */
@@ -318,9 +301,7 @@ function collectInputValue(){
 * Step 1: show the wizard's function 
 *         platform selector(system P or system X)
 * 
- * @param 
- * 
- * @return
+ * @return nothing
 */
 function initSelectPlatform(){
 	var temp = '';
@@ -351,9 +332,7 @@ function initSelectPlatform(){
 /**
 * Step 1: Get the platform type
 * 
- * @param 
- * 
- * @return
+ * @return true
 */
 function getPlatform(){
 	var radioValue = $('#discoverContentDiv :checked').attr('id');
@@ -367,16 +346,14 @@ function getPlatform(){
 *                             hmcs' name range, number and start ip
 *                             frames' name range, number and start ip
 *                             drawers' name range, number and start ip
- * 
- * @param 
- * 
- * @return
+ * @return nothing
 */
 function initBasicPattern(){
 	$('#discoverContentDiv').empty();
 	$('.tooltip').remove();
 	var showString = '<div style="min-height:360px" id="patternDiv"><h2>' + steps[currentStep] + '</h2>';
 	showString += '<table><tbody>';
+	
 	//Frame title
 	showString += '<tr><td><h3>Frames:</h3></td></tr>';
 	//Frame Name
@@ -433,9 +410,9 @@ function initBasicPattern(){
 /**
 * Step 2: check basic patterns 
 * 			when user input the basic patterns, we should check if the input is correct. 
- * @param 
- * 
- * @return
+ * @param operType
+ * 			type of operation
+ * @return true or false
 */
 function checkBasicPattern(operType){
 	collectInputValue();
@@ -547,9 +524,7 @@ function checkBasicPattern(operType){
 /**
 * Step 3: allowed the users to edit the super node condigure file 
 *          
- * @param 
- * 
- * @return
+ * @return nothing
 */
 function initSupernode(){
 	$('#discoverContentDiv').empty();
@@ -582,9 +557,9 @@ function initSupernode(){
 /**
 * Step 3: check the super node configure file 
 *          
- * @param 
- * 
- * @return
+ * @param operType
+ * 			type of operation
+ * @return true or false
 */
 function checkSupernode(operType){
 	collectInputValue();
@@ -662,9 +637,9 @@ function calcCec(spConfigStr){
 /**
 * Step 4: show the field which need to be configured in site table 
 *          
- * @param 
- * 
- * @return
+ * @param operType
+ * 			type of operation
+ * @return nothing
 */
 function initSiteTable(operType){
 	$('#discoverContentDiv').empty();
@@ -715,13 +690,12 @@ function initSiteTable(operType){

 /**
 * Step 4: when the values are ready, create the table 
- *          
- * @param 
 * 
- * @return
+ * @return nothing
 */
 function showSiteArea(){
 	var showString = '<table><tbody>';
+	
 	//domain name:
 	showString += '<tr><td>Domain Name:</td><td><input type="text" name="domainname" value="' + getDiscoverEnv('domainname') + 
 				  '" title="The DNS domain name used for the cluster."></td></tr>';
@@ -814,9 +788,9 @@ function calcEndIp(ipStart, num){
 /**
 * Step 4: check the input are all filled 
 *          
- * @param 
- * 
- * @return
+ * @param operType
+ * 			type of operation
+ * @return true or false
 */
 function checkSiteTable(operType){
 	$('#discoverContentDiv input[name=ipStart]').trigger('change');
@@ -851,10 +825,8 @@ function checkSiteTable(operType){

 /**
 * Step 5: told users to power on machines
- *          
- * @param 
 * 
- * @return
+ * @return nothing
 */
 function initPoweronHardware(){
 	$('#discoverContentDiv').empty();
@@ -872,10 +844,8 @@ function initPoweronHardware(){

 /**
 * Step 6: discover all frames from the cluster and map all mtms with frame name
- *          
- * @param 
- * 
- * @return
+ *
+ * @return nothing
 */
 function initDiscoverFrames(){
 	$('#discoverContentDiv').empty();
@@ -901,6 +871,7 @@ function initDiscoverFrames(){
 	}
 	
 	statBar.find('div').append('Discovering all Frames by lsslp.').append(createLoader());
+	
 	//use lsslp to find all bpas in cluster
 	$.ajax({
 		url : 'lib/cmd.php',
@@ -1001,9 +972,9 @@ function deleteMap(obj){
 /**
 * Step 6: write the frame and mtms map file
 *          
- * @param 
- * 
- * @return
+ * @param operType
+ * 			type of operation
+ * @return true or false
 */
 function checkFrameMtms(operType){
 	//check the number of radio button
@@ -1051,8 +1022,8 @@ function checkFrameMtms(operType){
 * Step 7: create the xcatsetup configure file and run xcatsetup to define all objects 
 * 		   in xcat database.   
 *          
- * @param 
- * 
+ * @param operType
+ * 			type of operation
 * @return
 */
 function initConfig(operType){
@@ -1085,9 +1056,7 @@ function initConfig(operType){
 /**
 * Step 7: create the xcat configure file
 *          
- * @param 
- * 
- * @return
+ * @return nothing
 */
 function createSetupFile(){
 	var fileContent = '';
@@ -1150,9 +1119,7 @@ function createSetupFile(){
 /**
 * Step 7: run the xcatsetup command
 *          
- * @param 
- * 
- * @return
+ * @return nothing
 */
 function runSetup(){
 	$('#setupLine').append(createLoader());
@@ -1178,10 +1145,8 @@ function runSetup(){

 /**
 * Step 7: create the dhcp configure file
- *          
- * @param 
 * 
- * @return
+ * @return nothing
 */
 function configDHCP(){
 	$('#dhcpLine').append(createLoader());
@@ -1208,9 +1173,9 @@ function configDHCP(){
 /**
 * Step 8: discover all hmc,cec in cluster and update into xcat database
 *          
- * @param 
- * 
- * @return
+ * @param operType
+ * 			type of operation
+ * @return nothing
 */
 function initUpdateDefinition(operType){
 	$('#discoverContentDiv').empty();
@@ -1236,9 +1201,7 @@ function initUpdateDefinition(operType){
 /**
 * Step 8: write all the lsslp -s FRAME info into database
 *          
- * @param 
- * 
- * @return
+ * @return nothing
 */
 function lsslpWriteFrame(){
 	$('#frameLine').append(createLoader());
@@ -1264,10 +1227,8 @@ function lsslpWriteFrame(){

 /**
 * Step 8: write all the lsslp -s HMC info into database
- *          
- * @param 
 * 
- * @return
+ * @return nothing
 */
 function lsslpWriteHMC(){
 	$('#hmcLine1').append(createLoader());
@@ -1351,10 +1312,8 @@ function lsslpWriteHMC(){

 /**
 * Step 8: write all the lsslp -s cec info into database
- *          
- * @param 
 * 
- * @return
+ * @return nothing
 */
 function lsslpWriteCec(){
 	$('#cecLine').append(createLoader());
@@ -1379,10 +1338,8 @@ function lsslpWriteCec(){

 /**
 * Step 9: create lpars
- *          
- * @param 
 * 
- * @return
+ * @return nothing
 */
 function initCreateLpar(){
 	$('#discoverContentDiv').empty();
@@ -1526,10 +1483,8 @@ function nonihCreateLpar(parentDiv){

 /**
 * Step 10: complete
- *          
- * @param 
 * 
- * @return
+ * @return nothing
 */
 function complete(){
 	$('#discoverContentDiv').empty();
--- a/xCAT-UI/js/configure/update.js
+++ b/xCAT-UI/js/configure/update.js
@@ -65,7 +65,7 @@ function showRepository(data) {

 	// Display the Devel Repository, remember user's last selection
 	show = show + "<li><input type='radio' ";
-	if (1 == $.cookie('xcatrepository')) {
+	if ($.cookie('xcatrepository') == 1) {
 		show = show + "checked='true'";
 	}
 	show = show + "name='reporadio' value='" + develRepository + "'>";
@@ -74,7 +74,7 @@ function showRepository(data) {

 	// Display the Stable Repository, remember user's last selection
 	show = "<li><input type='radio' ";
-	if (2 == $.cookie('xcatrepository')) {
+	if ($.cookie('xcatrepository') == 2) {
 		show = show + "checked='true'";
 	}
 	show = show + "name='reporadio' value='" + stableRepository + "' checked='true'>";
@@ -82,8 +82,8 @@ function showRepository(data) {
 	repoList.append(show);

 	// Display the Input Repository, remember user's last selection
-	if (($.cookie('xcatrepository')) && (1 != $.cookie('xcatrepository'))
-			&& (2 != $.cookie('xcatrepository'))) {
+	if (($.cookie('xcatrepository')) && ($.cookie('xcatrepository') != 1)
+			&& ($.cookie('xcatrepository') != 2)) {
 		show = "<li><input type='radio' checked='true' name='reporadio' value=''>Other: ";
 		show += "<input style='width: 500px' id='repositoryaddr' value='"
 				+ $.cookie('xcatrepository') + "'</li>";
@@ -92,6 +92,7 @@ function showRepository(data) {
 		show += "<input style='width: 500px' id='repositoryaddr' value=''</li>";
 	}
 	repoList.append(show);
+	
 	$('#repository fieldset').append(repoList);
 }

@@ -114,6 +115,7 @@ function showRpmInfo(data) {
 	}

 	rpms = data.rsp.split(/\n/);
+	
 	// No rpm installed, return
 	if (1 > rpms.length) {
 		$('#rpm fieldset').append("No RPMs installed!");
@@ -130,12 +132,12 @@ function showRpmInfo(data) {
 	show += "</tr></thead>";
 	for (temp = 0; temp < rpms.length; temp++) {
 		// Empty line continue
-		if ("" == rpms[temp]) {
+		if (!rpms[temp]) {
 			continue;
 		}

 		// The RPM is not installed, continue
-		if (-1 != rpms[temp].indexOf("not")) {
+		if (rpms[temp].indexOf("not") != -1) {
 			continue;
 		}

@@ -161,7 +163,6 @@ function showRpmInfo(data) {
 /**
 * Select all checkboxes
 * 
- * @param Nothing
 * @return Nothing
 */
 function updateSelectAll() {
@@ -189,7 +190,7 @@ function updateRpm() {

 	// Select other and we should use the value in the input
 	if ("" == rpmPath) {
-		// user input the repo, and we must stroe it in the cookie
+		// Store repo in a cookie
 		rpmPath = $('#repositoryaddr').val();
 		rpmPathType = rpmPath;
 	} else {
--- a/xCAT-UI/js/nodes/nodes.js
+++ b/xCAT-UI/js/nodes/nodes.js
@@ -923,10 +923,12 @@ function loadNodes(data) {
 	monitorCol.find('span a').click(function() {
 		refreshGangliaStatus(group, nodesTableId);
 	});
-	var menuDiv=$('<div id=\''+nodesTableId+'_menuDiv\' class=\'menuDiv\'></div>');
+	
+	// Create a division to hold actions menu
+	var menuDiv = $('<div id="' + nodesTableId + '_menuDiv" class="menuDiv"></div>');
 	$('#' + nodesTableId + '_wrapper').prepend(menuDiv);
 	menuDiv.append(actionBar);	
-	$('#'+nodesTableId+'_filter').appendTo(menuDiv);
+	$('#' + nodesTableId + '_filter').appendTo(menuDiv);
 	
 	// Create tooltip for status
 	var tooltipConf = {