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

[#110,app,load,ux][s]: refactor import/load menu to be called load, to support DataHub directly, and have better UX.

Browse Source 
* List options to load from in dropdown menu rather than modal dialog
* Provide some help info in load dialog
* Support DataHub (including auto-guessing of Data API) - fixes #110.
This commit is contained in:
Rufus Pollock 2012-06-03 09:50:47 +01:00
parent e425106022
commit 028dfca859
2 changed files with 55 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
app/index.html
View File

@ -84,13 +84,23 @@
<ul class="nav pull-right">
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle">
Import <b class="caret"></b></a>
<ul class="dropdown-menu js-import">
Load Data <b class="caret"></b></a>
<ul class="dropdown-menu js-load">
<li>
<a data-toggle="modal" href=".js-import-dialog-url">Import from URL</a>
<a href="#" class="js-load-dialog-url" data-type="datahub" data-help="The link to the Dataset Data Resource on the DataHub to load from - note that the resource must have its Data API enabled">Load from the DataHub</a>
</li>
<li>
<a data-toggle="modal" href=".js-import-dialog-file">Import from File</a>
<a href="#" class="js-load-dialog-url" data-type="csv" data-help="Provide the link to the CSV file online">Load from CSV online</a>
</li>
<li>
<a href="#" class="js-load-dialog-url" data-type="excel" data-help="Provide the link to the Excel file online">Load from Excel online</a>
</li>
<li>
<a href="#" class="js-load-dialog-url" data-type="elasticsearch" data-help="Provide the link to the ElasticSearch endpoint (either an index or a type/table">Load from ElasticSearch</a>
</li>
<li class="divider"></li>
<li>
<a data-toggle="modal" href=".js-load-dialog-file">Load from CSV on disk</a>
</li>
</ul>
</li>
@ -127,7 +137,7 @@
<li>Data grid</li>
<li>Data editing including programmatic data transformation in javascript</li>
<li>Visualizations includes graphs and maps</li>
<li>Import and export from a variety of sources including online sources such as online Excel and CSV files, Google docs and
<li>Load and export from a variety of sources including online sources such as online Excel and CSV files, Google docs and
the <a href="http://datahub.io/">DataHub</a> and offline sources like CSV files on your local machine.</li>
<li>Use online or offline - because the app is built in pure javascript and html you can use it anywhere there's a modern web browser. Using offline is as easy and downloading this web page to your local machine.</li>
</ul>
@ -149,41 +159,29 @@
</div>
<!-- modals for menus -->
<div class="modal fade in js-import-dialog-url" style="display: none;">
<div class="modal fade in js-load-dialog-url" style="display: none;">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Import from URL</h3>
<h3>Load from URL</h3>
</div>
<div class="modal-body">
<form class="js-import-url form-horizontal">
<form class="js-load-url">
<div class="control-group">
<label class="control-label">URL</label>
<div class="controls">
<input type="text" name="source" class="input-xlarge" />
<input type="text" name="source" class="span5" placeholder="URL to data source" />
<p class="help-block"></p>
<input name="backend_type" style="display: none;" />
</div>
</div>
<div class="control-group">
<label class="control-label">Type of data</label>
<div class="controls">
<select name="backend_type">
<option value="csv">CSV</option>
<option vlaue="excel">Excel</option>
<option value="gdocs">Google Spreadsheet</option>
<option value="elasticsearch">ElasticSearch</option>
</select>
</div>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">Import &raquo;</button>
</div>
<button type="submit" class="btn btn-primary">Load &raquo;</button>
</form>
</div>
</div>
<div class="modal fade in js-import-dialog-file" style="display: none;">
<div class="modal fade in js-load-dialog-file" style="display: none;">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Import from File</h3>
<h3>Load from File</h3>
</div>
<div class="modal-body">
<form class="form-horizontal">
@ -213,7 +211,7 @@
</div>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">Import &raquo;</button>
<button type="submit" class="btn btn-primary">Load &raquo;</button>
</div>
</form>
</div>

40
app/js/app.js
View File

@ -6,8 +6,9 @@ jQuery(function($) {
var ExplorerApp = Backbone.View.extend({
events: {
'submit form.js-import-url': '_onImportURL',
'submit .js-import-dialog-file form': '_onImportFile'
'click .nav .js-load-dialog-url': '_onLoadURLDialog',
'submit form.js-load-url': '_onLoadURL',
'submit .js-load-dialog-file form': '_onLoadFile'
},
initialize: function() {
@ -153,33 +154,52 @@ var ExplorerApp = Backbone.View.extend({
setupLoader: function(callback) {
// pre-populate webstore load form with an example url
var demoUrl = 'http://thedatahub.org/api/data/b9aae52b-b082-4159-b46f-7bb9c158d013';
$('form.js-import-url input[name="source"]').val(demoUrl);
$('form.js-load-url input[name="source"]').val(demoUrl);
},
_onImportURL: function(e) {
_onLoadURLDialog: function(e) {
e.preventDefault();
$('.modal.js-import-dialog-url').modal('hide');
var $link = $(e.target);
var $modal = $('.modal.js-load-dialog-url');
$modal.find('h3').text($link.text());
$modal.modal('show');
$modal.find('input[name="source"]').val('');
$modal.find('input[name="backend_type"]').val($link.attr('data-type'));
$modal.find('.help-block').text($link.attr('data-help'));
},
_onLoadURL: function(e) {
e.preventDefault();
$('.modal.js-load-dialog-url').modal('hide');
var $form = $(e.target);
var source = $form.find('input[name="source"]').val();
var datasetInfo = {
id: 'my-dataset',
url: source,
webstore_url: source
url: source
};
var type = $form.find('select[name="backend_type"]').val();
var type = $form.find('input[name="backend_type"]').val();
if (type === 'csv' || type === 'excel') {
datasetInfo.format = type;
type = 'dataproxy';
}
if (type === 'datahub') {
// have a full resource url so convert to data API
if (source.indexOf('dataset') != -1) {
var parts = source.split('/');
datasetInfo.url = parts[0] + '/' + parts[1] + '/' + parts[2] + '/api/data/' + parts[parts.length-1];
}
type = 'elasticsearch';
}
console.log(datasetInfo.url);
var dataset = new recline.Model.Dataset(datasetInfo, type);
this.createExplorer(dataset);
},
_onImportFile: function(e) {
_onLoadFile: function(e) {
var self = this;
e.preventDefault();
var $form = $(e.target);
$('.modal.js-import-dialog-file').modal('hide');
$('.modal.js-load-dialog-file').modal('hide');
var $file = $form.find('input[type="file"]')[0];
var file = $file.files[0];
var options = {