Skip to content

Instantly share code, notes, and snippets.

@birkanu

birkanu/popdeals.html

Last active August 29, 2015 13:57
Show Gist options
  • Save birkanu/9439409 to your computer and use it in GitHub Desktop.
Save birkanu/9439409 to your computer and use it in GitHub Desktop.
Download ZIP
Front-end of the WearScript app, PopDeals
Raw
popdeals.html
<html style="width:100%; height:100%; overflow:hidden">
<head>
<style type="text/css">
body {
background: url("http://web.mit.edu/birkanu/www/popdeals-logo.png");
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.0/zepto.min.js"></script>
</head>
<body>
<div id="loading"></div>
<script>
var dealIdCounter = 0;
var showingCardTree = false;
var styles = {
backgroundImage : "url('http://web.mit.edu/birkanu/www/loading.gif')",
backgroundSize: "100px 100px",
backgroundColor: "black",
backgroundRepeat: "no-repeat",
backgroundPosition: "center"
};
function readQrAndPay(index, restaurant) {
WS.qr(function (data) {
var paymentSubtree = new WS.Cards();
script = "<script type='text/html' id='" + "payment_subtree_" + index + "'> <article class='author'>" +
"<img src='" + restaurant.background + "' width='100%' height='100%'>" +
"<div class='overlay-full'/><header style='margin-left:-50px;'>" +
"<h1>" + restaurant.name + "</h1>" +
"<h2>" + restaurant.address + "</h2>" +
"</header><section><br>" +
"<center>" + data + " Paid</center>" +
"</section><footer><img src='http://web.mit.edu/birkanu/www/popdeals-logo-small.png' class='left icon-small'><span style='margin-left: 70px;'>Thank you for using PopDeals</span></article><\/script>";
$(script).appendTo('body');
paymentSubtree.addHTML('payment_subtree_' + index);
WS.cardTree(paymentSubtree);
WS.displayCardTree();
});
}
function generateCouponCode(length) {
var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ';
var couponCode = '';
for (var i = length; i > 0; --i) couponCode += chars[Math.round(Math.random() * (chars.length - 1))];
return couponCode;
}
function generateSubtree(index, restaurant) {
var subtree = new WS.Cards();
script = "<script type='text/html' id='" + "deal_subtree_" + index + "'> <article class='author'>" +
"<img src='" + restaurant.background + "' width='100%' height='100%'>" +
"<div class='overlay-full'/><header style='margin-left:-50px;'>" +
"<h1>" + restaurant.name + "</h1>" +
"<h2>" + restaurant.address + "</h2>" +
"</header><section><br>" +
"<center>" + generateCouponCode(6) + "</center>" +
"</section><footer><center>Use the code to get your discount and tap to pay!</center></footer></article><\/script>";
$(script).appendTo('body');
subtree.addHTML('deal_subtree_' + index, undefined, function() {readQrAndPay(index, restaurant);});
return subtree;
}
function displayDeals(restaurants) {
var dealsTree = new WS.Cards();
$.each(restaurants, function(index, restaurant) {
script = "<script type='text/html' id='" + "deal_" + dealIdCounter + "'> <article class='author'>" +
"<img src='" + restaurant.background + "' width='100%' height='100%'>" +
"<div class='overlay-full'/><header style='margin-left:-50px;'>" +
"<h1>" + restaurant.name + "</h1>" +
"<h2>" + restaurant.address + "</h2>" +
"</header><section style='padding-top:30px;'>" +
"<center>" + restaurant.deal + "</center>" +
"<center><img src='" + restaurant.rating + "' width='107px' height='27px'></center>" +
"</section>" +
"<footer>" +
"<img src='http://s3-media1.ak.yelpcdn.com/assets/2/www/img/55e2efe681ed/developers/yelp_logo_50x25.png' class='left'>" +
"<span style='margin-left: 140px;'>Tap To Claim</span>" +
"</footer></article><\/script>";
$(script).appendTo('body');
dealsTree.addHTML('deal_' + dealIdCounter, generateSubtree(dealIdCounter,restaurant));
dealIdCounter += 1;
});
WS.cardTree(dealsTree);
if (!showingCardTree) {
WS.displayCardTree();
showingCardTree = true;
}
}
function getDeals() {
$('body').css(styles);
var location = {};
WS.sensorOn('gps', .1, function(data) {
location.latitude = data.values[0];
location.longitude = data.values[1];
console.log("Latitude: " + location.latitude + ", Longitude: " + location.longitude);
$.ajax({
type: "GET",
url: "http://popdeals-api.herokuapp.com/deals?latitude=" + location.latitude + "&longitude=" + location.longitude,
success: function(data) {
displayDeals(data);
}
});
});
}
function speech(data) {
if (data === "pop deals") {
getDeals();
} else {
WS.speechRecognize('Did you mean "pop deals"?', function(data) {
if (data.indexOf("yes") !== -1) {
getDeals();
} else {
WS.speechRecognize('Say "pop deals"', 'speech');
}
});
}
}
function speechRecognize() {
WS.speechRecognize('Say "pop deals"', 'speech');
}
function server() {
WS.say('Welcome to Pop Deals');
setTimeout(getDeals,2000);
// Swipe up with two fingers two restart the speech recognizer
WS.gestureCallback('onGestureTWO_SWIPE_UP', function () {
speechRecognize();
});
}
function main() {
if (WS.scriptVersion(1)) return;
WS.serverConnect('{{WSUrl}}', 'server');
}
window.onload = main;
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment