Started client-side scaffolding for faceted browsing.
git-svn-id: http://google-refine.googlecode.com/svn/trunk@12 7d457c2a-affb-35e4-300a-418c747d4874
This commit is contained in:
parent
e0365f45c8
commit
dce2ec71aa
@ -20,7 +20,7 @@ import com.metaweb.gridlock.model.Row;
|
||||
|
||||
public class GetRowsCommand extends Command {
|
||||
@Override
|
||||
public void doGet(HttpServletRequest request, HttpServletResponse response)
|
||||
public void doPost(HttpServletRequest request, HttpServletResponse response)
|
||||
throws ServletException, IOException {
|
||||
|
||||
try {
|
||||
@ -47,9 +47,11 @@ public class GetRowsCommand extends Command {
|
||||
}
|
||||
|
||||
@Override
|
||||
public void internalVisit(Row row) {
|
||||
public void internalVisit(int rowIndex, Row row) {
|
||||
try {
|
||||
list.add(row.getJSON(options));
|
||||
JSONObject ro = row.getJSON(options);
|
||||
ro.put("i", rowIndex);
|
||||
list.add(ro);
|
||||
} catch (JSONException e) {
|
||||
}
|
||||
}
|
||||
@ -86,12 +88,12 @@ public class GetRowsCommand extends Command {
|
||||
@Override
|
||||
public void visit(int rowIndex, Row row) {
|
||||
if (total >= start && total < start + limit) {
|
||||
internalVisit(row);
|
||||
internalVisit(rowIndex, row);
|
||||
}
|
||||
total++;
|
||||
}
|
||||
|
||||
protected void internalVisit(Row row) {
|
||||
protected void internalVisit(int rowIndex, Row row) {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -1 +1 @@
|
||||
<html>
<head>
<title>Gridlock</title>
<link rel="stylesheet" href="/styles/common.css" />
<link rel="stylesheet" href="/styles/project.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="scripts/util/url.js"></script>
<script type="text/javascript" src="scripts/util/string.js"></script>
<script type="text/javascript" src="scripts/util/ajax.js"></script>
<script type="text/javascript" src="scripts/util/menu.js"></script>
<script type="text/javascript" src="scripts/project.js"></script>
<script type="text/javascript" src="scripts/project/data-table-view.js"></script>
<script type="text/javascript" src="scripts/project/history-widget.js"></script>
</head>
<body>
<div id="header">
<h1 id="title">Gridlock</h1>
</div>
<div id="body">
Loading ...
</div>
</body>
</html>
|
||||
<html>
<head>
<title>Gridlock</title>
<link rel="stylesheet" href="/styles/common.css" />
<link rel="stylesheet" href="/styles/project.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="scripts/util/url.js"></script>
<script type="text/javascript" src="scripts/util/string.js"></script>
<script type="text/javascript" src="scripts/util/ajax.js"></script>
<script type="text/javascript" src="scripts/util/menu.js"></script>
<script type="text/javascript" src="scripts/project.js"></script>
<script type="text/javascript" src="scripts/project/browsing-engine.js"></script>
<script type="text/javascript" src="scripts/project/data-table-view.js"></script>
<script type="text/javascript" src="scripts/project/history-widget.js"></script>
</head>
<body>
<div id="header">
<h1 id="title">Gridlock</h1>
</div>
<div id="body">
Loading ...
</div>
</body>
</html>
|
@ -5,10 +5,7 @@ function onLoad() {
|
||||
var params = URL.getParameters();
|
||||
if ("project" in params) {
|
||||
theProject = {
|
||||
id: parseInt(params.project),
|
||||
view: {
|
||||
pageSize: 25
|
||||
}
|
||||
id: parseInt(params.project)
|
||||
};
|
||||
|
||||
Ajax.chainGetJSON(
|
||||
@ -23,10 +20,6 @@ function onLoad() {
|
||||
theProject.columnModel.columns[i].collapsed = false;
|
||||
}
|
||||
},
|
||||
"/command/get-rows?" + $.param({ project: theProject.id, start: 0, limit: 25 }), null,
|
||||
function(data) {
|
||||
theProject.rowModel = data;
|
||||
},
|
||||
function() {
|
||||
initializeUI();
|
||||
}
|
||||
@ -56,6 +49,7 @@ function initializeUI() {
|
||||
ui.facetPanel = $('<div></div>').appendTo(tdRight);
|
||||
ui.historyPanel = $('<div></div>').addClass("history-panel").appendTo(document.body);
|
||||
|
||||
ui.dataTableView = new DataTableView(ui.viewPanel);
|
||||
ui.browsingEngine = new BrowsingEngine(ui.facetPanel);
|
||||
ui.historyWidget = new HistoryWidget(ui.historyPanel);
|
||||
ui.dataTableView = new DataTableView(ui.viewPanel);
|
||||
}
|
||||
|
19
src/main/webapp/scripts/project/browsing-engine.js
Normal file
19
src/main/webapp/scripts/project/browsing-engine.js
Normal file
@ -0,0 +1,19 @@
|
||||
function BrowsingEngine(div) {
|
||||
this._div = div;
|
||||
this.render();
|
||||
|
||||
this._facets = [];
|
||||
}
|
||||
|
||||
BrowsingEngine.prototype.render = function() {
|
||||
var self = this;
|
||||
var container = this._div.empty();
|
||||
};
|
||||
|
||||
BrowsingEngine.prototype.getJSON = function() {
|
||||
var a = { facets: [] };
|
||||
for (var i = 0; i < this._facets.length; i++) {
|
||||
a.facets.push(this._facets[i].getJSON());
|
||||
}
|
||||
return a;
|
||||
};
|
@ -1,6 +1,7 @@
|
||||
function DataTableView(div) {
|
||||
this._div = div;
|
||||
this.render();
|
||||
this._pageSize = 20;
|
||||
this._showRows(0);
|
||||
}
|
||||
|
||||
DataTableView.prototype.render = function() {
|
||||
@ -11,8 +12,8 @@ DataTableView.prototype.render = function() {
|
||||
$('<span>' +
|
||||
(theProject.rowModel.start + 1) + " to " +
|
||||
(theProject.rowModel.start + theProject.rowModel.limit) + " of " +
|
||||
(theProject.rowModel.total) +
|
||||
" rows total" +
|
||||
(theProject.rowModel.filtered) + " filtered rows, " +
|
||||
(theProject.rowModel.total) + " total rows" +
|
||||
'</span>'
|
||||
).appendTo(divSummary);
|
||||
|
||||
@ -88,7 +89,7 @@ DataTableView.prototype.render = function() {
|
||||
tr.className = (r % 2) == 1 ? "odd" : "even";
|
||||
|
||||
var td = tr.insertCell(tr.cells.length);
|
||||
$(td).html((theProject.rowModel.start + r + 1) + ".");
|
||||
$(td).html((row.i + 1) + ".");
|
||||
|
||||
for (var i = 0; i < columns.length; i++) {
|
||||
var column = columns[i];
|
||||
@ -107,29 +108,36 @@ DataTableView.prototype.render = function() {
|
||||
|
||||
DataTableView.prototype._showRows = function(start, onDone) {
|
||||
var self = this;
|
||||
Ajax.chainGetJSON(
|
||||
"/command/get-rows?" + $.param({ project: theProject.id, start: start, limit: theProject.view.pageSize }), null,
|
||||
|
||||
$.post(
|
||||
"/command/get-rows?" + $.param({ project: theProject.id, start: start, limit: this._pageSize }),
|
||||
{ engine: JSON.stringify(ui.browsingEngine.getJSON()) },
|
||||
function(data) {
|
||||
theProject.rowModel = data;
|
||||
self.render();
|
||||
|
||||
if (onDone) {
|
||||
onDone();
|
||||
}
|
||||
},
|
||||
"json"
|
||||
);
|
||||
};
|
||||
|
||||
DataTableView.prototype._onClickPreviousPage = function(elmt, evt) {
|
||||
this._showRows(theProject.rowModel.start - theProject.view.pageSize);
|
||||
this._showRows(theProject.rowModel.start - this._pageSize);
|
||||
};
|
||||
|
||||
DataTableView.prototype._onClickNextPage = function(elmt, evt) {
|
||||
this._showRows(theProject.rowModel.start + theProject.view.pageSize);
|
||||
this._showRows(theProject.rowModel.start + this._pageSize);
|
||||
};
|
||||
|
||||
DataTableView.prototype._onClickFirstPage = function(elmt, evt) {
|
||||
this._showRows(0, theProject.view.pageSize);
|
||||
this._showRows(0);
|
||||
};
|
||||
|
||||
DataTableView.prototype._onClickLastPage = function(elmt, evt) {
|
||||
this._showRows(Math.floor(theProject.rowModel.total / theProject.view.pageSize) * theProject.view.pageSize);
|
||||
this._showRows(Math.floor(theProject.rowModel.total / this._pageSize) * this._pageSize);
|
||||
};
|
||||
|
||||
DataTableView.prototype._createMenuForAllColumns = function(elmt) {
|
||||
|
Loading…
Reference in New Issue
Block a user