From 4c6bd8bc84b1551998dc5c52cc65fe07992e510a Mon Sep 17 00:00:00 2001
From: Tyler Renelle <tylerrenelle@gmail.com>
Date: Wed, 27 Jun 2012 09:37:36 -0400
Subject: [PATCH] Implemented Remaining | Completed tabs by having two
 identical lists with each <li> hidden based on model.get('_hideCompleted') -
 which is set by tab clicks. This sucks, revisit when I understand managing
 refLists better

---
 src/app/index.coffee | 12 +++++++++++-
 views/app/index.html | 10 +++++++---
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/app/index.coffee b/src/app/index.coffee
index 0d4e61e07d..779002e60d 100644
--- a/src/app/index.coffee
+++ b/src/app/index.coffee
@@ -49,9 +49,13 @@ get '/', (page, model) ->
     page.render()
 
 ## VIEW HELPERS ##
-view.fn 'taskClasses', (type, completed, value) ->
+view.fn 'taskClasses', (type, completed, value, hideCompleted) ->
+  #TODO figure out how to just pass in the task model, so i can access all these properties from one object
   classes = type
   classes += " completed" if completed
+  if type == 'todo'
+    classes += " hide" if (hideCompleted and completed) or (!hideCompleted and !completed)
+    
   switch
     when value<-8 then classes += ' color-worst'
     when value>=-8 and value<-5 then classes += ' color-worse'
@@ -83,6 +87,12 @@ ready (model) ->
   window.model = model
   
   $('.task-notes').popover()
+  
+  model.set('_hideCompleted', true)
+  $('a[data-toggle="tab"]').on 'shown', (e) ->
+    #see http://twitter.github.com/bootstrap/javascript.html#tabs 
+    hideCompleted = if $(e.target).attr('href') == '#tab1' then true else false  
+    model.set('_hideCompleted', hideCompleted)
       
   lists = [ 'habit', 'daily', 'todo', 'reward']
 
diff --git a/views/app/index.html b/views/app/index.html
index 4850c15749..24f82490fe 100644
--- a/views/app/index.html
+++ b/views/app/index.html
@@ -63,11 +63,15 @@
           </ul>
           <div class="tab-content">
             <div class="tab-pane active" id="tab1">
-              <ul class='todos'>{#each _todoList as :task}<app:task />{/}</ul>
+              <ul class='todos'>
+                {#each _todoList as :task}<app:task />{/}
+              </ul>
               <app:newTask type=todo><input value={_newTodo} class="input-medium" type="text" /></app:newTask>
             </div>
             <div class="tab-pane" id="tab2">
-              TODO: Implement completed
+              <ul class='completeds'>
+                {#each _todoList as :task}<app:task />{/}
+              </ul>
             </div>
           </div>
         </div>
@@ -96,7 +100,7 @@
   </form>  
   
 <task:>
-  <li data-id={{:task.id}} class="task {taskClasses(:task.type, :task.completed, :task.value)}">
+  <li data-id={{:task.id}} class="task {taskClasses(:task.type, :task.completed, :task.value, _hideCompleted)}">
     <div class="task-meta">
       <!-- TODO make this a popover -->