start implementing backbone models and collections - ui is currently broken
This commit is contained in:
Max Ogden
48
src/backbone-webstore.js
Normal file
48
src/backbone-webstore.js
Normal file
@@ -0,0 +1,48 @@
|
||||
// replaces `Backbone.sync` with a OKFN webstore based tabular data source
|
||||
|
||||
var WebStore = function(url) {
|
||||
this.url = url;
|
||||
this.headers = [];
|
||||
this.totalRows = 0;
|
||||
this.getTabularData = function() {
|
||||
var dfd = $.Deferred();
|
||||
var tabularData = {
|
||||
headers: ['x', 'y', 'z']
|
||||
, rows: [
|
||||
{x: 1, y: 2, z: 3}
|
||||
, {x: 2, y: 4, z: 6}
|
||||
, {x: 3, y: 6, z: 9}
|
||||
, {x: 4, y: 8, z: 12}
|
||||
, {x: 5, y: 10, z: 15}
|
||||
, {x: 6, y: 12, z: 18}
|
||||
]
|
||||
, getLength: function() { return this.rows.length; }
|
||||
, getRows: function(numRows, start) {
|
||||
if (start === undefined) {
|
||||
start = 0;
|
||||
}
|
||||
var dfd = $.Deferred();
|
||||
var results = this.rows.slice(start, start + numRows);
|
||||
dfd.resolve(results);
|
||||
return dfd.promise();
|
||||
}
|
||||
}
|
||||
dfd.resolve(tabularData);
|
||||
return dfd.promise();
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
// Override `Backbone.sync` to delegate to the model or collection's
|
||||
// webStore property, which should be an instance of `WebStore`.
|
||||
Backbone.sync = function(method, model, options) {
|
||||
var resp;
|
||||
var store = model.webStore || model.collection.webStore;
|
||||
|
||||
if (method === "read") {
|
||||
store.getTabularData().then(function(tabularData) {
|
||||
tabularData.getRows(10).then(options.success, options.error)
|
||||
})
|
||||
}
|
||||
|
||||
};
|
||||
3330
src/deps-min.js
vendored
3330
src/deps-min.js
vendored
File diff suppressed because one or more lines are too long
369
src/recline.js
369
src/recline.js
@@ -1,170 +1,209 @@
|
||||
var recline = function() {
|
||||
|
||||
function showDialog(template, data) {
|
||||
if (!data) data = {};
|
||||
util.show('dialog');
|
||||
util.render(template, 'dialog-content', data);
|
||||
util.observeExit($('.dialog-content'), function() {
|
||||
util.hide('dialog');
|
||||
})
|
||||
$('.dialog').draggable({ handle: '.dialog-header', cursor: 'move' });
|
||||
}
|
||||
|
||||
function handleMenuClick() {
|
||||
$( '.menu li' ).click(function(e) {
|
||||
var actions = {
|
||||
bulkEdit: function() { showDialog('bulkEdit', {name: app.currentColumn}) },
|
||||
transform: function() { showDialog('transform') },
|
||||
csv: function() { window.location.href = app.csvUrl },
|
||||
json: function() { window.location.href = "_rewrite/api/json" },
|
||||
urlImport: function() { showDialog('urlImport') },
|
||||
pasteImport: function() { showDialog('pasteImport') },
|
||||
uploadImport: function() { showDialog('uploadImport') },
|
||||
deleteColumn: function() {
|
||||
var msg = "Are you sure? This will delete '" + app.currentColumn + "' from all documents.";
|
||||
if (confirm(msg)) costco.deleteColumn(app.currentColumn);
|
||||
},
|
||||
deleteRow: function() {
|
||||
var doc = _.find(app.cache, function(doc) { return doc._id === app.currentRow });
|
||||
doc._deleted = true;
|
||||
costco.uploadDocs([doc]).then(
|
||||
function(updatedDocs) {
|
||||
util.notify("Row deleted successfully");
|
||||
recline.initializeTable(app.offset);
|
||||
},
|
||||
function(err) { util.notify("Errorz! " + err) }
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
util.hide('menu');
|
||||
actions[$(e.target).attr('data-action')]();
|
||||
|
||||
e.preventDefault();
|
||||
})
|
||||
}
|
||||
|
||||
function renderRows(rows) {
|
||||
var rows = rows;
|
||||
|
||||
if (rows.length < 1) {
|
||||
util.render('dataTable', 'data-table-container');
|
||||
return;
|
||||
};
|
||||
|
||||
var tableRows = [];
|
||||
|
||||
rows.map(function(row) {
|
||||
var cells = [];
|
||||
app.headers.map(function(header) {
|
||||
var value = "";
|
||||
if (row[header]) {
|
||||
value = row[header];
|
||||
if (typeof(value) == "object") value = JSON.stringify(value);
|
||||
}
|
||||
cells.push({header: header, value: value});
|
||||
})
|
||||
tableRows.push({id: row.id, cells: cells});
|
||||
})
|
||||
|
||||
util.render('dataTable', 'data-table-container', {
|
||||
rows: tableRows,
|
||||
headers: app.headers,
|
||||
notEmpty: function() { return app.headers.length > 0 }
|
||||
})
|
||||
|
||||
// TODO: sort out how we carry around offset info
|
||||
// app.offset = response.offset;
|
||||
window.recline = {};
|
||||
|
||||
function activate(e) {
|
||||
e.removeClass('inaction').addClass('action');
|
||||
}
|
||||
|
||||
function deactivate(e) {
|
||||
e.removeClass('action').addClass('inaction');
|
||||
}
|
||||
|
||||
if (app.offset + getPageSize() >= app.rowCount) {
|
||||
deactivate($( '.viewpanel-paging .last'));
|
||||
deactivate($( '.viewpanel-paging .next'));
|
||||
} else {
|
||||
activate($( '.viewpanel-paging .last'));
|
||||
activate($( '.viewpanel-paging .next'));
|
||||
}
|
||||
|
||||
if (app.offset === 0) {
|
||||
deactivate($( '.viewpanel-paging .previous'));
|
||||
deactivate($( '.viewpanel-paging .first'));
|
||||
} else {
|
||||
activate($( '.viewpanel-paging .previous'));
|
||||
activate($( '.viewpanel-paging .first'));
|
||||
}
|
||||
}
|
||||
recline.Document = Backbone.Model.extend({});
|
||||
|
||||
recline.DocumentList = Backbone.Collection.extend({
|
||||
webStore: new WebStore(this.url),
|
||||
model: recline.Document
|
||||
});
|
||||
|
||||
recline.DataTable = Backbone.View.extend({
|
||||
|
||||
el: ".data-table-container",
|
||||
|
||||
function activateControls() {
|
||||
$( '.viewPanel-pagingControls-page' ).click(function( e ) {
|
||||
$(".viewpanel-pagesize .selected").removeClass('selected');
|
||||
$(e.target).addClass('selected');
|
||||
fetchRows(app.offset);
|
||||
});
|
||||
$( '.viewpanel-paging a' ).click(function( e ) {
|
||||
var action = $(e.target);
|
||||
if (action.hasClass("last")) fetchRows(app.rowCount - getPageSize());
|
||||
if (action.hasClass("next")) fetchRows(app.offset + getPageSize());
|
||||
if (action.hasClass("previous")) fetchRows(app.offset - getPageSize());
|
||||
if (action.hasClass("first")) fetchRows(0);
|
||||
});
|
||||
}
|
||||
documents: new recline.DocumentList(this.url),
|
||||
|
||||
function getPageSize() {
|
||||
var pagination = $(".viewpanel-pagesize .selected");
|
||||
if (pagination.length > 0) {
|
||||
return parseInt(pagination.text())
|
||||
} else {
|
||||
return 10;
|
||||
}
|
||||
}
|
||||
|
||||
function fetchRows(offset) {
|
||||
if (offset != undefined) {
|
||||
app.offset = offset;
|
||||
}
|
||||
var numRows = getPageSize();
|
||||
app.tabularData.getRows(numRows, offset).then(function(rows) {
|
||||
$('.viewpanel-pagingcount').text(offset + " - " + ((offset - 1) + getPageSize()));
|
||||
app.cache = rows;
|
||||
renderRows(rows);
|
||||
});
|
||||
}
|
||||
|
||||
function bootstrap(dataset) {
|
||||
util.listenFor(['esc', 'return']);
|
||||
initializeTable(dataset);
|
||||
}
|
||||
|
||||
function initializeTable(dataset) {
|
||||
util.render( 'tableContainer', 'right-panel' );
|
||||
showDialog('busy');
|
||||
dataset.getTabularData().then(function ( tabularData ) {
|
||||
util.hide('dialog');
|
||||
app.headers = tabularData.headers;
|
||||
// TODO: should this be callback like
|
||||
app.rowCount = tabularData.getLength();
|
||||
util.render( 'actions', 'project-actions', $.extend({}, app.dbInfo, {url: app.csvUrl}) );
|
||||
var offset = 0;
|
||||
app.tabularData = tabularData;
|
||||
fetchRows(offset);
|
||||
// template: TODO ???
|
||||
|
||||
events: {
|
||||
|
||||
},
|
||||
|
||||
initialize: function() {
|
||||
var that = this;
|
||||
this.documents.fetch({
|
||||
success: function(collection, resp) {
|
||||
that.render()
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
render: function() {
|
||||
var template = $( ".dataTableTemplate:first" ).html()
|
||||
, htmls = $.mustache(template, {rows: this.documents.toJSON()} )
|
||||
;
|
||||
$(this.el).html(htmls);
|
||||
return this;
|
||||
}
|
||||
|
||||
return {
|
||||
handleMenuClick: handleMenuClick,
|
||||
showDialog: showDialog,
|
||||
bootstrap: bootstrap,
|
||||
fetchRows: fetchRows,
|
||||
activateControls: activateControls,
|
||||
getPageSize: getPageSize,
|
||||
renderRows: renderRows,
|
||||
initializeTable: initializeTable
|
||||
};
|
||||
}();
|
||||
});
|
||||
|
||||
// var recline = function() {
|
||||
//
|
||||
// function showDialog(template, data) {
|
||||
// if (!data) data = {};
|
||||
// util.show('dialog');
|
||||
// util.render(template, 'dialog-content', data);
|
||||
// util.observeExit($('.dialog-content'), function() {
|
||||
// util.hide('dialog');
|
||||
// })
|
||||
// $('.dialog').draggable({ handle: '.dialog-header', cursor: 'move' });
|
||||
// }
|
||||
//
|
||||
// function handleMenuClick() {
|
||||
// $( '.menu li' ).click(function(e) {
|
||||
// var actions = {
|
||||
// bulkEdit: function() { showDialog('bulkEdit', {name: app.currentColumn}) },
|
||||
// transform: function() { showDialog('transform') },
|
||||
// csv: function() { window.location.href = app.csvUrl },
|
||||
// json: function() { window.location.href = "_rewrite/api/json" },
|
||||
// urlImport: function() { showDialog('urlImport') },
|
||||
// pasteImport: function() { showDialog('pasteImport') },
|
||||
// uploadImport: function() { showDialog('uploadImport') },
|
||||
// deleteColumn: function() {
|
||||
// var msg = "Are you sure? This will delete '" + app.currentColumn + "' from all documents.";
|
||||
// if (confirm(msg)) costco.deleteColumn(app.currentColumn);
|
||||
// },
|
||||
// deleteRow: function() {
|
||||
// var doc = _.find(app.cache, function(doc) { return doc._id === app.currentRow });
|
||||
// doc._deleted = true;
|
||||
// costco.uploadDocs([doc]).then(
|
||||
// function(updatedDocs) {
|
||||
// util.notify("Row deleted successfully");
|
||||
// recline.initializeTable(app.offset);
|
||||
// },
|
||||
// function(err) { util.notify("Errorz! " + err) }
|
||||
// )
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// util.hide('menu');
|
||||
// actions[$(e.target).attr('data-action')]();
|
||||
//
|
||||
// e.preventDefault();
|
||||
// })
|
||||
// }
|
||||
//
|
||||
// function renderRows(rows) {
|
||||
// var rows = rows;
|
||||
//
|
||||
// if (rows.length < 1) {
|
||||
// util.render('dataTable', 'data-table-container');
|
||||
// return;
|
||||
// };
|
||||
//
|
||||
// var tableRows = [];
|
||||
//
|
||||
// rows.map(function(row) {
|
||||
// var cells = [];
|
||||
// app.headers.map(function(header) {
|
||||
// var value = "";
|
||||
// if (row[header]) {
|
||||
// value = row[header];
|
||||
// if (typeof(value) == "object") value = JSON.stringify(value);
|
||||
// }
|
||||
// cells.push({header: header, value: value});
|
||||
// })
|
||||
// tableRows.push({id: row.id, cells: cells});
|
||||
// })
|
||||
//
|
||||
// util.render('dataTable', 'data-table-container', {
|
||||
// rows: tableRows,
|
||||
// headers: app.headers,
|
||||
// notEmpty: function() { return app.headers.length > 0 }
|
||||
// })
|
||||
//
|
||||
// // TODO: sort out how we carry around offset info
|
||||
// // app.offset = response.offset;
|
||||
//
|
||||
// function activate(e) {
|
||||
// e.removeClass('inaction').addClass('action');
|
||||
// }
|
||||
//
|
||||
// function deactivate(e) {
|
||||
// e.removeClass('action').addClass('inaction');
|
||||
// }
|
||||
//
|
||||
// if (app.offset + getPageSize() >= app.rowCount) {
|
||||
// deactivate($( '.viewpanel-paging .last'));
|
||||
// deactivate($( '.viewpanel-paging .next'));
|
||||
// } else {
|
||||
// activate($( '.viewpanel-paging .last'));
|
||||
// activate($( '.viewpanel-paging .next'));
|
||||
// }
|
||||
//
|
||||
// if (app.offset === 0) {
|
||||
// deactivate($( '.viewpanel-paging .previous'));
|
||||
// deactivate($( '.viewpanel-paging .first'));
|
||||
// } else {
|
||||
// activate($( '.viewpanel-paging .previous'));
|
||||
// activate($( '.viewpanel-paging .first'));
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// function activateControls() {
|
||||
// $( '.viewPanel-pagingControls-page' ).click(function( e ) {
|
||||
// $(".viewpanel-pagesize .selected").removeClass('selected');
|
||||
// $(e.target).addClass('selected');
|
||||
// fetchRows(app.offset);
|
||||
// });
|
||||
// $( '.viewpanel-paging a' ).click(function( e ) {
|
||||
// var action = $(e.target);
|
||||
// if (action.hasClass("last")) fetchRows(app.rowCount - getPageSize());
|
||||
// if (action.hasClass("next")) fetchRows(app.offset + getPageSize());
|
||||
// if (action.hasClass("previous")) fetchRows(app.offset - getPageSize());
|
||||
// if (action.hasClass("first")) fetchRows(0);
|
||||
// });
|
||||
// }
|
||||
//
|
||||
// function getPageSize() {
|
||||
// var pagination = $(".viewpanel-pagesize .selected");
|
||||
// if (pagination.length > 0) {
|
||||
// return parseInt(pagination.text())
|
||||
// } else {
|
||||
// return 10;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// function fetchRows(offset) {
|
||||
// if (offset != undefined) {
|
||||
// app.offset = offset;
|
||||
// }
|
||||
// var numRows = getPageSize();
|
||||
// app.tabularData.getRows(numRows, offset).then(function(rows) {
|
||||
// $('.viewpanel-pagingcount').text(offset + " - " + ((offset - 1) + getPageSize()));
|
||||
// app.cache = rows;
|
||||
// renderRows(rows);
|
||||
// });
|
||||
// }
|
||||
//
|
||||
// function bootstrap(dataset) {
|
||||
// util.listenFor(['esc', 'return']);
|
||||
// initializeTable(dataset);
|
||||
// }
|
||||
//
|
||||
// function initializeTable(dataset) {
|
||||
// util.render( 'tableContainer', 'right-panel' );
|
||||
// showDialog('busy');
|
||||
// dataset.getTabularData().then(function ( tabularData ) {
|
||||
// util.hide('dialog');
|
||||
// app.headers = tabularData.headers;
|
||||
// // TODO: should this be callback like
|
||||
// app.rowCount = tabularData.getLength();
|
||||
// util.render( 'actions', 'project-actions', $.extend({}, app.dbInfo, {url: app.csvUrl}) );
|
||||
// var offset = 0;
|
||||
// app.tabularData = tabularData;
|
||||
// fetchRows(offset);
|
||||
// })
|
||||
// }
|
||||
//
|
||||
// return {
|
||||
// handleMenuClick: handleMenuClick,
|
||||
// showDialog: showDialog,
|
||||
// bootstrap: bootstrap,
|
||||
// fetchRows: fetchRows,
|
||||
// activateControls: activateControls,
|
||||
// getPageSize: getPageSize,
|
||||
// renderRows: renderRows,
|
||||
// initializeTable: initializeTable
|
||||
// };
|
||||
// }();
|
||||
|
||||
Reference in New Issue
Block a user