Skip to content

Instantly share code, notes, and snippets.

@ukmadlz

ukmadlz/gist:4d2c2f8d923b77b67f2b

Created March 24, 2015 16:23
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ukmadlz/4d2c2f8d923b77b67f2b to your computer and use it in GitHub Desktop.
Save ukmadlz/4d2c2f8d923b77b67f2b to your computer and use it in GitHub Desktop.
Download ZIP
DevWeek 2015
Raw
gistfile1.txt
<!DOCTYPE html>
<html>
<head>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/pouchdb/3.3.1/pouchdb.min.js"></script>
<meta charset="utf-8">
<title>Cloudant Demo</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6" >
<form id="todo-form" data-id >
<div class="form-group">
<label for="todo-content">What's todo</label>
<textarea class="form-control" id="todo-content" placeholder="What's todo"></textarea>
</div>
<div class="checkbox">
<label>
<input id="todo-done" type="checkbox"> Done
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<div class="col-md-6" >
<ul id="todo-list">
</ul>
</div>
</div>
</div>
<script type="text/javascript" >
$(document).ready(function(){
var db = new PouchDB('todo');
/* Create/Update */
// db.put(doc, [docId], [docRev], [options], [callback])
$('#todo-form').on('submit',function(){
var doc = {
content: $('#todo-content').val()
};
var docId = $(this).attr('data-id');
if(docId.length > 0) {
db.get(docId,function(err,data){
console.log(data);
db.put(doc,docId,data._rev,function(err,data){
if(err) console.log(err);
});
})
} else {
db.post(doc,function(err){
if(err) console.log(err);
});
}
return false;
});
/* Read */
// db.get(docId, [options], [callback])
$('#todo-list').on('click','li',function(){
var docId = $(this).attr('data-id');
db.get(docId,function(err,data){
if(err) console.log(err);
$('#todo-content').val(data.content);
$('#todo-form').attr('data-id', docId);
});
})
/* Delete */
// db.remove(doc, [options], [callback])
$('#todo-done').on('click',function(){
var docId = $('#todo-form').attr('data-id');
db.get(docId,function(err,doc){
db.remove(doc,function(err){
console.log(err)
});
});
});
/* Sync */
// PouchDB.sync(src, target);
PouchDB.sync('todo','https://ateredsculegstriesessing:uSIWAGMdl8yd82YNkfnFQtUD@elsmore.cloudant.com/dw2015');
/* Changes */
var changes = db.changes({
live: true
}).on('change', function(change) {
// handle change
db.allDocs({include_docs: true}, function(err, response) {
var docs = response.rows;
var listItems = '';
$.each(docs,function(key,value){
console.log(value);
listItems += '<li data-id="';
listItems += value.doc._id;
listItems += '" >';
listItems += value.doc.content;
listItems += '</li>';
});
$('#todo-list').html(listItems);
});
}).on('complete', function(info) {
console.log('Stopped Listening');
}).on('error', function (err) {
console.log(err);
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment