mirror of
https://github.com/sudoxnym/habitica.git
synced 2026-08-01 23:40:25 +00:00
DRY view complete! still need to get rid of "type" attribute on task
and put in a view helper somehow
This commit is contained in:
Tyler Renelle
parent
cf7a271eb6
commit
58d9f929eb
2 changed files with 70 additions and 121 deletions
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<!-- 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=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>
|
||||
<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=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=Todos type=todo>
|
||||
{#each _todoList}<app:task />{/}
|
||||
</app:taskList>
|
||||
<app:newTask type=todo><input class=new value={_newTodo}></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=Rewards type=reward>
|
||||
{#each _rewardList}<app:task />{/}
|
||||
</app:taskList>
|
||||
<app:newTask type=reward><input class=new value={_newReward}></app:newTask>
|
||||
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue