Adding sortable

This commit is contained in:
Tyler Renelle 2012-02-01 16:55:33 -05:00
parent e72669cc3a
commit 229be57c31
8 changed files with 54 additions and 13 deletions

View file

@ -1,3 +1,30 @@
# Place all the behaviors and hooks related to the matching controller here.
# All this logic will automatically be available in application.js.
# You can use CoffeeScript in this file: http://jashkenas.github.com/coffee-script/
$(document).ready ->
$("#habits").sortable
axis: "y"
dropOnEmpty: false
cursor: "move"
items: "li"
opacity: 0.4
scroll: true
update: ->
$.ajax
type: "post"
data: $("#habits").sortable("serialize")
dataType: "script"
complete: (request) ->
$("#habits").effect "highlight"
url: "/habits/sort"
(($) ->
$.fn.highlight = ->
$(this).css
color: "red"
background: "yellow"
$(this).fadeIn()
) jQuery

View file

@ -8,6 +8,10 @@
.good { background-color:rgb(147, 196, 125); }
.done { background-color:rgb(201, 218, 248); }
#habits ul, #daily ul{
#habits, #daily {
list-style:none;
}
#habits li:hover, #daily li:hover {
cursor: move;
}

View file

@ -95,4 +95,13 @@ class HabitsController < ApplicationController
end
end
end
def sort
current_user.habits.each do |habit|
logger.fatal params['habit'].index(habit.id.to_s)
habit.position = params['habit'].index(habit.id.to_s)
habit.save
end
render :nothing => true
end
end

View file

@ -1,4 +1,5 @@
<div id="<%= habit.id %>">
<li id="habit_<%= habit.id %>" class="ui-state-default">
<span class="ui-icon ui-icon-arrowthick-2-n-s"></span>
<%
s = habit.score
@ -28,4 +29,4 @@
<% end %>
<% end %>
<%= link_to 'Edit', edit_habit_path(habit) %>
</div>
</li>

View file

@ -3,25 +3,21 @@
<table>
<tr><td>
<div id="habits">
<h2>Habits</h2>
<ul>
<ul id="habits">
<% @habits.each do |habit| %>
<li><%= render :partial => "habit", :locals => { :habit => habit } %></li>
<%= render :partial => "habit", :locals => { :habit => habit } %>
<% end %>
</ul>
</div>
</td>
<td>
<div id="daily">
<h2>Daily</h2>
<ul>
<ul id="daily">
<% @daily.each do |habit| %>
<li><%= render :partial => "habit", :locals => { :habit => habit } %></li>
<%= render :partial => "habit", :locals => { :habit => habit } %>
<% end %>
</ul>
</div>
</td></tr>
</table>

View file

@ -1,2 +1,2 @@
$('#<%= @habit.id %>').html("<%= escape_javascript(render :partial => "habit", :locals => { :habit => @habit }) %>");
$('#habit_<%= @habit.id %>').html("<%= escape_javascript(render :partial => "habit", :locals => { :habit => @habit }) %>");
$('#score').html("<%= @score %>");

View file

@ -4,6 +4,8 @@
<title>HabitTracker</title>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<% #TODO This should be available via jquery-ui, what's going on? %>
<%= javascript_include_tag "https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js" %>
<%= csrf_meta_tags %>
</head>
<body>

View file

@ -1,5 +1,7 @@
HabitTracker::Application.routes.draw do
resources :habits
resources :habits do
post :sort, on: :collection
end
match 'habits/:id/vote' => 'habits#vote'
devise_for :users