start implementing backbone models and collections - ui is currently broken
This commit is contained in:
Max Ogden
@@ -7,6 +7,7 @@
|
|||||||
<link rel="stylesheet" href="style/data-table.css" media="screen">
|
<link rel="stylesheet" href="style/data-table.css" media="screen">
|
||||||
<link rel="stylesheet" href="style/style.css" media="screen">
|
<link rel="stylesheet" href="style/style.css" media="screen">
|
||||||
<script type="text/javascript" src="../src/deps-min.js"></script>
|
<script type="text/javascript" src="../src/deps-min.js"></script>
|
||||||
|
<script type="text/javascript" src="../src/backbone-webstore.js"></script>
|
||||||
<script type="text/javascript" src="../src/util.js"></script>
|
<script type="text/javascript" src="../src/util.js"></script>
|
||||||
<script type="text/javascript" src="../src/costco.js"></script>
|
<script type="text/javascript" src="../src/costco.js"></script>
|
||||||
<script type="text/javascript" src="../src/recline.js"></script>
|
<script type="text/javascript" src="../src/recline.js"></script>
|
||||||
@@ -14,7 +15,7 @@
|
|||||||
</head>
|
</head>
|
||||||
<body class="bod">
|
<body class="bod">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="menu-overlay" style="display: none; z-index: 101; "> </div>
|
<!-- <div class="menu-overlay" style="display: none; z-index: 101; "> </div>
|
||||||
<ul class="menu">
|
<ul class="menu">
|
||||||
</ul>
|
</ul>
|
||||||
<div id="header">
|
<div id="header">
|
||||||
@@ -26,7 +27,8 @@
|
|||||||
<div class="main_content">
|
<div class="main_content">
|
||||||
<div class="left-panel"></div>
|
<div class="left-panel"></div>
|
||||||
<div class="right-panel"></div>
|
<div class="right-panel"></div>
|
||||||
</div>
|
</div> -->
|
||||||
|
<div class="data-table-container"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="notification-container">
|
<div id="notification-container">
|
||||||
|
|||||||
509
demo/js/app.js
509
demo/js/app.js
@@ -1,284 +1,231 @@
|
|||||||
var app = {
|
// HACK: this should be in the html file (and really we need a much simpler example and keep this as recline-full example)
|
||||||
baseURL: util.getBaseURL(document.location.pathname),
|
|
||||||
container: 'main_content',
|
|
||||||
emitter: util.registerEmitter()
|
|
||||||
};
|
|
||||||
|
|
||||||
app.handler = function(route) {
|
|
||||||
if (route.params && route.params.route) {
|
|
||||||
var path = route.params.route;
|
|
||||||
app.routes[path](route.params.id);
|
|
||||||
} else {
|
|
||||||
app.routes['home']();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
app.routes = {
|
|
||||||
home: function() {
|
|
||||||
// HACK: this should be in the html file (and really we need a much simpler example and keep this as recline-full example)
|
|
||||||
var dataset = {
|
|
||||||
getTabularData: function() {
|
|
||||||
var dfd = $.Deferred();
|
|
||||||
dfd.resolve(this.tabularData);
|
|
||||||
return dfd.promise();
|
|
||||||
}
|
|
||||||
, 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();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
recline.bootstrap(dataset);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
app.after = {
|
|
||||||
tableContainer: function() {
|
|
||||||
recline.activateControls();
|
|
||||||
},
|
|
||||||
dataTable: function() {
|
|
||||||
$('.column-header-menu').click(function(e) {
|
|
||||||
app.currentColumn = $(e.target).siblings().text();
|
|
||||||
util.position('menu', e);
|
|
||||||
util.render('columnActions', 'menu');
|
|
||||||
});
|
|
||||||
|
|
||||||
$('.row-header-menu').click(function(e) {
|
|
||||||
app.currentRow = $(e.target).parents('tr:first').attr('data-id');
|
|
||||||
util.position('menu', e);
|
|
||||||
util.render('rowActions', 'menu');
|
|
||||||
});
|
|
||||||
|
|
||||||
$('.data-table-cell-edit').click(function(e) {
|
|
||||||
var editing = $('.data-table-cell-editor-editor');
|
|
||||||
if (editing.length > 0) {
|
|
||||||
editing.parents('.data-table-cell-value').html(editing.text()).siblings('.data-table-cell-edit').removeClass("hidden");
|
|
||||||
}
|
|
||||||
$(e.target).addClass("hidden");
|
|
||||||
var cell = $(e.target).siblings('.data-table-cell-value');
|
|
||||||
cell.data("previousContents", cell.text());
|
|
||||||
util.render('cellEditor', cell, {value: cell.text()});
|
|
||||||
})
|
|
||||||
},
|
|
||||||
columnActions: function() { recline.handleMenuClick() },
|
|
||||||
rowActions: function() { recline.handleMenuClick() },
|
|
||||||
cellEditor: function() {
|
|
||||||
$('.data-table-cell-editor .okButton').click(function(e) {
|
|
||||||
var cell = $(e.target);
|
|
||||||
var rowId = cell.parents('tr').attr('data-id');
|
|
||||||
var header = cell.parents('td').attr('data-header');
|
|
||||||
var doc = _.find(app.cache, function(cacheDoc) {
|
|
||||||
return cacheDoc._id === rowId;
|
|
||||||
});
|
|
||||||
doc[header] = cell.parents('.data-table-cell-editor').find('.data-table-cell-editor-editor').val();
|
|
||||||
util.notify("Updating row...", {persist: true, loader: true});
|
|
||||||
costco.updateDoc(doc).then(function(response) {
|
|
||||||
util.notify("Row updated successfully");
|
|
||||||
recline.initializeTable();
|
|
||||||
})
|
|
||||||
})
|
|
||||||
$('.data-table-cell-editor .cancelButton').click(function(e) {
|
|
||||||
var cell = $(e.target).parents('.data-table-cell-value');
|
|
||||||
cell.html(cell.data('previousContents')).siblings('.data-table-cell-edit').removeClass("hidden");
|
|
||||||
})
|
|
||||||
},
|
|
||||||
actions: function() {
|
|
||||||
$('.button').click(function(e) {
|
|
||||||
var action = $(e.target).attr('data-action');
|
|
||||||
util.position('menu', e, {left: -60, top: 5});
|
|
||||||
util.render(action + 'Actions', 'menu');
|
|
||||||
recline.handleMenuClick();
|
|
||||||
});
|
|
||||||
},
|
|
||||||
controls: function() {
|
|
||||||
$('#logged-in-status').click(function(e) {
|
|
||||||
if ($(e.target).text() === "Sign in") {
|
|
||||||
recline.showDialog("signIn");
|
|
||||||
} else if ($(e.target).text() === "Sign out") {
|
|
||||||
util.notify("Signing you out...", {persist: true, loader: true});
|
|
||||||
couch.logout().then(function(response) {
|
|
||||||
util.notify("Signed out");
|
|
||||||
util.render('controls', 'project-controls', {text: "Sign in"});
|
|
||||||
})
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
signIn: function() {
|
|
||||||
|
|
||||||
$('.dialog-content #username-input').focus();
|
|
||||||
|
|
||||||
$('.dialog-content').find('#sign-in-form').submit(function(e) {
|
|
||||||
$('.dialog-content .okButton').click();
|
|
||||||
return false;
|
|
||||||
})
|
|
||||||
|
|
||||||
$('.dialog-content .okButton').click(function(e) {
|
|
||||||
util.hide('dialog');
|
|
||||||
util.notify("Signing you in...", {persist: true, loader: true});
|
|
||||||
var form = $(e.target).parents('.dialog-content').find('#sign-in-form');
|
|
||||||
var credentials = {
|
|
||||||
username: form.find('#username-input').val(),
|
|
||||||
password: form.find('#password-input').val()
|
|
||||||
}
|
|
||||||
couch.login(credentials).then(function(response) {
|
|
||||||
util.notify("Signed in");
|
|
||||||
util.render('controls', 'project-controls', {text: "Sign out"});
|
|
||||||
}, function(error) {
|
|
||||||
if (error.statusText === "error") util.notify(JSON.parse(error.responseText).reason);
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
},
|
|
||||||
bulkEdit: function() {
|
|
||||||
$('.dialog-content .okButton').click(function(e) {
|
|
||||||
var funcText = $('.expression-preview-code').val();
|
|
||||||
var editFunc = costco.evalFunction(funcText);
|
|
||||||
;
|
|
||||||
if (editFunc.errorMessage) {
|
|
||||||
util.notify("Error with function! " + editFunc.errorMessage);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
util.hide('dialog');
|
|
||||||
costco.updateDocs(editFunc);
|
|
||||||
})
|
|
||||||
|
|
||||||
var editor = $('.expression-preview-code');
|
|
||||||
editor.val("function(doc) {\n doc['"+ app.currentColumn+"'] = doc['"+ app.currentColumn+"'];\n return doc;\n}");
|
|
||||||
editor.focus().get(0).setSelectionRange(18, 18);
|
|
||||||
editor.keydown(function(e) {
|
|
||||||
// if you don't setTimeout it won't grab the latest character if you call e.target.value
|
|
||||||
window.setTimeout( function() {
|
|
||||||
var errors = $('.expression-preview-parsing-status');
|
|
||||||
var editFunc = costco.evalFunction(e.target.value);
|
|
||||||
if (!editFunc.errorMessage) {
|
|
||||||
errors.text('No syntax error.');
|
|
||||||
costco.previewTransform(app.cache, editFunc, app.currentColumn);
|
|
||||||
} else {
|
|
||||||
errors.text(editFunc.errorMessage);
|
|
||||||
}
|
|
||||||
}, 1, true);
|
|
||||||
});
|
|
||||||
editor.keydown();
|
|
||||||
},
|
|
||||||
transform: function() {
|
|
||||||
$('.dialog-content .okButton').click(function(e) {
|
|
||||||
util.notify("Not implemented yet, sorry! :D");
|
|
||||||
util.hide('dialog');
|
|
||||||
})
|
|
||||||
|
|
||||||
var editor = $('.expression-preview-code');
|
|
||||||
editor.val("function(val) {\n if(_.isString(val)) this.update(\"pizza\")\n}");
|
|
||||||
editor.focus().get(0).setSelectionRange(62,62);
|
|
||||||
editor.keydown(function(e) {
|
|
||||||
// if you don't setTimeout it won't grab the latest character if you call e.target.value
|
|
||||||
window.setTimeout( function() {
|
|
||||||
var errors = $('.expression-preview-parsing-status');
|
|
||||||
var editFunc = costco.evalFunction(e.target.value);
|
|
||||||
if (!editFunc.errorMessage) {
|
|
||||||
errors.text('No syntax error.');
|
|
||||||
var traverseFunc = function(doc) {
|
|
||||||
util.traverse(doc).forEach(editFunc);
|
|
||||||
return doc;
|
|
||||||
}
|
|
||||||
costco.previewTransform(app.cache, traverseFunc);
|
|
||||||
} else {
|
|
||||||
errors.text(editFunc.errorMessage);
|
|
||||||
}
|
|
||||||
}, 1, true);
|
|
||||||
});
|
|
||||||
editor.keydown();
|
|
||||||
},
|
|
||||||
urlImport: function() {
|
|
||||||
$('.dialog-content .okButton').click(function(e) {
|
|
||||||
app.apiURL = $('#url-input').val().trim();
|
|
||||||
util.notify("Fetching data...", {persist: true, loader: true});
|
|
||||||
$.getJSON(app.apiURL + "?callback=?").then(
|
|
||||||
function(docs) {
|
|
||||||
app.apiDocs = docs;
|
|
||||||
util.notify("Data fetched successfully!");
|
|
||||||
recline.showDialog('jsonTree');
|
|
||||||
},
|
|
||||||
function (err) {
|
|
||||||
util.hide('dialog');
|
|
||||||
util.notify("Data fetch error: " + err.responseText);
|
|
||||||
}
|
|
||||||
);
|
|
||||||
})
|
|
||||||
},
|
|
||||||
uploadImport: function() {
|
|
||||||
$('.dialog-content .okButton').click(function(e) {
|
|
||||||
util.hide('dialog');
|
|
||||||
util.notify("Saving documents...", {persist: true, loader: true});
|
|
||||||
costco.uploadCSV();
|
|
||||||
})
|
|
||||||
},
|
|
||||||
jsonTree: function() {
|
|
||||||
util.renderTree(app.apiDocs);
|
|
||||||
$('.dialog-content .okButton').click(function(e) {
|
|
||||||
util.hide('dialog');
|
|
||||||
util.notify("Saving documents...", {persist: true, loader: true});
|
|
||||||
costco.uploadDocs(util.lookupPath(util.selectedTreePath())).then(function(msg) {
|
|
||||||
util.notify("Docs saved successfully!");
|
|
||||||
recline.initializeTable(app.offset);
|
|
||||||
});
|
|
||||||
})
|
|
||||||
},
|
|
||||||
pasteImport: function() {
|
|
||||||
$('.dialog-content .okButton').click(function(e) {
|
|
||||||
util.notify("Uploading documents...", {persist: true, loader: true});
|
|
||||||
try {
|
|
||||||
var docs = JSON.parse($('.data-table-cell-copypaste-editor').val());
|
|
||||||
} catch(e) {
|
|
||||||
util.notify("JSON parse error: " + e);
|
|
||||||
}
|
|
||||||
if (docs) {
|
|
||||||
if(_.isArray(docs)) {
|
|
||||||
costco.uploadDocs(docs).then(
|
|
||||||
function(docs) {
|
|
||||||
util.notify("Data uploaded successfully!");
|
|
||||||
recline.initializeTable(app.offset);
|
|
||||||
util.hide('dialog');
|
|
||||||
},
|
|
||||||
function (err) {
|
|
||||||
util.hide('dialog');
|
|
||||||
}
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
util.notify("Error: JSON must be an array of objects");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
app.sammy = $.sammy(function () {
|
|
||||||
this.get('', app.handler);
|
|
||||||
this.get("#/", app.handler);
|
|
||||||
this.get("#:route", app.handler);
|
|
||||||
this.get("#:route/:id", app.handler);
|
|
||||||
});
|
|
||||||
|
|
||||||
$(function() {
|
$(function() {
|
||||||
app.emitter.on('error', function(error) {
|
window.app = new recline.DataTable({url: "awesome.com/webstore.json"});
|
||||||
util.notify("Server error: " + error);
|
|
||||||
})
|
|
||||||
|
|
||||||
util.traverse = require('traverse');
|
|
||||||
app.sammy.run();
|
|
||||||
})
|
})
|
||||||
|
|
||||||
|
// app.after = {
|
||||||
|
// tableContainer: function() {
|
||||||
|
// recline.activateControls();
|
||||||
|
// },
|
||||||
|
// dataTable: function() {
|
||||||
|
// $('.column-header-menu').click(function(e) {
|
||||||
|
// app.currentColumn = $(e.target).siblings().text();
|
||||||
|
// util.position('menu', e);
|
||||||
|
// util.render('columnActions', 'menu');
|
||||||
|
// });
|
||||||
|
//
|
||||||
|
// $('.row-header-menu').click(function(e) {
|
||||||
|
// app.currentRow = $(e.target).parents('tr:first').attr('data-id');
|
||||||
|
// util.position('menu', e);
|
||||||
|
// util.render('rowActions', 'menu');
|
||||||
|
// });
|
||||||
|
//
|
||||||
|
// $('.data-table-cell-edit').click(function(e) {
|
||||||
|
// var editing = $('.data-table-cell-editor-editor');
|
||||||
|
// if (editing.length > 0) {
|
||||||
|
// editing.parents('.data-table-cell-value').html(editing.text()).siblings('.data-table-cell-edit').removeClass("hidden");
|
||||||
|
// }
|
||||||
|
// $(e.target).addClass("hidden");
|
||||||
|
// var cell = $(e.target).siblings('.data-table-cell-value');
|
||||||
|
// cell.data("previousContents", cell.text());
|
||||||
|
// util.render('cellEditor', cell, {value: cell.text()});
|
||||||
|
// })
|
||||||
|
// },
|
||||||
|
// columnActions: function() { recline.handleMenuClick() },
|
||||||
|
// rowActions: function() { recline.handleMenuClick() },
|
||||||
|
// cellEditor: function() {
|
||||||
|
// $('.data-table-cell-editor .okButton').click(function(e) {
|
||||||
|
// var cell = $(e.target);
|
||||||
|
// var rowId = cell.parents('tr').attr('data-id');
|
||||||
|
// var header = cell.parents('td').attr('data-header');
|
||||||
|
// var doc = _.find(app.cache, function(cacheDoc) {
|
||||||
|
// return cacheDoc._id === rowId;
|
||||||
|
// });
|
||||||
|
// doc[header] = cell.parents('.data-table-cell-editor').find('.data-table-cell-editor-editor').val();
|
||||||
|
// util.notify("Updating row...", {persist: true, loader: true});
|
||||||
|
// costco.updateDoc(doc).then(function(response) {
|
||||||
|
// util.notify("Row updated successfully");
|
||||||
|
// recline.initializeTable();
|
||||||
|
// })
|
||||||
|
// })
|
||||||
|
// $('.data-table-cell-editor .cancelButton').click(function(e) {
|
||||||
|
// var cell = $(e.target).parents('.data-table-cell-value');
|
||||||
|
// cell.html(cell.data('previousContents')).siblings('.data-table-cell-edit').removeClass("hidden");
|
||||||
|
// })
|
||||||
|
// },
|
||||||
|
// actions: function() {
|
||||||
|
// $('.button').click(function(e) {
|
||||||
|
// var action = $(e.target).attr('data-action');
|
||||||
|
// util.position('menu', e, {left: -60, top: 5});
|
||||||
|
// util.render(action + 'Actions', 'menu');
|
||||||
|
// recline.handleMenuClick();
|
||||||
|
// });
|
||||||
|
// },
|
||||||
|
// controls: function() {
|
||||||
|
// $('#logged-in-status').click(function(e) {
|
||||||
|
// if ($(e.target).text() === "Sign in") {
|
||||||
|
// recline.showDialog("signIn");
|
||||||
|
// } else if ($(e.target).text() === "Sign out") {
|
||||||
|
// util.notify("Signing you out...", {persist: true, loader: true});
|
||||||
|
// couch.logout().then(function(response) {
|
||||||
|
// util.notify("Signed out");
|
||||||
|
// util.render('controls', 'project-controls', {text: "Sign in"});
|
||||||
|
// })
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
// },
|
||||||
|
// signIn: function() {
|
||||||
|
//
|
||||||
|
// $('.dialog-content #username-input').focus();
|
||||||
|
//
|
||||||
|
// $('.dialog-content').find('#sign-in-form').submit(function(e) {
|
||||||
|
// $('.dialog-content .okButton').click();
|
||||||
|
// return false;
|
||||||
|
// })
|
||||||
|
//
|
||||||
|
// $('.dialog-content .okButton').click(function(e) {
|
||||||
|
// util.hide('dialog');
|
||||||
|
// util.notify("Signing you in...", {persist: true, loader: true});
|
||||||
|
// var form = $(e.target).parents('.dialog-content').find('#sign-in-form');
|
||||||
|
// var credentials = {
|
||||||
|
// username: form.find('#username-input').val(),
|
||||||
|
// password: form.find('#password-input').val()
|
||||||
|
// }
|
||||||
|
// couch.login(credentials).then(function(response) {
|
||||||
|
// util.notify("Signed in");
|
||||||
|
// util.render('controls', 'project-controls', {text: "Sign out"});
|
||||||
|
// }, function(error) {
|
||||||
|
// if (error.statusText === "error") util.notify(JSON.parse(error.responseText).reason);
|
||||||
|
// })
|
||||||
|
// })
|
||||||
|
//
|
||||||
|
// },
|
||||||
|
// bulkEdit: function() {
|
||||||
|
// $('.dialog-content .okButton').click(function(e) {
|
||||||
|
// var funcText = $('.expression-preview-code').val();
|
||||||
|
// var editFunc = costco.evalFunction(funcText);
|
||||||
|
// ;
|
||||||
|
// if (editFunc.errorMessage) {
|
||||||
|
// util.notify("Error with function! " + editFunc.errorMessage);
|
||||||
|
// return;
|
||||||
|
// }
|
||||||
|
// util.hide('dialog');
|
||||||
|
// costco.updateDocs(editFunc);
|
||||||
|
// })
|
||||||
|
//
|
||||||
|
// var editor = $('.expression-preview-code');
|
||||||
|
// editor.val("function(doc) {\n doc['"+ app.currentColumn+"'] = doc['"+ app.currentColumn+"'];\n return doc;\n}");
|
||||||
|
// editor.focus().get(0).setSelectionRange(18, 18);
|
||||||
|
// editor.keydown(function(e) {
|
||||||
|
// // if you don't setTimeout it won't grab the latest character if you call e.target.value
|
||||||
|
// window.setTimeout( function() {
|
||||||
|
// var errors = $('.expression-preview-parsing-status');
|
||||||
|
// var editFunc = costco.evalFunction(e.target.value);
|
||||||
|
// if (!editFunc.errorMessage) {
|
||||||
|
// errors.text('No syntax error.');
|
||||||
|
// costco.previewTransform(app.cache, editFunc, app.currentColumn);
|
||||||
|
// } else {
|
||||||
|
// errors.text(editFunc.errorMessage);
|
||||||
|
// }
|
||||||
|
// }, 1, true);
|
||||||
|
// });
|
||||||
|
// editor.keydown();
|
||||||
|
// },
|
||||||
|
// transform: function() {
|
||||||
|
// $('.dialog-content .okButton').click(function(e) {
|
||||||
|
// util.notify("Not implemented yet, sorry! :D");
|
||||||
|
// util.hide('dialog');
|
||||||
|
// })
|
||||||
|
//
|
||||||
|
// var editor = $('.expression-preview-code');
|
||||||
|
// editor.val("function(val) {\n if(_.isString(val)) this.update(\"pizza\")\n}");
|
||||||
|
// editor.focus().get(0).setSelectionRange(62,62);
|
||||||
|
// editor.keydown(function(e) {
|
||||||
|
// // if you don't setTimeout it won't grab the latest character if you call e.target.value
|
||||||
|
// window.setTimeout( function() {
|
||||||
|
// var errors = $('.expression-preview-parsing-status');
|
||||||
|
// var editFunc = costco.evalFunction(e.target.value);
|
||||||
|
// if (!editFunc.errorMessage) {
|
||||||
|
// errors.text('No syntax error.');
|
||||||
|
// var traverseFunc = function(doc) {
|
||||||
|
// util.traverse(doc).forEach(editFunc);
|
||||||
|
// return doc;
|
||||||
|
// }
|
||||||
|
// costco.previewTransform(app.cache, traverseFunc);
|
||||||
|
// } else {
|
||||||
|
// errors.text(editFunc.errorMessage);
|
||||||
|
// }
|
||||||
|
// }, 1, true);
|
||||||
|
// });
|
||||||
|
// editor.keydown();
|
||||||
|
// },
|
||||||
|
// urlImport: function() {
|
||||||
|
// $('.dialog-content .okButton').click(function(e) {
|
||||||
|
// app.apiURL = $('#url-input').val().trim();
|
||||||
|
// util.notify("Fetching data...", {persist: true, loader: true});
|
||||||
|
// $.getJSON(app.apiURL + "?callback=?").then(
|
||||||
|
// function(docs) {
|
||||||
|
// app.apiDocs = docs;
|
||||||
|
// util.notify("Data fetched successfully!");
|
||||||
|
// recline.showDialog('jsonTree');
|
||||||
|
// },
|
||||||
|
// function (err) {
|
||||||
|
// util.hide('dialog');
|
||||||
|
// util.notify("Data fetch error: " + err.responseText);
|
||||||
|
// }
|
||||||
|
// );
|
||||||
|
// })
|
||||||
|
// },
|
||||||
|
// uploadImport: function() {
|
||||||
|
// $('.dialog-content .okButton').click(function(e) {
|
||||||
|
// util.hide('dialog');
|
||||||
|
// util.notify("Saving documents...", {persist: true, loader: true});
|
||||||
|
// costco.uploadCSV();
|
||||||
|
// })
|
||||||
|
// },
|
||||||
|
// jsonTree: function() {
|
||||||
|
// util.renderTree(app.apiDocs);
|
||||||
|
// $('.dialog-content .okButton').click(function(e) {
|
||||||
|
// util.hide('dialog');
|
||||||
|
// util.notify("Saving documents...", {persist: true, loader: true});
|
||||||
|
// costco.uploadDocs(util.lookupPath(util.selectedTreePath())).then(function(msg) {
|
||||||
|
// util.notify("Docs saved successfully!");
|
||||||
|
// recline.initializeTable(app.offset);
|
||||||
|
// });
|
||||||
|
// })
|
||||||
|
// },
|
||||||
|
// pasteImport: function() {
|
||||||
|
// $('.dialog-content .okButton').click(function(e) {
|
||||||
|
// util.notify("Uploading documents...", {persist: true, loader: true});
|
||||||
|
// try {
|
||||||
|
// var docs = JSON.parse($('.data-table-cell-copypaste-editor').val());
|
||||||
|
// } catch(e) {
|
||||||
|
// util.notify("JSON parse error: " + e);
|
||||||
|
// }
|
||||||
|
// if (docs) {
|
||||||
|
// if(_.isArray(docs)) {
|
||||||
|
// costco.uploadDocs(docs).then(
|
||||||
|
// function(docs) {
|
||||||
|
// util.notify("Data uploaded successfully!");
|
||||||
|
// recline.initializeTable(app.offset);
|
||||||
|
// util.hide('dialog');
|
||||||
|
// },
|
||||||
|
// function (err) {
|
||||||
|
// util.hide('dialog');
|
||||||
|
// }
|
||||||
|
// );
|
||||||
|
// } else {
|
||||||
|
// util.notify("Error: JSON must be an array of objects");
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// })
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
//
|
||||||
|
// app.sammy = $.sammy(function () {
|
||||||
|
// this.get('', app.handler);
|
||||||
|
// this.get("#/", app.handler);
|
||||||
|
// this.get("#:route", app.handler);
|
||||||
|
// this.get("#:route/:id", app.handler);
|
||||||
|
// });
|
||||||
|
|||||||
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
367
src/recline.js
367
src/recline.js
@@ -1,170 +1,209 @@
|
|||||||
var recline = function() {
|
window.recline = {};
|
||||||
|
|
||||||
function showDialog(template, data) {
|
recline.Document = Backbone.Model.extend({});
|
||||||
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() {
|
recline.DocumentList = Backbone.Collection.extend({
|
||||||
$( '.menu li' ).click(function(e) {
|
webStore: new WebStore(this.url),
|
||||||
var actions = {
|
model: recline.Document
|
||||||
bulkEdit: function() { showDialog('bulkEdit', {name: app.currentColumn}) },
|
});
|
||||||
transform: function() { showDialog('transform') },
|
|
||||||
csv: function() { window.location.href = app.csvUrl },
|
recline.DataTable = Backbone.View.extend({
|
||||||
json: function() { window.location.href = "_rewrite/api/json" },
|
|
||||||
urlImport: function() { showDialog('urlImport') },
|
el: ".data-table-container",
|
||||||
pasteImport: function() { showDialog('pasteImport') },
|
|
||||||
uploadImport: function() { showDialog('uploadImport') },
|
documents: new recline.DocumentList(this.url),
|
||||||
deleteColumn: function() {
|
|
||||||
var msg = "Are you sure? This will delete '" + app.currentColumn + "' from all documents.";
|
// template: TODO ???
|
||||||
if (confirm(msg)) costco.deleteColumn(app.currentColumn);
|
|
||||||
},
|
events: {
|
||||||
deleteRow: function() {
|
|
||||||
var doc = _.find(app.cache, function(doc) { return doc._id === app.currentRow });
|
},
|
||||||
doc._deleted = true;
|
|
||||||
costco.uploadDocs([doc]).then(
|
initialize: function() {
|
||||||
function(updatedDocs) {
|
var that = this;
|
||||||
util.notify("Row deleted successfully");
|
this.documents.fetch({
|
||||||
recline.initializeTable(app.offset);
|
success: function(collection, resp) {
|
||||||
},
|
that.render()
|
||||||
function(err) { util.notify("Errorz! " + err) }
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
util.hide('menu');
|
|
||||||
actions[$(e.target).attr('data-action')]();
|
|
||||||
|
|
||||||
e.preventDefault();
|
|
||||||
})
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
render: function() {
|
||||||
|
var template = $( ".dataTableTemplate:first" ).html()
|
||||||
|
, htmls = $.mustache(template, {rows: this.documents.toJSON()} )
|
||||||
|
;
|
||||||
|
$(this.el).html(htmls);
|
||||||
|
return this;
|
||||||
}
|
}
|
||||||
|
});
|
||||||
|
|
||||||
function renderRows(rows) {
|
// var recline = function() {
|
||||||
var rows = rows;
|
//
|
||||||
|
// function showDialog(template, data) {
|
||||||
if (rows.length < 1) {
|
// if (!data) data = {};
|
||||||
util.render('dataTable', 'data-table-container');
|
// util.show('dialog');
|
||||||
return;
|
// util.render(template, 'dialog-content', data);
|
||||||
};
|
// util.observeExit($('.dialog-content'), function() {
|
||||||
|
// util.hide('dialog');
|
||||||
var tableRows = [];
|
// })
|
||||||
|
// $('.dialog').draggable({ handle: '.dialog-header', cursor: 'move' });
|
||||||
rows.map(function(row) {
|
// }
|
||||||
var cells = [];
|
//
|
||||||
app.headers.map(function(header) {
|
// function handleMenuClick() {
|
||||||
var value = "";
|
// $( '.menu li' ).click(function(e) {
|
||||||
if (row[header]) {
|
// var actions = {
|
||||||
value = row[header];
|
// bulkEdit: function() { showDialog('bulkEdit', {name: app.currentColumn}) },
|
||||||
if (typeof(value) == "object") value = JSON.stringify(value);
|
// transform: function() { showDialog('transform') },
|
||||||
}
|
// csv: function() { window.location.href = app.csvUrl },
|
||||||
cells.push({header: header, value: value});
|
// json: function() { window.location.href = "_rewrite/api/json" },
|
||||||
})
|
// urlImport: function() { showDialog('urlImport') },
|
||||||
tableRows.push({id: row.id, cells: cells});
|
// pasteImport: function() { showDialog('pasteImport') },
|
||||||
})
|
// uploadImport: function() { showDialog('uploadImport') },
|
||||||
|
// deleteColumn: function() {
|
||||||
util.render('dataTable', 'data-table-container', {
|
// var msg = "Are you sure? This will delete '" + app.currentColumn + "' from all documents.";
|
||||||
rows: tableRows,
|
// if (confirm(msg)) costco.deleteColumn(app.currentColumn);
|
||||||
headers: app.headers,
|
// },
|
||||||
notEmpty: function() { return app.headers.length > 0 }
|
// deleteRow: function() {
|
||||||
})
|
// var doc = _.find(app.cache, function(doc) { return doc._id === app.currentRow });
|
||||||
|
// doc._deleted = true;
|
||||||
// TODO: sort out how we carry around offset info
|
// costco.uploadDocs([doc]).then(
|
||||||
// app.offset = response.offset;
|
// function(updatedDocs) {
|
||||||
|
// util.notify("Row deleted successfully");
|
||||||
function activate(e) {
|
// recline.initializeTable(app.offset);
|
||||||
e.removeClass('inaction').addClass('action');
|
// },
|
||||||
}
|
// function(err) { util.notify("Errorz! " + err) }
|
||||||
|
// )
|
||||||
function deactivate(e) {
|
// }
|
||||||
e.removeClass('action').addClass('inaction');
|
// }
|
||||||
}
|
//
|
||||||
|
// util.hide('menu');
|
||||||
if (app.offset + getPageSize() >= app.rowCount) {
|
// actions[$(e.target).attr('data-action')]();
|
||||||
deactivate($( '.viewpanel-paging .last'));
|
//
|
||||||
deactivate($( '.viewpanel-paging .next'));
|
// e.preventDefault();
|
||||||
} else {
|
// })
|
||||||
activate($( '.viewpanel-paging .last'));
|
// }
|
||||||
activate($( '.viewpanel-paging .next'));
|
//
|
||||||
}
|
// function renderRows(rows) {
|
||||||
|
// var rows = rows;
|
||||||
if (app.offset === 0) {
|
//
|
||||||
deactivate($( '.viewpanel-paging .previous'));
|
// if (rows.length < 1) {
|
||||||
deactivate($( '.viewpanel-paging .first'));
|
// util.render('dataTable', 'data-table-container');
|
||||||
} else {
|
// return;
|
||||||
activate($( '.viewpanel-paging .previous'));
|
// };
|
||||||
activate($( '.viewpanel-paging .first'));
|
//
|
||||||
}
|
// var tableRows = [];
|
||||||
}
|
//
|
||||||
|
// rows.map(function(row) {
|
||||||
function activateControls() {
|
// var cells = [];
|
||||||
$( '.viewPanel-pagingControls-page' ).click(function( e ) {
|
// app.headers.map(function(header) {
|
||||||
$(".viewpanel-pagesize .selected").removeClass('selected');
|
// var value = "";
|
||||||
$(e.target).addClass('selected');
|
// if (row[header]) {
|
||||||
fetchRows(app.offset);
|
// value = row[header];
|
||||||
});
|
// if (typeof(value) == "object") value = JSON.stringify(value);
|
||||||
$( '.viewpanel-paging a' ).click(function( e ) {
|
// }
|
||||||
var action = $(e.target);
|
// cells.push({header: header, value: value});
|
||||||
if (action.hasClass("last")) fetchRows(app.rowCount - getPageSize());
|
// })
|
||||||
if (action.hasClass("next")) fetchRows(app.offset + getPageSize());
|
// tableRows.push({id: row.id, cells: cells});
|
||||||
if (action.hasClass("previous")) fetchRows(app.offset - getPageSize());
|
// })
|
||||||
if (action.hasClass("first")) fetchRows(0);
|
//
|
||||||
});
|
// util.render('dataTable', 'data-table-container', {
|
||||||
}
|
// rows: tableRows,
|
||||||
|
// headers: app.headers,
|
||||||
function getPageSize() {
|
// notEmpty: function() { return app.headers.length > 0 }
|
||||||
var pagination = $(".viewpanel-pagesize .selected");
|
// })
|
||||||
if (pagination.length > 0) {
|
//
|
||||||
return parseInt(pagination.text())
|
// // TODO: sort out how we carry around offset info
|
||||||
} else {
|
// // app.offset = response.offset;
|
||||||
return 10;
|
//
|
||||||
}
|
// function activate(e) {
|
||||||
}
|
// e.removeClass('inaction').addClass('action');
|
||||||
|
// }
|
||||||
function fetchRows(offset) {
|
//
|
||||||
if (offset != undefined) {
|
// function deactivate(e) {
|
||||||
app.offset = offset;
|
// e.removeClass('action').addClass('inaction');
|
||||||
}
|
// }
|
||||||
var numRows = getPageSize();
|
//
|
||||||
app.tabularData.getRows(numRows, offset).then(function(rows) {
|
// if (app.offset + getPageSize() >= app.rowCount) {
|
||||||
$('.viewpanel-pagingcount').text(offset + " - " + ((offset - 1) + getPageSize()));
|
// deactivate($( '.viewpanel-paging .last'));
|
||||||
app.cache = rows;
|
// deactivate($( '.viewpanel-paging .next'));
|
||||||
renderRows(rows);
|
// } else {
|
||||||
});
|
// activate($( '.viewpanel-paging .last'));
|
||||||
}
|
// activate($( '.viewpanel-paging .next'));
|
||||||
|
// }
|
||||||
function bootstrap(dataset) {
|
//
|
||||||
util.listenFor(['esc', 'return']);
|
// if (app.offset === 0) {
|
||||||
initializeTable(dataset);
|
// deactivate($( '.viewpanel-paging .previous'));
|
||||||
}
|
// deactivate($( '.viewpanel-paging .first'));
|
||||||
|
// } else {
|
||||||
function initializeTable(dataset) {
|
// activate($( '.viewpanel-paging .previous'));
|
||||||
util.render( 'tableContainer', 'right-panel' );
|
// activate($( '.viewpanel-paging .first'));
|
||||||
showDialog('busy');
|
// }
|
||||||
dataset.getTabularData().then(function ( tabularData ) {
|
// }
|
||||||
util.hide('dialog');
|
//
|
||||||
app.headers = tabularData.headers;
|
// function activateControls() {
|
||||||
// TODO: should this be callback like
|
// $( '.viewPanel-pagingControls-page' ).click(function( e ) {
|
||||||
app.rowCount = tabularData.getLength();
|
// $(".viewpanel-pagesize .selected").removeClass('selected');
|
||||||
util.render( 'actions', 'project-actions', $.extend({}, app.dbInfo, {url: app.csvUrl}) );
|
// $(e.target).addClass('selected');
|
||||||
var offset = 0;
|
// fetchRows(app.offset);
|
||||||
app.tabularData = tabularData;
|
// });
|
||||||
fetchRows(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());
|
||||||
return {
|
// if (action.hasClass("previous")) fetchRows(app.offset - getPageSize());
|
||||||
handleMenuClick: handleMenuClick,
|
// if (action.hasClass("first")) fetchRows(0);
|
||||||
showDialog: showDialog,
|
// });
|
||||||
bootstrap: bootstrap,
|
// }
|
||||||
fetchRows: fetchRows,
|
//
|
||||||
activateControls: activateControls,
|
// function getPageSize() {
|
||||||
getPageSize: getPageSize,
|
// var pagination = $(".viewpanel-pagesize .selected");
|
||||||
renderRows: renderRows,
|
// if (pagination.length > 0) {
|
||||||
initializeTable: initializeTable
|
// 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