From b2308aa706ae88658e71fee19bfe050c65265ca1 Mon Sep 17 00:00:00 2001
From: Tyler Renelle <tylerrenelle@gmail.com>
Date: Sat, 11 Feb 2012 14:16:23 -0500
Subject: [PATCH] New habit at bottom of lists, create on enter

---
 .../backbone/templates/habits/habit.jst.ejs   |  2 +-
 .../backbone/templates/habits/index.jst.ejs   | 11 +++----
 .../views/habits/index_view.js.coffee         | 32 +++++++++++++++++++
 3 files changed, 38 insertions(+), 7 deletions(-)

diff --git a/app/assets/javascripts/backbone/templates/habits/habit.jst.ejs b/app/assets/javascripts/backbone/templates/habits/habit.jst.ejs
index 57a06be8e9..44db6ca5b8 100644
--- a/app/assets/javascripts/backbone/templates/habits/habit.jst.ejs
+++ b/app/assets/javascripts/backbone/templates/habits/habit.jst.ejs
@@ -12,7 +12,7 @@
   <% } %>
 <% } %>
 
-<%= name %>
+<span class="habit-text"><%= name %></span>
 <div class='edit'>
   <% if (notes) { %>
     <!-- TODO how to make this assets-aware? image_tag('comment.png', :class=>'comment') -->
diff --git a/app/assets/javascripts/backbone/templates/habits/index.jst.ejs b/app/assets/javascripts/backbone/templates/habits/index.jst.ejs
index ef0c91de35..e420b16974 100644
--- a/app/assets/javascripts/backbone/templates/habits/index.jst.ejs
+++ b/app/assets/javascripts/backbone/templates/habits/index.jst.ejs
@@ -1,5 +1,3 @@
-<a href="#/new">New Habit</a>
-
 <table id="layout">
   <tr>
     <td class="panel">
@@ -8,6 +6,7 @@
           <h2 class='title'>Habits</h2>
           <div class='inner'>
             <ul id="habits-habits" />
+              <input class="new-habit" data-type="1" placeholder="New Habit" type="text" />
           </div>
         </div>
       </div>
@@ -19,6 +18,7 @@
           <h2 class='title'>Daily</h2>
           <div class='inner'>
             <ul id="habits-daily" />
+              <input class="new-habit" data-type="2" placeholder="New Daily" type="text" />
           </div>
         </div>
       </div>
@@ -40,13 +40,13 @@
               </div>
               <div id="tabs-2">
                 <ul id="habits-todos-done" />
+                <a href="#" class="clear-completed">Clear Completed</a>
               </div>
             </div>
-            
+            <input class="new-habit" data-type="3" placeholder="New Todo" type="text" />
           </div>
         </div>
       </div>
-      <!-- TODO link_to 'View Completed', :action=>'completed' -->
     </td>
     
     <td class="panel">
@@ -56,12 +56,11 @@
             <div id="money"></div> 
           </h2>
           <div class='inner'>
-            <!-- TODO rewards code block (see old code) -->
             <ul id="rewards" />
+            <input class="new-habit" data-type="4" placeholder="New Reward" type="text" />
           </div>
         </div>
       </div>
-      <!-- TODO link_to 'New Reward', new_reward_path --> 
     </td>
   </tr>
 </table>
diff --git a/app/assets/javascripts/backbone/views/habits/index_view.js.coffee b/app/assets/javascripts/backbone/views/habits/index_view.js.coffee
index 01ffd3a612..965b32337c 100644
--- a/app/assets/javascripts/backbone/views/habits/index_view.js.coffee
+++ b/app/assets/javascripts/backbone/views/habits/index_view.js.coffee
@@ -2,11 +2,43 @@ HabitTracker.Views.Habits ||= {}
 
 class HabitTracker.Views.Habits.IndexView extends Backbone.View
   template: JST["backbone/templates/habits/index"]
+  
+  events: 
+    "keypress .new-habit":  "createOnEnter",
+    "keyup .new-habit":     "showTooltip",
+    "click .todo-clear a": "clearCompleted"
 
   initialize: () ->
     @options.habits.bind('reset', @addAll)
     @options.habits.bind('change', @render, this) #TODO this ruins tabs, revisit
+    @options.habits.bind('add', @render, this)
     window.userStats.bind('updatedStats', @updateStats, this)
+    
+  createOnEnter: (e) ->
+    input = $(e.target)
+    if (!input.val() or e.keyCode != 13) then return
+    @options.habits.create {name: input.val(), habit_type: input.attr('data-type')} #,
+    #TODO
+      # success: (habit) =>
+        # @model = habit
+      # error: (habit, jqXHR) =>
+        # @model.set({errors: $.parseJSON(jqXHR.responseText)}
+    input.val('')
+    
+    #TODO
+  clearCompleted: ->
+    # _.each(Todos.done(), function(todo){ todo.destroy(); });
+    # return false;
+
+    #TODO    
+  showTooltip: (e) -> 
+    # var tooltip = this.$(".ui-tooltip-top");
+    # var val = this.input.val();
+    # tooltip.fadeOut();
+    # if (this.tooltipTimeout) clearTimeout(this.tooltipTimeout);
+    # if (val == '' || val == this.input.attr('placeholder')) return;
+    # var show = function(){ tooltip.show().fadeIn(); };
+    # this.tooltipTimeout = _.delay(show, 1000);
   
   # TODO create a view & template, bind to existing element
   updateStats: () =>