powerdns-admin/app/static/admin/pages/scripts/table-editable.js
2015-12-13 16:34:12 +07:00

305 lines
13 KiB
JavaScript

var TableEditable = function () {
var handleTable = function () {
function restoreRow(oTable, nRow) {
var aData = oTable.fnGetData(nRow);
var jqTds = $('>td', nRow);
for (var i = 0, iLen = jqTds.length; i < iLen; i++) {
oTable.fnUpdate(aData[i], nRow, i, false);
}
oTable.fnDraw();
}
function SelectElement(elementID, valueToSelect)
{
var element = document.getElementById(elementID);
element.value = valueToSelect;
}
function editRow(oTable, nRow) {
var aData = oTable.fnGetData(nRow);
var jqTds = $('>td', nRow);
jqTds[0].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[0] + '">';
//jqTds[1].innerHTML = '<select class="form-control" id="record_type" name="record_type" value="' + aData[1] + '"' + '><option value="A">A</option><option value="AAAA">AAAA</option><option value="NS">NS</option><option value="CNAME">CNAME</option><option value="DNAME">DNAME</option><option value="MR">MR</option><option value="PTR">PTR</option><option value="HINFO">HINFO</option><option value="MX">MX</option><option value="TXT">TXT</option><option value="RP">RP</option><option value="AFSDB">AFSDB</option><option value="SIG">SIG</option><option value="KEY">KEY</option><option value="LOC">LOC</option><option value="SRV">SRV</option><option value="CERT">CERT</option><option value="NAPTR">NAPTR</option><option value="DS">DS</option><option value="SSHFP">SSHFP</option><option value="RRSIG">RRSIG</option><option value="NSEC">NSEC</option><option value="DNSKEY">DNSKEY</option><option value="NSEC3">DSEC3</option><option value="NSEC3PARAM">NSEC3PARAM</option><option value="TLSA">TLSA</option><option value="SPF">SPF</option><option value="DL">DL</option><option value="SOA">SOA</option></select>';
jqTds[1].innerHTML = '<select class="form-control" id="record_type" name="record_type" value="' + aData[1] + '"' + '><option value="A">A</option><option value="AAAA">AAAA</option><option value="CNAME">CNAME</option><option value="PTR">PTR</option><option value="MX">MX</option><option value="TXT">TXT</option><option value="SPF">SPF</option></select>';
jqTds[2].innerHTML = '<select class="form-control" id="record_status" name="record_status" value="' + aData[2] + '"' + '><option value="false">Active</option><option value="true">Disabled</option></select>';
jqTds[3].innerHTML = '<select class="form-control" id="record_ttl" name="record_ttl" value="' + aData[3] + '"' + '><option value="60">1 minute</option><option value="300">5 minutes</option><option value="1800">30 minutes</option><option value="3600">60 minutes</option><option value="86400">24 hours</option></select>';
jqTds[4].innerHTML = '<input type="text" class="form-control input-small advance-data" value="' + aData[4] + '">';
jqTds[5].innerHTML = '<a class="btn default btn-xs green edit" href="">Save</i></a>';
jqTds[6].innerHTML = '<a class="btn default btn-xs green cancel" href="">Cancel</i></a>';
// set current value of dropdows column
if (aData[2] == 'Active'){
isDiable = 'false';
}
else {
isDiable = 'true';
}
SelectElement('record_type', aData[1]);
SelectElement('record_status', isDiable);
SelectElement('record_ttl', aData[3]);
}
function saveRow(oTable, nRow) {
// var jqInputs = $('input', nRow);
// oTable.fnUpdate(jqInputs[0].value, nRow, 0, false);
// oTable.fnUpdate(jqInputs[1].value, nRow, 1, false);
// oTable.fnUpdate(jqInputs[2].value, nRow, 2, false);
// oTable.fnUpdate(jqInputs[3].value, nRow, 3, false);
// oTable.fnUpdate(jqInputs[4].value, nRow, 4, false);
var jqInputs = $('input', nRow);
var jqSelect = $('select', nRow);
if (jqSelect[1].value == 'false'){
status = 'Active';
}
else {
status = 'Disabled';
}
oTable.fnUpdate(jqInputs[0].value, nRow, 0, false);
oTable.fnUpdate(jqSelect[0].value, nRow, 1, false);
oTable.fnUpdate(status, nRow, 2, false);
oTable.fnUpdate(jqSelect[2].value, nRow, 3, false);
oTable.fnUpdate(jqInputs[1].value, nRow, 4, false);
oTable.fnUpdate('<a class="btn default btn-xs purple edit" href="javascript:;"> <i class="fa fa-edit"></i></a>', nRow, 5, false);
oTable.fnUpdate('<a class="btn default btn-xs red delete" href="javascript:;"> <i class="fa fa-trash"></i></a>', nRow, 6, false);
oTable.fnDraw();
}
function cancelEditRow(oTable, nRow) {
var jqInputs = $('input', nRow);
oTable.fnUpdate(jqInputs[0].value, nRow, 0, false);
oTable.fnUpdate(jqInputs[1].value, nRow, 1, false);
oTable.fnUpdate(jqInputs[2].value, nRow, 2, false);
oTable.fnUpdate(jqInputs[3].value, nRow, 3, false);
oTable.fnUpdate(jqInputs[4].value, nRow, 4, false);
oTable.fnUpdate('<a class="btn default btn-xs green edit" href="">Edit</i></a>', nRow, 5, false);
oTable.fnDraw();
}
function getTableData(table) {
var rData = []
// get all table data
rData = table.fnGetData();
// reformat - pretty format
var records = []
rData.forEach(function(r) {
var record = {}
record["record_name"] = r[0].trim();
record["record_type"] = r[1].trim();
record["record_status"] = r[2].trim();
record["record_ttl"] = r[3].trim();
record["record_data"] = r[4].trim();
records.push(record);
});
return records
}
function applyChanges(data, url){
$.ajax({
type: "POST",
url: url,
data: JSON.stringify(data),// now data come in this function
contentType: "application/json; charset=utf-8",
crossDomain: true,
dataType: "json",
success: function (data, status, jqXHR) {
bootbox.alert("Applied changes record successfully.");
},
error: function (jqXHR, status) {
// error handler
console.log(jqXHR);
a = jqXHR;
bootbox.alert(jqXHR["responseText"]);
}
});
}
var table = $('#tbl_record_manage');
var oTable = table.dataTable({
// Uncomment below line("dom" parameter) to fix the dropdown overflow issue in the datatable cells. The default datatable layout
// setup uses scrollable div(table-scrollable) with overflow:auto to enable vertical scroll(see: assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.js).
// So when dropdowns used the scrollable div should be removed.
//"dom": "<'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r>t<'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>",
"lengthMenu": [
[5, 15, 20, -1],
[5, 15, 20, "All"] // change per page values here
],
// Or you can use remote translation file
//"language": {
// url: '//cdn.datatables.net/plug-ins/3cfcc339e89/i18n/Portuguese.json'
//},
// set the initial value
"pageLength": 15,
"language": {
"lengthMenu": " _MENU_ records"
},
"columnDefs": [{ // set default column settings
'orderable': true,
'targets': [0]
}, {
"searchable": true,
"targets": [0]
}],
"order": [
[0, "asc"]
] // set first column as a default sort by asc
});
var tableWrapper = $("#tbl_record_manage_new_wrapper");
tableWrapper.find(".dataTables_length select").select2({
showSearchInput: true //hide search box with special css class
}); // initialize select2 dropdown
var nEditing = null;
var nNew = false;
$('#tbl_record_manage_new').click(function (e) {
e.preventDefault();
if (nNew && nEditing) {
bootbox.alert("Previous record not saved. Please save it before adding more record.")
return;
}
var aiNew = oTable.fnAddData(['', 'A', 'Active', 3600, '', '', '']);
var nRow = oTable.fnGetNodes(aiNew[0]);
editRow(oTable, nRow);
nEditing = nRow;
nNew = true;
});
$('#tbl_record_manage_apply').click(function (e) {
e.preventDefault();
bootbox.confirm("Are you sure you want to apply the new changes?", function(result) {
if (result == true){
var domain = document.getElementById('domainname').value;
var data = getTableData(oTable);
applyChanges(data, '/domain/'+ domain + '/apply');
}
});
});
$('#tbl_record_update_from_master').click(function (e) {
e.preventDefault();
var domain = document.getElementById('domainname').value;
applyChanges({'domain': domain}, '/domain/'+ domain + '/update');
});
table.on('click', '.delete', function (e) {
e.preventDefault();
var nRow = $(this).parents('tr')[0];
bootbox.confirm("Are you sure to delete this record?", function(result) {
if (result == true){
oTable.fnDeleteRow(nRow);
}
});
});
table.on('click', '.cancel', function (e) {
e.preventDefault();
if (nNew) {
oTable.fnDeleteRow(nEditing);
nEditing = null;
nNew = false;
} else {
restoreRow(oTable, nEditing);
nEditing = null;
}
});
table.on('click', '.edit', function (e) {
e.preventDefault();
/* Get the row as a parent of the link that was clicked on */
var nRow = $(this).parents('tr')[0];
if (nEditing !== null && nEditing != nRow) {
/* Currently editing - but not this row - restore the old before continuing to edit mode */
restoreRow(oTable, nEditing);
editRow(oTable, nRow);
nEditing = nRow;
} else if (nEditing == nRow && this.innerHTML == "Save") {
/* Editing this row and want to save it */
saveRow(oTable, nEditing);
nEditing = null;
//alert("Updated! Do not forget to do some ajax to sync with backend :)");
} else {
/* No edit in progress - let's start one */
editRow(oTable, nRow);
nEditing = nRow;
}
});
table.on('click', '.advance-data', function (e) {
e.preventDefault();
var nRow = $(this).parents('tr')[0];
// get record type
var jqSelect = $('select', nRow);
var record_type = jqSelect[0].value;
if (record_type == 'MX'){
// get record data
var jqInputs = $('input', nRow);
var record_data = jqInputs[1].value;
if (record_data){
var record_data = record_data.split(" ");
var mx_priority = record_data[0];
var mx_data = record_data[1];
}
else
{
var mx_priority = "10";
var mx_data = "";
}
bootbox.dialog({
message:'Server: <input id="rdata" class="bootbox-input bootbox-input-text form-control" value="' + mx_data + '"></input><br/>Priority: <input id="rpriority" type="number" class="bootbox-input bootbox-input-text form-control" value="' + mx_priority + '"></input>',
title: "MX Record Data",
value: "makeusabrew",
buttons: {
main: {
label: "Save",
className: "btn-primary",
callback: function() {
var new_record_data = $('#rpriority').val() + " " + $('#rdata').val();
$('.advance-data').val(new_record_data);
}
}
}
});
}
});
}
return {
//main function to initiate the module
init: function () {
handleTable();
}
};
}();