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

[#180,refactor][s]: clean up couchdb demo from @danbietz in minor ways - fixes #180.

Browse Source 
* Provide instructions on how to set up couchdb to try out the example
* Remove cruft from demos index page (in link to this demo)
This commit is contained in:
Rufus Pollock
2012-09-09 16:04:59 +01:00
parent f8f1e78699
commit d1cc591dfc
3 changed files with 50 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
demos/couchdb_multiview/app.js
View File

@@ -2,39 +2,22 @@ jQuery(function($) {
window.dataExplorer = null; window.dataExplorer = null;
window.explorerDiv = $('.data-explorer-here'); window.explorerDiv = $('.data-explorer-here');
// This is some fancy stuff to allow configuring the multiview from var queryParameters = recline.View.parseQueryString(decodeURIComponent(window.location.search));
// parameters in the query string
//
// For more on state see the view documentation.
var state = recline.View.parseQueryString(decodeURIComponent(window.location.search));
if (state) {
_.each(state, function(value, key) {
try {
value = JSON.parse(value);
} catch(e) {}
state[key] = value;
});
} else {
state.url = 'demo';
}
//Add your couchdb here!!!
//"couchdb" is what a choose for my reverse proxy. look up apache reverse or nginx reverse proxy. you need to set this up before you can connect your db
var dataset = new recline.Model.Dataset({ var dataset = new recline.Model.Dataset({
db_url: '/couchdb/yourcouchdb', db_url: queryParameters['url'] || '/couchdb/yourcouchdb',
view_url: '/couchdb/yourcouchdb/_design/yourdesigndoc/_view/yourview', view_url: queryParameters['view_url'] || '/couchdb/yourcouchdb/_design/yourdesigndoc/_view/yourview',
backend: 'couchdb', backend: 'couchdb',
query_options: { query_options: {
'key': '_id' 'key': '_id'
} }
}); });
dataset.fetch().done(function(dataset) { dataset.fetch().done(function(dataset) {
console.log('records: ' + dataset.records); console.log('records: ' + dataset.records);
}); });
createExplorer(dataset, state); createExplorer(dataset);
}); });
// make Explorer creation / initialization in a function so we can call it // make Explorer creation / initialization in a function so we can call it

84
demos/couchdb_multiview/index.html
View File

@@ -1,62 +1,9 @@
<!DOCTYPE HTML> ---
<html> layout: container
<head> title: CouchDB Multiview - Demos
<link rel="stylesheet" href="../../vendor/bootstrap/2.0.2/css/bootstrap.css" /> recline-deps: true
root: ../../
<link rel="stylesheet" href="../../vendor/leaflet/0.3.1/leaflet.css"> ---
<!--[if lte IE 8]>
<link rel="stylesheet" href="../../vendor/leaflet/0.3.1/leaflet.ie.css" />
<![endif]-->
<link rel="stylesheet" href="../../vendor/slickgrid/2.0.1/slick.grid.css">
<!-- Recline CSS components -->
<link rel="stylesheet" href="../../css/grid.css">
<link rel="stylesheet" href="../../css/slickgrid.css">
<link rel="stylesheet" href="../../css/graph.css">
<link rel="stylesheet" href="../../css/transform.css">
<link rel="stylesheet" href="../../css/map.css">
<link rel="stylesheet" href="../../css/multiview.css">
<!-- 3rd party dependencies -->
<script type="text/javascript" src="../../vendor/jquery/1.7.1/jquery.js"></script>
<script type="text/javascript" src="../../vendor/underscore/1.1.6/underscore.js"></script>
<script type="text/javascript" src="../../vendor/backbone/0.5.1/backbone.js"></script>
<script type="text/javascript" src="../../vendor/mustache/0.5.0-dev/mustache.js"></script>
<script type="text/javascript" src="../../vendor/bootstrap/2.0.2/bootstrap.js"></script>
<script type="text/javascript" src="../../vendor/jquery.flot/0.7/jquery.flot.js"></script>
<script type="text/javascript" src="../../vendor/leaflet/0.3.1/leaflet.js"></script>
<script type="text/javascript" src="../../vendor/slickgrid/2.0.1/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="../../vendor/slickgrid/2.0.1/jquery.event.drag-2.0.min.js"></script>
<script type="text/javascript" src="../../vendor/slickgrid/2.0.1/slick.grid.min.js"></script>
<script type="text/javascript" src="../../vendor/moment/1.6.2/moment.js"></script>
<script type="text/javascript" src="../../vendor/timeline/20120520/js/timeline.js"></script>
<script type="text/javascript" src="../../src/backend.couchdb.js"></script>
<script type="text/javascript" src="../../src/view.grid.js"></script>
<script type="text/javascript" src="../../src/view.slickgrid.js"></script>
<script type="text/javascript" src="../../src/view.transform.js"></script>
<script type="text/javascript" src="../../src/costco.js"></script>
<script type="text/javascript" src="../../src/view.graph.js"></script>
<script type="text/javascript" src="../../src/view.map.js"></script>
<script type="text/javascript" src="../../src/view.timeline.js"></script>
<script type="text/javascript" src="../../src/widget.pager.js"></script>
<script type="text/javascript" src="../../src/widget.queryeditor.js"></script>
<script type="text/javascript" src="../../src/widget.filtereditor.js"></script>
<script type="text/javascript" src="../../src/widget.fields.js"></script>
<script type="text/javascript" src="../../src/view.multiview.js"></script>
<script type="text/javascript" src="../../dist/recline.js"></script>
</style>
</head>
<body>
<div class="ex-1"></div>
<!--
<div id="mymap"></div>
<div id="mygraph"></div>
<div id="mygrid"></div>
<div style="clear: both;"></div>
-->
<style type="text/css"> <style type="text/css">
.recline-slickgrid { .recline-slickgrid {
@@ -68,11 +15,26 @@
} }
</style> </style>
<div class="instructions">
<h2>Instructions</h2>
<p>To use this demo you will need a CouchDB instance running and accessible over HTTP. You should then pass the following 2 query parameters to this page:</p>
<pre>url: url-to-your-couchdb-instance
view_url: url-to-your-couchdb-view
Example:
http://path-to-this-page/?url=/mycouchdb/&amp;view_url=/mycouchdb/_design/yourdesigndoc/_view/yourview
</pre>
<p>Note that if the CouchDB database is <em>not</em> running on the same domain as this page then the host it is on <em>must</em> support CORS &ndash; the simplest approach here is probably to set up a reverse proxy or proxy so your CouchDB database appears on the local domain at e.g. /mycouchdb/.</p>
</div>
<h2>Demo</h2>
<div class="data-explorer-here"></div> <div class="data-explorer-here"></div>
<div style="clear: both;"></div> <div style="clear: both;"></div>
<script type="text/javascript" src="../../src/backend.couchdb.js"></script>
<script type="text/javascript" src="app.js"></script> <script type="text/javascript" src="app.js"></script>
</body>
</html>

36
demos/index.html
View File

@@ -10,27 +10,6 @@ root: ../
</h1> </h1>
</div> </div>
<div class="row">
<div class="span4">
<div class="well">
<h3><a href="couchdb_multiview/">CouchDB Multiview Demo</a></h3>
<p>You will need to modify the "app.js" file in "demos/couchdb_multiview"
to connect to your couch database. Also, don't forget to configure your
<b>reverse proxy or proxy so you can connect to your database</b>.</p>
<h3><a href="multiview/">Multiview Demo</a></h3>
<p>See the integrated <a href="multiview/">multiview in action on a
sample dataset</a> - the multiview incorporates most the main views
(grid, graph, map etc) into one integrated view with search, filtering
and field summaries.</p>
</div>
</div>
<div class="span8">
<a href="multiview/"><img src="http://farm8.staticflickr.com/7251/7508402742_03c74a9763_c.jpg" style="width: 100%" /></a>
</div>
</div>
<hr />
<div class="row"> <div class="row">
<div class="span4"> <div class="span4">
<div class="well"> <div class="well">
@@ -77,3 +56,18 @@ root: ../
<a href="http://bit.ly/recline-explorer-crime-sf"><img src="http://farm8.staticflickr.com/7279/7508402914_616326ee3f_z.jpg" /></a> <a href="http://bit.ly/recline-explorer-crime-sf"><img src="http://farm8.staticflickr.com/7279/7508402914_616326ee3f_z.jpg" /></a>
</div> </div>
</div> </div>
<div class="row" id="couchdb">
<div class="span4">
<div class="well">
<h3><a href="couchdb_multiview/">CouchDB Demo</a></h3>
<p>Using CouchDB with Recline Multiview to provide an elegant powerful browser for a CouchDB database and view.</p>
</div>
</div>
<div class="span8">
<a href="multiview/"><img src="http://farm8.staticflickr.com/7251/7508402742_03c74a9763_c.jpg" style="width: 100%" /></a>
</div>
</div>
<hr />