xcat-core/xCAT-UI/js/configure.js
phamt 1ae4225dbe Checked in new UI code
git-svn-id: https://svn.code.sf.net/p/xcat/code/xcat-core/trunk@6485 8638fb3e-16cb-4fca-ae20-7b5d299a9bcd
2010-06-16 18:21:58 +00:00

494 lines
11 KiB
JavaScript

/**
* Global variables
*/
var configTabs; // Config tabs
var configDataTables = new Object(); // Datatables on the config page
/**
* Set the datatable
*
* @param id
* The ID of the datatable
* @param obj
* Datatable object
* @return Nothing
*/
function setConfigDatatable(id, obj) {
configDataTables[id] = obj;
}
/**
* Get the datatable with the given ID
*
* @param id
* The ID of the datatable
* @return Datatable object
*/
function getConfigDatatable(id) {
return configDataTables[id];
}
/**
* Set the configure tab
*
* @param obj
* Tab object
* @return Nothing
*/
function setConfigTab(obj) {
configTabs = obj;
}
/**
* Get the configure tab
*
* @param Nothing
* @return Tab object
*/
function getConfigTab() {
return configTabs;
}
/**
* Load configure page
*
* @return Nothing
*/
function loadConfigPage() {
// If the configure page has already been loaded
if ($('#configure_page').children().length) {
// Do not reload configure page
return;
}
// Create configure tab
var tab = new Tab();
setConfigTab(tab);
tab.init();
$('#configure_page').append(tab.object());
// Create loader
var loader = createLoader();
loader = $('<center></center>').append(loader);
// Configure xCAT tables
tab.add('configTablesTab', 'Tables', loader);
// Get list of tables and their descriptions
$.ajax( {
url : 'lib/cmd.php',
dataType : 'json',
data : {
cmd : 'tabdump',
tgt : '',
args : '-d',
msg : ''
},
success : loadTableNames
});
}
/**
* Load xCAT table names and their descriptions
*
* @param data
* Data returned from HTTP request
* @return Nothing
*/
function loadTableNames(data) {
// Get output
var tables = data.rsp;
// Remove loader
var tabId = 'configTablesTab';
$('#' + tabId).find('img').hide();
// Create a groups division
var tablesDIV = $('<div id="configure_table"></div>');
$('#' + tabId).append(tablesDIV);
// Create info bar
var infoBar = createInfoBar('Select a table to edit');
tablesDIV.append(infoBar);
// Create a list for the tables
var list = $('<ul></ul>');
// Loop through each table
for ( var i = 0; i < tables.length; i++) {
// Create a link for each table
var args = tables[i].split(':');
var link = $('<a href="#" id="' + args[0] + '">' + args[0] + '</a>');
// Open table on click
link.bind('click', function(e) {
// Get table ID that was clicked
var id = (e.target) ? e.target.id : e.srcElement.id;
// Create loader
var loader = createLoader();
loader = $('<center></center>').append(loader);
// Add a new tab for this table
var configTab = getConfigTab();
if (!$('#' + id + 'Tab').length) {
configTab.add(id + 'Tab', id, loader);
// Get contents of selected table
$.ajax( {
url : 'lib/cmd.php',
dataType : 'json',
data : {
cmd : 'tabdump',
tgt : '',
args : id,
msg : id
},
success : loadTable
});
}
// Select new tab
configTab.select(id + 'Tab');
});
var item = $('<li></li>');
item.append(link);
// Append the table description
item.append(': ' + args[1]);
// Append item to list
list.append(item);
}
tablesDIV.append(list);
}
/**
* Load a given table
*
* @param data
* Data returned from HTTP request
* @return Nothing
*/
function loadTable(data) {
// Get response
var rsp = data.rsp;
// Get table ID
var id = data.msg;
// Remove loader
var tabId = id + 'Tab';
$('#' + 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.');
$('#' + tabId).append(infoBar);
// Create action bar
var actionBar = $('<div></div>');
$('#' + tabId).append(actionBar);
// Get table headers
var args = rsp[0].replace('#', '');
var headers = args.split(',');
// Create container for original table contents
var origCont = new Array(); // Original table content
origCont[0] = rsp[0].split(','); // Headers
// Create container for new table contents
var newCont = new Object();
var tmp = new Object();
tmp[0] = '#' + headers[0]; // Put a # in front of the header
for ( var i = 1; i < headers.length; i++) {
tmp[i] = headers[i];
}
newCont[0] = tmp;
// Create a new datatable
var tableId = id + 'DataTable';
var table = new DataTable(tableId);
// Add column for the remove button
headers.unshift('');
table.init(headers);
headers.shift();
// Append datatable to tab
$('#' + tabId).append(table.object());
// Data table
var dTable;
// Add table rows
// Start with the 2nd row (1st row is the headers)
for ( var i = 1; i < rsp.length; i++) {
// Split into columns
var cols = rsp[i].split(',');
// Go through each column
for ( var j = 0; j < cols.length; j++) {
// If the column is not complete
if (cols[j].count('"') == 1) {
while (cols[j].count('"') != 2) {
// Merge this column with the adjacent one
cols[j] = cols[j] + "," + cols[j + 1];
// Remove merged row
cols.splice(j + 1, 1);
}
}
// Replace quote
cols[j] = cols[j].replace(new RegExp('"', 'g'), '');
}
// Add remove button
cols
.unshift('<span class="ui-icon ui-icon-close" onclick="deleteRow(this)"></span>');
// Add row
table.add(cols);
// Save original table content
origCont[i] = cols;
}
/**
* Enable editable columns
*/
// 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',
height : '30px' // The height of the text area
});
// 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('');
}
// 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',
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';
// Get datatable
var dTable = getConfigDatatable(tableId);
// Get the nodes from the table
var dRows = dTable.fnGetNodes();
// Go through each row
for ( var i = 0; i < dRows.length; i++) {
// If there is row with values
if (dRows[i]) {
// Go through each column
// Ignore the 1st column because it is a button
var cols = dRows[i].childNodes;
var vals = new Object();
for ( var j = 1; j < cols.length; j++) {
var val = cols.item(j).firstChild.nodeValue;
// Insert quotes
if (val == 'Click to edit') {
vals[j - 1] = '';
} else {
vals[j - 1] = val;
}
}
// Save row
newCont[i + 1] = vals;
}
}
// Update datatable
setConfigDatatable(tableId, dTable);
// Update xCAT table
$.ajax( {
type : 'POST',
url : 'lib/tabRestore.php',
dataType : 'json',
data : {
table : tableName,
cont : newCont
},
success : function(data) {
alert('Changes saved');
}
});
});
/**
* 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', '');
// Get table ID
var tableId = tableName + 'DataTable';
// Get datatable
var dTable = getConfigDatatable(tableId);
// Get the nodes from the table
// Clear entire datatable
dTable.fnClearTable();
// Add original content back into datatable
for ( var i = 1; i < origCont.length; i++) {
dTable.fnAddData(origCont[i], true);
}
// 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',
height : '30px' // The height of the text area
});
});
}
/**
* Delete a row in the data table
*
* @param obj
* The object that was clicked
* @return Nothing
*/
function deleteRow(obj) {
// Get table ID
var tableId = $(obj).parent().parent().parent().parent().attr('id');
// Get datatable
var dTable = getConfigDatatable(tableId);
// Get all nodes within the datatable
var rows = dTable.fnGetNodes();
// Get target row
var tgtRow = $(obj).parent().parent().get(0);
// Find the target row in the datatable
for ( var i in rows) {
// If the row matches the target row
if (rows[i] == tgtRow) {
// Remove row
dTable.fnDeleteRow(i, null, true);
break;
}
}
}
/**
* Count the number of occurrences of a specific character in a string
*
* @param char
* Character to count
* @return The number of occurrences
*/
String.prototype.count = function(char) {
return (this.length - this.replace(new RegExp(char, "g"), '').length)
/ char.length;
};