refresh shows a spinner and uses ajax poll with If-Modified-Since

adamwiggins · Apr 14, 2009 · 60f2c12 · 60f2c12
1 parent e7db3f4
commit 60f2c12
Show file tree

Hide file tree

Showing 11 changed files with 93 additions and 27 deletions.
diff --git a/app/controllers/feeds_controller.rb b/app/controllers/feeds_controller.rb
@@ -5,17 +5,29 @@ def index
     @feeds = Feed.find(:all, :include => :posts)
   end
 
+  def show
+    @feed = Feed.find(params[:id])
+    if since = request.headers['If-Modified-Since']
+      if @feed.updated_at > Time.parse(since)
+        render :partial => 'feed', :locals => { :feed => @feed }
+      else
+        head 204, 'Cache-Control' => 'max-age=1'
+      end
+    end
+  end
+
   def create
     feed = Feed.create! :url => params[:url]
     redirect_to :action => :index
   end
 
   def refresh
-    if params[:id]
-      Feed.find(params[:id]).fetch
-    else
-      Feed.fetch_all
-    end
-    redirect_to :action => :index
+    Feed.find(params[:id]).fetch
+    head :ok
+  end
+
+  def refresh_all
+    Feed.fetch_all
+    head :ok
   end
 end
diff --git a/app/models/feed.rb b/app/models/feed.rb
@@ -15,7 +15,7 @@ def perform
       self.updated_at = Time.now
       save!
 
-      feed.items.each do |item|
+      feed.items.slice(0, 3).each do |item|
         unless posts.find_by_url(item.link)
           posts.create! :title => item.title, :url => item.link
         end

diff --git a/app/views/feeds/_feed.html.erb b/app/views/feeds/_feed.html.erb
@@ -0,0 +1,18 @@
+<div class="feed" id="feed_<%= feed.id %>">
+  <div class="header">
+    <div class="title"><%= feed.title %></div>
+    <div class="subtitle">
+      <span class="last_updated"><%= time_ago_in_words(feed.updated_at) %> ago | </span>
+      <span class="refresh">
+        <%= link_to_function "refresh", "refresh_feed(this)",
+                             :feed_id => feed.id, :last_modified => feed.updated_at %>
+      </span>
+    </div>
+  </div>
+
+  <div class="posts">
+    <% feed.posts.each do |post| %>
+      <div><%= link_to post.title, post.url %></div>
+    <% end %>
+  </div>
+</div>
diff --git a/app/views/feeds/index.html.erb b/app/views/feeds/index.html.erb
@@ -9,21 +9,9 @@
 </form>
 
 <% unless @feeds.empty? %>
-  <div class="refresh_all"><%= link_to "refresh all", :action => 'refresh' %></div>
+  <div class="refresh_all"><%= link_to_function "refresh all", 'refresh_all()' %></div>
 <% end %>
 
 <% @feeds.each do |feed| %>
-  <div class="feed">
-    <div class="header">
-      <div class="title"><%= feed.title %></div>
-      <span class="last_updated"><%= time_ago_in_words(feed.updated_at) %> ago</span>
-      <span class="refresh">| <%= link_to "refresh", :action => 'refresh', :id => feed.id %></span>
-    </div>
-
-    <div class="posts">
-      <% feed.posts.each do |post| %>
-        <div><%= link_to post.title, post.url %></div>
-      <% end %>
-    </div>
-  </div>
+  <%= render :partial => 'feed', :locals => { :feed => feed } %>
 <% end %>
diff --git a/app/views/feeds/show.html.erb b/app/views/feeds/show.html.erb
@@ -0,0 +1 @@
+<%= render :partial => 'feed', :locals => { :feed => @feed } %>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -5,6 +5,8 @@
   <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
   <title>Queueing Feed Reader</title>
   <%= stylesheet_link_tag 'main' %>
+  <%= javascript_include_tag 'prototype' %>
+  <%= javascript_include_tag 'application' %>
 </head>
 <body>
   <%= yield %>

diff --git a/config/routes.rb b/config/routes.rb
@@ -1,5 +1,6 @@
 ActionController::Routing::Routes.draw do |map|
-  map.resource :feeds
+  map.connect '/feeds/refresh_all', :controller => 'feeds', :action => 'refresh_all'
+  map.resources :feeds
 
   map.root :controller => 'feeds'
 

diff --git a/public/images/spinner.gif b/public/images/spinner.gif
diff --git a/public/javascripts/application.js b/public/javascripts/application.js
@@ -1,2 +1,35 @@
-// Place your application-specific JavaScript functions and classes here
-// This file is automatically included by javascript_include_tag :defaults
+function refresh_feed(link) {
+  new Ajax.Request('/feeds/refresh/' + link.getAttribute('feed_id'), { method: 'get' })
+  spin_and_wait(link)
+}
+
+function refresh_all() {
+  new Ajax.Request('/feeds/refresh_all', { method: 'get' })
+  $$('.feed .refresh a').each(function(link) {
+    spin_and_wait(link)
+  })
+}
+
+function spin_and_wait(link) {
+  link.addClassName('refreshing')
+  poll_for_update(link.getAttribute('feed_id'), link.getAttribute('last_modified'), link)
+}
+
+function poll_for_update(feed_id, last_modified, link) {
+  setTimeout(function() {
+    new Ajax.Request('/feeds/' + feed_id, {
+      method: 'get',
+      requestHeaders: { 'If-Modified-Since': last_modified },
+      onComplete: function(transport) {
+        if (transport.status == 204) {
+          poll_for_update(feed_id, last_modified, link)
+        } else if (transport.status == 200) {
+          $('feed_' + feed_id).innerHTML = transport.responseText
+        } else {
+          link.innerHTML = 'error'
+        }
+      }
+    }) },
+    1000
+  )
+}
diff --git a/public/stylesheets/main.css b/public/stylesheets/main.css
@@ -7,8 +7,19 @@
   font-weight: bold;
   padding-right: 2em;
 }
-.feed .header .last_updated,
-.feed .header .refresh {
+.feed .header .subtitle {
   font-size: 90%;
   color: #555;
 }
+
+.refreshing {
+  color: transparent;
+  background: url(/images/spinner.gif) no-repeat;
+}
+.refreshing a {
+  color: transparent;
+  border: 0;
+}
+.refreshing img {
+  outline: none;  /* disable mozilla's dotted box around link */
+}
diff --git a/vendor/plugins/delayed_job/lib/delayed/worker.rb b/vendor/plugins/delayed_job/lib/delayed/worker.rb
@@ -1,6 +1,6 @@
 module Delayed
   class Worker
-    SLEEP = 5
+    SLEEP = 1
 
     cattr_accessor :logger
     self.logger = if defined?(Merb::Logger)