PageRenderTime 53ms CodeModel.GetById 22ms RepoModel.GetById 0ms app.codeStats 0ms

/Sample Apps/Crib/Crib/Scripts/app/dashboard.js

https://github.com/lefthandedgoat/Oak
JavaScript | 322 lines | 310 code | 12 blank | 0 comment | 9 complexity | 9f8869c913a84aaf8ee738e10043dfb8 MD5 | raw file
  1. (function() {
  2. var Bench, BenchView, Consultant, ConsultantView, EditConsultantModal, ExtendConsultantModal, NewConsultantModal, RollOffs, RollOffsView, app;
  3. app = this;
  4. this.dashboard = {
  5. init: function() {
  6. this.rollOffs = new RollOffsView();
  7. this.bench = new BenchView();
  8. ExtendConsultantModal.render();
  9. EditConsultantModal.render();
  10. NewConsultantModal.render();
  11. return $("#newConsultant").click(function() {
  12. return NewConsultantModal.create(new Consultant());
  13. });
  14. }
  15. };
  16. BenchView = Backbone.View.extend({
  17. el: "#bench",
  18. initialize: function() {
  19. this.bench = new Bench();
  20. this.bench.bind('reset', this.render, this);
  21. return this.refresh();
  22. },
  23. refresh: function() {
  24. return this.bench.fetch();
  25. },
  26. render: function() {
  27. var consultantContainer,
  28. _this = this;
  29. $(this.el).empty();
  30. consultantContainer = $("<ul></ul>").addClass("thumbnails").css({
  31. 'margin-top': '10px'
  32. });
  33. $(this.el).append(consultantContainer);
  34. return this.bench.each(function(consultant) {
  35. var view;
  36. view = new ConsultantView({
  37. model: consultant,
  38. editor: EditConsultantModal
  39. });
  40. return consultantContainer.append($("<li></li>").append(view.render().el));
  41. });
  42. }
  43. });
  44. RollOffsView = Backbone.View.extend({
  45. el: "#roll_offs",
  46. initialize: function() {
  47. this.rollOffs = new RollOffs();
  48. this.rollOffs.bind('reset', this.render, this);
  49. this.rollOffs.bind('change', this.render, this);
  50. return this.refresh();
  51. },
  52. refresh: function() {
  53. return this.rollOffs.fetch();
  54. },
  55. render: function() {
  56. var consultantContainer, monthSeperator, yearSeperator,
  57. _this = this;
  58. $(this.el).empty();
  59. monthSeperator = -1;
  60. yearSeperator = -1;
  61. consultantContainer = null;
  62. return this.rollOffs.each(function(consultant) {
  63. var currentMonth, currentYear, view;
  64. view = new ConsultantView({
  65. model: consultant,
  66. editor: EditConsultantModal,
  67. extendEditor: ExtendConsultantModal
  68. });
  69. currentMonth = consultant.rollOffMonth();
  70. currentYear = consultant.rollOffYear();
  71. if (monthSeperator !== currentMonth || yearSeperator !== currentYear) {
  72. monthSeperator = currentMonth;
  73. yearSeperator = currentYear;
  74. _this.createSeperator(consultant.rollOffMonthName(), consultant.rollOffYear());
  75. consultantContainer = $("<ul></ul>").addClass("thumbnails").css({
  76. 'margin-top': '10px'
  77. });
  78. $(_this.el).append(consultantContainer);
  79. }
  80. return consultantContainer.append($("<li></li>").append(view.render().el));
  81. });
  82. },
  83. createSeperator: function(monthName, year) {
  84. $(this.el).append("<hr/>");
  85. return $(this.el).append("<h3>" + monthName + " " + (1900 + year) + "</h3>");
  86. }
  87. });
  88. ConsultantView = Backbone.View.extend({
  89. events: {
  90. "click .edit": "edit",
  91. "click .extend": "extendConsultant"
  92. },
  93. render: function() {
  94. var imageUrl;
  95. imageUrl = "http://placehold.it/130x90";
  96. if (this.model.picture()) {
  97. imageUrl = this.model.picture();
  98. }
  99. if (!this.model.onBench()) {
  100. $(this.el).append($.tmpl(this.engageConsultant, {
  101. name: this.model.name(),
  102. imageUrl: imageUrl
  103. }));
  104. }
  105. if (this.model.onBench()) {
  106. $(this.el).append($.tmpl(this.benchConsultant, {
  107. name: this.model.name(),
  108. imageUrl: imageUrl
  109. }));
  110. }
  111. return this;
  112. },
  113. edit: function() {
  114. return this.options.editor.edit(this.model);
  115. },
  116. extendConsultant: function() {
  117. return this.options.extendEditor.edit(this.model);
  118. },
  119. engageConsultant: '\
  120. <a class="thumbnail">\
  121. <img src="${imageUrl}" alt="" width="130px" height="90px">\
  122. </a>\
  123. <div class="well" style="margin: 3px; padding: 3px; width: 130px">\
  124. <div class="btn-group">\
  125. <a class="btn dropdown-toggle" style="width: 110px" data-toggle="dropdown" href="javascript:;">\
  126. Options\
  127. <span class="caret"></span>\
  128. </a>\
  129. <ul class="dropdown-menu">\
  130. <li><a href="javascript:;" class="extend">consultant has been extended</li>\
  131. <li><a href="javascript:;" class="edit">edit</a></li>\
  132. </ul>\
  133. </div>\
  134. <h4 style="margin: 5px">${name}</h4>\
  135. </div>\
  136. ',
  137. benchConsultant: '\
  138. <a class="thumbnail">\
  139. <img src="${imageUrl}" alt="" width="130px" height="90px">\
  140. </a>\
  141. <div class="well" style="margin: 3px; padding: 3px; width: 130px">\
  142. <div class="btn-group">\
  143. <a class="btn dropdown-toggle" style="width: 110px" data-toggle="dropdown" href="javascript:;">\
  144. Options\
  145. <span class="caret"></span>\
  146. </a>\
  147. <ul class="dropdown-menu">\
  148. <li><a href="javascript:;" class="edit">edit</a></li>\
  149. </ul>\
  150. </div>\
  151. <h4 style="margin: 5px">${name}</h4>\
  152. </div>\
  153. '
  154. });
  155. Consultant = Backbone.Model.extend({
  156. monthName: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
  157. name: function() {
  158. return this.get("Name");
  159. },
  160. setName: function(name) {
  161. return this.set("Name", name);
  162. },
  163. picture: function() {
  164. return this.get("Picture");
  165. },
  166. setPicture: function(url) {
  167. return this.set("Picture", url);
  168. },
  169. rollOffDate: function() {
  170. if (this.get("RollOffDate")) {
  171. return new Date(this.get("RollOffDate"));
  172. } else {
  173. return null;
  174. }
  175. },
  176. setRollOffDate: function(date) {
  177. return this.set("RollOffDate", date);
  178. },
  179. rollOffMonth: function() {
  180. return this.rollOffDate().getMonth();
  181. },
  182. rollOffMonthName: function() {
  183. return this.monthName[this.rollOffMonth()];
  184. },
  185. rollOffYear: function() {
  186. return this.rollOffDate().getYear();
  187. },
  188. onBench: function() {
  189. return this.get("OnBench");
  190. },
  191. update: function() {
  192. var _this = this;
  193. return $.post("/consultants/update", {
  194. id: this.get("Id"),
  195. name: this.get("Name"),
  196. rollOffDate: this.get("RollOffDate"),
  197. picture: this.get("Picture")
  198. }, function() {
  199. app.dashboard.rollOffs.refresh();
  200. return app.dashboard.bench.refresh();
  201. });
  202. },
  203. create: function() {
  204. var _this = this;
  205. return $.post("/consultants/create", {
  206. name: this.get("Name"),
  207. rollOffDate: this.get("RollOffDate")
  208. }, function() {
  209. app.dashboard.rollOffs.refresh();
  210. return app.dashboard.bench.refresh();
  211. });
  212. },
  213. extendTil: function(date) {
  214. var _this = this;
  215. return $.post("/rolloffs/extensions", {
  216. consultantId: this.get("Id"),
  217. til: date
  218. }, function() {
  219. app.dashboard.rollOffs.refresh();
  220. return app.dashboard.bench.refresh();
  221. });
  222. }
  223. });
  224. RollOffs = Backbone.Collection.extend({
  225. model: Consultant,
  226. url: "rolloffs/list"
  227. });
  228. Bench = Backbone.Collection.extend({
  229. model: Consultant,
  230. url: "rolloffs/bench"
  231. });
  232. EditConsultantModal = new (Backbone.View.extend({
  233. render: function() {
  234. var _this = this;
  235. this.el = "#editConsultantModal";
  236. $(this.el).find("#rollOffDate").datepicker();
  237. $(this.el).find("#updateConsultant").click(function() {
  238. _this.model.setName($(_this.el).find("#consultantName").val());
  239. _this.model.setRollOffDate($(_this.el).find("#rollOffDate").val());
  240. _this.model.setPicture($(_this.el).find("#picture").val());
  241. _this.model.update();
  242. return $(_this.el).modal('hide');
  243. });
  244. return $(this.el).modal({
  245. show: false
  246. });
  247. },
  248. edit: function(consultant) {
  249. var d, date, formatted, month, year;
  250. this.model = consultant;
  251. $("#consultantName").val(consultant.name());
  252. $(this.el).find("#picture").val(consultant.picture());
  253. if (consultant.rollOffDate()) {
  254. d = consultant.rollOffDate();
  255. date = d.getDate();
  256. month = d.getMonth() + 1;
  257. year = d.getFullYear();
  258. formatted = month + "/" + date + "/" + year;
  259. $("#rollOffDate").val(formatted);
  260. } else {
  261. $("#rollOffDate").val("");
  262. }
  263. $("#rollOffDate").datepicker("update");
  264. return $(this.el).modal('show');
  265. }
  266. }));
  267. NewConsultantModal = new (Backbone.View.extend({
  268. render: function() {
  269. var _this = this;
  270. this.el = "#newConsultantModal";
  271. $(this.el).find("#createConsultant").click(function() {
  272. _this.model.setName($(_this.el).find("#newConsultantName").val());
  273. _this.model.create();
  274. return $(_this.el).modal('hide');
  275. });
  276. return $(this.el).modal({
  277. show: false
  278. });
  279. },
  280. create: function(consultant) {
  281. this.model = consultant;
  282. $(this.el).find("#newConsultantName").val('');
  283. return $(this.el).modal('show');
  284. }
  285. }));
  286. ExtendConsultantModal = new (Backbone.View.extend({
  287. save: function() {
  288. return this.model.extendTil($("#extensionDate").val());
  289. },
  290. render: function() {
  291. var view,
  292. _this = this;
  293. this.el = "#extendConsultantModal";
  294. $(this.el).modal({
  295. show: false
  296. });
  297. view = $(this.el);
  298. $(this.el).find("#extendConsultant").click(function() {
  299. _this.save();
  300. return view.modal("hide");
  301. });
  302. return $(this.el).find("#extensionDate").datepicker();
  303. },
  304. edit: function(consultant) {
  305. this.model = consultant;
  306. $(this.el).find(".consultantName").html(this.model.name());
  307. return $(this.el).modal('show');
  308. }
  309. }));
  310. }).call(this);