///
$(function () {
function tableLoader() {
var self = this;
self.hub = $.connection.dynamicDataHub;
var viewModels = [];
self.buttonPick = function () {
if (this.innerHTML.indexOf("Loaded:") >= 0)
self.hub.client.buttonPicked(this.id);
else
self.hub.server.getTableHeader(this.innerHTML, this.id);
}
self.hub.client.buttonPicked = function (id) {
var obj = document.getElementById(id);
var i = obj.innerHTML.indexOf("Loaded:");
if (i >= 0)
{
var name = obj.innerHTML.substring(7);
var node = document.getElementById("TW_" + name);
if (node == null) node = parent.document.getElementById("TW_" + name);
var oTD = document.getElementById("TablesData");
try { oTD.parentNode.removeChild(node); }
catch (e) { oTD.removeChild(node); }
obj.innerHTML = name;
}
else
{
obj.innerHTML = "Loaded:" + obj.innerHTML;
}
}
self.addButtonAction = function () {
var pages = TablesSelect.getElementsByTagName("button");
for (var i=0;i";
});
self.addButtonAction();
}
self.updateRecord = function (tablename, oData) {
var vm = viewModels[tablename];
ko.utils.arrayForEach(vm.columns, function (list, index) {
if (list.inputType == "number") {
oData[list.columnName] = parseFloat(oData[list.columnName]) ;
}
});
this.hub.server.updateTable(tablename, JSON.stringify(oData));
}
self.hub.client.recordUpdated = function (sTable, changedRecord) {
var vm = viewModels[sTable];
if (vm != null) {
var key = "";
var bridge = [];
bridge = self.extractData(changedRecord);
for (x in bridge) {
key = bridge[x];
break;
}
var record = ko.utils.arrayFirst( vm.fields, function (item/*,index*/) {
var mId = "";
for (x in item)
{
if (mId.length == 0)
mId = item[x].peek();
if (mId == key) {
item[x]( bridge[x] ); /* Copy Each Field */
}
else
break;
}
return mId == key;
} );
}
}
self.hub.client.headerTableRetrieved = function (name, ID, itemsMap) {
var Obj = document.getElementById("TablesData");
var divP = document.createElement("div");
var divTitle = document.createElement("div");
var divTable = document.createElement("div");
divP.setAttribute("id", "TW_" + name);
divP.setAttribute("style", "overflow:hidden;height:350px;width:350px; border: 2px solid blue");
divP.setAttribute("class", "ui-widget-content");
divTitle.innerText = name;
divTitle.setAttribute("style", "cursor:move;");
divTable.setAttribute("id", "TS_" + name);
divTable.setAttribute("style", "overflow:auto;height:350px;width:350px;");
/* itemsMap needs ["TH_" + name + "_" + index] attr: { maxlength: $data.Size, size: $data.Size }, */
//var str = "
|
";
var str = "";
divTable.insertAdjacentHTML("beforeEnd", str);
divP.appendChild(divTitle);
divP.appendChild(divTable);
Obj.appendChild(divP);
var vm = new ViewModel(self, name);
vm.loadColumns(itemsMap);
viewModels[name] = vm;
self.hub.server.getTableData(name, ID);
}
self.hub.client.dataTableRetrieved = function (name, itemsMap) {
var vm = viewModels[name];
var bridge = [];
bridge = self.extractData(itemsMap);
vm.loadData(bridge);
ko.applyBindings(vm, document.getElementById("TI_" + name));
applyHeaderSize(document.getElementById("TI_" + name).id);
applySizeAndDrag("TW_" + name, "TI_" + name, "TS_" + name);
self.hub.client.raiseError("Client Ready");
}
};
function ObservableElements(owner, tablename, item) {
var data = this;
/* for (key in object) name == key, value == object[key] */
for (var field in item) {
data[field] = ko.observable(item[field]);
}
for (var columnName in data) {
data[columnName].subscribe(function (newValue) {
owner.updateRecord(tablename, ko.toJS(data));
});
}
}
function ViewModel(owner,tablename) {
var self = this;
self.columns = ko.observableArray( [] );
self.fields = ko.observableArray( [] );
self.loadColumns = function (data) {
self.columns = data;
}
self.loadData = function (data) {
self.fields = ko.utils.arrayMap(data,
function (record)
{
return new ObservableElements(owner, tablename, record);
} );
}
}
ko.bindingHandlers.dateString = {
init: function (element, valueAccessor) {
element.onchange = function () {
var value = valueAccessor(); // Get The [ observable ]
value(moment(element.value, 'DD-MMM-YYYY').toDate());
};
},
update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
var value = valueAccessor();
var valueUnwrapped = ko.utils.unwrapObservable(value);
if (valueUnwrapped) {
if (element.value!=null)
element.value = moment(valueUnwrapped).format('DD-MMM-YYYY');
else
element.innerHTML = moment(valueUnwrapped).format('DD-MMM-YYYY');
}
}
};
ko.bindingHandlers.readOnly = {
update: function (element, valueAccessor, allBindingsAccessor /*, viewModel, bindingContext*/) {
var valueA = valueAccessor();
var value = ko.utils.unwrapObservable(valueA);
if (value == 0) {
element.setAttribute("disabled", true);
}
else {
element.removeAttribute("disabled");
}
}
};
function applyHeaderSize(tableId) {
var thHeight = $("table#" + tableId + " th:first").height();
$("table#" + tableId + " th").resizable({
handles: "e",
minHeight: thHeight,
maxHeight: thHeight,
minWidth: 10,
resize: function (event, ui) {
var sizerID = "#" + $(event.target).attr("id");
$(sizerID).width(ui.size.width);
/* Need To resize Data Column */
//var col = sizerID.match(/(\d+)/);
//var tbl = document.getElementById(event.target.parentElement.parentElement.parentElement.id);
//var td = tbl.rows[1].cells[ col[0] ];
//td.width = ui.size.width
//tbl.getElementsByTagName('td')[col[0]].style.width = ui.size.width;
}
});
}
function applySizeAndDrag(divId, tableId, tableTS) {
var w = $("#" + divId).width() < $("#" + tableId).width() ? $("#" + divId).width() : $("#" + tableId).width();
var h = $("#" + divId).height() < $("#" + tableId).height() ? $("#" + divId).height() : $("#" + tableId).height();
$("#" + divId).draggable();
$("#" + divId).resizable({ width: w, height: h, /*ghost: true,*/ alsoResize: "#" + tableTS });
}
$(document).ready(function () {
var tload = new tableLoader();
$.connection.hub.start(function () { tload.init(); });
});
});
/*
String.prototype.replaceAll = function (find, replace) {
var str = this;
return str.replace(new RegExp(find.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'), 'g'), replace);
};
*/
/*
http://apprize.info/javascript/knockoutjs/5.html
*/