Added first version of DataTable based Game Panel

app/controllers/games_controller.rb

@@ -7,17 +7,21 @@ class GamesController < ApplicationController
   # GET /games.xml
   def index
     if player_signed_in?
-      @places =Place.includes(:games).near(current_player, 50)
-      @games = Game.where(:playground_id => @places.collect(&:playgrounds).flatten.collect(&:id)).limit(8).order("play_date desc")
+      @places =Place.includes(:games).near(current_player, 100)
+      @games = Game.where(:playground_id => @places.collect(&:playgrounds).flatten.collect(&:id)).order("play_date desc")
     else
-      puts "JHGJHGJHG #{request.location.inspect}"
       @places =Place.includes(:games).near([request.location ], 50)
-      @games = Game.to_play.limit(100).includes(:team1,:team2).all
+      @games = Game.to_play.includes(:team1,:team2)
     end
+    @paged_games = @games.limit(20).all
 
     respond_to do |format|
       format.html # index.html.erb
-      format.xml  { render :xml => @games }
+      format.json  { render :json => {
+                          :total => @games.count,
+                          :page_size => @paged_games.count,
+                          :data => @paged_games
+                     }.to_json    }
     end
   end
 

app/models/game.rb

@@ -49,7 +49,9 @@ def players
   def as_json(options)
     super(:include => {:team1 => {:methods =>[:players]},
         :team2 => {:methods =>[:players]},
-        :playground => {}})
+        :playground => {:only => [:name, :sport], :methods =>
+            [:latitude, :longitude, :city, :area_level1, :area_level2, :country]
+        }})
   end
 
   def is_friendly?

app/models/playground.rb

@@ -19,6 +19,10 @@ def reservation_required?
     self.place.customer.is_premium? or self.place.customer.is_platinum?
   end
 
+  def to_s
+    place.name
+  end
+
   def as_json(options)
     super(:methods => [:latitude, :longitude])
   end

app/views/games/index.html.erb

@@ -1,5 +1,6 @@
 <%= javascript_include_tag 'jquery.hotkeys' %>
 <%= javascript_include_tag 'jquery.jstree' %>
+<%= javascript_include_tag 'jquery.dataTables.min' %>
 <%= javascript_include_tag 'games_index' %>
 
 <%= new_game_link %>
@@ -14,16 +15,23 @@
                  :locals => {:geographic_area => get_user_geographic_area} %>
     </div>
     <div id="catalogue_items_list_container">
-      <% @games.in_groups_of(2).each do |n_games_group| %>
-        <div class="catalogue_items_container_row">
-          <% n_games_group.compact.each do |game|%>
-
-            <div class="catalogue_item_container clickable_container">
-              <%=  render :partial => 'game_panel', :locals => {:game => game} %>
-            </div>
-          <% end %>
-        </div>
-      <% end %>
+      <table id="games_table"  >
+        <thead>
+          <tr>
+            <th>Date</th>
+            <th>City</th>
+            <th>Playground</th>
+            <th>Team 1</th>
+            <th>Team 2</th>  
+
+          </tr>
+        </thead>
+        <tbody>
+
+        </tbody>
+      </table>
+
+
     </div>
   </div>
 

public/javascripts/games_index.js

@@ -10,7 +10,7 @@ $(function(){
     });
     window.GamesView = Backbone.View.extend({
         initialize: function(){
-            //_.bindAll(this, []);
+            _.bindAll(this, ['updateTableData']);
             $(".sidebar_location_filter").jstree({
                 "themes" : {
                     "theme" : "apple",
@@ -23,6 +23,47 @@ $(function(){
                 plugins : [ "themes", "html_data" ]
             });
             $(".sidebar_location_filter").show();
+            $('#games_table').dataTable({
+                "bProcessing": true,
+                "bServerSide": true,
+                "sAjaxSource": "/games.json",
+                "fnServerData": this.updateTableData
+            } );
+        },
+        updateTableData: function( sSource, aoData, fnCallback){
+            //add location filter params
+            aoData= {
+                q:{
+                    "offset": aoData.iDisplayStart
+                }
+            } ;
+            $.getJSON( sSource, aoData, function (json) {
+                /* Do whatever additional processing you want on the callback, then tell DataTables */
+                var data = {
+                    "sEcho": 1,
+                    "iTotalRecords": json.page_size,
+                    "iTotalDisplayRecords": json.total,
+                    "aaData": _(json.data).map(function(game_row){
+                        if (game_row.playground)
+                            return [
+                                game_row.play_date,
+                                game_row.playground.city,
+                                game_row.playground.name,
+                                game_row.team1.name,
+                                game_row.team2.name
+                            ];
+                        else
+                            return [
+                                game_row.play_date,
+                                "",
+                                "",
+                                game_row.team1.name,
+                                game_row.team2.name
+                            ];
+                    })
+                }
+                fnCallback(data);
+            } );
         }
     });
     gamesView = new GamesView();