Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="//cdn.jsdelivr.net/pouchdb/2.2.0/pouchdb.js"></script>
<script type="text/javascript">
var db;
function setupDb() {
try {
db = new PouchDB('testdb');
db.changes({
live: true,
include_docs: true
}).on('change', function(change) {
document.getElementById('changes').value += JSON.stringify(change) + "\n\n";
});
}
catch (e) {
alert(e);
}
}
function createOrChangeDocument(docNew) {
if (!docNew._id) {
log("Creating new document", docNew);
return db.put(docNew);
}
else {
return db.get(docNew._id)
.then(function(docOld) {
log("Updating document", "Old:"+JSON.stringify(docOld), "New: "+JSON.stringify(docNew));
return db.put(docNew, docOld._rev);
}).catch (function(reason) {
//document seems to be missing
log("Creating new document", docNew);
return db.put(docNew);
});
}
}
function createView(bUseFirstName) {
var myView;
if (bUseFirstName) {
myView = {
_id: '_design/view_bylastname',
views: {
'view_bylastname': {
map: function (doc) {emit([doc.lastname, doc.firstname]);}.toString()
}
}
};
}
else {
myView = {
_id: '_design/view_bylastname',
views: {
'view_bylastname': {
map: function (doc) {emit([doc.lastname]);}.toString()
}
}
};
}
createOrChangeDocument(myView)
.then(function(result) {
// kick off an initial build, return immediately
log("View update done", result);
db.query('view_bylastname', {stale: 'update_after'});
})
.catch(function(reason) {
log("Error: View save failed", reason);
});
}
function queryView() {
db.query('view_bylastname', {limit: 5})
.then(function(result) {
log("View data read", result);
}).catch(function (reason) {
log("Error: View query failed", reason);
});
}
function addDoc() {
var oPersonForm=document.getElementById('personform');
var sId=oPersonForm.elements['id'].value;
var sFirstname=oPersonForm.elements['firstname'].value;
var sLastname=oPersonForm.elements['lastname'].value;
if (!sId || !sFirstname || !sLastname) {
alert("Please fill all fields!");
return;
}
var oNewDoc = {
_id: sId,
firstname: sFirstname,
lastname: sLastname
};
db.put(oNewDoc)
.then(function(data) {
log("document created", data);
})
.catch(function(reason) {
log("Error: Put failed", reason);
});
}
function compactDb() {
db.compact({})
.then(function() {
log("Compaction done");
})
.catch(function (reason) {
log("Error: Compaction failed", reason);
});
};
function viewCleanup() {
db.viewCleanup()
.then(function(result) {
log("View cleanup done", result);
})
.catch(function (reason) {
log("Error: View cleanup failed", reason);
});
};
function destroyDb() {
db.destroy(function(err, info) {
if (err) {
log("Destroy failed", err);
}
else {
log("Database destroyed", info);
}
});
}
function toString(oVal) {
if(Object.prototype.toString.call(oVal) === '[object Array]') {
return JSON.stringify(oVal);
}
else if (typeof oVal == 'object') {
return JSON.stringify(oVal);
}
else {
return ''+oVal;
}
}
function log() {
var sTxt="";
for (var i=0; i<arguments.length; i++) {
sTxt = sTxt+toString(arguments[i])+"\n";
}
document.getElementById('log').value += sTxt + "\n";
}
function clearLog() {
document.getElementById('log').value = "";
}
function clearChanges() {
document.getElementById('changes').value = "";
}
</script>
</head>
<body onLoad="setupDb()">
<form id="personform" >
ID:<br>
<input type="text" name="id">
<br>
Firstname:<br>
<input type="text" name="firstname">
<br>
Lastname:<br>
<input type="text" name="lastname">
<br>
</form>
<br>
<button onclick="addDoc()">Add new document</button>
<br>
<br>
<button onclick="createView(true)">Create/update view to show lastname/firstname</button>
<button onclick="createView(false)">Create/update view to show lastname</button>
<button onclick="queryView()">Query view</button>
<button onclick="compactDb()">Compact db</button>
<button onclick="destroyDb()">Destroy db</button>
<button onclick="viewCleanup()">Cleanup views</button>
<br>
<br>
<table width="100%" cellspacing="10" cellpadding="0" border="0">
<tr>
<td width="50%">
Log <button onclick="clearLog()">Clear</button><br>
<textarea id="log" style="width:100%;height:300px"></textarea>
</td>
<td width="50%">
Changes <button onclick="clearChanges()">Clear</button><br>
<textarea id="changes" style="width:100%;height:300px"></textarea>
</td>
</tr>
</table>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment