[#180,refactor][s]: clean up couchdb demo from @danbietz in minor ways - fixes #180.
* 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
parent
f8f1e78699
commit
d1cc591dfc
@ -2,39 +2,22 @@ jQuery(function($) {
|
||||
window.dataExplorer = null;
|
||||
window.explorerDiv = $('.data-explorer-here');
|
||||
|
||||
// This is some fancy stuff to allow configuring the multiview from
|
||||
// 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';
|
||||
}
|
||||
var queryParameters = recline.View.parseQueryString(decodeURIComponent(window.location.search));
|
||||
|
||||
//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({
|
||||
db_url: '/couchdb/yourcouchdb',
|
||||
view_url: '/couchdb/yourcouchdb/_design/yourdesigndoc/_view/yourview',
|
||||
backend: 'couchdb',
|
||||
query_options: {
|
||||
'key': '_id'
|
||||
}
|
||||
});
|
||||
var dataset = new recline.Model.Dataset({
|
||||
db_url: queryParameters['url'] || '/couchdb/yourcouchdb',
|
||||
view_url: queryParameters['view_url'] || '/couchdb/yourcouchdb/_design/yourdesigndoc/_view/yourview',
|
||||
backend: 'couchdb',
|
||||
query_options: {
|
||||
'key': '_id'
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
dataset.fetch().done(function(dataset) {
|
||||
dataset.fetch().done(function(dataset) {
|
||||
console.log('records: ' + dataset.records);
|
||||
});
|
||||
});
|
||||
|
||||
createExplorer(dataset, state);
|
||||
createExplorer(dataset);
|
||||
});
|
||||
|
||||
// make Explorer creation / initialization in a function so we can call it
|
||||
|
||||
@ -1,62 +1,9 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="../../vendor/bootstrap/2.0.2/css/bootstrap.css" />
|
||||
|
||||
<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>
|
||||
-->
|
||||
---
|
||||
layout: container
|
||||
title: CouchDB Multiview - Demos
|
||||
recline-deps: true
|
||||
root: ../../
|
||||
---
|
||||
|
||||
<style type="text/css">
|
||||
.recline-slickgrid {
|
||||
@ -68,11 +15,26 @@
|
||||
}
|
||||
</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/&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 – 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 style="clear: both;"></div>
|
||||
|
||||
<script type="text/javascript" src="../../src/backend.couchdb.js"></script>
|
||||
<script type="text/javascript" src="app.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -10,27 +10,6 @@ root: ../
|
||||
</h1>
|
||||
</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="span4">
|
||||
<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>
|
||||
</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 />
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user