New habit at bottom of lists, create on enter

This commit is contained in:
Tyler Renelle 2012-02-11 14:16:23 -05:00
parent fdd78daa86
commit b2308aa706
3 changed files with 38 additions and 7 deletions

View file

@ -12,7 +12,7 @@
<% } %>
<% } %>
<%= name %>
<span class="habit-text"><%= name %></span>
<div class='edit'>
<% if (notes) { %>
<!-- TODO how to make this assets-aware? image_tag('comment.png', :class=>'comment') -->

View file

@ -1,5 +1,3 @@
<a href="#/new">New Habit</a>
<table id="layout">
<tr>
<td class="panel">
@ -8,6 +6,7 @@
<h2 class='title'>Habits</h2>
<div class='inner'>
<ul id="habits-habits" />
<input class="new-habit" data-type="1" placeholder="New Habit" type="text" />
</div>
</div>
</div>
@ -19,6 +18,7 @@
<h2 class='title'>Daily</h2>
<div class='inner'>
<ul id="habits-daily" />
<input class="new-habit" data-type="2" placeholder="New Daily" type="text" />
</div>
</div>
</div>
@ -40,13 +40,13 @@
</div>
<div id="tabs-2">
<ul id="habits-todos-done" />
<a href="#" class="clear-completed">Clear Completed</a>
</div>
</div>
<input class="new-habit" data-type="3" placeholder="New Todo" type="text" />
</div>
</div>
</div>
<!-- TODO link_to 'View Completed', :action=>'completed' -->
</td>
<td class="panel">
@ -56,12 +56,11 @@
<div id="money"></div>
</h2>
<div class='inner'>
<!-- TODO rewards code block (see old code) -->
<ul id="rewards" />
<input class="new-habit" data-type="4" placeholder="New Reward" type="text" />
</div>
</div>
</div>
<!-- TODO link_to 'New Reward', new_reward_path -->
</td>
</tr>
</table>

View file

@ -2,11 +2,43 @@ HabitTracker.Views.Habits ||= {}
class HabitTracker.Views.Habits.IndexView extends Backbone.View
template: JST["backbone/templates/habits/index"]
events:
"keypress .new-habit": "createOnEnter",
"keyup .new-habit": "showTooltip",
"click .todo-clear a": "clearCompleted"
initialize: () ->
@options.habits.bind('reset', @addAll)
@options.habits.bind('change', @render, this) #TODO this ruins tabs, revisit
@options.habits.bind('add', @render, this)
window.userStats.bind('updatedStats', @updateStats, this)
createOnEnter: (e) ->
input = $(e.target)
if (!input.val() or e.keyCode != 13) then return
@options.habits.create {name: input.val(), habit_type: input.attr('data-type')} #,
#TODO
# success: (habit) =>
# @model = habit
# error: (habit, jqXHR) =>
# @model.set({errors: $.parseJSON(jqXHR.responseText)}
input.val('')
#TODO
clearCompleted: ->
# _.each(Todos.done(), function(todo){ todo.destroy(); });
# return false;
#TODO
showTooltip: (e) ->
# var tooltip = this.$(".ui-tooltip-top");
# var val = this.input.val();
# tooltip.fadeOut();
# if (this.tooltipTimeout) clearTimeout(this.tooltipTimeout);
# if (val == '' || val == this.input.attr('placeholder')) return;
# var show = function(){ tooltip.show().fadeIn(); };
# this.tooltipTimeout = _.delay(show, 1000);
# TODO create a view & template, bind to existing element
updateStats: () =>