wcrisman/PetitTeton
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Large set of changes - building the GUI for the data tracking app.

Browse Source
This commit is contained in:
Wynne Crisman
2016-08-17 17:54:59 -07:00
parent 08266cdd41
commit b3bbdc0c2a
47 changed files with 4186 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
public/admin/js/linkedTable.js
View File

@@ -4,32 +4,40 @@ var LinkedTable;
+function($) {
LinkedTable = function(element, options) {
var _this = this;
this.$element = $(element);
this.options = $.extend({}, LinkedTable.DEFAULTS, options);
this.clickHandler = function(event) {
$(this).addClass('highlight').siblings().removeClass('highlight');
this.$selectedRow = null;
this.selectionHandler = function(event) {
$(this).addClass(_this.options.selectionCSS).siblings().removeClass(_this.options.selectionCSS);
_this.$selectedRow = $(this);
};
};
LinkedTable.DEFAULTS = {
url: '', //The absolute or relative path to use to query the data. Server is expected to respond with a JSON array of objects.
attr: 'data-key-name',
selection: 'row' //Currently only row is supported.
selectionCSS: 'selected',
selection: 'row', //Currently only row is supported.
postAddRowHandler: null, //Optional function that is passed the jquery table row and the data object sent by the server for that row. Allows post processing of the row prior to display.
parameters: null //Optional function that returns an object, or an object whose attributes are passed to the URL as parameters.
};
//TODO
LinkedTable.prototype.myMethod = function() {
LinkedTable.prototype.getSelectedRow = function() {
return this.$selectedRow;
};
//A function that will clean and rebuild the table displaying all the users.
//Note that each row of the table will have a data element attached to the table row. The key will be "model" and the value will be the object sent by the server.
LinkedTable.prototype.refresh = function() {
var _this = this;
var table = this.$element;
var thead = table.find("thead tr");
var tbody = table.find("tbody");
var selection = this.options.selection;
var attr = this.options.attr;
var clickHandler = this.clickHandler;
var selectionHandler = this.selectionHandler;
var params;
if(thead.length == 0) {
return;
@@ -38,7 +46,7 @@ var LinkedTable;
//Empty or Create the table body.
if(tbody.length != 0) {
//Remove the row selection handler.
if(selection == 'row') this.$element.off('click', 'tbody tr', clickHandler);
if(selection == 'row') this.$element.off('click', 'tbody tr', selectionHandler);
//Empty the table of data.
tbody.empty();
}
@@ -47,7 +55,20 @@ var LinkedTable;
tbody.appendTo(table);
}
$.getJSON("user-data", function(data) {
if(typeof this.options.parameters == 'function') {
params = this.options.parameters();
//Must be an object.
if(typeof params != 'object') {
params = {};
}
}
else if(typeof this.options.parameters == 'object') {
params = this.options.parameters;
}
else {params = {};}
$.getJSON(this.options.url, params, function(data) {
var headers = thead.children();
var attributes = [];
@@ -64,6 +85,8 @@ var LinkedTable;
var row = $("<tr></tr>");
row.appendTo(tbody);
//Save the model attached to the table row. Can be retrieved later to get the model sent by the server.
row.data("model", rowData);
for(var attributeIndex = 0; attributeIndex < attributes.length; attributeIndex++) {
var attribute = attributes[attributeIndex];
@@ -71,10 +94,15 @@ var LinkedTable;
row.append("<td>" + cellData + "</td>");
}
if(_this.options.postAddRowHandler) {
//Call the optional handler after adding the row, passing the jquery row object, and the row data object sent by the server. Allows post processing on the row (adding classes to the row for example).
_this.options.postAddRowHandler(row, rowData);
}
}
//Setup the row selection handler.
if(selection == 'row') table.on('click', 'tbody tr', clickHandler);
if(selection == 'row') table.on('click', 'tbody tr', selectionHandler);
});
}
}(jQuery);