PageRenderTime 62ms CodeModel.GetById 26ms RepoModel.GetById 0ms app.codeStats 0ms

/public/javascripts/recipes/edit.js

https://github.com/tmacdonald/menutron-original
JavaScript | 343 lines | 261 code | 81 blank | 1 comment | 0 complexity | ead00ffd7d28caafb5b0399d8f9da288 MD5 | raw file
  1. var Recipe = Backbone.Model.extend({
  2. initialize: function() {
  3. this.directions = new RecipeDirections(null, {recipe: this});
  4. this.directions.url = '/recipes/' + this.get('slug') + '/directions';
  5. this.ingredients = new RecipeIngredients(null, {recipe: this});
  6. this.ingredients.url = '/recipes/' + this.get('slug') + '/ingredients';
  7. },
  8. url: function() {
  9. return '/recipes/' + (this.isNew() ? '' : this.get('slug'));
  10. },
  11. toJSON: function() {
  12. return {'recipe': _.clone(this.attributes)};
  13. }
  14. });
  15. var RecipeDirection = Backbone.Model.extend({
  16. initialize: function() {
  17. this.recipe = this.collection.recipe;
  18. },
  19. url: function() {
  20. return '/recipes/' + this.recipe.get('slug') + '/directions/' + (this.isNew() ? '' : this.id);
  21. },
  22. toJSON: function() {
  23. return {'recipe_direction': _.clone(this.attributes)};
  24. }
  25. });
  26. var RecipeDirections = Backbone.Collection.extend({
  27. model: RecipeDirection,
  28. initialize: function(models, options) {
  29. this.recipe = options.recipe;
  30. }
  31. });
  32. var RecipeIngredient = Backbone.Model.extend({
  33. initialize: function() {
  34. this.recipe = this.collection.recipe;
  35. },
  36. url: function() {
  37. return '/recipes/' + this.recipe.get('slug') + '/ingredients/' + (this.isNew() ? '' : this.id);
  38. },
  39. toJSON: function() {
  40. return {'recipe_ingredient': _.clone(this.attributes)};
  41. }
  42. });
  43. var RecipeIngredients = Backbone.Collection.extend({
  44. model: RecipeIngredient,
  45. initialize: function(models, options) {
  46. this.recipe = options.recipe;
  47. }
  48. });
  49. $(function(){
  50. var EditRecipeView = Backbone.View.extend({
  51. template: $('#edit_recipe_template').html(),
  52. el: $('#app #recipe'),
  53. events: {
  54. "click #save": "save"
  55. },
  56. initialize: function() {
  57. this.model.bind('error', this.error, this);
  58. },
  59. render: function() {
  60. $(this.el).html(Mustache.to_html(this.template, this.model.toJSON().recipe));
  61. },
  62. save: function() {
  63. this.model.save({
  64. name: $(this.el).find('#name').val(),
  65. description: $(this.el).find('#description').val(),
  66. servings: $(this.el).find('#servings').val()
  67. });
  68. },
  69. error: function(model, resp, options) {
  70. console.log(resp);
  71. }
  72. });
  73. var DirectionsView = Backbone.View.extend({
  74. el: $('#app #directions'),
  75. initialize: function() {
  76. this.directions = this.options.directions;
  77. this.directions.bind('add', this.addOne, this);
  78. this.directions.bind('reset', this.addAll, this);
  79. this.directions.bind('all', this.render, this);
  80. },
  81. addOne: function(direction) {
  82. var view = new DirectionView({model: direction});
  83. $(this.el).append(view.render().el);
  84. },
  85. addAll: function() {
  86. this.directions.each(this.addOne, this);
  87. },
  88. render: function() {
  89. }
  90. });
  91. var IngredientsView = Backbone.View.extend({
  92. el: $('#app #ingredients'),
  93. initialize: function() {
  94. this.ingredients = this.options.ingredients;
  95. this.ingredients.bind('add', this.addOne, this);
  96. this.ingredients.bind('reset', this.addAll, this);
  97. this.ingredients.bind('all', this.render, this);
  98. },
  99. addOne: function(ingredient) {
  100. var view = new IngredientView({model: ingredient});
  101. $(this.el).append(view.render().el);
  102. },
  103. addAll: function() {
  104. this.ingredients.each(this.addOne, this);
  105. },
  106. render: function() {
  107. }
  108. });
  109. var NewDirectionView = Backbone.View.extend({
  110. template: $('#new_direction_template').html(),
  111. el: $('#app #new_direction'),
  112. events: {
  113. "click .save" : "save",
  114. "click .cancel" : "cancel"
  115. },
  116. initialize: function() {
  117. this.directions = this.options.directions;
  118. this.render();
  119. },
  120. render: function() {
  121. $(this.el).html(Mustache.to_html(this.template));
  122. return this;
  123. },
  124. save: function() {
  125. this.directions.create({text: $(this.el).find('.text').val()});
  126. $(this.el).find('.text').val('');
  127. },
  128. cancel: function(e) {
  129. e.preventDefault();
  130. $(this.el).find('.text').val('');
  131. }
  132. });
  133. var NewIngredientView = Backbone.View.extend({
  134. template: $('#new_ingredient_template').html(),
  135. el: $('#app #new_ingredient'),
  136. events: {
  137. "click .save" : "save",
  138. "click .cancel" : "cancel"
  139. },
  140. initialize: function() {
  141. this.ingredients = this.options.ingredients;
  142. this.render();
  143. },
  144. render: function() {
  145. $(this.el).html(Mustache.to_html(this.template));
  146. return this;
  147. },
  148. save: function() {
  149. var ingredient = {
  150. how_much: $(this.el).find('.how_much').val(),
  151. ingredient_name: $(this.el).find('.ingredient_name').val(),
  152. preparation: $(this.el).find('.preparation').val()
  153. };
  154. this.ingredients.create(ingredient);
  155. },
  156. cancel: function(e) {
  157. e.preventDefault();
  158. }
  159. });
  160. var DirectionView = Backbone.View.extend({
  161. template: $('#direction_template').html(),
  162. tagName: 'tbody',
  163. className: 'direction',
  164. events: {
  165. "click .edit_link" : "edit",
  166. "click .delete_link" : "destroy",
  167. "click .edit .save" : "save",
  168. "click .edit .cancel" : "cancel"
  169. },
  170. initialize: function() {
  171. this.model.bind('change', this.render, this);
  172. this.model.bind('destroy', this.remove, this);
  173. this.editing = false;
  174. },
  175. render: function() {
  176. $(this.el).html(Mustache.to_html(this.template, this.model.toJSON().recipe_direction));
  177. $(this.el).find('.view').toggle(!this.editing);
  178. $(this.el).find('.edit').toggle(this.editing);
  179. return this;
  180. },
  181. remove: function() {
  182. $(this.el).remove();
  183. },
  184. edit: function() {
  185. this.editing = true;
  186. this.render();
  187. },
  188. destroy: function() {
  189. this.model.destroy();
  190. },
  191. save: function() {
  192. this.model.save({
  193. text: $(this.el).find('.edit .text').val()
  194. });
  195. this.editing = false;
  196. this.render();
  197. },
  198. cancel: function(e) {
  199. e.preventDefault();
  200. this.editing = false;
  201. this.render();
  202. }
  203. });
  204. var IngredientView = Backbone.View.extend({
  205. template: $('#ingredient_template').html(),
  206. tagName: "tbody",
  207. className: 'ingredient',
  208. events: {
  209. "click .edit_link" : "edit",
  210. "click .delete_link" : "destroy",
  211. "click .edit .save" : "save",
  212. "click .edit .cancel" : "cancel"
  213. },
  214. initialize: function() {
  215. this.model.bind('change', this.render, this);
  216. this.model.bind('destroy', this.remove, this);
  217. this.editing = false;
  218. },
  219. render: function() {
  220. $(this.el).html(Mustache.to_html(this.template, this.model.toJSON().recipe_ingredient));
  221. $(this.el).find('.view').toggle(!this.editing);
  222. $(this.el).find('.edit').toggle(this.editing);
  223. return this;
  224. },
  225. remove: function() {
  226. $(this.el).remove();
  227. },
  228. edit: function() {
  229. this.editing = true;
  230. this.render();
  231. },
  232. destroy: function() {
  233. this.model.destroy();
  234. },
  235. save: function() {
  236. var ingredient = {
  237. how_much: $(this.el).find('.edit .how_much').val(),
  238. ingredient_name: $(this.el).find('.edit .ingredient_name').val(),
  239. preparation: $(this.el).find('.edit .preparation').val()
  240. };
  241. this.model.save(ingredient);
  242. this.editing = false;
  243. this.render();
  244. },
  245. cancel: function(e) {
  246. e.preventDefault();
  247. this.editing = false;
  248. this.render();
  249. }
  250. });
  251. var editRecipeView = new EditRecipeView({model: recipe});
  252. editRecipeView.render();
  253. var newDirectionView = new NewDirectionView({directions: recipe.directions});
  254. newDirectionView.render();
  255. var directionsView = new DirectionsView({directions: recipe.directions});
  256. directionsView.render();
  257. var newIngredientView = new NewIngredientView({ingredients: recipe.ingredients});
  258. newIngredientView.render();
  259. var ingredientsView = new IngredientsView({ingredients: recipe.ingredients});
  260. ingredientsView.render();
  261. //recipe.directions.create({text: "this is a test"});
  262. });