Skip to content

Instantly share code, notes, and snippets.

@BunHouth
Forked from cfjedimaster/gist:3723074
Created November 15, 2015 13:47
Show Gist options
  • Save BunHouth/4ba88f57732b4bccef76 to your computer and use it in GitHub Desktop.
Save BunHouth/4ba88f57732b4bccef76 to your computer and use it in GitHub Desktop.
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment