Manage robots with Ajax requests

- include RightJS and app specific js files
  - use coffeescript for app specific code
  - make routes check for xhr data
  - add spinner for xhr requests

main.rb

@@ -1,4 +1,4 @@
-%w[sinatra dm-core dm-migrations haml sass].each{ |lib| require lib }
+%w[sinatra dm-core dm-migrations haml sass coffee_script].each{ |lib| require lib }
 DataMapper.setup(:default, File.join("sqlite3://",settings.root,"development.db"))
 
 class Robot
@@ -13,6 +13,8 @@ DataMapper.finalize
 
 get ('/styles.css'){ scss :styles }
 
+get('/application.js'){ coffee :application }
+
 get '/' do
   @robots = Robot.all
   haml :index
@@ -20,10 +22,14 @@ end
 
 post '/build/robot' do
   robot = Robot.create
+  if request.xhr?
+    haml :robot, { layout: false, locals: { robot: robot } }
+  else
     redirect to('/')
   end
+end
 
 delete '/delete/robot/:id' do
   Robot.get(params[:id]).destroy
-  redirect to('/')
+  redirect to('/') unless request.xhr?
 end

views/application.coffee

@@ -0,0 +1,12 @@
+Xhr.Options.spinner = 'waiting'
+
+"form.destroy".onSubmit (event) ->
+  @parent().fade()
+  event.stop()
+  @send()
+
+"form.build".onSubmit (event) ->
+  event.stop()
+  @send onSuccess: (xhr) ->
+    $("robots").insert xhr.responseText
+

views/index.haml

@@ -1,4 +1,5 @@
 %h1 Robot Factory
+%img#waiting{ src:"https://s3.amazonaws.com/daz4126/waiting.gif" }
 %form.build{ action:"/build/robot", method:"POST" }
   %input.button{ type:"submit", value:"Build A Robot!" }
 -if @robots.any?

views/layout.haml

@@ -9,6 +9,8 @@
     %link{ rel: "stylesheet", href: "/styles.css" }
     /[if lt IE 9]
       %script{ src: "http://html5shiv.googlecode.com/svn/trunk/html5.js" }
+    %script{ src:"http://cdn.rightjs.org/right.js" }
+    %script{ src:"/application.js" }
   %body
     = yield
     #footer

views/styles.scss

@@ -72,4 +72,5 @@ h1 {
     padding:0 10px;
   }
 }
+#waiting{display:none;position:absolute;left:200px;top:100px;}
 

views/test.coffee

@@ -0,0 +1,3 @@
+$(document).ready ->
+  $('footer').click ->
+    alert('Test')