nolanlawson · August 29, 2015 14:01
diff --git a/index.html b/index.html
 <!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>
	<!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>