API tools faq
paste
Advertisement
Guest User

sss

a guest
Mar 9th, 2017
115
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 21.99 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2.  
  3. <head>
  4. <script src="js/lib/jquery-3.1.1.min.js"></script>
  5. <script src="js/lib/underscore-1.8.3.min.js"></script>
  6. <script src="js/api.js"></script>
  7. <script src="js/translate.js"></script>
  8. <script src="js/main.js"></script>
  9.  
  10. <link href="http://fonts.googleapis.com/css?family=Open+Sans:400" rel="stylesheet">
  11. <link rel="stylesheet" href="style.css" type="text/css">
  12. </head>
  13.  
  14. <body>
  15. <header class="compact">
  16. <!--<a href="/index.html"> -->
  17. <img src="images/header-logo.png" alt="The Flying Dutchman" />
  18. <h1>The Flying Dutchman</h1>
  19.  
  20. <div class="profileimg">
  21. <span id="welcome-nologin" class="profile translate" data-translate="header.welcome_no_login">Welcome, click here to login!</span>
  22. <span id="welcome-admin" class="profile translate" style="display: none;" data-translate="header.welcome_admin">Welcome, Admin!</span>
  23. <span id="welcome-member" class="profile translate" style="display: none;" data-translate="header.welcome_member">Welcome, Member!</span>
  24. <img id="profile-img" class="profile" src="https://cit.duke.edu/wp-content/uploads/2013/12/about-icon-md.png" />
  25. <div class="clear:both;"></div>
  26. </div>
  27.  
  28.  
  29. <!-- START LOGIN MODAL -->
  30.  
  31.  
  32.  
  33. <!-- The Modal -->
  34. <div id="myModal" class="modal">
  35. <div class="modal-content fadein">
  36. <span class="close">&times;</span>
  37. <form class="container" id="loginform">
  38. <span id="login-msg"></span>
  39.  
  40. <label class="translate" data-translate="login.username"><b>Username</b></label>
  41. <input id="txt-username" type="text" placeholder="Enter Username" name="uname" required class="translate" data-translate="login.username_placeholder">
  42.  
  43. <label class="translate" data-translate="login.password"><b>Password</b></label>
  44. <input id="txt-password" type="password" placeholder="Enter Password" name="psw" required class="translate" data-translate="login.password_placeholder">
  45.  
  46. <button type="submit" id="loginbutton" class="translate" data-translate="login.login">Login</button>
  47. </form>
  48. </div>
  49. </div>
  50.  
  51. <!-- END LOGIN MODAL -->
  52.  
  53. </header>
  54.  
  55. <!-- --- USER LOGGED IN PROFILE POPUP --- -->
  56.  
  57. <div class="userinfo">
  58. <span class="close" id="closeuser">&times;</span>
  59. <img id="userpic" src="https://cit.duke.edu/wp-content/uploads/2013/12/about-icon-md.png" />
  60. <h2 class="nameofuser">John Doe</h2>
  61. <h4>Account balance: 452kr</h4>
  62. <h4>Purchases made: </h4>
  63. <table class="usertable">
  64. <tr class="head">
  65. <th class="translate" data-translate="checkout.name">Product name</th>
  66. <th class="translate" data-translate="checkout.price">Price</th>
  67. <th class="translate" data-translate="checkout.quantity">Quantity</th>
  68. </tr>
  69.  
  70. <tr>
  71. <td>Hej test</td>
  72. <td>Hej test 2</td>
  73. <td>Hej test 3</td>
  74. </tr>
  75. <tr>
  76. <td>Hej test</td>
  77. <td>Hej test 2</td>
  78. <td>Hej test 3</td>
  79. </tr>
  80. <tr>
  81. <td>Hej test</td>
  82. <td>Hej test 2</td>
  83. <td>Hej test 3</td>
  84. </tr>
  85. </table>
  86. </div>
  87.  
  88. <div class="admininfo">
  89. <span class="close" id="closeadmin">&times;</span>
  90. <img id="adminpic" src="https://cit.duke.edu/wp-content/uploads/2013/12/about-icon-md.png" />
  91. <h2 class="nameofuser">John Doe</h2>
  92. <h4 class="purchases_get_all">Purchases_get_all:</h4>
  93. <table class="admintable" id="purchases_get_all">
  94.  
  95. <tr class="head">
  96. <th class="translate" data-translate="checkout.name">Product name</th>
  97. <th class="translate" data-translate="checkout.price">Price</th>
  98. <th class="translate" data-translate="checkout.quantity">Quantity</th>
  99. </tr>
  100.  
  101. <tr>
  102. <td>Gives a list of all purchases made by all users.</td>
  103. <td>Hej test 2</td>
  104. <td>Hej test 3</td>
  105. </tr>
  106.  
  107. </table>
  108.  
  109. <h4 class="payments_get_all">Payments_get_all: </h4>
  110. <table class="admintable" id="payments_get_all">
  111. <tr class="head">
  112. <th class="translate" data-translate="checkout.name">Product name</th>
  113. <th class="translate" data-translate="checkout.price">Price</th>
  114. <th class="translate" data-translate="checkout.quantity">Quantity</th>
  115. </tr>
  116.  
  117. <tr>
  118. <td>Returns a list of payments made by all users.</td>
  119. <td>Hej test 2</td>
  120. <td>Hej test 3</td>
  121. </tr>
  122. <tr>
  123. <td>Hej test</td>
  124. <td>Hej test 2</td>
  125. <td>Hej test 3</td>
  126. </tr>
  127. <tr>
  128. <td>Hej test</td>
  129. <td>Hej test 2</td>
  130. <td>Hej test 3</td>
  131. </tr>
  132.  
  133. </table>
  134.  
  135. <h4>inventory_append</h4>
  136.  
  137. </div>
  138.  
  139.  
  140. <div class="checkout" ondrop="drop(event)" ondragover="allowDrop(event)">
  141. <h1 class="translate" data-translate="checkout.h1">Checkout</h1>
  142.  
  143. <table id="order_table" class="basket_list">
  144. <thead><td><i>Hint: You can drag-and-drop your drinks here.</i><td></thead>
  145. </table>
  146. <script type="text/template" id="order-list-template">
  147. <% for(let item of orders){ %>
  148. <tr>
  149. <td class="beer-name"><%= item.name %></td>
  150. <td class="beer-qty">x<%= item.quantity %></td>
  151. <td class="beer-price"><%= (item.quantity * Number(item.price)).toFixed(2) %>kr</td>
  152. </tr>
  153. <% } %>
  154. <tr class="total-row">
  155. <td><span class="translate" data-translate="checkout.total">Total</span></td>
  156. <td>:</td>
  157. <td><%= total.toFixed(2) %>kr</td>
  158. </tr>
  159. </script>
  160. <button class="checkoutButton translate" data-translate="checkout.purchase">Pay</button>
  161.  
  162. <div class="screensize">
  163. <div id="errorpurchasediv" class="modal-content fadein">
  164. <span class="close togglepurchaseerror">&times;</span> You need to log in to make a purchase. </br>
  165. Members without a login order at the bar.
  166. <!-- TODO: translate -->
  167. <button id="link">Log in</button>
  168. <!-- TODO: translate -->
  169.  
  170. </div>
  171.  
  172. <div class="product-filter">
  173. <form id="filter-form">
  174. <span>Categories :</span>
  175. <input type="radio" id="all-check" name="filter" value="all" checked/>
  176. <label for="all-check" class="translate" data-translate="product_filter.label_all">All</label>
  177.  
  178. <input type="radio" id="beers-check" name="filter" value="beer" />
  179. <label for="beers-check" class="translate" data-translate="product_filter.label_beer">Beer</label>
  180.  
  181. <input type="radio" id="wines-check" name="filter" value="wine" />
  182. <label for="wines-check" class="translate" data-translate="product_filter.label_wine">Wine</label>
  183.  
  184. <input type="radio" id="ciders-check" name="filter" value="cider" />
  185. <label for="ciders-check" class="translate" data-translate="product_filter.label_cider">Cider</label>
  186.  
  187. <input type="radio" id="noalcohols-check" name="filter" value="noalcohol" />
  188. <label for="noalcohols-check" class="translate" data-translate="product_filter.label_noalcohol">Non-alcoholic</label>
  189.  
  190. <input type="radio" id="other-check" name="filter" value="other" />
  191. <label for="other-check" class="translate" data-translate="product_filter.label_other">Other</label>
  192. </form>
  193. <script type="text/javascript">
  194. $("document").ready(function () {
  195. $('#filter-form input').on('change', function () {
  196. let selected = $('input[name=filter]:checked', '#filter-form').val();
  197. if (selected == "all") {
  198. renderProductList(products);
  199. }
  200. else {
  201. let filtered = products.filter(product => product.type == selected);
  202. renderProductList(filtered);
  203. }
  204. });
  205.  
  206. $("#loginbutton").on("click", function (e) {
  207. e.preventDefault();
  208. $("#login-msg").text("");
  209. let username = $("#txt-username").val().trim();
  210. let password = $("#txt-password").val().trim();
  211.  
  212. login(username, password).then(role => {
  213. if (role == "admin") {
  214. console.log("ADMIN!!");
  215. $("#login-msg").text("Login as a admin.");
  216. }
  217. else if (role == "member") {
  218. console.log("member!!");
  219. $("#login-msg").text("Login as a member.");
  220. }
  221. else {
  222. console.log("Invalid!!");
  223. $("#login-msg").text("Invalid login!");
  224. }
  225. })
  226. })
  227. });
  228.  
  229. async function login(username, password) {
  230. let api = new Api();
  231. let payload = await api.getPurchasesAll(username, password);
  232. console.log("Try Admin: ", payload);
  233. if (payload.type != "error") {
  234. return "admin"
  235. }
  236. payload = await api.getPayments(username, password);
  237. console.log("Try member: ", payload);
  238. if (payload.type != "error") {
  239. return "member"
  240. }
  241. return false;
  242. }
  243. </script>
  244. </div>
  245. <div class="content">
  246. <ul id="beer-list" class="product-list"></ul>
  247. <script type="text/template" id="beer-listitem-template">
  248. <li class="<%= type %>">
  249. <div class="product-container item" draggable="true" ondragstart="drag(event)" data-beerid="<%= beer_id %>" data-price="<%= price %>"
  250. data-name="<%= (namn + ' ' + namn2).trim() %>" data-type="<%= type %>">
  251.  
  252. <span class="item-name"><%= (namn + " " + namn2).trim() %></span>
  253. <br/>
  254. <img id="<%= beer_id %>" class="beer-listitem" draggable="false" src="images/<%= beer_id %>.jpg" onerror="this.src='images/default.png'"
  255. />
  256. <span class="pricetag"><%= price %> Kr</span>
  257. </div>
  258. <div class="product-button-div">
  259. <button class="detail-button translate" data-translate="button.detail"> DETAILS </button>
  260. <button class="buy-button translate" data-translate="button.buy"> BUY </button>
  261. </div>
  262. </li>
  263. </script>
  264. </div>
  265.  
  266.  
  267. <!-- DETAILS POPUP DIV -->
  268. <div id="detailPopup">
  269. <p id="test"> </p>
  270. <button id="detailClose" class="translate" data-translate="detail.close">Close</button>
  271. </div>
  272.  
  273.  
  274. <!-- Loading animation -->
  275. <div class="loader"></div>
  276. <script type="text/javascript">
  277. var products = [];
  278.  
  279. $("document").ready(() => {
  280. $("body").addClass("loading");
  281.  
  282. try {
  283. getMenu().then(beers => {
  284. products = beers;
  285. renderProductList(beers);
  286. }).then(function(){
  287. let trans = new Translate("en");
  288. trans.init();
  289. }).then(function () {
  290. $("body").removeClass("loading");
  291. }).then(function(){
  292. /* Pop-up modal of beer detail */
  293. $(".detail-button").on('click',function() {
  294. let detail_beer_id;
  295. let detail_beer;
  296. detail_beer_id = this.parentNode.parentNode.children[0].getAttribute("data-beerid");
  297. $( "#detailPopup" ).toggle("slow", function(){
  298. detail_beer = products.find(function(beer){ return beer.beer_id == detail_beer_id } );
  299. $("#test").html(`
  300. <img id="detailImg" src="images/` + detail_beer_id + `.jpg" />
  301. <ul id="detailList">
  302. <li class="detailListItem" class="translate" data-translate="detail.name">` + detail_beer.namn + ` ` + detail_beer.namn2 + `</li>
  303. <li class="detailListItem" class="translate" data-translate="detail.alcohol">` + detail_beer.alkoholhalt + `</li>
  304. <li class="detailListItem" class="translate" data-translate="detail.producer">` + detail_beer.producent + `</li>
  305. <li class="detailListItem" class="translate" data-translate="detail.country">` + detail_beer.ursprunglandnamn + `</li>
  306. </ul>`);
  307. });
  308. });
  309.  
  310. /* buy button */
  311. $(".buy-button").on('click',function() {
  312. let detailDiv = this.parentNode.parentNode.children[0];
  313. let beer_id = detailDiv.getAttribute("data-beerid");
  314. let name = detailDiv.getAttribute("data-name");
  315. let price = detailDiv.getAttribute("data-price");
  316. doOrderAction("addOrder", beer_id, name, price, 1);
  317. renderOrderList(orderlist);
  318. });
  319. });
  320. }
  321. catch (e) {
  322. console.log("Application error: ", e);
  323. }
  324.  
  325.  
  326.  
  327.  
  328. $('.checkoutButton').click(function () {
  329. $('#errorpurchasediv').css("display", "block");
  330. });
  331.  
  332. $('.togglepurchaseerror').click(function () {
  333. $('#errorpurchasediv').toggle();
  334. });
  335.  
  336. $('.closepurchaseerror').click(function () {
  337. $('#errorpurchasediv').css("display", "none");
  338. });
  339.  
  340. $('#link').click(function () {
  341. $('#errorpurchasediv').toggle();
  342. })
  343.  
  344. $('#closeuser').click(function () {
  345. $('.userinfo').css("display", "none");
  346. })
  347.  
  348. $('#closeadmin').click(function () {
  349. $('.admininfo').css("display", "none");
  350. })
  351.  
  352. $('.purchases_get_all').click(function () {
  353. //$('#purchases_get_all').css('display', 'block');
  354. $('#purchases_get_all').toggle();
  355. })
  356.  
  357. $('.payments_get_all').click(function () {
  358. //$('#payments_get_all').css('display', 'block');
  359. $('#payments_get_all').toggle();
  360. })
  361.  
  362. $("#detailClose").click(function(){
  363. $("#detailPopup").hide("slow");
  364. });
  365.  
  366. });
  367.  
  368. function drag(ev) {
  369. ev.dataTransfer.setData("beer_id", ev.target.getAttribute("data-beerid"));
  370. ev.dataTransfer.setData("name", ev.target.getAttribute("data-name"));
  371. ev.dataTransfer.setData("price", ev.target.getAttribute("data-price"));
  372. }
  373.  
  374. function drop(ev) {
  375. ev.preventDefault();
  376. let beer_id = ev.dataTransfer.getData("beer_id");
  377. let name = ev.dataTransfer.getData("name");
  378. let price = ev.dataTransfer.getData("price");
  379.  
  380. doOrderAction("addOrder", beer_id, name, price, 1);
  381. renderOrderList(orderlist);
  382. }
  383.  
  384. function allowDrop(ev) {
  385. ev.preventDefault();
  386. }
  387.  
  388. function renderOrderList(list) {
  389. let _templatemap = _.template($("#order-list-template").html());
  390. let total = 0;
  391. for(item of list){
  392. total += Number(item.price);
  393. }
  394. let html = _templatemap({orders:list, total:total})
  395.  
  396. $("#order_table").html(html);
  397. }
  398.  
  399. var undostack = [];
  400. var redostack = [];
  401. var orderlist = [];
  402.  
  403. function doOrderAction(action /* , args */) {
  404. let args = Array.prototype.slice.call(arguments, 1);
  405.  
  406. // generate reverse action, and push it to the undostack
  407. if (action == "addOrder") {
  408. undostack.push({ action: "addOrder", arguments: [args[0], args[1], args[2], (-args[3] || -1)] });
  409. }
  410. else if (action == "removeOrder") {
  411. let order = orderlist.find(o => o.id == id);
  412. undostack.push({ action: "addOrder", arguments: [order.id, order.name, order.price, order.quantity] });
  413. }
  414.  
  415. // clear redo stack`
  416. redostack = [];
  417.  
  418. // run function
  419. window[action].apply(this, args);
  420. }
  421.  
  422. function undoOrderAction() {
  423. let act = undostack.pop();
  424. if (!act)
  425. return;
  426.  
  427. // run action
  428. window[act.action].apply(this, act.arguments);
  429.  
  430. // generate reverse action, and push it to the redostack
  431. redostack.push({ action: act.action, arguments: [act.arguments[0], act.arguments[1], act.arguments[2], (-act.arguments[3] || -1)] });
  432. }
  433.  
  434. function redoOrderAction() {
  435. let act = redostack.pop();
  436. if (!act)
  437. return;
  438.  
  439. // run action
  440. window[act.action].apply(this, act.arguments);
  441.  
  442. // generate reverse action, and push it to the undostack
  443. undostack.push({ action: act.action, arguments: [act.arguments[0], act.arguments[1], act.arguments[2], (-act.arguments[3] || -1)] });
  444. }
  445.  
  446. function addOrder(id, name, price, quantity) {
  447. let order = orderlist.find(o => o.id == id);
  448. if (order)
  449. order.quantity += (quantity || 1);
  450. else {
  451. order = { id: id, name: name, price: price, quantity: quantity || 1 };
  452. orderlist.push(order);
  453. }
  454.  
  455. if (order.quantity <= 0)
  456. removeOrder(id);
  457. }
  458.  
  459. function removeOrder(id) {
  460. let order = orderlist.find(o => o.id == id);
  461. orderlist.splice(orderlist.indexOf(order), 1);
  462. }
  463.  
  464. </script>
  465. </body>
  466.  
  467. <script>
  468. /* LOG IN MODAL */
  469.  
  470. // Get the modal
  471. var modal = document.getElementById('myModal');
  472.  
  473. // Get the button that opens the modal
  474.  
  475. var btn = document.getElementsByClassName("profileimg")[0];
  476.  
  477. var btn2 = document.getElementById("link");
  478.  
  479. // Get the <span> element that closes the modal
  480. var span = document.getElementsByClassName("close")[0];
  481.  
  482. // When the user clicks on the button, open the modal
  483. btn.onclick = function () {
  484. modal.style.display = "block";
  485. }
  486.  
  487. btn2.onclick = function () {
  488. modal.style.display = "block";
  489. }
  490.  
  491. // When the user clicks on <span> (x), close the modal
  492. span.onclick = function () {
  493. modal.style.display = "none";
  494. }
  495.  
  496. // When the user clicks anywhere outside of the modal, close it
  497. window.onclick = function (event) {
  498. if (event.target == modal) {
  499. modal.style.display = "none";
  500. }
  501. }
  502.  
  503. </script>
  504.  
  505.  
  506. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!