Improved admin panel with AJAX

Gemfile

@@ -2,6 +2,7 @@ source 'http://rubygems.org'
 
 gem 'rails', '3.0.0'
 gem 'haml'
+gem 'sass'
 gem 'mysql2'
 
 group :production do

app/controllers/admin/points_controller.rb

@@ -2,7 +2,7 @@ class Admin::PointsController < Admin::ApplicationController
   # GET /points
   # GET /points.xml
   def index
-    @points = Point.all
+    @points = Point.order('created_at desc').limit(75)
 
     respond_to do |format|
       format.html # index.html.erb
@@ -34,12 +34,24 @@ def new
       format.xml  { render :xml => @point }
     end
   end
+
+  def justadded
+    @point = Point.find(:last, :include => :participant )
+    @justadded = {  :participant => @point.participant.name,
+                    :pointtype => @point.point_type.name,
+                    :description => @point.description,
+                    :stars => @point.point_type.value,
+                    :created_at => @point.created_at.strftime( "%H:%M:%S %b %d" ) }
+    respond_to do |format|
+      format.json { render :json => @justadded }
+    end
+  end
 
   # GET /points/1/edit
   def edit
     @point = Point.find(params[:id])
-    @participants = Participant.find(:all)
-    @point_types = PointType.find(:all)
+    @participants = Participant.all
+    @point_types = PointType.all
   end
 
   # POST /points

app/models/point.rb

@@ -9,7 +9,8 @@ def self.sums
       where a.point_type_id = b.id
       group by (a.participant_id)"
     {}.tap do |points|
-      Point.find_by_sql( sql ).each{ |point| points[point.participant_id] = point.points }
+      Point.find_by_sql( sql ).each{
+         |point| points[point.participant_id] = point.points }
     end
   end
 

app/views/admin/points/_form.haml

@@ -2,14 +2,16 @@
 
   - if @point.errors.any?
     #error_explanation
-      %h2== #{pluralize(@point.errors.count, "error")} prohibited this point from being saved:
+      %h2
+        = pluralize @point.errors.count, "error"
+        prohibited this point from being saved:
       %ul
       - @point.errors.full_messages.each do |msg|
         %li= msg
 
   %table#point
     %tr
-      %td.participant= f.select :participant_id, options_for_select(@participants.collect{|p| [p.name,p.id]}.sort,@point.participant_id)
+      %td.participant= f.select :participant_id, options_for_select(@participants.collect{|p| [p.name,p.id]}.sort, @point.participant_id)
       %td.pointtype= f.select :point_type_id, options_for_select(@point_types.collect{|pt| [pt.name,pt.id]}.sort, @point.point_type_id)
-      %td.description= f.text_field :description, :placeholder => 'Description'
-      %td.submit= f.submit
+      %td.description= f.text_field :description, :placeholder => 'Description', :size => 40
+      %td.submit= submit_tag ' ↵  Press Enter '

app/views/admin/points/index.haml

@@ -3,7 +3,7 @@
 %strong= link_to 'Give stars!', new_admin_point_path
 
 %table#admin
-  - @points.sort_by{|p| p['created_at']}.reverse.each do |point|
+  - @points.each do |point|
     %tr
       %td.participant= point.participant.name
       %td.pointtype= point.point_type.name
@@ -13,5 +13,5 @@
       %td.admin= link_to 'view', [:admin,point]
       %td.admin= link_to 'edit', edit_admin_point_path(point)
       %td.admin= link_to 'destroy', 'points/'+point.id.to_s+'/destroy'
-      
+
 %strong= link_to 'Give stars!', new_admin_point_path

app/views/admin/points/new.haml

@@ -1,16 +1,8 @@
 %h2 Give stars
 %p#notice= notice
-= link_to '◄ Previous page', admin_points_path
 
 = render 'form'
 
-%h3.padded-top Just added:
-
 %table#admin.just-added
-  - @points.sort_by{|p| p['created_at']}.reverse.each do |point|
-    %tr
-      %td.participant= point.participant.name
-      %td.pointtype= point.point_type.name
-      %td.description= point.description
-      %td.stars== #{point.point_type.value} stars at
-      %td.created_at= point.created_at.strftime( "%H:%M:%S %b %d" )
+
+= link_to '◄ Back to Points', admin_points_path

app/views/layouts/admin.haml

@@ -4,6 +4,7 @@
     %title Gold Stars Administration
     = stylesheet_link_tag :all
     = javascript_include_tag 'prototype'
+    = javascript_include_tag 'jquery-ui-1.8.13.custom.min'
     = javascript_include_tag 'jquery-1.6.1.min'
     = javascript_include_tag 'goldstars'
     = csrf_meta_tag

config/routes.rb

@@ -1,15 +1,15 @@
 Goldstars::Application.routes.draw do
 
   namespace :admin do
+    match 'points/justadded' => 'points#justadded'
+    match 'points/:id/destroy' => 'points#destroy'
     resources :awards
     resources :award_types
     resources :points
     resources :point_types
     resources :roles
     resources :participants
     root :to => "points#index"
-
-    match 'points/:id/destroy' => 'points#destroy'
   end
 
   match 'points/rules' => 'points#rules'

public/javascripts/goldstars.js

@@ -12,7 +12,9 @@ $(function() {
                         $(this).addClass('spent');
                       else stars--;
                     });
-          });
+          }
+  );
+
   $( '.award img.spent' ).fadeTo( 500, .4 ); // Fade stars!
 
   $( 'span.award' ).hover( // When group-of-stars are moused-over
@@ -21,6 +23,41 @@ $(function() {
           },
           function() { // Mouse OFF
               $( this ).find( '.info' ).delay(50).fadeOut(0); // Fade box
-          });
+          }
+  );
+
+  $( '#new_point' ).submit( function(event) {
+    event.preventDefault();
+
+    $( '.just-added' ).prepend( "<tr class=\"loading\"><td colspan=\"5\">Adding point to the database ...</td></tr>" );
+
+    var $form = $( this ),
+        user = $form.find( 'select[name="point[participant_id]"]' ).val(),
+        type = $form.find( 'select[name="point[point_type_id]"]' ).val(),
+        desc = $form.find( 'input[name="point[description]"]' ).val(),
+        url = $form.attr( 'action' );
+
+        $form.find( 'input[name="point[description]"]' ).val('');
+
+
+        $.post( url,
+              { 'point': { 'participant_id': user, 'point_type_id': type, 'description': desc } },
+              function() {
+                  $.ajax({
+                      url: "justadded",
+                      dataType: 'json',
+                      success: function( json ) {
+                        var content  = "<tr>\n";
+                            content += "<td class=\"participant\">" + json.participant + "</td>\n";
+                            content += "<td class=\"pointtype\">" + json.pointtype + "</td>\n";
+                            content += "<td class=\"description\">" + json.description + "</td>\n";
+                            content += "<td class=\"stars\">" + json.stars + " stars at</td>\n";
+                            content += "<td class=\"created_at\">" + json.created_at + "</td>\n";
+                            content += "</tr>\n";
+                        $( 'tr.loading' ).replaceWith( content ).effect( 'highlight', {}, 1000 );
+                      }
+                  });
+              });
+  });
 
 });