pouchdb-find
Version:
Easy-to-use query language for PouchDB
233 lines (206 loc) • 5.63 kB
HTML
<html>
<head>
<title>
Learn you pouchdb-find
</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="www/bootstrap/css/bootstrap.min.css"/>
<link rel="stylesheet" href="www/smashbros.css"/>
<style>
body {
padding: 20px 10px;
max-width: 900px;
margin: 0 auto;
}
h1 {
text-align: center;
}
button:focus {outline:0 ;}
button.btn-info.btn-selected {
color: #fff;
background-color: #1c6a7e;
border-color: #0f3b48;
}
button.btn-info.btn-selected:hover {
color: #fff;
background-color: #258aa5;
border-color: #165c70;
}
/* Small devices (tablets, 768px and up) */
@media (max-width: 767px) {
.marketing {
margin: 5px 10px 5px 15px;
}
/* github ribbon is too big on mobile */
#github-ribbon img {
max-width: 100px;
}
}
/* Medium to large devices (desktops, 992px and up) */
@media (min-width: 768px) {
.marketing {
margin: 20px 80px 20px 45px;
}
#smashers {
margin: 20px 80px 20px 45px;
}
}
#editor {
min-height: 210px;
max-width: 600px;
opacity: 0;
transition: opacity 0.5s ease-in-out .1s;
-webkit-transition: opacity 0.5s ease-in-out .1s;
}
#editor.shown {
opacity: 1;
}
#smashers {
margin-top: 5px;
opacity: 0;
transition: opacity 0.3s ease-in-out;
-webkit-transition: opacity 0.3s ease-in-out;
}
#smashers.shown {
opacity: 1;
}
#smashers-raw {
margin-top: 5px;
opacity: 0;
transition: opacity 0.3s ease-in-out;
-webkit-transition: opacity 0.3s ease-in-out;
}
#smashers-raw.shown {
opacity: 1;
}
.btn {
width: 95%;
max-width: 200px;
margin: 5px;
}
span.monospace {
font-family: monospace;
}
</style>
</head>
<body>
<h1>Learn you pouchdb-find</h1>
<div class="marketing">
<p>
<code>pouchdb-find</code> is an advanced query language for PouchDB. <a href="https://github.com/nolanlawson/pouchdb-find">Now in beta!</a>
</p>
<p>
Inspired by MongoDB, it
provides a simple API with operators like
<code>$gt</code> (greater-than) and <code>$eq</code> (equals), so you can write less
code to achieve the same performance as the <a target="_blank" href="http://pouchdb.com/guides/queries.html">map/reduce
API</a>.
</p>
<p>
This API is also available as
<a target="_blank" href="http://docs.cloudant.com/api/cloudant-query.html">Cloudant Query Language</a>
and will be released in <a target="_blank" href="https://github.com/cloudant/mango">CouchDB 2.0</a>.
</p>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-md-4" style="text-align: center;">
<div>
<button class="sortable btn btn-info btn-selected" type="button">
Sort by _id
</button>
</div>
<div>
<button class="sortable btn btn-info" type="button">
Sort by name
</button>
</div>
<div>
<button class="sortable btn btn-info" type="button">
Debut >= 1990
</button>
</div>
<div>
<button class="sortable btn btn-info" type="button">
Mario series only
</button>
</div>
<div>
<button class="sortable btn btn-info" type="button">
Select certain fields
</button>
</div>
</div>
<div class="col-xs-12 col-md-8"><div id="editor"></div></div>
</div>
<div class="row">
<div class="col-xs-0 col-md-4">
</div>
<div class="col-xs-12 col-md-8">
<button class="run-code btn btn-primary" type="button">
Run code!
</button>
</div>
</div>
</div>
<div id="smashers" class="container-fluid">
</div>
<pre id="smashers-raw">
</pre>
<div id="github-ribbon">
<a href="https://github.com/nolanlawson/pouchdb-find">
<img style="position: absolute; top: 0; right: 0; border: 0;"
src="www/ribbon.png"
alt="Fork me on GitHub"
data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png">
</a>
</div>
<script src="www/jquery/jquery.min.js"></script>
<script src="www/bootstrap/js/bootstrap.min.js"></script>
<script src="www/ace/ace.js"></script>
<script src="www/handlebars/handlebars-v2.0.0.js"></script>
<script src="www/handlebars/handlebars.runtime-v2.0.0.js"></script>
<script src="www/pouchdb-3.2.2-prerelease.js"></script>
<script src="dist/pouchdb.find.js"></script>
<script id="smashers-template" type="text/x-handlebars-template">
<div class="row">
<div class="col-xs-1">
<strong> </strong>
</div>
<div class="col-xs-2 col-md-3">
<strong>_id</strong>
</div>
<div class="col-xs-3">
<strong>Name</strong>
</div>
<div class="col-xs-2">
<strong>Debut</strong>
</div>
<div class="col-xs-3">
<strong>Series</strong>
</div>
</div>
{{#each smashers}}
<div class="row">
<div class="col-xs-1">
<span class="flair flair-{{_id}}melee"></span>
</div>
<div class="col-xs-2 col-md-3">
<span class="monospace">{{_id}}</span>
</div>
<div class="col-xs-3">
{{name}}
</div>
<div class="col-xs-2">
{{debut}}
</div>
<div class="col-xs-3">
{{series}}
</div>
</div>
{{/each}}
</script>
<script src="www/app.js"></script>
</body>
</html>