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
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>