From 229be57c319da24a1c488b8c3c66cb853c73ff7b Mon Sep 17 00:00:00 2001
From: Tyler Renelle <tylerrenelle@gmail.com>
Date: Wed, 1 Feb 2012 16:55:33 -0500
Subject: [PATCH] Adding sortable

---
 app/assets/javascripts/habits.js.coffee | 27 +++++++++++++++++++++++++
 app/assets/stylesheets/habits.css.scss  |  6 +++++-
 app/controllers/habits_controller.rb    |  9 +++++++++
 app/views/habits/_habit.html.erb        |  5 +++--
 app/views/habits/index.html.erb         | 12 ++++-------
 app/views/habits/vote.js.erb            |  2 +-
 app/views/layouts/application.html.erb  |  2 ++
 config/routes.rb                        |  4 +++-
 8 files changed, 54 insertions(+), 13 deletions(-)

diff --git a/app/assets/javascripts/habits.js.coffee b/app/assets/javascripts/habits.js.coffee
index 761567942f..18d631ca4e 100644
--- a/app/assets/javascripts/habits.js.coffee
+++ b/app/assets/javascripts/habits.js.coffee
@@ -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
\ No newline at end of file
diff --git a/app/assets/stylesheets/habits.css.scss b/app/assets/stylesheets/habits.css.scss
index a5480d8db0..0f56e61bd0 100644
--- a/app/assets/stylesheets/habits.css.scss
+++ b/app/assets/stylesheets/habits.css.scss
@@ -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;
+}
\ No newline at end of file
diff --git a/app/controllers/habits_controller.rb b/app/controllers/habits_controller.rb
index fa83c1998a..2906c73101 100644
--- a/app/controllers/habits_controller.rb
+++ b/app/controllers/habits_controller.rb
@@ -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
diff --git a/app/views/habits/_habit.html.erb b/app/views/habits/_habit.html.erb
index f228b493b6..ca0725c343 100644
--- a/app/views/habits/_habit.html.erb
+++ b/app/views/habits/_habit.html.erb
@@ -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>
diff --git a/app/views/habits/index.html.erb b/app/views/habits/index.html.erb
index 6c8b44fbe0..03b603041d 100644
--- a/app/views/habits/index.html.erb
+++ b/app/views/habits/index.html.erb
@@ -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>
diff --git a/app/views/habits/vote.js.erb b/app/views/habits/vote.js.erb
index 74720e9b36..4a1cb10254 100644
--- a/app/views/habits/vote.js.erb
+++ b/app/views/habits/vote.js.erb
@@ -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 %>");
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 73561f4abf..ced5b12b17 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -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>
diff --git a/config/routes.rb b/config/routes.rb
index 90079f7d85..853d7b86bf 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -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