knight/datahub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[view,demo][m]: (refs #12) new DataExplorer parent view to hold the main app.

Browse Source
This commit is contained in:
rgrp
2011-11-09 01:41:49 +00:00
parent 24742a2b9e
commit 3bf7d9ceb4
3 changed files with 115 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
demo/index.html
View File

@@ -16,20 +16,11 @@
</head> </head>
<body class="bod"> <body class="bod">
<div class="container"> <div class="container">
<div class="dataexplorer-tableview-nav"> <form class="webstore-load">
<form>
<label for="source">Source</label> <label for="source">Source</label>
<input type="text" name="source" size="50" /> <input type="text" name="source" size="50" />
<input type="submit" name="" value="Update" /> <input type="submit" name="" value="Update" />
<br />
<span class="dataexplorer-tableview-nav-toggle">
<input type="radio" id="dataexplorer-tableview-nav-grid" name="dataexplorer-tableview-nav-toggle" value="grid" checked="checked" />
<label for="dataexplorer-tableview-nav-grid">Grid</label>
<input type="radio" id="dataexplorer-tableview-nav-graph" name="dataexplorer-tableview-nav-toggle" value="chart" />
<label for="dataexplorer-tableview-nav-graph">Graph</label>
</span>
</form> </form>
</div>
<!-- <div class="menu-overlay" style="display: none; z-index: 101; ">&nbsp;</div> <!-- <div class="menu-overlay" style="display: none; z-index: 101; ">&nbsp;</div>
<ul class="menu"> <ul class="menu">
</ul> </ul>

31
demo/js/app.js
View File

@@ -1,14 +1,19 @@
$(function() { $(function() {
var demoUrl = 'http://webstore.test.ckan.org/rufuspollock/demo/data'; // do not like all these window globals ...
$('.dataexplorer-tableview-nav form input[name="source"]').val(demoUrl); window.$container = $('.container');
var dataset = demoDataset(); var dataset = demoDataset();
dataset.fetch().then(function() { window.dataExplorer = new recline.DataExplorer({
var dataTable = new recline.DataTable({
model: dataset model: dataset
})
$('.container').append(dataTable.el)
}); });
setupLoadFromWebstore(); window.$container.append(window.dataExplorer.el);
setupLoadFromWebstore(function(dataset) {
window.dataExplorer.remove();
window.dataExplorer = null;
window.dataExplorer = new recline.DataExplorer({
model: dataset,
});
window.$container.append(window.dataExplorer.el);
});
}) })
function demoDataset() { function demoDataset() {
@@ -40,8 +45,11 @@ function demoDataset() {
return dataset; return dataset;
} }
function setupLoadFromWebstore() { function setupLoadFromWebstore(callback) {
$('.dataexplorer-tableview-nav form').submit(function(e) { // pre-populate webstore load form with an example url
var demoUrl = 'http://webstore.test.ckan.org/rufuspollock/demo/data';
$('form.webstore-load input[name="source"]').val(demoUrl);
$('form.webstore-load').submit(function(e) {
e.preventDefault(); e.preventDefault();
var $form = $(e.target); var $form = $(e.target);
var source = $form.find('input[name="source"]').val(); var source = $form.find('input[name="source"]').val();
@@ -50,10 +58,7 @@ function setupLoadFromWebstore() {
}); });
recline.setBackend(backend); recline.setBackend(backend);
var dataset = backend.getDataset(); var dataset = backend.getDataset();
var dataTable = new recline.DataTable({ callback(dataset);
model: dataset
})
$('.container').append(dataTable.el)
}); });
} }

92
src/view.js
View File

@@ -1,5 +1,37 @@
this.recline = this.recline || {}; this.recline = this.recline || {};
recline.DataExplorer = Backbone.View.extend({
tagName: 'div',
className: 'data-explorer',
template: ' \
<div class="dataexplorer-tableview-nav"> \
<span class="dataexplorer-tableview-nav-toggle"> \
<input type="radio" id="dataexplorer-tableview-nav-grid" name="dataexplorer-tableview-nav-toggle" value="grid" checked="checked" /> \
<label for="dataexplorer-tableview-nav-grid">Grid</label> \
<input type="radio" id="dataexplorer-tableview-nav-graph" name="dataexplorer-tableview-nav-toggle" value="chart" /> \
<label for="dataexplorer-tableview-nav-graph">Graph</label> \
</span> \
</div> \
',
events: {
},
initialize: function() {
this.el = $(this.el);
this.render();
// initialize of dataTable calls render
this.dataTable = new recline.DataTable({
model: this.model
});
this.el.append(this.dataTable.el)
},
render: function() {
$(this.el).html($(this.template));
}
});
recline.DataTable = Backbone.View.extend({ recline.DataTable = Backbone.View.extend({
tagName: "div", tagName: "div",
@@ -8,7 +40,6 @@ recline.DataTable = Backbone.View.extend({
// template: TODO ??? // template: TODO ???
events: { events: {
}, },
initialize: function() { initialize: function() {
@@ -39,3 +70,62 @@ recline.DataTable = Backbone.View.extend({
return this; return this;
} }
}); });
recline.FlotGraph = Backbone.View.extend({
tagName: "div",
className: "data-graph-container",
// TODO: normalize css
template: ' \
<div class="dataexplorer-tableview-panel dataexplorer-tableview-graph"></div> \
<div class="dataexplorer-tableview-editor"> \
<div class="dataexplorer-tableview-editor-info dataexplorer-tableview-editor-hide-info"> \
<h1><span></span>Help</h1> \
<p>To create a chart select a column (group) to use as the x-axis \
then another column (Series A) to plot against it.</p> \
<p>You can add add \
additional series by clicking the "Add series" button</p> \
<p>Please note you must be logged in to save charts.</p> \
</div> \
<form> \
<ul> \
<li class="dataexplorer-tableview-editor-type"> \
<label>Graph Type</label> \
<select></select> \
</li> \
<li class="dataexplorer-tableview-editor-group"> \
<label>Group Column (x-axis)</label> \
<select></select> \
</li> \
<li class="dataexplorer-tableview-editor-series"> \
<label>Series <span>A (y-axis)</span></label> \
<select></select> \
</li> \
</ul> \
<div class="dataexplorer-tableview-editor-buttons"> \
<button class="dataexplorer-tableview-editor-add">Add Series</button> \
</div> \
<div class="dataexplorer-tableview-editor-buttons dataexplorer-tableview-editor-submit"> \
<button class="dataexplorer-tableview-editor-save">Save</button> \
<input type="hidden" class="dataexplorer-tableview-editor-id" value="chart-1" /> \
</div> \
</form> \
</div> \
</div> \
',
events: {
},
initialize: function() {
},
toTemplateJSON: function() {
return {};
},
render: function() {
htmls = $.mustache(this.template, this.toTemplateJSON());
$(this.el).html(htmls);
return this;
}
});