VRFS-686 band profile members module

ruby/lib/jam_ruby/models/band.rb

@@ -61,6 +61,10 @@ module JamRuby
       BandMusician.create(:band_id => self.id, :user_id => user_id, :admin => admin)
     end
 
+    def self.musician_index(band_id)
+      @musicians = User.joins(:band_musicians).where(:bands_musicians => {:band_id => "#{band_id}"})
+    end
+
     def self.recording_index(current_user, band_id)
       hide_private = false
       band = Band.find(band_id)

web/app/assets/javascripts/bandProfile.js

@@ -7,6 +7,7 @@
         var logger = context.JK.logger;
         var bandId;
         var band = {};
+        var instrument_logo_map = context.JK.getInstrumentIconMap24();
 
         function beforeShow(data) {
             bandId = data.id;
@@ -32,9 +33,15 @@
 
         /****************** MAIN PORTION OF SCREEN *****************/
 
-        function addFollowing() {
+        function addFollowing(isBand, id) {
             var newFollowing = {};
-            newFollowing.band_id = bandId;
+
+            if (!isBand) {
+                newFollowing.user_id = id;
+            }
+            else {
+                newFollowing.band_id = id;
+            }
 
             var url = "/api/users/" + context.JK.currentUserId + "/followings";
             $.ajax({
@@ -46,7 +53,12 @@
                 processData: false,
                 success: function(response) {
                     renderActive();  // refresh stats
-                    configureFollowingButton(true);
+                    if (isBand) {
+                        configureBandFollowingButton(true);
+                    }
+                    else {
+                        configureMemberFollowingButton(true);
+                    }
                 },
                 error: app.ajaxError
             });
@@ -72,7 +84,7 @@
                 success: function(response) {
                     renderActive();  // refresh stats
                     if (isBand) {
-                        configureFollowingButton(false);
+                        configureBandFollowingButton(false);
                     }
                     else {
                         configureMemberFollowingButton(false, id);
@@ -82,6 +94,30 @@
             });
         }
 
+        function isFollowingMember(userId) {
+            var alreadyFollowing = false;
+
+            var url = "/api/users/" + context.JK.currentUserId + "/followings/" + userId;
+            $.ajax({
+                type: "GET",
+                dataType: "json",
+                url: url,
+                async: false,
+                processData: false,
+                success: function(response) {
+                    if (response.id !== undefined) {
+                        alreadyFollowing = true;
+                    }
+                    else {
+                        alreadyFollowing = false;
+                    }
+                },
+                error: app.ajaxError
+            });
+
+            return alreadyFollowing;
+        }
+
         function isFollowing() {
             var alreadyFollowing = false;
 
@@ -106,7 +142,7 @@
             return alreadyFollowing;
         }
 
-        function configureFollowingButton(following) {
+        function configureBandFollowingButton(following) {
             $('#btn-follow-band').unbind("click");
 
             if (following) {
@@ -117,7 +153,9 @@
             }
             else {
                 $('#btn-follow-band').text('FOLLOW');
-                $('#btn-follow-band').click(addFollowing);
+                $('#btn-follow-band').click(function() {
+                    addFollowing(true, bandId);
+                });
             }
         }
 
@@ -133,7 +171,9 @@
             }
             else {
                 $btnFollowMember.text('FOLLOW');
-                $btnFollowMember.click(addFollowing);
+                $btnFollowMember.click(function() {
+                    addFollowing(false, userId);
+                });
             }
         }
 
@@ -297,7 +337,7 @@
             $('#band-profile-social').hide();
 
             $('.band-profile-nav a.active').removeClass('active');
-            $('.band-profile-nav a.#band-profile-bands-link').addClass('active');
+            $('.band-profile-nav a.#band-profile-members-link').addClass('active');
 
             bindMembers();
         }
@@ -312,21 +352,42 @@
                  processData:false,
                  success: function(response) {
                      $.each(response, function(index, val) {
+                        var instrumentLogoHtml = '';
+                        var musician = val;
+                        if ("instruments" in musician) {
+                            for (var j=0; j < musician.instruments.length; j++) {
+                                var instrument = musician.instruments[j];
+                                var inst = '../assets/content/icon_instrument_default24.png';
+                                if (instrument.instrument_id in instrument_logo_map) {
+                                    inst = instrument_logo_map[instrument.instrument_id];
+                                }
+                                instrumentLogoHtml += '<img src="' + inst + '" width="24" height="24" />&nbsp;';
+                            }
+                        }
+
                          var template = $('#template-band-profile-members').html();
-                         var bandHtml = context.JK.fillTemplate(template, {
+                         var memberHtml = context.JK.fillTemplate(template, {
-                             bandId: val.id,
+                            userId: musician.id,
-                             band_url: "/#/bandProfile/" + val.id,
+                            profile_url: "/#/profile/" + musician.id,
-                             avatar_url: context.JK.resolveAvatarUrl(val.logo_url),
+                            avatar_url: context.JK.resolveAvatarUrl(musician.photo_url),
-                             name: val.name,
+                            name: musician.name,
-                             location: val.location,
+                            location: musician.location,
-                             genres: formatGenres(val.genres)
+                            friend_count: musician.friend_count,
+                            follower_count: musician.follower_count,
+                            recording_count: musician.recording_count,
+                            session_count: musician.session_count,
+                            instruments: instrumentLogoHtml
                          });
 
-                         $('#profile-bands').append(bandHtml);
+                         $('#band-profile-members').append(memberHtml);
 
-                         // wire up Band Follow button click handler
+                         // wire up Follow button click handler
-                         var following = isFollowingBand(val.id);
+                         var following = isFollowingMember(musician.id);
-                         configureMemberFollowingButton(following, val.id);
+                         configureMemberFollowingButton(following, musician.id);
+
+                         // TODO: wire up Friend button click handler
+                         // var friend = isFriend(musician.id);
+                         // configureMemberFriendButton(friend, musician.id);
                      });
                  },
                  error: app.ajaxError
@@ -357,7 +418,7 @@
 
             // wire up Follow click
             var following = isFollowing();
-            configureFollowingButton(following);
+            configureBandFollowingButton(following);
         }
 
         function initialize() {

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

@@ -34,7 +34,7 @@
 }
 
 .band-profile-nav a {
-    width:19%;
+    width:24%;
     text-align:center;
     height: 27px;
     display: block;
@@ -144,7 +144,7 @@
 }
 
 .band-profile-members {
-    width:215px;
+    width:100%;
     min-height:90px;
     background-color:#242323;
     position:relative;

web/app/controllers/api_bands_controller.rb

@@ -47,6 +47,23 @@ class ApiBandsController < ApiController
     respond_with @band, responder: ApiResponder, :status => :ok   
   end
 
+  def musician_index
+    unless params[:id].blank?
+      @musicians = Band.musician_index(params[:id])
+
+    else
+      render :json => { :message => "Band ID is required." }, :status => 400
+    end
+  end
+
+  def musician_create
+  end
+
+  def musician_destroy
+    unless params[:id].blank? || params[:user_id].blank?
+    end
+  end
+
   ###################### FOLLOWERS ########################
   def liker_index
     # NOTE: liker_index.rabl template references the likers property

web/app/views/api_bands/musician_index.rabl

@@ -0,0 +1,11 @@
+collection @musicians
+
+attributes :id, :first_name, :last_name, :name, :city, :state, :country, :location, :online, :photo_url, :musician, :gender, :birth_date, :internet_service_provider, :friend_count, :liker_count, :like_count, :band_like_count, :follower_count, :following_count, :band_following_count, :recording_count, :session_count
+
+node :instruments do |musician|
+  unless musician.instruments.nil? || musician.instruments.size == 0
+    child :musician_instruments => :instruments do
+      attributes :description, :proficiency_level, :priority, :instrument_id
+    end
+  end
+end

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

@@ -2,7 +2,7 @@
 <div layout="screen" layout-id="bandProfile" layout-arg="id" class="screen secondary">
     <div class="content-head">
         <div class="content-icon">
-            <%= image_tag "content/icon_profile.png", :size => "19x19" %>
+            <%= image_tag "content/icon_bands.png", :size => "19x19" %>
         </div>
 
         <h1>band profile</h1>
@@ -30,10 +30,10 @@
 
             <!-- profile navigation -->
             <div class="band-profile-nav">
-                <a id="band-profile-about-link" class="active">about</a>
+                <a id="band-profile-about-link" class="band active">about</a>
-                <a id="band-profile-history-link">history</a>
+                <a id="band-profile-history-link" class="band">history</a>
-                <a id="band-profile-members-link">members</a>
+                <a id="band-profile-members-link" class="band">members</a>
-                <a id="band-profile-social-link" class="last">social</a>
+                <a id="band-profile-social-link" class="band last">social</a>
             </div>
         </div>
         <br clear="all" />
@@ -76,12 +76,22 @@
         <div class="avatar-small">
             <img src="{avatar_url}" width="275" height="183" />
         </div>
-        <div class="band-profile-member-name"><a href="{band_url}">{name}</a><br />
+        <div class="profile-band-name">
+            {name}<br />
             <span class="band-profile-member-location">{location}</span>
+            <br clear="left" /><br />
+            <div style="width:100px;">{instruments}</div><br /><br />
+            {friend_count}&nbsp;<img src="../assets/content/icon_friend.png" width="22" height="12" align="absmiddle" />&nbsp;
+            {follower_count}&nbsp;<img src="../assets/content/icon_followers.png" width="22" height="12" align="absmiddle" />&nbsp;
+            {recording_count}&nbsp;<img src="../assets/content/icon_recordings.png" width="12" height="13" align="absmiddle" />&nbsp;
+            {session_count}&nbsp;<img src="../assets/content/icon_session_tiny.png" width="12" height="12" align="absmiddle" />
+        </div>
+        <div style="height:90px" class="left ml20 f11 whitespace w35"><br />
+            {biography}<br /><br />
+            <a class="button-orange smallbutton m0" href="{profile_url}">PROFILE</a>&nbsp;&nbsp;
+            <a id="btn-follow-member" class="button-orange smallbutton m0">FOLLOW</a>&nbsp;&nbsp;
+            <a id="btn-friend-member" class="button-orange smallbutton m0">CONNECT</a>
         </div>
-        <br clear="left" />
-        <div class="band-profile-member-genres">{genres}</div>
-        <a id="btn-follow-member" class="button-orange smallbutton right">FOLLOW</a>
     </div>
 </script>
 

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

@@ -66,8 +66,6 @@
                 <br clear="all" />
             </div>
             <div id="profile-bands" class="profile-wrapper">
-                <div class="profile-band-list-result">
-                </div>
                 <br clear="all" />
             </div>
             <div id="profile-social" class="profile-wrapper">