Merge pull request #357 from toebu/context-dependant-display

Adding a new functionality that allows the context (i.e. css classes)

src/app/tasks.coffee

@@ -11,6 +11,8 @@ module.exports.view = (view) ->
     # show as completed if completed (naturally) or not required for today
     if completed or (repeat and repeat[helpers.dayMapping[moment().day()]]==false)
       classes += " completed"
+    else
+      classes += " uncompleted"
 
     switch
       when value<-8 then classes += ' color-worst'
@@ -65,15 +67,8 @@ module.exports.app = (appExports, model) ->
 
   appExports.del = (e, el) ->
     # Derby extends model.at to support creation from DOM nodes
-    #task = model.at(e.target)
-    # FIXME normally that would work, and we'd later simply call `user.del task` (instead of that 4-liner down there)
-    # however, see https://github.com/lefnire/habitrpg/pull/226#discussion_r2810391
-
-    id = $(e.target).parents('li.task').attr('data-id')
-    return unless id?
-
-    task = user.at "tasks.#{id}"
-    type = task.get('type')
+    task = model.at(e.target)
+    id = task.get('id')
 
     history = task.get('history')
     if history and history.length>2
@@ -95,10 +90,8 @@ module.exports.app = (appExports, model) ->
     # fix when query subscriptions implemented properly
     $('[rel=tooltip]').tooltip('hide')
 
-    ids = user.get("#{type}Ids")
-    ids.splice(ids.indexOf(id),1)
     user.del('tasks.'+id)
-    user.set("#{type}Ids", ids)
+    task.remove()
 
 
   appExports.clearCompleted = (e, el) ->
@@ -148,6 +141,29 @@ module.exports.app = (appExports, model) ->
     chart = new google.visualization.LineChart(document.getElementById( chartSelector ))
     chart.draw(data, options)
 
+  appExports.changeContext = (e, el) ->
+    # Get the data from the element
+    targetSelector = $(el).attr('data-target')
+    newContext = $(el).attr('data-context')
+    newActiveNav = $(el).parent('li')
+
+    # If the clicked nav is already active, do nothing
+    if newActiveNav.hasClass('active')
+      return
+
+    # Find the old active nav and context
+    oldActiveNav = $(el).closest('ul').find('> .active')
+    oldContext = oldActiveNav.find('a').attr('data-context')
+
+    # Set the new active nav
+    oldActiveNav.removeClass('active')
+    newActiveNav.addClass('active')
+
+    # Set the new context on the target
+    target = $(targetSelector)
+    target.removeClass(oldContext)
+    target.addClass(newContext)
+
   appExports.score = (e, el, next) ->
     direction = $(el).attr('data-direction')
     direction = 'up' if direction == 'true/'

styles/app/tasks.styl

@@ -37,6 +37,19 @@ label.checkbox.inline{
     background-image: linear-gradient(to bottom, #eee, #aaa);
     background-repeat: repeat-x;
 
+.context-enabled
+  .display-context-dependant,
+  .task-list li
+    display: none
+
+  &.context-completed
+    .show-for-completed, .completed
+      display: block
+
+  &.context-uncompleted
+    .show-for-uncompleted, .uncompleted
+      display: block
+
 .help-icon
   float:right;
 

views/app/index.html

@@ -295,37 +295,22 @@
         <app:newTask type=daily><input value={_newDaily} type="text" name=new-task placeholder="New Daily"/></app:newTask>
       </div>
 
-      <div class="span3 well todos">
-        <div class="tabbable"> <!-- Only required for left/right tabs -->
-          <div class="row-fluid">
-            <h2 class="span6">Todos</h2>
-            <ul class="span6 nav nav-pills">
-                <li class="active"><a href="#" data-target="#tab1" data-toggle="tab">Remaining</a></li>
-                <li><a href="#" data-target="#tab2" data-toggle="tab">Complete</a></li>
-            </ul>
-          </div>
-          <div class="tab-content">
-            <div class="tab-pane active" id="tab1">
-              <ul class='todos'>
-                {#each _todoList as :task}
-                  {#if not(:task.completed)}
-                    <app:task />
-                  {/}
-                {/}
-              </ul>
-              <app:newTask type=todo><input value={_newTodo} type="text" name=new-task placeholder="New Todo"/></app:newTask>
-            </div>
-            <div class="tab-pane" id="tab2">
-              <ul class='completeds'>
-                {#each _todoList as :task}
-                  {#if :task.completed}
-                    <app:task />
-                  {/}
-                {/}
-              </ul>
-              <a x-bind=click:clearCompleted>Clear Completed</a>
-            </div>
-          </div>
+      <div class="span3 well todos context-enabled context-uncompleted" id="todo-well">
+        <div class="row-fluid">
+          <h2 class="span6">Todos</h2>
+          <ul class="span6 nav nav-pills">
+            <li class="active"><a x-bind=click:changeContext data-target="#todo-well" data-context="context-uncompleted">Remaining</a></li>
+            <li><a x-bind=click:changeContext data-target="#todo-well" data-context="context-completed">Complete</a></li>
+          </ul>
+        </div>
+        <ul class='todos task-list'>
+          {#each _todoList as :task}<app:task />{/}
+        </ul>
+        <div class="display-context-dependant show-for-uncompleted">
+          <app:newTask type=todo><input value={_newTodo} type="text" name=new-task placeholder="New Todo"/></app:newTask>
+        </div>
+        <div class="display-context-dependant show-for-completed">
+          <a x-bind=click:clearCompleted>Clear Completed</a>
         </div>
         {#if _user.history.todos}
           <a x-bind=click:toggleChart data-toggle-id="todos-chart" data-history-path="_user.history.todos" rel=tooltip title="Progress"><i class=icon-signal></i></a>