VRFS-689 band setup work

ruby/.gitignore

@@ -15,7 +15,7 @@ spec/reports
 test/tmp
 test/version_tmp
 tmp
-
+vendor
 .idea
 *~
 *.swp

ruby/lib/jam_ruby/models/band.rb

@@ -131,34 +131,22 @@ module JamRuby
       end
 
       # name
-      unless name.nil?
-        band.name = name
-      end
+      band.name = name unless name.nil?
 
       # website
-      unless website.nil?
-        band.website = website
-      end
+      band.website = website unless website.nil?
 
       # biography
-      unless biography.nil?
-        band.biography = biography
-      end
+      band.biography = biography unless biography.nil?
 
       # city
-      unless city.nil?
-        band.city = city
-      end
+      band.city = city unless city.nil?
 
       # state
-      unless state.nil?
-        band.state = state
-      end
+      band.state = state unless state.nil?
 
       # country
-      unless country.nil?
-        band.country = country
-      end
+      band.country = country unless country.nil?
 
       # genres
       unless genres.nil?
@@ -177,14 +165,10 @@ module JamRuby
       end
 
       # photo url
-      unless photo_url.nil?
-        band.photo_url = photo_url
-      end
+      band.photo_url = photo_url unless photo_url.nil?
 
       # logo url
-      unless logo_url.nil?
-        band.logo_url = logo_url
-      end
+      band.logo_url = logo_url unless logo_url.nil?
 
       band.updated_at = Time.now.getutc
       band.save

web/app/assets/javascripts/band_setup.js

@@ -0,0 +1,156 @@
+(function(context,$) {
+
+    "use strict";
+
+    context.JK = context.JK || {};
+    // TODO: MUCH OF THIS CLASS IS REPEATED IN createSession.js - REFACTOR
+    context.JK.BandSetupScreen = function(app) {
+        var logger = context.JK.logger;
+        var rest = context.JK.Rest();
+        var band = {};
+        var friendSelectorDialog = null;
+        var autoComplete = null;
+        var userNames = [];
+        var userIds = [];
+        var userPhotoUrls = [];
+        var selectedFriendIds = {};
+
+        function resetForm() {
+
+        }
+
+        function formatGenres(genres) {
+            var formattedGenres = '';
+            if (genres) {
+                for (var i=0; i < genres.length; i++) {
+                    var genre = genres[i];
+                    formattedGenres += genre.description;
+                    if (i < genres.length -1) {
+                        formattedGenres += ', ';
+                    }
+                }
+            }
+            return formattedGenres;
+        }
+
+        function createBand() {
+
+        }
+
+        function createBandInvitation() {
+
+        }
+
+        function beforeShow(data) {
+            userNames = [];
+            userIds = [];
+            userPhotoUrls = [];
+            resetForm();
+        }
+
+        function afterShow(data) {
+            $.ajax({
+                type: "GET",
+                url: "/api/users/" + context.JK.currentUserId + "/friends",
+                async: false
+            }).done(function(response) {
+                $.each(response, function() {
+                    userNames.push(this.name);
+                    userIds.push(this.id);
+                    userPhotoUrls.push(this.photo_url);
+                });
+
+                var autoCompleteOptions = {
+                    lookup: { suggestions: userNames, data: userIds },
+                    onSelect: addInvitation
+                };
+                if (!autoComplete) {
+                    autoComplete = $('#band-invitee-input').autocomplete(autoCompleteOptions);
+                }
+                else {
+                    autoComplete.setOptions(autoCompleteOptions);
+                }
+            });
+
+            $(".autocomplete").width("150px");
+        }
+
+        function friendSelectorCallback(newSelections) {
+            var keys = Object.keys(newSelections);
+            for (var i=0; i < keys.length; i++) {
+                addInvitation(newSelections[keys[i]].userName, newSelections[keys[i]].userId);
+            }
+        }
+
+        function addInvitation(value, data) {
+            if ($('#selected-band-invitees div[user-id=' + data + ']').length === 0) {
+                var template = $('#template-band-invitation').html();
+                var invitationHtml = context.JK.fillTemplate(template, {userId: data, userName: value});
+                $('#selected-band-invitees').append(invitationHtml);
+                $('#band-invitee-input').select();
+                selectedFriendIds[data] = true;
+            }
+            else {
+                $('#band-invitee-input').select();
+                context.alert('Invitation already exists for this musician.');
+            }
+        }
+
+        function removeInvitation(evt) {
+            delete selectedFriendIds[$(evt.currentTarget).parent().attr('user-id')];
+            $(evt.currentTarget).closest('.invitation').remove();
+        }
+
+        function events() {
+            $('#selected-band-invitees').on("click", ".invitation a", removeInvitation);
+
+            // friend input focus
+            $('#band-invitee-input').focus(function() {
+                $(this).val('');
+            });
+
+            // friend input blur
+            $('#band-invitee-input').blur(function() {
+                $(this).val('Type a friend\'s name');
+            });
+
+            $('#btn-band-setup-cancel').click(function() {
+                context.location = "#/";
+            });
+
+            $('#btn-band-setup-next').click(function() {
+                $("#band-setup-step-2").show();
+                $("#band-setup-step-1").hide();
+            });
+
+            $('#btn-band-setup-back').click(function() {
+                $("#band-setup-step-1").show();
+                $("#band-setup-step-2").hide();
+            });
+
+            $('#btn-band-setup-create').click(createBand);
+
+            $('#btn-band-choose-friends').click(function() {
+                friendSelectorDialog.showDialog(selectedFriendIds);
+            });
+        }
+
+        function initialize(friendSelectorDialogInstance) {
+            friendSelectorDialog = friendSelectorDialogInstance;
+            friendSelectorDialog.setCallback(friendSelectorCallback);
+            events();
+
+            var screenBindings = {
+                'beforeShow': beforeShow,
+                'afterShow': afterShow
+            };
+
+            app.bindScreen('band/setup', screenBindings);
+        }
+
+        this.initialize = initialize;
+        this.afterShow = afterShow;
+        return this;
+    };
+
+ })(window,jQuery);

web/app/assets/javascripts/createSession.js

@@ -6,7 +6,7 @@
     context.JK.CreateSessionScreen = function(app) {
         var logger = context.JK.logger;
         var realtimeMessaging = context.JK.JamServer;
-        var friendSelectorDialog = new context.JK.FriendSelectorDialog(app, friendSelectorCallback);
+        var friendSelectorDialog = null;
         var invitationDialog = null;
         var autoComplete = null;
         var userNames = [];
@@ -36,16 +36,16 @@
                     userPhotoUrls.push(this.photo_url);
                 });
 
-                var autoCompleteOptions = {
-                    lookup: { suggestions: userNames, data: userIds },
-                    onSelect: addInvitation
-                };
-                if (!autoComplete) {
-                    autoComplete = $('#friend-input').autocomplete(autoCompleteOptions);
-                }
-                else {
-                    autoComplete.setOptions(autoCompleteOptions);
-                }
+                // var autoCompleteOptions = {
+                //     lookup: { suggestions: userNames, data: userIds },
+                //     onSelect: addInvitation
+                // };
+                // if (!autoComplete) {
+                //     autoComplete = $('#friend-input').autocomplete(autoCompleteOptions);
+                // }
+                // else {
+                //     autoComplete.setOptions(autoCompleteOptions);
+                // }
             });
 
             // var autoCompleteOptions = {
@@ -419,8 +419,9 @@
             });
         }
 
-        function initialize(invitationDialogInstance) {
-            friendSelectorDialog.initialize();
+        function initialize(invitationDialogInstance, friendSelectorDialogInstance) {
+            friendSelectorDialog = friendSelectorDialogInstance;
+            friendSelectorDialog.setCallback(friendSelectorCallback);
             invitationDialog = invitationDialogInstance;
             events();
             loadBands();

web/app/assets/javascripts/friendSelector.js

@@ -3,11 +3,12 @@
     "use strict";
 
     context.JK = context.JK || {};
-    context.JK.FriendSelectorDialog = function(app, saveCallback) {
+    context.JK.FriendSelectorDialog = function(app) {
         var logger = context.JK.logger;
         var rest = context.JK.Rest();
         var selectedIds = {};
         var newSelections = {};
+        var mySaveCallback;
 
         function events() {
             $('#btn-save-friends').click(saveFriendInvitations);
@@ -63,7 +64,7 @@
 
         function saveFriendInvitations(evt) {
             evt.stopPropagation();
-            saveCallback(newSelections);
+            mySaveCallback(newSelections);
         }
 
         function showDialog(ids) {
@@ -78,6 +79,10 @@
             events();
         };
 
+        this.setCallback = function(callback) {
+            mySaveCallback = callback;
+        }
+
         this.showDialog = showDialog;
         return this;
     };

web/app/assets/javascripts/jam_rest.js

@@ -44,6 +44,28 @@
             });
         }
 
+        function createBand(band) {
+            return $.ajax({
+                type: "POST",
+                dataType: "json",
+                url: '/api/bands',
+                contentType: 'application/json',
+                processData: false,
+                data: JSON.stringify(band)
+            });
+        }
+
+        function updateBand(band) {
+            return $.ajax({
+                type: "POST",
+                dataType: "json",
+                url: '/api/bands/' + band.id,
+                contentType: 'application/json',
+                processData: false,
+                data: JSON.stringify(band)
+            });
+        }
+
         function getSession(id) {
             var url = "/api/sessions/" + id;
             return $.ajax({

web/app/assets/javascripts/utils.js

@@ -85,6 +85,10 @@
         return photo_url ? photo_url : "/assets/shared/avatar_generic.png";
     };
 
+    context.JK.resolveBandAvatarUrl = function(photo_url) {
+        return photo_url ? photo_url : "/assets/shared/avatar_generic_band.png";
+    };
+
     context.JK.getInstrumentIconMap24 = function() {
         return instrumentIconMap24;
     };

web/app/assets/stylesheets/client/band.css.scss

@@ -1,5 +1,22 @@
 @import "client/common.css.scss";
 
+.band-setup-bio {
+    height:90px;
+    overflow:auto;
+}
+
+.band-setup-genres {
+    width:100%;
+    height:90px;
+    background-color:#c5c5c5;
+    border:none;
+    -webkit-box-shadow: inset 2px 2px 3px 0px #888;
+    box-shadow: inset 2px 2px 3px 0px #888;
+    color:#666;
+    overflow:auto;
+    font-size:14px;
+}
+
 .band-profile-header {
     padding:20px;
     height:120px;

web/app/assets/stylesheets/client/client.css

@@ -22,7 +22,7 @@
  *= require ./sidebar
  *= require ./home
  *= require ./profile
- *= require ./bandProfile
+ *= require ./band
  *= require ./findSession
  *= require ./session
  *= require ./account

web/app/assets/stylesheets/client/content.css.scss

@@ -306,7 +306,7 @@ ul.shortcuts {
     padding:2px;
   }
 
-  .account-home, .audio, .get-help, .download-app, .invite-friends {
+  .account-home, .band-setup, .audio, .get-help, .download-app, .invite-friends {
     border-bottom:1px;
     border-style:solid;
     border-color:#ED3618;

web/app/controllers/api_bands_controller.rb

@@ -16,7 +16,7 @@ class ApiBandsController < ApiController
   end
 
   def create
-    @band = Band.save(params[:id],
+    @band = Band.save(nil,
                       params[:name],
                       params[:website],
                       params[:biography],

web/app/views/clients/_band_setup.html.erb

@@ -0,0 +1,122 @@
+<!-- Profile -->
+<div layout="screen" layout-id="band/setup" class="screen secondary">
+    <div class="content-head">
+        <div class="content-icon">
+            <%= image_tag "content/icon_bands.png", :size => "19x19" %>
+        </div>
+
+        <h1>set up band</h1>
+
+        <%= render "screen_navigation" %>
+    </div>
+    <form id="band-setup-form">
+        <div style="display:block;">
+            <div class="content-scroller" style="height:350px;">
+                <div id="band-setup-step-1" class="content-wrapper" style="padding:10px 35px 10px 35px;">
+                    <br />
+                    <table width="105%" cellpadding="0" cellspacing="0">
+                        <tr>
+                            <td valign="top" colspan="2">
+                                <h2>Step 1: General Information</h2>
+                            </td>
+                            <td valign="middle" rowspan="2" width="33%">
+                                <a href="#" class="avatar-profile">
+                                    <%= image_tag "shared/avatar_generic_band.png", {:id => "band-avatar", :align=>"absmiddle", :height => 88, :width => 88 } %>
+                                </a>
+                                <br/><br/>
+                                <a href="#" class="small ml20">Upload Band Photo</a><br clear="all"><br/>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td valign="middle" width="33%">Band Name:<br />
+                                <input id="band-name" type="text" value="" class="w80"><br />
+                            </td>
+                            <td valign="middle" width="33%">Web Site:<br />
+                                <input id="web-site" type="text" value="" class="w80">
+                            </td>
+                        </tr>
+                        <tr>
+                            <td valign="middle">Country:<br />
+                                <select class="w80"><option value="US">United States</option></select><br /><br />
+                            </td>
+                            <td valign="middle">State/Region:<br />
+                                <select class="w80"><option>Texas</option></select><br /><br />
+                            </td>
+                            <td valign="middle">City:<br />
+                                <select id="" class="w80"><option>Austin</option></select><br /><br />
+                            </td>
+                        </tr>
+                        <tr>
+                            <td valign="top">Genres:<br />
+                                <div class="band-setup-genres w90">
+                                    <table id="band-setup-genres" width="100%" cellpadding="0" cellspacing="6"></table>
+                                </div>
+                            </td>
+                            <td valign="top" colspan="2">Description / Bio:<br />
+                                <textarea class="band-setup-bio w90"></textarea>
+                            </td>
+                        </tr>
+                    </table>
+                    <br clear="all" />
+                    <div class="right">
+                        <a id="btn-band-setup-cancel" class="button-grey">CANCEL</a>&nbsp;&nbsp;
+                        <a id="btn-band-setup-next" class="button-orange">NEXT</a>
+                    </div>
+                </div>
+                <div id="band-setup-step-2" class="content-wrapper" style="padding:10px 35px 10px 35px; display:none;">
+                    <br/>
+                    <h2>Step 2: Add Band Members</h2><br/>
+                    <div class="left w70">If your bandmates are already on JamKazam, start typing their names in the box<br/> below, or click the Choose Friends button to select them.</div>
+                    <div class="right" layout-link="select-friends">
+                        <a href="#" id="btn-band-choose-friends" class="button-grey right">CHOOSE FRIENDS</a>
+                    </div>
+                    <br clear="all" />
+                    <br />
+                    
+                    <div class="friendbox">
+                        <div id="selected-band-invitees"></div>
+                        <input id="band-invitee-input" type="text" placeholder="Type a friend's name" width="150px" />
+                    </div>
+                    <br/><br/>
+                    If your bandmates are not on JamKazam yet, use any of the options below to invite them to join the service.<br/><br/>
+                  
+                    <div class="left mr20">
+                        <a href="#" class="lightgrey">
+                            <%= image_tag "content/icon_facebook.png", {:align=>"absmiddle", :height => 24, :width => 24 } %>
+                            &nbsp;&nbsp;Facebook
+                        </a>
+                    </div>
+                    <div class="left mr20">
+                        <a href="#" class="lightgrey">
+                            <%= image_tag "content/icon_google.png", {:align=>"absmiddle", :height => 26, :width => 26 } %>
+                            &nbsp;&nbsp;Google+
+                        </a>
+                    </div>
+                    <div class="left">
+                        <a href="#" class="lightgrey">
+                            <%= image_tag("content/icon_gmail.png", :size => "24x24", :align => "absmiddle") %>
+                            &nbsp;&nbsp;E-mail
+                        </a>
+                    </div>
+                    <br clear="all" />
+                    <div class="right">
+                        <a id="btn-band-setup-back" class="button-grey">BACK</a>&nbsp;&nbsp;
+                        <a id="btn-band-setup-create" class="button-orange">CREATE BAND</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div id="band-setup-step-2" style="display:none;">
+        </div>
+    </form>
+</div>
+
+<script type="text/template" id="template-band-setup-genres">
+    <tr><td><input type="checkbox" />{genre}</td></tr>
+</script>
+
+<script type="text/template" id="template-band-invitation">
+    <div user-id="{userId}" class="invitation">{userName} 
+        <a><%= image_tag "shared/icon_delete_sm.png", :size => "13x13" %></a>
+    </div>
+</script>

web/app/views/clients/_createSession.html.erb

@@ -169,8 +169,6 @@
     </div>
 </div>
 
-<%= render "friendSelector" %>
-
 <!-- Added Invitation Template -->
 <script type="text/template" id="template-added-invitation">
     <div user-id="{userId}" class="invitation">{userName} 

web/app/views/clients/index.html.erb

@@ -4,7 +4,7 @@
         <p>Connecting...</p>
     </div>
 </div>
-    <div class="dialog-overlay op70" style="display:none; width:100%; height:100%; z-index:99;"></div>
+<div class="dialog-overlay op70" style="display:none; width:100%; height:100%; z-index:99;"></div>
 
 <%= render "header" %>
 <%= render "home" %>
@@ -21,6 +21,7 @@
 <%= render "session" %>
 <%= render "profile" %>
 <%= render "bandProfile" %>
+<%= render "band_setup" %>
 <%= render "feed" %>
 <%= render "bands" %>
 <%= render "musicians" %>
@@ -28,6 +29,7 @@
 <%= render "account" %>
 <%= render "account_identity" %>
 <%= render "account_profile" %>
+<%= render "friendSelector" %>
 <%= render "account_profile_avatar" %>
 <%= render "account_audio_profile" %>
 <%= render "invitationDialog" %>
@@ -88,6 +90,9 @@
             var invitationDialog = new JK.InvitationDialog(JK.app);
             invitationDialog.initialize();
 
+            var friendSelectorDialog = new JK.FriendSelectorDialog(JK.app);
+            friendSelectorDialog.initialize();
+
             var userDropdown = new JK.UserDropdown(JK.app);
             JK.UserDropdown = userDropdown;
             userDropdown.initialize(invitationDialog);
@@ -131,7 +136,10 @@
             JK.Banner.initialize();
 
             var createSessionScreen = new JK.CreateSessionScreen(JK.app);
-            createSessionScreen.initialize(invitationDialog);
+            createSessionScreen.initialize(invitationDialog, friendSelectorDialog);
+
+            var bandSetupScreen = new JK.BandSetupScreen(JK.app);
+            bandSetupScreen.initialize(friendSelectorDialog);
 
             var findSessionScreen = new JK.FindSessionScreen(JK.app);
             var sessionLatency = null;

web/app/views/users/_user_dropdown.html.erb

@@ -19,6 +19,7 @@
     <!--<li class="subscriptions"><%= link_to "Subscriptions", '/client#/account/subscriptions' %></li> -->
     <!-- <li class="payments"><%= link_to "Payments", '/client#/account/payments' %></li> -->
     <li class="audio"><%= link_to "Audio Gear", '/client#/account/audio' %></li>
+    <li class="band-setup"><%= link_to "Band Setup", '/client#/band/setup' %></li>
     <li class="invite-friends"><span class='menuheader'><span class="arrow-right"></span><%= link_to "Invite Friends", '#' %></span>
       <ul class="shortcuts-submenu">
         <li class="google-invite"><%= link_to "Google", '#' %></li>