index.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   2 <html xmlns="http://www.w3.org/1999/xhtml">
   3 <head>
   4 <title>Dispense @ UCC</title>
   5 <link rel="stylesheet" type="text/css" href="dispense.css" />
   6 <meta name="viewport" content="initial-scale = 1.0, user-scalable = no, width=device-width">
   7 <meta name="apple-mobile-web-app-capable" content="yes" />
   8 <meta name="apple-mobile-web-app-status-bar-style" content="hidden" />
   9 <script type="text/javascript" src="jquery.js"></script>
  10 <script type="text/javascript">
  11 drink_icons = { "Sunkist" : "sunkist.png",
  12                 "lemony fizz"   : "lemonade.png",
  13                 "han solo" : "solo.png",
  14                 "lemony aide" : "lemonade.png",
  15                 "coke" : "coke.png",
  16                 "pepsi max" : "pepsimax.png",
  17                 "null coke" : "cokezero.png"
  18 };
  19 function dispense (slot) {
  20         $("#slot" + slot).css ("background", "no-repeat url('loading.gif') center center");
  21         $.getJSON ("dispense.py?slot=" + slot, {}, function (data) {
  22                 result = data["result"];
  23                 if (result != "success") {
  24                         alert ("Error: " + result);
  25                 } else {
  26                         alert ("Dispense successful!");
  27                 }
  28                 updateStatus ();
  29         });
  30 }
  31
  32 // Loads machine status, then displays it.
  33 function updateStatus () {
  34         $.getJSON ("query.py", {}, function (data) {
  35         $.getJSON ("balance.py", {}, function (baldata) {
  36                 result = baldata["result"];
  37                 if (result != "success") {
  38                         alert ("Error: " + result);
  39                         $('#login').css ("background", "no-repeat url('login.png')");
  40                         return;
  41                 }
  42                 window.balance = baldata["balance"];
  43                 showScreen ("main_menu");
  44                 $("#lcdusername").text (window.username);
  45                 $("#lcdbalance").text (window.balance);
  46                 for (i=0;i<=6;i++) {
  47                         drink = data["slot" + i][0];
  48                         available = "";
  49                         if (!data["slot" + i][2]) available = "dark-";
  50                         if (drink in drink_icons) icon = available + drink_icons[drink];
  51                         else icon = available + "default.png";
  52                         $("#slot" + i).html (data["slot" + i][1] + "c");
  53                         $("#slot" + i).css ("background", "no-repeat url('icons/" + icon + "') center center");
  54                 }
  55                 $('#login').css ("background", "no-repeat url('login.png')");
  56         });
  57         });
  58 }
  59
  60 function load () {
  61         window.username = getCookie ("username");
  62         window.pin = getCookie ("pin");
  63         $('#username').val (window.username);
  64         $('#pin').val (window.pin);
  65         window.current_screen = "login_screen";
  66         if (window.username != "" && window.pin != ""){
  67                 $('#login').css ("background", "no-repeat url('loading.gif') center center");
  68                 updateStatus ();
  69         }
  70 }
  71 function login () {
  72         $('#login').css ("background", "no-repeat url('loading.gif') center center");
  73         window.username = $("#username").val ();
  74         window.pin = $("#pin").val ();
  75         document.cookie = "username=" + escape (username) + ";";
  76         document.cookie = "pin=" + escape (pin) + ";";
  77         updateStatus ();
  78 }
  79 function logout () {
  80         document.cookie = "username=";
  81         document.cookie = "pin=";
  82         showScreen ("login_screen");
  83 }
  84 function showScreen (name) {
  85         $("#" + window.current_screen).css ("display","none");
  86         $("#" + name).css ("display", "block");
  87         window.current_screen = name;
  88 }
  89 function getCookie(c_name) {
  90         if (document.cookie.length>0) {
  91                 c_start=document.cookie.indexOf(c_name + "=");
  92                 if (c_start!=-1) {
  93                         c_start=c_start + c_name.length+1;
  94                         c_end=document.cookie.indexOf(";",c_start);
  95                         if (c_end==-1) c_end=document.cookie.length;
  96                         return unescape(document.cookie.substring(c_start,c_end));
  97                 }
  98         }
  99         return "";
 100 }
 101 </script>
 102 </head>
 103 <body onload="load();">
 104 <div class="screen" id="login_screen">
 105 UCC Account Name:<br />
 106 <input type="text" id="username" /><br />
 107 Dispense PIN:<br />
 108 <input type="password" id="pin" />
 109 <div id="login" onclick="login();"></div>
 110 </div>
 111 <div class="screen" id="main_menu">
 112 <div class="button" id="slot0" onclick="dispense(0);"></div>
 113 <div class="button" id="slot1" onclick="dispense(1);"></div>
 114 <div class="button" id="slot2" onclick="dispense(2);"></div>
 115 <div class="button" id="slot3" onclick="dispense(3);"></div>
 116 <div class="button" id="slot4" onclick="dispense(4);"></div>
 117 <div class="button" id="slot5" onclick="dispense(5);"></div>
 118 <div class="button" id="slot6" onclick="dispense(6);"></div>
 119 <div id="lcd">Hi, <span id="lcdusername">you</span>!<br />Balance: $<span id="lcdbalance">who knows?</span></div>
 120 <div id="opendoor" onclick="opendoor();"></div>
 121 <div id="logout" onclick="logout();"></div>
 122 </div>
 123 </body>
 124 </html>