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

@@ -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'
@@ -84,6 +88,12 @@ ready (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']
 
   for type in lists

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 -->