API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Jun 4th, 2017
98
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.65 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. <script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
  19.  
  20. <style>
  21. .canvasjs-chart-credit {
  22. display: none;
  23. }
  24. </style>
  25. <script>
  26. function generateIngredients(ingredient){
  27. 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=";
  28. 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";
  29. str += ">";
  30. str += "<h2>";
  31. str += ingredient;
  32. str += "</h2>";
  33. str += "</a></li>"
  34. return str;
  35. }
  36.  
  37. var mydata = localStorage.getItem("data");
  38. $("#info").html(mydata.name);
  39. $(function() {
  40. $( "[data-role='navbar']" ).navbar();
  41. $( "[data-role='header'], [data-role='footer']" ).toolbar();
  42. // food page
  43. var food = {
  44. "name": "Green Curry",
  45. "host": "Matteo",
  46. "price": 10000,
  47. "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",
  48. "date": "12/20",
  49. "time": "11.20pm",
  50. "ingredient": [
  51. "chicken"
  52. ],
  53. "location": "Kimmel",
  54. "currentNum": 3,
  55. "maxNum": 10,
  56. "id": "d479cb856b934c055c8197db166566fd" // TO BE REPLACED
  57. };
  58. var name = food.name;
  59. var host = food.host;
  60. var price = food.price;
  61. var img = food.img;
  62. var date = food.date;
  63. var time = food.time;
  64. var ingredient = food.ingredient;
  65. var location = food.location;
  66. var currentNum = food.currentNum;
  67. var maxNum = food.maxNum;
  68. $("#img").attr("src", img)
  69. $("#name").html(name)
  70. $("#host").html(host)
  71. $("#price").html(price)
  72. $("#date").html(date)
  73. $("#time").html(time)
  74. myIngredients = generateIngredients(ingredient[0]);
  75. console.log(myIngredients);
  76.  
  77. $("#ingredients").append(myIngredients);
  78. $("#addImage").click(function(){
  79. console.log("clicked");
  80. })
  81.  
  82. // $.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){
  83. // console.log(data);
  84. // });
  85. var username = "1a6b81a5-6f50-4b65-8428-789819ea70d3";
  86. var password = "t1WDv4Uuvrvh";
  87. var queryString = "\"" + name + "\"";
  88. var foodName = encodeURIComponent(queryString);
  89.  
  90. function renderChart(pos,neg,neu) {
  91. var chart = new CanvasJS.Chart("chartContainer", {
  92. theme: "theme2",//theme1
  93. title:{
  94. text: "Sentiments"
  95. },
  96. animationEnabled: false, // change to true
  97. data: [
  98. {
  99. // Change type to "bar", "area", "spline", "pie",etc.
  100. type: "doughnut",
  101. dataPoints: [
  102. { label: "positive", y: pos },
  103. { label: "negative", y: neg },
  104. { label: "neutral", y: neu }
  105. ]
  106. }
  107. ]
  108. });
  109. chart.render();
  110. }
  111.  
  112.  
  113.  
  114. $.ajax
  115. ({
  116. type: "GET",
  117. 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=",
  118. dataType: 'json',
  119. beforeSend: function (xhr) {
  120. xhr.setRequestHeader ("Authorization", "Basic " + btoa(username + ":" + password));
  121. },
  122. success: function (data){
  123. var results = data.aggregations[0].results;
  124. console.log(results);
  125. var positive;
  126. var negative;
  127. var neutral;
  128. for (var i=0;i<results.length;i++){
  129. if (results[i].key === "positive"){
  130. positive = results[i].matching_results;
  131. }
  132. }
  133. for (var i=0;i<results.length;i++){
  134. if (results[i].key === "negative"){
  135. negative = results[i].matching_results;
  136. }
  137. }
  138. for (var i=0;i<results.length;i++){
  139. if (results[i].key === "neutral"){
  140. neutral = results[i].matching_results;
  141. }
  142. }
  143. // var negative = results[0].matching_results;
  144. // var positive = results[1].matching_results;
  145. // var neutral = results[2].matching_results;
  146. var sum = positive+negative+neutral;
  147. var percPos = positive/sum * 100;
  148. var percNeg = negative/sum * 100;
  149. var percNeu = (sum-positive-negative)/sum * 100;
  150. percPos = percPos.toFixed(2);
  151. percNeg = percNeg.toFixed(2);
  152. percNeu = percNeu.toFixed(2);
  153. // $("#percPos").html((percPos).toFixed(2)+"%");
  154. // $("#percNeg").html((percNeg).toFixed(2)+"%");
  155. renderChart(percPos,percNeg,percNeu);
  156. // console.log(neutral/sum);
  157.  
  158. }
  159. });
  160. // $("#supportDish").click(function(){
  161. // var myObj = { "currentNum": currentNum +1 };
  162. // var id = food.id;
  163. // console.log(myObj)
  164. // console.log(id)
  165. // $.post("https://homemade.mybluemix.net/api/Dishes/update?where=%7B%22id%22%3A%20%22"+id+"%22%7D", myObj).done(function(data){
  166. // console.log("posted");
  167. // });
  168. // })
  169.  
  170. $("#img1").click(function(){
  171. $.get("http://localhost:5000/peas",function(data){
  172. console.log(data);
  173. });
  174. });
  175. $("#img2").click(function(){
  176. $.get("http://localhost:5000/bread",function(data){
  177. console.log(data);
  178. });
  179. });
  180. $("#img3").click(function(){
  181. $.get("http://localhost:5000/apple",function(data){
  182. console.log(data);
  183. });
  184. });
  185. });
  186.  
  187. // Update the contents of the toolbars
  188. $( document ).on( "pagecontainerchange", function() {
  189. // Each of the four pages in this demo has a data-title attribute
  190. // which value is equal to the text of the nav button
  191. // For example, on first page: <div data-role="page" data-title="Info">
  192. var current = $( ".ui-page-active" ).jqmData( "title" );
  193. // Change the heading
  194. $( "[data-role='header'] h1" ).text( current );
  195. // Remove active class from nav buttons
  196. $( "[data-role='navbar'] a.ui-btn-active" ).removeClass( "ui-btn-active" );
  197. // Add active class to current nav button
  198. $( "[data-role='navbar'] a" ).each(function() {
  199. if ( $( this ).text() === current ) {
  200. $( this ).addClass( "ui-btn-active" );
  201. }
  202. });
  203.  
  204. });
  205. </script>
  206. </head>
  207. <body>
  208. <div data-role="header" data-position="fixed" data-theme="a">
  209. <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>
  210. <h1>Emails</h1>
  211. </div><!-- /header -->
  212.  
  213. <div data-role="page" data-title="Emails">
  214. <div style="display:flex; flex-direction:row;">
  215. <div style="flex:0.7">
  216. <img src="" id="img" style="width: 170px; margin: 20px;"/>
  217. </div>
  218. <div style="flex:0.5; ">
  219. <h1 id="name" style="margin:0px; margin-top:30px;"></h1>
  220. <p id="host" style="margin:0px; margin-top: 10px;"></p>
  221. <p id="price" style="margin:0px;"></p>
  222. <p id="date" style="margin:0px;"></p>
  223. <p id="time" style="margin:0px;"></p>
  224. </div>
  225.  
  226. </div>
  227. <div>
  228. <h3 style="margin-left:10px;">Ingredients</h3>
  229. <ul data-role="listview" data-filter-theme="a" id="ingredients">
  230.  
  231. </ul>
  232.  
  233. </div>
  234. <div>
  235. <h3 style="margin-left:10px;">Location</h3>
  236. <center>
  237. <img src="http://i.imgur.com/YUYky2d.png" style="width: 250px;"/>
  238. </center>
  239. </div>
  240. <div>
  241. <h3 style="margin-left:10px;">Sentiments powered by IBM</h3>
  242. <center>
  243. <div style="display:flex; flex-direction:row; width: 200px;">
  244. <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"/>
  245. <div style="flex:1; margin-left: 15px;">
  246. <p style="flex:0.5; color:green;" id="percPos"></p>
  247. <p style="flex:0.5; color:red;" id="percNeg"></p>
  248. </div>
  249. </div>
  250. <div id="chartContainer" style="height: 300px; width: 100%;">
  251. </div>
  252. </center>
  253. <center>
  254. <a style="color:green;" id="supportDish" href="#backDishPopup" data-rel="popup" data-position-to="window">Back this Dish!
  255. </a>
  256. </center>
  257. </div>
  258.  
  259. <div data-role="popup" id="backDishPopup" class="ui-content" style="height: 400px; width: 300px;">
  260. <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>
  261.  
  262.  
  263. <h3>Contribute Ingredients</h3>
  264. <center>
  265. <div data-role="collapsible" data-theme="b" data-content-theme="b">
  266. <h3>Select an Image</h3>
  267. <div id="row1" style="display:flex; flex-direction:row;">
  268. <img style="flex:0.3; height:90px;" src="../../../img/peas.jpg" id="img1"/>
  269. <img style="flex:0.3; height:90px;" src="../../../img/bread.jpg" id="img2"/>
  270. <img style="flex:0.3; height:90px;" src="../../../img/apple.jpeg" id="img3"/>
  271. </div>
  272. </div>
  273.  
  274. </center>
  275. <div id="foodImages">
  276.  
  277. <div id="row2" style="display:flex; flex-direction:row;">
  278.  
  279. </div>
  280. </div>
  281.  
  282. </div>
  283.  
  284. <div data-role="popup" id="ingredients" class="ui-content" style="height: 400px; width: 300px;">
  285. </div>
  286. <div data-role="popup" id="chatbot" class="ui-content" style="height: 400px; width: 300px;">
  287. <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>
  288. <div id="chat-box-div" style=" position: relative; clear: both;border: 1px black solid;">
  289.  
  290. </div>
  291. </div>
  292.  
  293. <h1 id="info"></h1>
  294.  
  295. </div><!-- /page -->
  296.  
  297. <div data-role="footer" data-position="fixed" data-theme="a">
  298. <div data-role="navbar">
  299. <ul>
  300. <li><a href="index-2.html" data-prefetch="true" data-transition="fade">Info</a></li>
  301. <li><a href="page-b.html" data-prefetch="true" data-transition="flip">Friends</a></li>
  302. <li><a href="page-c.html" data-prefetch="true" data-transition="turn">Albums</a></li>
  303. <li><a href="page-d.html" data-prefetch="true" data-transition="slide">Emails</a></li>
  304.  
  305. </ul>
  306. </div><!-- /navbar -->
  307. </div><!-- /footer -->
  308.  
  309. </body>
  310. <script src="/node_modules/card/dist/jquery.card.js"></script>
  311.  
  312.  
  313. <!-- 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 -->
  314. </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!