From 58d9f929eb6bd60a92e5f96db99f925038fa0ec1 Mon Sep 17 00:00:00 2001
From: Tyler Renelle <tylerrenelle@gmail.com>
Date: Sat, 9 Jun 2012 20:15:33 -0400
Subject: [PATCH] DRY view complete! still need to get rid of "type" attribute
 on task and put in a view helper somehow

---
 src/app/index.coffee |  20 +++--
 views/app/index.html | 171 +++++++++++++++----------------------------
 2 files changed, 70 insertions(+), 121 deletions(-)

diff --git a/src/app/index.coffee b/src/app/index.coffee
index c7c04abe8e..4eae95ea6f 100644
--- a/src/app/index.coffee
+++ b/src/app/index.coffee
@@ -12,19 +12,20 @@ newUser = (model, userId) ->
       lvl: 1
       
       habits:
-        0: {id: 0, text: 'Take the stairs', notes: '', score: 0, up: true, down: true}
+        # TODO :{type: 'habit'} should be coded instead as a model function so as not to clutter the database
+        0: {id: 0, type: 'habit', text: 'Take the stairs', notes: '', score: 0, up: true, down: true}
       habitIds: [0]
 
       dailys: # I know it's bad pluralization, but codes easier later
-        0: {id: 0, text: 'Go to the gym', notes: '', score: 0, completed: false }
+        0: {id: 0, type: 'daily', text: 'Go to the gym', notes: '', score: 0, completed: false }
       dailyIds: [0]
       
       todos:
-        0: {id: 0, text: 'Make a doctor appointment', notes: '', score: 0, completed: false }
+        0: {id: 0, type: 'todo', text: 'Make a doctor appointment', notes: '', score: 0, completed: false }
       todoIds: [0]
 
       rewards:
-        0: {id: 0, text: '1 TV episode', notes: '', price: 20 }
+        0: {id: 0, type: 'reward', text: '1 TV episode', notes: '', price: 20 }
       rewardIds: [0]
   
 
@@ -46,6 +47,11 @@ get '/', (page, model) ->
 
     page.render()
 
+## VIEW HELPERS ##
+view.fn 'taskClasses', (type, completed) ->
+  classes = type 
+  classes += " completed" if completed
+  return classes
 
 ## CONTROLLER FUNCTIONS ##
 
@@ -83,17 +89,17 @@ ready (model) ->
     switch type
     
       when 'habit'
-        list.push {text: text, notes: '', score: 0, up: true, down: true}
+        list.push {type: type, text: text, notes: '', score: 0, up: true, down: true}
         
       when 'reward'
-        list.push {text, notes: '', price: 20 }
+        list.push {type: type, text: text, notes: '', price: 20 }
         
       when 'daily', 'todo'
         # Insert the new todo before the first completed item in the list
         # or append to the end if none are completed
         for todo, i in list.get()
           break if todo.completed
-        list.insert i, {text: text, notes: '', score: 0, completed: false }
+        list.insert i, {type: type, text: text, notes: '', score: 0, completed: false }
         
         list.on 'set', '*.completed', (i, completed, previous, isLocal) ->
           # Move the item to the bottom if it was checked off
diff --git a/views/app/index.html b/views/app/index.html
index d01e93ae08..31cbdb4c40 100644
--- a/views/app/index.html
+++ b/views/app/index.html
@@ -4,8 +4,44 @@
 <Header:>
   <app:alert>
   
-<dragList: nonvoid>
+<taskList: nonvoid>
+  <div class="{{{type}}}s">
+    <h1>{{{title}}}</h1>
+    <div class=dragbox></div>
+    <div class=content>
+      <ul>
+        {{{content}}}
+      </ul>
+    </div>
+  </div>
   
+<task:>
+  <li data-id={{id}} class="{taskClasses(.type, .completed)}">
+    <table width=100%>
+      <tr>
+        <td class=handle width=0></td>
+        <td width=100%>
+          <div class=todo>
+            <label>
+              {#if equal(.type, 'habit')}+ -<i></i>{/}
+              {#if equal(.type, 'daily')}<input type=checkbox checked={.completed}><i></i>{/}
+              {#if equal(.type, 'todo')}<input type=checkbox checked={.completed}><i></i>{/}
+              {#if equal(.type, 'reward')}${.price}{/}
+            <i></i>  
+            </label>
+            <div x-bind=keydown:shortcuts contenteditable>{unescaped .text}</div>
+          </div>
+        </td>
+        <td width=0><button class=delete x-bind=click:del>Delete</button></td>
+      </tr>
+    </table>
+  </li>
+
+<newTask: nonvoid>
+  <form data-task-type={{{type}}} x-bind=submit:addTask>
+    {{{content}}}
+    <input type=submit value=Add>
+  </form>
 
 <Body:>
   <div id=overlay></div>
@@ -17,121 +53,28 @@
   
   <div id=content>
     
-    <div class=habits>
-      <h1>Habits</h1>
-      <div class=dragbox></div>
-      <div class=content>
-        <ul>
-        {#each _habitList}
-          <li data-id={{id}} class="habit">
-            <table width=100%>
-              <tr>
-                <td class=handle width=0></td>
-                <td width=100%>
-                  <div class=todo>
-                    <label>+ -<i></i></label>
-                    <div x-bind=keydown:shortcuts contenteditable>{unescaped .text}</div>
-                  </div>
-                </td>
-                <td width=0><button class=delete x-bind=click:del>Delete</button></td>
-              </tr>
-            </table>
-          </li>
-        {/}
-        </ul>
-      </div>
-      <form data-task-type=habit x-bind=submit:addTask>
-        <input class=new value={_newHabit}>
-        <input type=submit value=Add>
-      </form>
-    </div>
-    
-    <div class=dailys>
-      <h1>Dailies</h1>
-      <div class=dragbox></div>
-      <div class=content>
-        <ul>
-        {#each _dailyList}
-          <li data-id={{id}} class="{#if .completed}completed{/}">
-            <table width=100%>
-              <tr>
-                <td class=handle width=0></td>
-                <td width=100%>
-                  <div class=todo>
-                    <label><input type=checkbox checked={.completed}><i></i></label>
-                    <div x-bind=keydown:shortcuts contenteditable>{unescaped .text}</div>
-                  </div>
-                </td>
-                <td width=0><button class=delete x-bind=click:del>Delete</button></td>
-              </tr>
-            </table>
-          </li>
-        {/}
-        </ul>
-      </div>
-      <form data-task-type=daily x-bind=submit:addTask>
-        <input class=new value={_newDaily}>
-        <input type=submit value=Add>
-      </form>
-    </div>
+    <!-- would rather have one component: <app:taskList>, which handles taskList, task, and newTask.  However,
+      can't pass references as paramters.  so <app:taskList newModel={_newHabit} list={_habitList}> doesn't work
+      and have to pass those in via {{{content}}} instead -->
+    <app:taskList title=Habits type=habit>
+      {#each _habitList}<app:task />{/}
+    </app:taskList>
+    <app:newTask type=habit><input class=new value={_newHabit}></app:newTask>
 
-    <div class=todos>
-      <h1>Todos</h1>
-      <div class=dragbox></div>
-      <div class=content>
-        <ul>
-        {#each _todoList}
-          <li data-id={{id}} class="{#if .completed}completed{/}">
-            <table width=100%>
-              <tr>
-                <td class=handle width=0></td>
-                <td width=100%>
-                  <div class=todo>
-                    <label><input type=checkbox checked={.completed}><i></i></label>
-                    <div x-bind=keydown:shortcuts contenteditable>{unescaped .text}</div>
-                  </div>
-                </td>
-                <td width=0><button class=delete x-bind=click:del>Delete</button></td>
-              </tr>
-            </table>
-          </li>
-        {/}
-        </ul>
-      </div>
-      <form data-task-type=todo x-bind=submit:addTask>
-        <input class=new value={_newTodo}>
-        <input type=submit value=Add>
-      </form>
-    </div>
+    <app:taskList title=Dailies type=daily>
+      {#each _dailyList}<app:task />{/}
+    </app:taskList>
+    <app:newTask type=daily><input class=new value={_newDaily}></app:newTask>
 
-    <div class=rewards>
-      <h1>Rewards</h1>
-      <div class=dragbox></div>
-      <div class=content>
-        <ul>
-        {#each _rewardList}
-          <li data-id={{id}} class="reward">
-            <table width=100%>
-              <tr>
-                <td class=handle width=0></td>
-                <td width=100%>
-                  <div class=todo>
-                    <label>${.price}<i></i></label>
-                    <div x-bind=keydown:shortcuts contenteditable>{unescaped .text}</div>
-                  </div>
-                </td>
-                <td width=0><button class=delete x-bind=click:del>Delete</button></td>
-              </tr>
-            </table>
-          </li>
-        {/}
-        </ul>
-      </div>
-      <form data-task-type=reward x-bind=submit:addTask>
-        <input class=new value={_newReward}>
-        <input type=submit value=Add>
-      </form>
-    </div>
+    <app:taskList title=Todos type=todo>
+      {#each _todoList}<app:task />{/}
+    </app:taskList>
+    <app:newTask type=todo><input class=new value={_newTodo}></app:newTask>
+
+    <app:taskList title=Rewards type=reward>
+      {#each _rewardList}<app:task />{/}
+    </app:taskList>
+    <app:newTask type=reward><input class=new value={_newReward}></app:newTask>
   
   </div>