klehmann/gist:88df7b6c991c9dc487d5

## gistfile1.html
<!DOCTYPE html>
<html>
<head>
	<script type="text/javascript" src="pouchdb-2.2.0.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>
	<!DOCTYPE html>
	<html>
	<head>
	<script type="text/javascript" src="pouchdb-2.2.0.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>