PageRenderTime 124ms CodeModel.GetById 23ms RepoModel.GetById 0ms app.codeStats 0ms

/JQMstuff/js/main.js

https://bitbucket.org/bgreen7887/is322
JavaScript | 342 lines | 208 code | 71 blank | 63 comment | 8 complexity | 31ba7e654299cbe4db316d4e47b9f10a MD5 | raw file
  1. var Todo = Backbone.Model.extend({
  2. // Default attributes for the todo item.
  3. defaults: function() {
  4. return {
  5. title: 'default name',
  6. order: Todos.nextOrder(),
  7. done: false //again, not sure if 'done is needed'
  8. //include an array- probably have two attributes-
  9. //first is name, second is a binary indicating "done-ness"
  10. //just a heads up- when this is implemented, if theres more
  11. //than one attribute (if you include done-ness), then the
  12. //findRecipes function will need to be changed to iterate through
  13. //the ingr array from API and manually save ingrs[i]=(ingredient, 0), unfinished by default at init
  14. //also needs the link to the recipe instructions-
  15. //dont forget to add this to findRecipes
  16. };
  17. },
  18. initialize: function() {
  19. console.log("new model made: " + this.get("title")); //this init is just here for logging purposes
  20. }, //also, 'this.title' is not working
  21. // Toggle the `done` state of this todo item.
  22. // I dont think this is needed, only ingredients need 'done status'
  23. toggle: function() {
  24. this.save({done: !this.get("done")});
  25. }
  26. });
  27. var TodoList = Backbone.Collection.extend({
  28. model: Todo,
  29. //!
  30. //!!!!
  31. //!!!!!!!
  32. //!!!!!!!!!!!
  33. // local storage is broken atm, will return later
  34. // localStorage: new Backbone.LocalStorage("todos-backbone"),
  35. done: function() {
  36. return this.where({done: true});
  37. },
  38. // Filter down the list to only todo items that are still not finished.
  39. // ? is this needed ?
  40. remaining: function() {
  41. return this.without.apply(this, this.done());
  42. },
  43. nextOrder: function() {
  44. if (!this.length) return 1;
  45. return this.last().get('order') + 1;
  46. },
  47. comparator: 'order',
  48. // here's the fun part: querying the API
  49. findRecipes: function(theQuery) {
  50. var query = theQuery; //placeholder
  51. console.log("findRecipes called");
  52. $.ajax({
  53. url: 'http://api.yummly.com/v1/api/recipes?_app_id=d8087d51&_app_key=005af5a16f1a8abf63660c2c784ab65f&maxResult=5&q='+query,
  54. dataType: 'jsonp',
  55. success: function(apiStuff){
  56. var result = new Array();
  57. result = apiStuff; //saves result as a new array
  58. result = result.matches; //now the array only has all the results
  59. $.each(result, function(i, item) {
  60. var tempIngrArray = new Array();
  61. tempIngrArray = result[i].ingredients;
  62. tempRecipeName = result[i].recipeName ;
  63. $("#search-list").append("<li><a href='google.com'>" + tempRecipeName + "</li></a><br>");
  64. console.log(tempRecipeName);
  65. console.log(tempIngrArray); //only logs one ingr for now, too lazy
  66. /*
  67. $.each(tempIngrArray,function(j, items) {
  68. console.log(tempIngrArray[j]);
  69. });
  70. */
  71. anotherRecipe = new Todo({title : tempRecipeName});
  72. });
  73. }
  74. });
  75. }
  76. });
  77. //I am afraid to move this
  78. var Todos = new TodoList;
  79. var TodoView = Backbone.View.extend({
  80. tagName: "li",
  81. // Cache the template function for a single item.
  82. template: _.template($('#newSearch').html()),
  83. // The DOM events specific to an item.
  84. events: {
  85. "click .toggle" : "toggleDone",
  86. "dblclick .view" : "edit",
  87. "click a.destroy" : "clear",
  88. "keypress .edit" : "updateOnEnter",
  89. "blur .edit" : "close"
  90. },
  91. // The TodoView listens for changes to its model, re-rendering. Since there's
  92. // a one-to-one correspondence between a **Todo** and a **TodoView** in this
  93. // app, we set a direct reference on the model for convenience.
  94. //do we really care about this? it cant be changed unless you switch to a differnt
  95. //page, and it will re-render when you change back
  96. initialize: function() {
  97. this.listenTo(this.model, 'change', this.render);
  98. this.listenTo(this.model, 'destroy', this.remove);
  99. },
  100. // Re-render the titles of the todo item.
  101. render: function() {
  102. this.$el.html(this.template(this.model.toJSON()));
  103. this.$el.toggleClass('done', this.model.get('done'));
  104. this.input = this.$('.edit');
  105. return this;
  106. },
  107. // Toggle the `"done"` state of the model.
  108. toggleDone: function() {
  109. this.model.toggle();
  110. },
  111. // Switch this view into `"editing"` mode, displaying the input field.
  112. edit: function() {
  113. this.$el.addClass("editing");
  114. this.input.focus();
  115. },
  116. // Close the `"editing"` mode, saving changes to the todo.
  117. close: function() {
  118. var value = this.input.val();
  119. if (!value) {
  120. this.clear();
  121. } else {
  122. this.model.save({title: value});
  123. this.$el.removeClass("editing");
  124. }
  125. },
  126. // If you hit `enter`, we're through editing the item.
  127. updateOnEnter: function(e) {
  128. if (e.keyCode == 13) this.close();
  129. },
  130. // Remove the item, destroy the model.
  131. clear: function() {
  132. this.model.destroy();
  133. }
  134. });
  135. window.HomeView = Backbone.View.extend({
  136. template:_.template($('#home').html()),
  137. render:function (eventName) {
  138. $(this.el).html(this.template());
  139. return this;
  140. }
  141. });
  142. window.newSearchView = Backbone.View.extend({
  143. template:_.template($('#newSearch').html()),
  144. initialize: function() {
  145. },
  146. events: {
  147. "keypress #recipe-search": "searchOnEnter",
  148. /* "click #clear-completed": "clearCompleted",
  149. "click #toggle-all": "toggleAllComplete"*/
  150. },
  151. render:function (eventName) {
  152. $(this.el).html(this.template());
  153. return this;
  154. },
  155. searchOnEnter: function(e) { //the search bar's functionality
  156. if (e.keyCode != 13) return;
  157. var searchin = $("input[name='recipe-search']").val();
  158. // this.$("#search-list").append();
  159. console.log(searchin);
  160. //this function is in the collection, does an API call and
  161. //adds a new model for each result (which will ~ always be 5)
  162. searchTemp.findRecipes(searchin);
  163. },
  164. addOne: function(todo) {
  165. var view = new TodoView({model: todo});
  166. this.$("#search-list").append(view.render().el);
  167. },
  168. //now needs to generate a list for every item in tempSearchCollection( not the real name)
  169. //each one of those will have an onlick event that will
  170. //route to newListView, which will display all the ingredients
  171. });
  172. window.newListView = Backbone.View.extend({
  173. template:_.template($('#newList').html()),
  174. render:function (eventName) {
  175. $(this.el).html(this.template());
  176. return this;
  177. }
  178. //needs a button (or functionality for it, rather
  179. //that saves this recipe to the permanant collection,
  180. //which will be saved in local storage
  181. });
  182. window.savedRecipesView = Backbone.View.extend({
  183. template:_.template($('#savedRecipes').html()),
  184. //this should fetch all recipes from permanent collection
  185. //(local storage) and display them here - maybe assist this with
  186. //a 'return all' function in permStorage?
  187. render:function (eventName) {
  188. $(this.el).html(this.template());
  189. return this;
  190. }
  191. });
  192. window.oldListView = Backbone.View.extend({
  193. //very similar to newListView, only difference is that
  194. //well first obviously it will be reached through #savedRecipes
  195. //and second, instead of having a "save" button at the bottom,
  196. //it will have a "show instructions" button that will
  197. //follow a link to the recipe instructions provided by API
  198. template:_.template($('#oldList').html()),
  199. render: function (eventName) {
  200. $(this.el).html(this.template());
  201. return this;
  202. }
  203. });
  204. window.deleteOldView = Backbone.View.extend({
  205. template:_.template($('#deleteOld').html()),
  206. render: function (eventName) {
  207. $(this.el).html(this.template());
  208. return this;
  209. }
  210. });
  211. var AppRouter = Backbone.Router.extend({
  212. routes:{
  213. "":"home",
  214. "newSearch":"newSearch",
  215. "newList":"newList",
  216. "savedRecipes":"savedRecipes",
  217. "oldList":"oldList",
  218. "deleteOld":"deleteOld"
  219. },
  220. initialize:function () {
  221. // Handle back button throughout the application
  222. $('.back').live('click', function(event) {
  223. window.history.back();
  224. return false;
  225. });
  226. this.firstPage = true;
  227. },
  228. home:function () {
  229. console.log('#home');
  230. this.changePage(new HomeView());
  231. },
  232. newSearch:function () {
  233. // console.log('#newSearch');
  234. this.changePage(new newSearchView());
  235. },
  236. newList:function () {
  237. console.log('#newList');
  238. this.changePage(new newListView());
  239. },
  240. savedRecipes:function () {
  241. console.log('#savedRecipes');
  242. this.changePage(new savedRecipesView());
  243. },
  244. oldList:function () {
  245. console.log('#oldList');
  246. this.changePage(new oldListView());
  247. },
  248. deleteOld:function () {
  249. console.log('#deleteOld');
  250. this.changePage(new deleteOldView());
  251. },
  252. changePage:function (page) {
  253. $(page.el).attr('data-role', 'page');
  254. page.render();
  255. $('body').append($(page.el));
  256. var transition = $.mobile.defaultPageTransition;
  257. // We don't want to slide the first page
  258. if (this.firstPage) {
  259. transition = 'none';
  260. this.firstPage = false;
  261. }
  262. $.mobile.changePage($(page.el), {changeHash:false, transition: transition});
  263. }
  264. });
  265. $(document).ready(function () {
  266. // console.log('document ready');
  267. // var start= newSearchView;
  268. app = new AppRouter();
  269. Backbone.history.start();
  270. searchTemp = new TodoList(); //this stores searched recipes
  271. });