Advertisement
Guest User

Untitled

a guest
Dec 10th, 2017
349
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 18.75 KB | None | 0 0
  1. <div data-role="header" class="header">
  2. </div>
  3. <div role="main" class="ui-content padding">
  4. <div id="addpage">
  5. <h1>Login Page</h1>
  6. <form novalidate>
  7. <label for="custName">UserName:</label>
  8. <input type="text" id="custName" name="custName" placeholder="eg. Lim Siew Ming" required />
  9. <label for="custMobile">Password:</label>
  10. <input type="text" id="custMobile" name="custMobile" placeholder="eg. 1600000X"
  11. required />
  12. <button id="search" class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-plus">
  13. Add
  14. </button>
  15. <button id="register" class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-plus">
  16. Register
  17. </button>
  18. </form>
  19. </div>
  20. <div id="searchpage" hidden>
  21. <form novalidate>
  22. <h1>Register Page</h1>
  23. <label for="custName">Username:</label>
  24. <input type="text" id="custName" name="custName" placeholder="eg. Lim Siew Ming" />
  25. <label for="custMobile">Password:</label>
  26. <input type="text" id="custMobile" name="custMobile" placeholder="eg. 1600000X"
  27. required />
  28. <label for="custEmail">Email:</label>
  29. <input type="text" id="custEmail" name="custEmail" placeholder="eg.limsiewming@customer.tp.edu.sg" />
  30. <label for="custEmail">
  31. Date of Birth
  32. </label>
  33. <input type="date" data-role="date" />
  34. <button id="add" class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-plus">
  35. Register
  36. </button>
  37. <button id="return" class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-plus">
  38. Return
  39. </button>
  40. </form>
  41. </div>
  42. <div id="mainpage" hidden>
  43. <form>
  44. <h1>Main Page</h1>
  45. <input type="image" src="images/txnxcokskgxdwhbjlayk.png" name="order" class="btTxt submit" id="order" width="150" height="60" />
  46. <label for="order1">Order Food</label>
  47. <input type="image" src="images/download1.png" name="takeorder" class="btTxt1 submit" id="order1" width="150" height="60" />
  48. <label for="order2" style="float:right">Check My Order</label>
  49. <button class="ui-btn" id="signout">Sign Out</button>
  50. </form>
  51. </div>
  52. <div id="selectcanteen" hidden>
  53. <form>
  54. <h1>Select Canteen</h1>
  55. <button class="btn" type="submit" style="background-color:transparent; border-color:transparent;" name="itas" id="itas">
  56. <img src="images/download.jpg" height="100" id="image1" class="myImage" />
  57. <h3 class="heading">Itas</h3>
  58. </button>
  59. <button type="submit" style="background-color:transparent; border-color:transparent;" name="businesspark" id="businesspark">
  60. <img src="images/businesspark.jpg" height="100" id="image2" class="myImage1" />
  61. <h3 class="heading1">Business Park</h3>
  62. </button>
  63. <button type="button" id="back" class="ui-btn ui-shadow ui-btn-icon-left uicorner-all">Back</button>
  64. </form>
  65. </div>
  66. <div id="verifycanteen" hidden>
  67. <h1>Verify Canteen</h1>
  68. <div role="main" class="ui-content padding">
  69. <div id="mainpage" class="btn-toolbar">
  70. <form>
  71. <button type="button" id="getPosition" class="ui-btn ui-shadow ui-btn-icon-left uicorner-all">
  72. CURRENT POSITION
  73. </button>
  74. </form>
  75. </div>
  76. </div>
  77. <div id="displayresults">Current Postion:</div>
  78. <button type="button" id="watchPosition" class="ui-btn ui-shadow ui-btn-icon-left uicorner-all">
  79. PROCEED
  80. </button>
  81. <button type="button" id="backposition" class="ui-btn ui-shadow ui-btn-icon-left uicorner-all">
  82. Back
  83. </button>
  84. </div>
  85. <div id="selectstore">
  86. <h1>Select the Stall</h1>
  87. <button class="btn" type="submit" style="background-color:transparent; border-color:transparent;" name="malaystall" id="malaystall">
  88. <img src="images/3fbd8-javamalay1.jpg" height="100" id="image3" class="myImage" />
  89. <h3 class="heading">Malay Stall</h3>
  90. </button>
  91. <button class="btn" type="submit" style="background-color:transparent; border-color:transparent;" name="westernfood" id="westernfood">
  92. <img src="images/images.jpg" height="100" id="image4" class="myImage" />
  93. <h3 class="heading">Western Food</h3>
  94. </button>
  95. <button class="btn" type="submit" style="background-color:transparent; border-color:transparent;" name="miniwok" id="miniwok">
  96. <img src="images/mw2.jpg" height="100" id="image5" class="myImage" />
  97. <h3 class="heading">Mini Wok</h3>
  98. </button>
  99. <button type="button" id="selectback" class="ui-btn ui-shadow ui-btn-icon-left uicorner-all">
  100. Back
  101. </button>
  102. </div>
  103. <div id="selectfood">
  104. <h1>Select Food</h1>
  105. <button class="btn" type="submit" style="background-color:transparent; border-color:transparent;" value="nasilemak" id="nasilemak">
  106. <img src="images/1200px-Nasi_Lemak,_Mamak,_Sydney.jpg" height="100" id="image1" class="myImage" />
  107. <h3 class="heading">Nasi Lemak</h3>
  108. </button>
  109. <button class="btn" type="submit" style="background-color:transparent; border-color:transparent;" value="nasigoreng" id="nasigoreng">
  110. <img src="images/Nasi-Goreng_1_landscape-680x486.jpg" height="100" id="image1" class="myImage" />
  111. <h3 class="heading">Nasi Goreng</h3>
  112. </button>
  113. <button class="btn" type="submit" style="background-color:transparent; border-color:transparent;" value="nasipadang" id="nasipadang">
  114. <img src="images/nasi-padang-plate-delicious-bali-indonesia.jpg" height="100" id="image1" class="myImage" />
  115. <h3 class="heading">Nasi Padang</h3>
  116. </button>
  117. <button type="button" id="selectfoodback" class="ui-btn ui-shadow ui-btn-icon-left uicorner-all">
  118. Back
  119. </button>
  120. </div>
  121. <div id="selectdrink">
  122. <h1>Select Drinks</h1>
  123. <button class="btn" type="submit" style="background-color:transparent; border-color:transparent;" value="lemontea" id="lemontea">
  124. <img src="images/Thai-Lemon-Iced-Tea.jpg" height="100" id="image1" class="myImage" />
  125. <h3 class="heading">Ice Lemon Tea</h3>
  126. </button>
  127. <button class="btn" type="submit" style="background-color:transparent; border-color:transparent;" value="hotcoffee" id="hotcoffee">
  128. <img src="images/images1.jpg" height="100" id="image1" class="myImage" />
  129. <h3 class="heading">Hot Coffee</h3>
  130. </button>
  131. <button class="btn" type="submit" style="background-color:transparent; border-color:transparent;" value="icemilo" id="icemilo">
  132. <img src="images/download2.jpg" height="100" id="image1" class="myImage" />
  133. <h3 class="heading">Ice Milo</h3>
  134. </button>
  135. <button type="button" id="selectdrinkback" class="ui-btn ui-shadow ui-btn-icon-left uicorner-all">
  136. Back
  137. </button>
  138. </div>
  139. </div>
  140. <div id="selectfood1">
  141. <h1>Select Food</h1>
  142. <button class="btn" type="submit" style="background-color:transparent; border-color:transparent;" name="chickenrice" id="chickenrice">
  143. <img src="images/chickenrice_566x424_fillbg_1b71b0de73.jpg" height="100" id="image1" class="myImage" />
  144. <h3 class="heading">Chicken Rice</h3>
  145. </button>
  146. <button class="btn" type="submit" style="background-color:transparent; border-color:transparent;" name="westernfood1" id="westernfood1">
  147. <img src="images/5. Shi Xin Western Food 时新西餐 (Tekka Food Centre) - Pork Chop.jpg" height="100" id="image1" class="myImage" />
  148. <h3 class="heading">Western Food</h3>
  149. </button>
  150. <button class="btn" type="submit" style="background-color:transparent; border-color:transparent;" name="banmian" id="banmian">
  151. <img src="images/T&T-banmian-lanxiang.jpg" height="100" id="image1" class="myImage" />
  152. <h3 class="heading">Ban Mian</h3>
  153. </button>
  154. <button type="button" id="selectfood2" class="ui-btn ui-shadow ui-btn-icon-left uicorner-all">
  155. Back
  156. </button>
  157. </div>
  158. <div id="PaymentPage">
  159. <h1>Confirm Order</h1>
  160. <div id="searchResults">
  161. <table id="allresults">
  162. <tbody></tbody>
  163. </table>
  164. <button id="delete1" class="ui-btn ui-shadow ui-btn-icon-left ui-corner-all ui-icondelete">Get Order</button>
  165. <button id="delete" class="ui-btn ui-shadow ui-btn-icon-left ui-corner-all ui-icondelete">Confirm Order</button>
  166. </div>
  167. </div>
  168.  
  169. (function () {
  170. "use strict";
  171.  
  172. document.addEventListener('deviceready', onDeviceReady.bind(this), false);
  173. var username = [10];
  174. var password = [10];
  175. var apikey = "AIzaSyDjY3kWvaRawcehjhYVx-v-T-1daTrzNfE";
  176. var watchID = null;
  177. var foodname = [5];
  178. var foodprice = [5];
  179. function onDeviceReady() {
  180. $("#getPosition").click(getPosition);
  181. $("#add").click(addCustomer);
  182. $("#search").click(searchCustomer);
  183. $("#itas").click(selectcanteen);
  184. $("#businesspark").click(selectcanteen);
  185. $("#delete1").click(retrievetotal);
  186. $("#addpage").show();
  187. $("#selectstore").hide();
  188. $("#selectfood").hide();
  189. $("#selectfood1").hide();
  190. $("#PaymentPage").hide();
  191. $("#selectdrink").hide();
  192. $("#watchPosition").hide();
  193. $('#order').click(function () {
  194. $("#searchpage").hide();
  195. $("#addpage").hide();
  196. $("#mainpage").hide();
  197. $("#selectcanteen").show();
  198. $("#selectstore").hide();
  199. $("#selectfood").hide();
  200. $("#selectdrink").hide();
  201. $("#selectfood1").hide();
  202. $("#PaymentPage").hide();
  203. });
  204. $('#register').click(function () {
  205. $("#searchpage").show();
  206. $("#addpage").hide();
  207. $("#mainpage").hide();
  208. $("#selectcanteen").hide();
  209. $("#selectstore").hide();
  210. $("#selectfood").hide();
  211. $("#selectdrink").hide();
  212. $("#selectfood1").hide();
  213. $("#PaymentPage").hide();
  214. });
  215. $('#return').click(function () {
  216. $("#addpage").show();
  217. $("#mainpage").hide();
  218. $("#searchpage").hide();
  219. $("#selectcanteen").hide();
  220. $("#selectstore").hide();
  221. $("#selectfood").hide();
  222. $("#selectdrink").hide();
  223. $("#selectfood1").hide();
  224. $("#PaymentPage").hide();
  225. });
  226. $('#watchPosition').click(function () {
  227. $("#selectstore").show();
  228. $("#verifycanteen").hide();
  229. });
  230. $('#malaystall').click(function () {
  231.  
  232. $("#selectstore").hide();
  233. $("#selectfood").show();
  234. });
  235. $('#nasilemak').click(function () {
  236. for (var i = 0; i < foodname.length; i++) {
  237. foodname[i] = $(this).val();
  238. foodprice[i] = 3;
  239. }
  240. $("#selectfood").hide();
  241. $("#selectdrink").show();
  242. });
  243. $('#nasilgoreng').click(function () {
  244. $("#selectfood").hide();
  245. $("#selectdrink").show();
  246. });
  247. $('#nasilpadang').click(function () {
  248. $("#selectfood").hide();
  249. $("#selectdrink").show();
  250. });
  251. $('#lemontea').click(function () {
  252. for (var i = 0; i < foodprice.length; i++)
  253. {
  254. foodname[i] = $(this).val();
  255. foodprice[i] = 4;
  256. calculatetotal(foodname, foodprice);
  257. }
  258. $("#selectdrink").hide();
  259. $("#PaymentPage").show();
  260. });
  261. $('#hotcoffee').click(function () {
  262. calculatetotal(foodprice,foodname);
  263. $("#selectdrink").hide();
  264. $("#PaymentPage").show();
  265. });
  266. $('#icemilo').click(function () {
  267. $("#selectdrink").hide();
  268. $("#PaymentPage").show();
  269. });
  270. $('#chickenrice').click(function () {
  271. $("#selectfood").hide();
  272. $("#selectdrink").hide();
  273. });
  274. $('#westernfood1').click(function () {
  275. $("#selectfood").hide();
  276. $("#selectdrink").hide();
  277. });
  278. $('#banmian').click(function () {
  279.  
  280. $("#selectfood").hide();
  281. $("#selectdrink").hide();
  282. });
  283. $('#signout').click(function () {
  284. $("#addpage").show();
  285. $("#mainpage").hide();
  286. });
  287. $('#back').click(function () {
  288. $("#mainpage").show();
  289. $("#selectcanteen").hide();
  290. });
  291. $('#backposition').click(function () {
  292. $("#selectcanteen").show();
  293. $("#verifycanteen").hide();
  294. });
  295. $('#selectback').click(function () {
  296. $("#selectstore").hide();
  297. $("#verifycanteen").show();
  298. });
  299. $('#selectfoodback').click(function () {
  300. $("#selectstore").show();
  301. $("#selectfood").hide();
  302. });
  303. $('#selectdrinkback').click(function () {
  304. $("#selectfood").show();
  305. $("#selectdrink").hide();
  306. });
  307. $('#selectfood2').click(function () {
  308. $("#selectstore").show();
  309. $("#selectfood1").hide();
  310. });
  311.  
  312.  
  313. }
  314. function calculatetotal(foodname,foodprice) {
  315. var total;
  316. for (var i = 0; i < foodprice.length; i++)
  317. {
  318. total += foodprice[i];
  319. }
  320. var db = window.sqlitePlugin.openDatabase({
  321. name: "total1.db",
  322. location: 1
  323. });
  324. db.transaction(function (tx) {
  325. //tx.executeSql('DROP TABLE IF EXISTS total1');
  326. tx.executeSql('CREATE TABLE IF NOT EXISTS total1 (id integer primary key, foodname varchar(255), foodprice integer)');
  327. tx.executeSql("INSERT INTO total1 (foodName,foodprice) VALUES (?,?)", [foodname, total], function
  328. (tx, res) {
  329. console.log("insertId: " + res.insertId);
  330. console.log("rowsAffected: " + res.rowsAffected);
  331. });
  332. }, function (e) {
  333. console.log("ERROR: " + e.message);
  334. });
  335. return false;
  336. }
  337. function retrievetotal(foodname) {
  338. var db = window.sqlitePlugin.openDatabase({
  339. name: "total1.db",
  340. location: 1
  341. });
  342. var tBody = $('#allresults tbody');
  343. var theRow = "";
  344. db.transaction(function (tx) {
  345. tx.executeSql("select foodname,foodprice from total1 where foodname LIKE ?", ['%' + foodname + '%'], function (tx, res) {
  346. if (res.rows.length < 1) {
  347. $("#searchResults").hide();
  348. }
  349. else {
  350. $("#searchResults").show();
  351. }
  352. tBody.empty();
  353. theRow = "<tr><td>Name:</td><td>Mobile:</td><td>Email:</td></tr>";
  354. for (var i = 0; i < res.rows.length; i++) {
  355. theRow += "<tr><td>" + res.rows.item(i).foodname + "</td>";
  356. theRow += "<td>" + res.rows.item(i).foodprice + "</td>";
  357.  
  358. exactName = res.rows.item(i).foodName;
  359. }
  360. tBody.append(theRow);
  361. $("#allresults").table("refresh");
  362. }, function (e) {
  363. console.log("ERROR: " + e.message);
  364. });
  365. });
  366. return false;
  367. }
  368. function showLocation(datareturned) {
  369.  
  370. if (datareturned.results.length) {
  371. $('#displayresults').show();
  372. $('#displayresults').text(datareturned.results[0].formatted_address);
  373.  
  374. } else {
  375. $('#displayresults').show();
  376. $('#displayresults').text("Something is wrong");
  377. }
  378. }
  379.  
  380. function getPosition() {
  381. navigator.geolocation.clearWatch(watchID);
  382. var options = {
  383. enableHighAccuracy: true,
  384. maximumAge: 3600000
  385. };
  386.  
  387. watchID = navigator.geolocation.watchPosition(onSuccess, onError, options);
  388.  
  389.  
  390. function onSuccess(position) {
  391. var message = 'Latitude: ' + position.coords.latitude + 'n' +
  392. 'Longitude: ' + position.coords.longitude + 'n' +
  393. 'Altitude: ' + position.coords.altitude + 'n' +
  394. 'Accuracy: ' + position.coords.accuracy + 'n' +
  395. 'Altitude Accuracy: ' + position.coords.altitudeAccuracy + 'n' +
  396. 'Heading: ' + position.coords.heading + 'n' +
  397. 'Speed: ' + position.coords.speed + 'n' +
  398. 'Timestamp: ' + position.timestamp + 'n';
  399. var title = 'Current Location';
  400. var buttonName = 'Ok';
  401.  
  402.  
  403.  
  404.  
  405. //navigator.notification.alert(message, alertCallback, title, buttonName);
  406.  
  407.  
  408. //getlocation from googlemaps
  409. var queryString = 'https://maps.googleapis.com/maps/api/geocode/json?latlng='
  410. + position.coords.latitude + ',' + position.coords.longitude + '&key=' + apikey + '';
  411.  
  412.  
  413.  
  414. $.getJSON(queryString, function (datareturned) {
  415. showLocation(datareturned);
  416. $("#getPosition").hide();
  417. $("#watchPosition").show();
  418.  
  419.  
  420.  
  421. }).fail(function (jqXHR) {
  422. $('#error-msg').show();
  423. $('#error-msg').text("Error retrieving data. " + jqXHR.statusText);
  424. });
  425. }
  426.  
  427. function alertCallback() {
  428.  
  429. }
  430. function onError(error) {
  431. navigator.notification.alert('code: ' + error.code + 'n' + 'message: ' + error.message + 'n', alertCallback, 'Error', 'Ok');
  432. }
  433. }
  434.  
  435.  
  436. function addCustomer() {
  437. var custNameVal = $("#custName").val();
  438. var custEmailVal = $("#custEmail").val();
  439. var custMobileVal = parseInt($("#custMobile").val());
  440. var db = window.sqlitePlugin.openDatabase({
  441. name: "customer.db",
  442. location: 1
  443. });
  444. db.transaction(function (tx) {
  445. //tx.executeSql('DROP TABLE IF EXISTS customer');
  446. tx.executeSql('CREATE TABLE IF NOT EXISTS customer (id integer primary key, custName varchar(255), custMobile integer, custEmail)');
  447. tx.executeSql("INSERT INTO customer (custName, custMobile,custEmail) VALUES (?,?,?)", [custNameVal, custMobileVal, custEmailVal], function
  448. (tx, res) {
  449. for (var i = 0; i < username.length; i++) {
  450. for (var o = 0; o < password.length; o++) {
  451. username[i] = custNameVal;
  452. password[o] = custEmailVal;
  453. }
  454.  
  455. }
  456.  
  457. });
  458. }, function (e) {
  459. console.log("ERROR: " + e.message);
  460. });
  461. return false;
  462. }
  463.  
  464. function searchCustomer() {
  465.  
  466. var custname = $("#custName").val();
  467. var custpassword = $("#custMobile").val();
  468. for (var i = 0; i < username.length; i++) {
  469. for (var o = 0; o < password.length; o++) {
  470. if (username[i] === custname && password[o] === custpassword) {
  471. $("#addpage").hide();
  472. $("#mainpage").show();
  473. $("#searchpage").hide();
  474.  
  475. }
  476.  
  477.  
  478. }
  479.  
  480. }
  481. return false;
  482. }
  483.  
  484.  
  485. function selectcanteen() {
  486. var message = "Are you sure you are in the right canteen";
  487. var title = "Confirmation";
  488. var buttonLabels = "YES, NO";
  489.  
  490. navigator.notification.confirm(message, confirmCallback, title, buttonLabels);
  491.  
  492. function confirmCallback(buttonIndex) {
  493. if (buttonIndex === 1) {
  494. $("#verifycanteen").show();
  495. $("#mainpage").hide();
  496. $("#selectcanteen").hide();
  497. $("#searchpage").hide();
  498. $("#addpage").hide();
  499. }
  500. }
  501. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement