BunHouth · November 15, 2015 13:47
diff --git a/gistfile1.html b/gistfile1.html
 <!doctype html>
 <html>
 <head>
 	<meta name="viewport" content="width=device-width">
 	<script type="text/javascript" src="jquery-1.8.1.min.js"></script>
 	<script type="text/javascript" src="http://www.parsecdn.com/js/parse-1.0.23.min.js"></script>
 	<script>
 	var SightingObject;
 	var db;

 	function errorCB(e) {
 		//We should do something here - the database isn't technically required per se, but it should
 		//work. 
 		console.log("DB Error");
 		console.dir(e);
 	}

 	function online() {
 		//return false;
 		return navigator.onLine;
 	}

 	$(document).ready(function() {

 		//initialize db
 		db = window.openDatabase("sightingdb", "1.0", "Sighting Database", 200000);
 		db.transaction(createDB, errorCB, initApp);

 		function createDB(trans) {
 			trans.executeSql("create table if not exists sighting(id INTEGER PRIMARY KEY,numufos,yourname,description)");
 		}

 	});

 	/*
 	I'm run after the db is setup. 
 	*/
 	function initApp() {

 		if(online()) {
 			Parse.initialize("8Y0x2rCA0jKYdiC7wLKQuF9nQqKGFKdpqUHMfue3", "8m7ng0w9UirTV6k4ExsJ0WsmPGeZMsJd5hcu54Oq");
 			SightingObject = Parse.Object.extend("SightingObject");

 			//do we have existing objects in the db we can upload?
 			db.transaction(function(trans) {
 				trans.executeSql("select * from sighting", [], function(trans,result) {
 					//do we have rows?
 					if(result.rows.length > 0) {
 						console.log("Ok, we need to push stuff up");
 						for(var i=0, len=result.rows.length; i<len; i++) {
 							var row = result.rows.item(i);

 							(function(row) {
 								//Parse will try to save everything, including ID, so make a quick new ob
 								var report = {};
 									report.numufos = row.numufos;
 									report.yourname = row.yourname;
 									report.description = row.description;

 								saveToParse(report, function() { 
 									console.log("i need to delete row "+row.id);
 									db.transaction(function(trans) {
 										trans.executeSql("delete from sighting where id = ?", [row.id]);
 									}, errorCB);
 								});
 							}(row));

 						}
 					}
 				},errorCB);
 			}, errorCB, function() {
 				console.log("Done uploading the old rows");
 			});
 		}

 		$("#sightForm").on("submit", function(e) {
 			e.preventDefault();
 			/*
 			gather the values - normally we'd do a bit of validation, but since UFO chasers
 			are known for their rigorous and rational pursuit of science, this will not be necessary
 			*/
 			var report = {};
 				report.numufos = $("#numufos").val();
 				report.yourname = $("#yourname").val();
 				report.description = $("#description").val();

 			console.log("To report: ",report);
 			//ok, disable the form while submitting and show a loading gfx
 			$(this).attr("disabled","disabled");
 			$("#loadingGraphic").show();

 			if(online()) {
 				console.log("I'm online, send to parse");
 				saveToParse(report,resetForm);
 			} else {
 				console.log("I'm offline, save to WebSQL");
 				db.transaction(function(trans) {
 					trans.executeSql("insert into sighting(numufos,yourname,description) values(?,?,?)", [report.numufos, report.yourname, report.description]);
 				}, errorCB, resetForm);
 			}
 		});

 	};

 	function saveToParse(ob,successCB) {
 		var sightingObject = new SightingObject();
 		sightingObject.save(ob, {
 			success: function(object) {
 				console.log("Saved to parse.");
 				console.dir(object);
 				successCB(object);
 			},
 			error: function(model, error) {
 				console.log("Error!");
 				console.dir(error);
 			}
 		});
 	}

 	//handles removing the disabled form stuff and loading gfx
 	function resetForm() {
 		$("#numufos").val("");
 		$("#yourname").val("");
 		$("#description").val("");
 		$("#sightForm").removeAttr("disabled","disabled");
 		$("#loadingGraphic").hide();
 		var status = $("#status");
 		if(online()) {
 			status.fadeIn().html("Your sighting has been saved!").fadeOut(4000);
 		} else {
 			status.fadeIn().html("Your sighting has been saved locally and will be uploaded next time you are online!").fadeOut(4000);
 		}
 	}

 	</script>
 	<style>
 	body {
 		margin-left: 25px;
 		margin-right: 25px;
 		font-family: arial;
 	}
 	input {
 		width: 100%;
 		height: 25px;
 	}
 	textarea {
 		width: 100%;
 	}

 	#loadingGraphic {
 		position:absolute;
 		left: 50%;
 		top: 50%;
 		display:none;
 	}

 	#status {
 		padding: 10px;
 	}
 	</style>
 </head>

 <body>

 <h2>Sighting Reporter</h2>

 <form id="sightForm">
 Number of UFOs: <input type="number" id="numufos"><br/>
 Your Name: <input type="text" id="yourname"><br/>
 Description: <textarea id="description"></textarea><br/>
 <input type="submit" value="Send Sighting">
 </form>

 <div id="status"></div>

 <img src="ajax-loader.gif" style="" id="loadingGraphic">
 </body>
 </html>
	<!doctype html>
	<html>
	<head>
	<meta name="viewport" content="width=device-width">
	<script type="text/javascript" src="jquery-1.8.1.min.js"></script>
	<script type="text/javascript" src="http://www.parsecdn.com/js/parse-1.0.23.min.js"></script>
	<script>
	var SightingObject;
	var db;

	function errorCB(e) {
	//We should do something here - the database isn't technically required per se, but it should
	//work.
	console.log("DB Error");
	console.dir(e);
	}

	function online() {
	//return false;
	return navigator.onLine;
	}

	$(document).ready(function() {

	//initialize db
	db = window.openDatabase("sightingdb", "1.0", "Sighting Database", 200000);
	db.transaction(createDB, errorCB, initApp);

	function createDB(trans) {
	trans.executeSql("create table if not exists sighting(id INTEGER PRIMARY KEY,numufos,yourname,description)");
	}

	});

	/*
	I'm run after the db is setup.
	*/
	function initApp() {

	if(online()) {
	Parse.initialize("8Y0x2rCA0jKYdiC7wLKQuF9nQqKGFKdpqUHMfue3", "8m7ng0w9UirTV6k4ExsJ0WsmPGeZMsJd5hcu54Oq");
	SightingObject = Parse.Object.extend("SightingObject");

	//do we have existing objects in the db we can upload?
	db.transaction(function(trans) {
	trans.executeSql("select * from sighting", [], function(trans,result) {
	//do we have rows?
	if(result.rows.length > 0) {
	console.log("Ok, we need to push stuff up");
	for(var i=0, len=result.rows.length; i<len; i++) {
	var row = result.rows.item(i);

	(function(row) {
	//Parse will try to save everything, including ID, so make a quick new ob
	var report = {};
	report.numufos = row.numufos;
	report.yourname = row.yourname;
	report.description = row.description;

	saveToParse(report, function() {
	console.log("i need to delete row "+row.id);
	db.transaction(function(trans) {
	trans.executeSql("delete from sighting where id = ?", [row.id]);
	}, errorCB);
	});
	}(row));

	}
	}
	},errorCB);
	}, errorCB, function() {
	console.log("Done uploading the old rows");
	});
	}

	$("#sightForm").on("submit", function(e) {
	e.preventDefault();
	/*
	gather the values - normally we'd do a bit of validation, but since UFO chasers
	are known for their rigorous and rational pursuit of science, this will not be necessary
	*/
	var report = {};
	report.numufos = $("#numufos").val();
	report.yourname = $("#yourname").val();
	report.description = $("#description").val();

	console.log("To report: ",report);
	//ok, disable the form while submitting and show a loading gfx
	$(this).attr("disabled","disabled");
	$("#loadingGraphic").show();

	if(online()) {
	console.log("I'm online, send to parse");
	saveToParse(report,resetForm);
	} else {
	console.log("I'm offline, save to WebSQL");
	db.transaction(function(trans) {
	trans.executeSql("insert into sighting(numufos,yourname,description) values(?,?,?)", [report.numufos, report.yourname, report.description]);
	}, errorCB, resetForm);
	}
	});

	};

	function saveToParse(ob,successCB) {
	var sightingObject = new SightingObject();
	sightingObject.save(ob, {
	success: function(object) {
	console.log("Saved to parse.");
	console.dir(object);
	successCB(object);
	},
	error: function(model, error) {
	console.log("Error!");
	console.dir(error);
	}
	});
	}

	//handles removing the disabled form stuff and loading gfx
	function resetForm() {
	$("#numufos").val("");
	$("#yourname").val("");
	$("#description").val("");
	$("#sightForm").removeAttr("disabled","disabled");
	$("#loadingGraphic").hide();
	var status = $("#status");
	if(online()) {
	status.fadeIn().html("Your sighting has been saved!").fadeOut(4000);
	} else {
	status.fadeIn().html("Your sighting has been saved locally and will be uploaded next time you are online!").fadeOut(4000);
	}
	}

	</script>
	<style>
	body {
	margin-left: 25px;
	margin-right: 25px;
	font-family: arial;
	}
	input {
	width: 100%;
	height: 25px;
	}
	textarea {
	width: 100%;
	}

	#loadingGraphic {
	position:absolute;
	left: 50%;
	top: 50%;
	display:none;
	}

	#status {
	padding: 10px;
	}
	</style>
	</head>

	<body>

	<h2>Sighting Reporter</h2>

	<form id="sightForm">
	Number of UFOs: <input type="number" id="numufos"><br/>
	Your Name: <input type="text" id="yourname"><br/>
	Description: <textarea id="description"></textarea><br/>
	<input type="submit" value="Send Sighting">
	</form>

	<div id="status"></div>

	<img src="ajax-loader.gif" style="" id="loadingGraphic">
	</body>
	</html>