adding invitations and list of who invited you to race

app/assets/javascripts/api/invitations.js

@@ -0,0 +1,2 @@
+// Place all the behaviors and hooks related to the matching controller here.
+// All this logic will automatically be available in application.js.

app/assets/javascripts/application.js

@@ -17,6 +17,7 @@
 //= require moment
 //= require pusher
 //= require chart
+//= require bootstrap
 //= require serialize_json
 //= require code_racer
 //= require_tree ../templates

app/assets/javascripts/code_racer.js

@@ -5,26 +5,37 @@ window.CodeRacer = {
   Views: {},
   Routers: {},
   initialize: function () {
-    var router = new CodeRacer.Routers.Router({
+    this.router = new CodeRacer.Routers.Router({
       $rootEl: $('#main')
     });
 
+    CodeRacer.setupPresence();
+    CodeRacer.installHeader();
+    Backbone.history.start();
+  },
+
+  installHeader: function () {
     var header = new CodeRacer.Views.Header({
-      router: router
+      router: this.router
     });
 
     $('#header').html(header.render().$el);
+  },
 
-    // Add the current user to the list of online users
+  setupPresence: function () {
     CodeRacer.onlineUsers.add(new CodeRacer.Models.User(window.CURRENT_RACER));
-
     $.ajax({
       url: '/api/online_user',
       type: 'POST',
       data: window.CURRENT_RACER
     });
 
-    Backbone.history.start();
+    CodeRacer.invites = new Backbone.Collection();
+    CodeRacer.presence.bind('invite', function (data) {
+      if(data.id === window.CURRENT_RACER.id) {
+        CodeRacer.invites.add(data);
+      }
+    });
   }
 };
 
@@ -39,15 +50,14 @@ CodeRacer.presence = CodeRacer.pusher.subscribe('presence');
 
 function cleanup() {
   CodeRacer.pusher.disconnect();
-
   $.ajax({
     url: '/api/online_user',
     type: 'DELETE',
     data: window.CURRENT_RACER
   });
 }
 
-$(window).on('beforeunload', function() {
+$(window).on('beforeunload', function () {
   var x = cleanup();
   return x;
 });

app/assets/javascripts/views/header.js

@@ -1,9 +1,15 @@
 /*globals CodeRacer, Backbone, JST */
 CodeRacer.Views.Header = Backbone.View.extend({
+  initialize: function () {
+    this.listenTo(CodeRacer.invites, 'add', this.render);
+  },
+
   template: JST['header'],
 
   render: function () {
-    var content = this.template();
+    var content = this.template({
+      invites: CodeRacer.invites
+    });
     this.$el.html(content);
     return this;
   },

app/assets/javascripts/views/stages/stage_show.js

@@ -5,6 +5,10 @@ CodeRacer.Views.StageShow = Backbone.View.extend({
     this.racersView = new CodeRacer.Views.StageRacers({
       collection: this.model.racers()
     });
+
+    this.onlineView = new CodeRacer.Views.Online({
+      collection: CodeRacer.onlineUsers
+    });
   },
 
   events: {
@@ -21,12 +25,17 @@ CodeRacer.Views.StageShow = Backbone.View.extend({
     this.$('.racers').html(this.racersView.render().$el);
   },
 
+  renderOnline: function () {
+    this.$('.online').html(this.onlineView.render().$el);
+  },
+
   render: function () {
     var content = this.template({
       stage: this.model
     });
     this.$el.html(content);
     this.renderRacers();
+    this.renderOnline();
     return this;
   },
 });

app/assets/javascripts/views/users/online.js

@@ -1,12 +1,20 @@
 CodeRacer.Views.Online = Backbone.View.extend({
+  initialize: function () {
+    this.listenTo(this.collection, 'add', this.render);
+  },
+
   template: JST['users/online'],
 
   render: function () {
-    var content = this.template({
-      users: this.collection
-    });
-
+    var content = this.template();
     this.$el.html(content);
+
+    this.collection.each(function (user) {
+      var view = new CodeRacer.Views.OnlineItem({
+        model: user
+      });
+      this.$('ul').append(view.render().$el);
+    }, this);
     return this;
   },
 });

app/assets/javascripts/views/users/online_item.js

@@ -0,0 +1,30 @@
+CodeRacer.Views.OnlineItem = Backbone.View.extend({
+  template: JST['users/online_item'],
+  tagName: "li",
+  className: "list-group-item clearfix",
+  events: {
+    'click .invite': 'invite'
+  },
+
+  invite: function () {
+    var stageUrl = $('.big-input').val();
+    $.ajax({
+      url: "/api/invitations",
+      type: "POST",
+      data: {
+        id: this.model.id,
+        url: stageUrl,
+        nickname: CURRENT_RACER.nickname
+      }
+    });
+  },
+
+  render: function () {
+    var content = this.template({
+      user: this.model
+    });
+
+    this.$el.html(content);
+    return this;
+  },
+});

app/assets/stylesheets/api/online_users.scss → app/assets/stylesheets/api/invitations.scss

@@ -1,3 +1,3 @@
-// Place all the styles related to the Api/OnlineUsers controller here.
+// Place all the styles related to the Api/Invitations controller here.
 // They will automatically be included in application.css.
 // You can use Sass (SCSS) here: http://sass-lang.com/

app/assets/stylesheets/application.scss

@@ -173,3 +173,11 @@ html, body {
 .timer-right {
   text-align: right
 }
+
+.start-race {
+  margin: 0 auto;
+}
+
+.invite {
+  float: right;
+}

app/assets/templates/header.jst.ejs

@@ -13,6 +13,18 @@
       <li><a href="/#/staging">Invite Friends</a></li>
       <li><a href="/#/stats">Stats</a></li>
       <li><a href="/#/settings">Settings</a></li>
+      <% if(CodeRacer.invites.length > 0) { %>
+        <li class="dropdown">
+          <a href="#" class="danger dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
+            Someone wants to race! <span class="caret"></span>
+          </a>
+          <ul class="dropdown-menu" role="menu">
+            <% invites.each(function (invite) { %>
+              <li><a href="<%= invite.get('url') %>"><%= invite.escape('nickname') %></a></li>
+            <% }) %>
+          </ul>
+        </li>
+      <% } %>
     </ul>
     <form action="/session" class="navbar-form navbar-right" role="search" method="POST">
       <input type="hidden" name="_method" value="DELETE" />

app/assets/templates/stages/show.jst.ejs

@@ -2,9 +2,12 @@
   <input type="text" class="form-control big-input" value="<%= stage.inviteUrl() %>" />
 </div>
 
-<h5>Racers</h5>
+<h4>Racers</h4>
 <div class="list-group racers"></div>
 
 <div class="form-group">
-  <button class="start-race btn btn-success pull-right btn-lg">We're all here. Lets Race!</button>
+  <button class="start-race btn btn-success btn-lg">We're all here. Lets Race!</button>
+</div>
+
+<div class="online">
 </div>

app/assets/templates/users/online.jst.ejs

@@ -1,7 +1,4 @@
+<h4>Who's online?</h4>
+
 <ul class="list-group">
-  <% users.each(function(user) { %>
-    <li class="list-group-item">
-      <%= user.escape("nickname") %>
-    </li>
-  <% }) %>
 </ul>

app/assets/templates/users/online_item.jst.ejs

@@ -0,0 +1,2 @@
+<%= user.escape("nickname") %>
+<button class="invite btn btn-success btn-sm">Invite</button>

app/controllers/api/invitations_controller.rb

@@ -0,0 +1,8 @@
+module Api
+  class InvitationsController < ApplicationController
+    def create
+      Pusher['presence'].trigger('invite', params)
+      render json: params
+    end
+  end
+end

app/helpers/api/invitations_helper.rb

@@ -0,0 +1,2 @@
+module Api::InvitationsHelper
+end

config/routes.rb

@@ -7,6 +7,7 @@
   resource :notification, only: [:show, :destroy]
 
   namespace :api, defaults: { format: :json } do
+    resources :invitations, only: [:create]
     resource :online_user, only: [:create, :destroy, :show]
     resource :setting, only: [:update]
     resources :stats, only: [:index]

spec/controllers/api/invitations_controller_spec.rb

@@ -0,0 +1,5 @@
+require 'rails_helper'
+
+RSpec.describe Api::InvitationsController, :type => :controller do
+
+end