API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Jun 4th, 2017
83
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.69 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <!-- Mirrored from demos.jquerymobile.com/1.4.5/toolbar-fixed-persistent/page-d.html by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 03 Jun 2017 01:40:53 GMT -->
  5. <!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=utf-8" /><!-- /Added by HTTrack -->
  6. <head>
  7. <meta charset="utf-8">
  8. <meta name="viewport" content="width=device-width, initial-scale=1">
  9. <title>Persistent toolbars - jQuery Mobile Demos</title>
  10. <link rel="shortcut icon" href="http://demos.jquerymobile.com/1.4.5/favicon.ico">
  11. <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
  12. <link rel="stylesheet" href="http://demos.jquerymobile.com/1.4.5/css/themes/default/jquery.mobile-1.4.5.min.css">
  13. <link rel="stylesheet" href="http://demos.jquerymobile.com/1.4.5/_assets/css/jqm-demos.css">
  14. <script src="http://demos.jquerymobile.com/1.4.5/js/jquery.js"></script>
  15. <script src="http://demos.jquerymobile.com/1.4.5/_assets/js/index.js"></script>
  16. <script src="http://demos.jquerymobile.com/1.4.5/js/jquery.mobile-1.4.5.min.js"></script>
  17.  
  18.  
  19. <script>
  20. function generateIngredients(ingredient){
  21. var str = " <li class=\"dish ui-li-has-alt ui-li-has-thumb ui-last-child\"><a href=\"#\" class=\"ui-btn ui-btn-icon-right ui-icon-carat-r \"style=\"margin-right:10px; margin-left:10px;\"><img style=\"height:80px; margin-top: 20px;margin-left: 5px;\" src=";
  22. str += "https://upload.wikimedia.org/wikipedia/commons/thumb/3/39/Phat_Thai_kung_Chang_Khien_street_stall.jpg/1200px-Phat_Thai_kung_Chang_Khien_street_stall.jpg";
  23. str += ">";
  24. str += "<h2>";
  25. str += ingredient;
  26. str += "</h2>";
  27. str += "</a></li>"
  28. return str;
  29. }
  30.  
  31. var mydata = localStorage.getItem("data");
  32. $("#info").html(mydata.name);
  33. $(function() {
  34. $( "[data-role='navbar']" ).navbar();
  35. $( "[data-role='header'], [data-role='footer']" ).toolbar();
  36. // food page
  37. var food = {
  38. "name": "Green Curry",
  39. "host": "Matteo",
  40. "price": 10000,
  41. "img": "https://upload.wikimedia.org/wikipedia/commons/thumb/3/39/Phat_Thai_kung_Chang_Khien_street_stall.jpg/1200px-Phat_Thai_kung_Chang_Khien_street_stall.jpg",
  42. "date": "12/20",
  43. "time": "11.20pm",
  44. "ingredient": [
  45. "chicken"
  46. ],
  47. "location": "Kimmel",
  48. "currentNum": 3,
  49. "maxNum": 10,
  50. "id": "d479cb856b934c055c8197db166566fd" // TO BE REPLACED
  51. };
  52. var name = food.name;
  53. var host = food.host;
  54. var price = food.price;
  55. var img = food.img;
  56. var date = food.date;
  57. var time = food.time;
  58. var ingredient = food.ingredient;
  59. var location = food.location;
  60. var currentNum = food.currentNum;
  61. var maxNum = food.maxNum;
  62. $("#img").attr("src", img)
  63. $("#name").html(name)
  64. $("#host").html(host)
  65. $("#price").html(price)
  66. $("#date").html(date)
  67. $("#time").html(time)
  68. myIngredients = generateIngredients(ingredient[0]);
  69. console.log(myIngredients);
  70.  
  71. $("#ingredients").append(myIngredients);
  72. $("#addImage").click(function(){
  73. console.log("clicked");
  74. })
  75.  
  76. // $.get('https://gateway.watsonplatform.net/discovery/api/v1/environments/cbd7065e-8e38-4ea6-9bc5-0f71bdd5a3bc/collections/1bce84dc-a68a-44dc-8799-7f2f85f82b9b/query?version=2016-11-07&query=&count=&offset=&aggregation=&filter=&passages=false&highlight=true&return=',function(data){
  77. // console.log(data);
  78. // });
  79. var username = "1a6b81a5-6f50-4b65-8428-789819ea70d3";
  80. var password = "t1WDv4Uuvrvh";
  81. var queryString = "\"" + name + "\"";
  82. var foodName = encodeURIComponent(queryString);
  83.  
  84. $.ajax
  85. ({
  86. type: "GET",
  87. url: "https://gateway.watsonplatform.net/discovery/api/v1/environments/cbd7065e-8e38-4ea6-9bc5-0f71bdd5a3bc/collections/1bce84dc-a68a-44dc-8799-7f2f85f82b9b/query?version=2016-11-07&query="+foodName+ "&count=5&offset=&aggregation=term%28docSentiment.type%2Ccount%3A3%29&filter=blekko.hostrank%3E20%2Cblekko.chrondate%3E1493870400%2Cblekko.chrondate%3C1496462400&passages=false&highlight=true&return=",
  88. dataType: 'json',
  89. beforeSend: function (xhr) {
  90. xhr.setRequestHeader ("Authorization", "Basic " + btoa(username + ":" + password));
  91. },
  92. success: function (data){
  93. var results = data.aggregations[0].results;
  94. console.log(results);
  95. var positive;
  96. var negative;
  97. var neutral;
  98. for (var i=0;i<results.length;i++){
  99. if (results[i].key === "positive"){
  100. positive = results[i].matching_results;
  101. }
  102. }
  103. for (var i=0;i<results.length;i++){
  104. if (results[i].key === "negative"){
  105. negative = results[i].matching_results;
  106. }
  107. }
  108. for (var i=0;i<results.length;i++){
  109. if (results[i].key === "neutral"){
  110. neutral = results[i].matching_results;
  111. }
  112. }
  113. // var negative = results[0].matching_results;
  114. // var positive = results[1].matching_results;
  115. // var neutral = results[2].matching_results;
  116. var sum = positive+negative+neutral;
  117. var percPos = positive/sum * 100;
  118. var percNeg = negative/sum * 100;
  119. $("#percPos").html((percPos).toFixed(2)+"%");
  120. $("#percNeg").html((percNeg).toFixed(2)+"%");
  121. // console.log(neutral/sum);
  122.  
  123. }
  124. });
  125. // $("#supportDish").click(function(){
  126. // var myObj = { "currentNum": currentNum +1 };
  127. // var id = food.id;
  128. // console.log(myObj)
  129. // console.log(id)
  130. // $.post("https://homemade.mybluemix.net/api/Dishes/update?where=%7B%22id%22%3A%20%22"+id+"%22%7D", myObj).done(function(data){
  131. // console.log("posted");
  132. // });
  133. // })
  134.  
  135. $("#img1").click(function(){
  136. $.get("http://localhost:5000/peas",function(data){
  137. console.log(data);
  138. });
  139. });
  140. $("#img2").click(function(){
  141. $.get("http://localhost:5000/bread",function(data){
  142. console.log(data);
  143. });
  144. });
  145. $("#img3").click(function(){
  146. $.get("http://localhost:5000/apple",function(data){
  147. console.log(data);
  148. });
  149. });
  150. });
  151.  
  152. // Update the contents of the toolbars
  153. $( document ).on( "pagecontainerchange", function() {
  154. // Each of the four pages in this demo has a data-title attribute
  155. // which value is equal to the text of the nav button
  156. // For example, on first page: <div data-role="page" data-title="Info">
  157. var current = $( ".ui-page-active" ).jqmData( "title" );
  158. // Change the heading
  159. $( "[data-role='header'] h1" ).text( current );
  160. // Remove active class from nav buttons
  161. $( "[data-role='navbar'] a.ui-btn-active" ).removeClass( "ui-btn-active" );
  162. // Add active class to current nav button
  163. $( "[data-role='navbar'] a" ).each(function() {
  164. if ( $( this ).text() === current ) {
  165. $( this ).addClass( "ui-btn-active" );
  166. }
  167. });
  168.  
  169. });
  170. </script>
  171. </head>
  172. <body>
  173. <div data-role="header" data-position="fixed" data-theme="a">
  174. <a href="http://demos.jquerymobile.com/1.4.5/toolbar/" data-rel="back" class="ui-btn ui-btn-left ui-alt-icon ui-nodisc-icon ui-corner-all ui-btn-icon-notext ui-icon-carat-l">Back</a>
  175. <h1>Emails</h1>
  176. </div><!-- /header -->
  177.  
  178. <div data-role="page" data-title="Emails">
  179. <div style="display:flex; flex-direction:row;">
  180. <div style="flex:0.7">
  181. <img src="" id="img" style="width: 170px; margin: 20px;"/>
  182. </div>
  183. <div style="flex:0.5; ">
  184. <h1 id="name" style="margin:0px; margin-top:30px;"></h1>
  185. <p id="host" style="margin:0px; margin-top: 10px;"></p>
  186. <p id="price" style="margin:0px;"></p>
  187. <p id="date" style="margin:0px;"></p>
  188. <p id="time" style="margin:0px;"></p>
  189. </div>
  190.  
  191. </div>
  192. <div>
  193. <h3 style="margin-left:10px;">Ingredients</h3>
  194. <ul data-role="listview" data-filter-theme="a" id="ingredients">
  195.  
  196. </ul>
  197.  
  198. </div>
  199. <div>
  200. <h3 style="margin-left:10px;">Location</h3>
  201. <center>
  202. <img src="http://i.imgur.com/YUYky2d.png" style="width: 250px;"/>
  203. </center>
  204. </div>
  205. <div>
  206. <h3 style="margin-left:10px;">Sentiments powered by IBM</h3>
  207. <center>
  208. <div style="display:flex; flex-direction:row; width: 200px;">
  209. <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/29/Gold_Star.svg/2000px-Gold_Star.svg.png" style="width: 60px; height: 60px; flex:1"/>
  210. <div style="flex:1; margin-left: 15px;">
  211. <p style="flex:0.5; color:green;" id="percPos"></p>
  212. <p style="flex:0.5; color:red;" id="percNeg"></p>
  213. </div>
  214. </div>
  215. </center>
  216. <center>
  217. <a style="color:green;" id="supportDish" href="#backDishPopup" data-rel="popup" data-position-to="window">Back this Dish!
  218. </a>
  219. </center>
  220. </div>
  221.  
  222. <div data-role="popup" id="backDishPopup" class="ui-content" style="height: 400px; width: 300px;">
  223. <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>
  224.  
  225.  
  226. <h3>Contribute Ingredients</h3>
  227. <center>
  228. <div data-role="collapsible" data-theme="b" data-content-theme="b">
  229. <h3>Select an Image</h3>
  230. <div id="row1" style="display:flex; flex-direction:row;">
  231. <img style="flex:0.3; height:90px;" src="../../../img/peas.jpg" id="img1"/>
  232. <img style="flex:0.3; height:90px;" src="../../../img/bread.jpg" id="img2"/>
  233. <img style="flex:0.3; height:90px;" src="../../../img/apple.jpeg" id="img3"/>
  234. </div>
  235. </div>
  236.  
  237. </center>
  238. <div id="foodImages">
  239.  
  240. <div id="row2" style="display:flex; flex-direction:row;">
  241.  
  242. </div>
  243. </div>
  244.  
  245. </div>
  246.  
  247. <div data-role="popup" id="ingredients" class="ui-content" style="height: 400px; width: 300px;">
  248. </div>
  249. <div data-role="popup" id="chatbot" class="ui-content" style="height: 400px; width: 300px;">
  250. <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>
  251. <div id="chat-box-div" style=" position: relative; clear: both;border: 1px black solid;">
  252.  
  253. </div>
  254. </div>
  255.  
  256. <h1 id="info"></h1>
  257.  
  258. </div><!-- /page -->
  259.  
  260. <div data-role="footer" data-position="fixed" data-theme="a">
  261. <div data-role="navbar">
  262. <ul>
  263. <li><a href="index-2.html" data-prefetch="true" data-transition="fade">Info</a></li>
  264. <li><a href="page-b.html" data-prefetch="true" data-transition="flip">Friends</a></li>
  265. <li><a href="page-c.html" data-prefetch="true" data-transition="turn">Albums</a></li>
  266. <li><a href="page-d.html" data-prefetch="true" data-transition="slide">Emails</a></li>
  267.  
  268. </ul>
  269. </div><!-- /navbar -->
  270. </div><!-- /footer -->
  271.  
  272. </body>
  273. <script src="/node_modules/card/dist/jquery.card.js"></script>
  274.  
  275.  
  276. <!-- Mirrored from demos.jquerymobile.com/1.4.5/toolbar-fixed-persistent/page-d.html by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 03 Jun 2017 01:40:53 GMT -->
  277. </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!