HTML SNIPPET
<!doctype html>
<html manifest="Capsules.manifest">
<head>
<meta charset="UTF-8" />
<title>Capsules</title>
<style>@import "jqtouch/jqtouch.css";</style>
<style>@import "extensions/jqt.scroll.css";</style>
<style>@import "reset.css";</style>
<style>@import "styles.css";</style>
<script src="jquery-1.4.2.min.js"></script>
<script src="jqtouch/jqtouch.js"></script>
<script src="extensions/jqt.scroll.js"></script>
<script src="iphone-style-checkboxes.js"></script>
<script src="main.js"></script>
<script>
var jQT = new $.jQTouch({
icon: 'icon.png',
addGlossToIcon: false,
startupScreen: 'startup.png',
backSelector: '.back',
fullScreenClass: 'fullscreen',
statusBar: 'default',
slideSelector: '.slide',
preloadImages: [
'imgs/add.png',
'imgs/addDown.png',
'imgs/arrow.png',
'imgs/btnHover.png',
'imgs/btnNormal.png',
'imgs/capsule.png',
'imgs/create.png',
'imgs/delete.png',
'imgs/distribute.png',
'imgs/distributeDown.png',
'imgs/footerBg.png',
'imgs/headerBg.png',
'imgs/iconBack.png',
'imgs/iconBack2.png',
'imgs/iconCancel.png',
'imgs/iconHelp.png',
'imgs/iconHistory.png',
'imgs/iconNew.png',
'imgs/iconSave.png',
'imgs/numpad.png',
'imgs/remove.png',
'imgs/removeDown.png',
'imgs/settingArrow.png',
'imgs/tick.png',
'imgs/toggle.png',
'imgs/view.png',
'imgs/viewDown.png'
]
});
</script>
</head>
<body id="bodily">
<div id="jqt">
<div id="home" class="content current">
<div class="toolbar">
<a class="help slideup" href="#help"></a>
<h1>Capsules</h1>
<a class="create slideup" href="#create"></a>
<a class="history slide reverse" href="#history"></a>
</div>
<div class="scroll capsuleListWrapper">
<ul class="capsuleList">
</ul>
</div>
<div class="distributeAmount">You have $2000 left to distribute</div>
<ul class="footer">
<li class="addBtn"></li>
<li class="removeBtn"></li>
<li class="distributeBtn"></li>
<li class="settingsBtn"></li>
</ul>
</div>
<div id="fullScreen" class="content">
<div class="fullScreenContent">
<h1>Install Capsules</h1>
<p>To install 'capsules' on your iPhone, you must add this page to your Home Screen. Do this by clicking the + button on the bar below and clicking 'Add to Home Screen'. <br/>Enjoy the app!</p>
</div>
</div>
<div id="history" class="content">
<div class="toolbar">
<h1>History</h1>
<a class="historyBack slide" href="#home"></a>
</div>
<div class="scroll historyListWrapper">
<ul class="scroll historyList">
<li><div class="historyName">Example 1</div><div class="historyAmount green">+300</div></li>
<li><div class="historyName">Example 2</div><div class="historyAmount green">+70</div></li>
<li><div class="historyName">Example 3</div><div class="historyAmount red">-250</div></li>
</ul>
</div>
</div>
JAVASCRIPT SNIPPET
$(document).ready(function() {
//////////////////////////////////////////////////////////////////////////////////////// Detect Full Screen App
if (window.navigator.userAgent.indexOf('iPhone') != -1) {
if (window.navigator.standalone == true) {
// Initialize your app
}else{
$('#home').removeClass('current');
$('#fullScreen').addClass('current');
}
}else{
document.location.href = 'iPhone.php';
}
/////////////////////////////////////////////////////////////////////////
function pausecomp(millis){
var date = new Date();
var curDate = null;
do { curDate = new Date(); }
while(curDate-date < millis);
}
//////////////////////////////////////////////////////////////////////////////////////// Open Database (if non-existent)
try {
if (!window.openDatabase) {
alert('Error: Unsupported Browser');
} else {
var shortName = 'capsules';
var version = '1.0';
var displayName = 'Capsules Database';
var maxSize = 5000000; // in bytes
var db = openDatabase(shortName, version, displayName, maxSize);
// You should have a database instance in db.
}
} catch(e) {
// Error handling code goes here.
if (e == 2) {
// Version number mismatch.
alert("Invalid database version.");
} else {
alert("Unknown error "+e+".");
}
return;
}
//////////////////////////////////////////////////////////////////////////////////////// First-timer Setup
createTables();
function createTables() {
db.transaction(
function (transaction) {
/* Create table. if it already exists, then rewriteCapsules() */
transaction.executeSql('CREATE TABLE capsules(id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, name TEXT NOT NULL DEFAULT "Un-named", balance INTEGER NOT NULL DEFAULT "0", autobill TEXT NOT NULL DEFAULT "off");', [], rewriteCapsules);
transaction.executeSql('CREATE TABLE autobills(id INTEGER NOT NULL, duration TEXT NOT NULL DEFAULT "Weekly", day TEXT NOT NULL DEFAULT "Monday", date INTEGER NOT NULL DEFAULT "1", amount INTEGER NOT NULL DEFAULT "0", nextWithdraw TEXT NOT NULL DEFAULT "undefined");', []);
transaction.executeSql('CREATE TABLE history(id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, capsule TEXT NOT NULL DEFAULT "Unknown", amount INTEGER NOT NULL DEFAULT "0", type TEXT NOT NULL DEFAULT "add", date TEXT NOT NULL DEFAULT "Unknown");', []);
/* These insertions will be skipped if the table already exists. */
transaction.executeSql('INSERT into capsules (name, balance, autobill) VALUES ("Example", "500", "off");', []);
rewriteCapsules();
}
);
}
//////////////////////////////////////////////////////////////////////////////////////// Check For Auto-Withdraws (overdue)
checkWithdraws();
function checkWithdraws() {
db.transaction( function(transaction) {
transaction.executeSql("SELECT * from autobills",[], function(transaction, results) {
for (var i=0; i<results.rows.length; i++) {
var row = results.rows.item(i);
currentCapsuleId = row['id'];
var currentDate = new Date();
var amount = row['amount'];
var nextWithdraw = row['nextWithdraw'];
nextWithdraw = new Date(nextWithdraw);
if(currentDate>=nextWithdraw){
if(row['duration']=="Weekly"){
rewriteSettingsCard();
}
else if(row['duration']=="Monthly"){
rewriteSettingsCard();
}
transaction.executeSql("UPDATE autobills set nextWithdraw=? where id=?",[nextWithdraw, currentCapsuleId]);
db.transaction( function(transaction) {
transaction.executeSql("SELECT * from capsules where id=?",[currentCapsuleId], function(transaction, results) {
var row = results.rows.item(0);
var newBalance = row['balance'] - amount;
transaction.executeSql("UPDATE capsules set balance=? where id=?",[newBalance, currentCapsuleId]);
});
});
}
rewriteCapsules();
}
});
});
}
//////////////////////////////////////////////////////////////////////////////////////// Rewrite Capsules List
function rewriteCapsules() {
db.transaction( function(transaction) {
transaction.executeSql("SELECT * from capsules",[], function(transaction, results) {
$('.capsuleList').empty();
for (var i=0; i<results.rows.length; i++) {
var row = results.rows.item(i);
var num = new Number(row['balance']);
if(num%1!=0){
num = num.toFixed(2);
}
string = '<li data-id="' + row['id'] + '" onclick="javascript:test(' + row['id'] + ')"><div class="capsuleName">' + row['name'] + '</div><div class="capsuleBalance">$' + num + '</div></li>';
$('.capsuleList').append(string);
}
});
});
}
;)
