VRFS-819 VRFS-76 band profile updates

.gitignore

@@ -1,3 +1,4 @@
 .idea
 *~
 *.swp
+HTML

web/app/assets/javascripts/profile.js

@@ -8,6 +8,8 @@
         var userId;
         var user = {};
 
+        var instrument_logo_map = context.JK.getInstrumentIconMap24();
+
         var proficiencyDescriptionMap = {
             "1": "BEGINNER",
             "2": "INTERMEDIATE",
@@ -481,14 +483,46 @@
                  processData:false,
                  success: function(response) {
                      $.each(response, function(index, val) {
+
+                        // build band member HTML
+                        var musicianHtml = '';
+                        if ("musicians" in val) {
+                            for (var i=0; i < val.musicians.length; i++) {
+                                var musician = val.musicians[i];
+                                var instrumentLogoHtml = '';
+                                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;';
+                                    }
+                                }
+                                // this template is in _findSession.html.erb
+                                var musicianTemplate = $('#template-musician-info').html();
+                                musicianHtml += context.JK.fillTemplate(musicianTemplate, {
+                                    avatar_url: context.JK.resolveAvatarUrl(musician.photo_url),
+                                    profile_url: "/#/profile/" + musician.id,
+                                    musician_name: musician.name,
+                                    instruments: instrumentLogoHtml
+                                });
+                            }
+                        }
                         var template = $('#template-profile-bands').html();
                         var bandHtml = context.JK.fillTemplate(template, {
                             bandId: val.id,
+                            biography: val.biography,
                             band_url: "/#/bandProfile/" + val.id,
                             avatar_url: context.JK.resolveAvatarUrl(val.logo_url),
                             name: val.name,
                             location: val.location,
-                             genres: formatGenres(val.genres)
+                            genres: formatGenres(val.genres),
+                            follower_count: val.follower_count,
+                            recording_count: val.recording_count,
+                            session_count: val.session_count,
+                            musicians: musicianHtml
                         });
 
                         $('#profile-bands').append(bandHtml);
@@ -518,7 +552,7 @@
 
         function addBandFollowing(evt) {
             evt.stopPropagation();
-            var bandId = $(this).parent().attr('band-id');
+            var bandId = $(this).parent().parent().attr('band-id');
 
             var newFollowing = {};
             newFollowing.band_id = bandId;
@@ -532,7 +566,7 @@
                 data: JSON.stringify(newFollowing),
                 processData: false,
                 success: function(response) {
-                    renderActive();  // refresh stats
+                    renderBands();  // refresh stats
                     configureBandFollowingButton(true, bandId);
                 },
                 error: app.ajaxError

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

@@ -350,3 +350,33 @@ ul.shortcuts {
   white-space:normal;
 }
 
+.smallbutton {
+  font-size:10px !important;
+  padding:2px 8px !important;
+}
+
+.whitespace {
+  white-space:normal;
+}
+
+.w0 {width:0% !important}
+.w5 {width:5% !important}
+.w10 {width:10% !important}
+.w15 {width:15% !important}
+.w20 {width:20% !important}
+.w25 {width:25% !important}
+.w30 {width:30% !important}
+.w35 {width:35% !important}
+.w40 {width:40% !important}
+.w45 {width:45% !important}
+.w50 {width:50% !important}
+.w55 {width:55% !important}
+.w60 {width:60% !important}
+.w65 {width:65% !important}
+.w70 {width:70% !important}
+.w75 {width:75% !important}
+.w80 {width:80% !important}
+.w85 {width:85% !important}
+.w90 {width:90% !important}
+.w95 {width:95% !important}
+.w100 {width:100% !important}

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

@@ -144,7 +144,7 @@
 }
 
 .profile-bands {
-    width:215px;
+    width:100%;
     min-height:90px;
     background-color:#242323;
     position:relative;
@@ -173,6 +173,15 @@
     padding-right:5px;
 }
 
+.profile-band-list-result {
+    width:100%;
+    min-height:85px;
+    background-color:#242323;
+    position:relative;
+    margin:10px 0px 10px 0px;
+    padding-bottom:5px;
+}
+
 .profile-social-left {
     float:left;
     width:32%;
@@ -216,3 +225,15 @@
 .profile-block-city {
     font-size:12px;
 }
+
+.profile-musicians {
+    margin-top:-3px;
+    font-size:11px;
+}
+
+.profile-musicians td {
+    border-right:none;
+    border-top:none;
+    padding:3px;
+    vertical-align:middle;
+}

web/app/views/api_users/band_index.rabl

@@ -1,7 +1,24 @@
 collection @bands
 
 # do not retrieve all child collections when showing a list of bands
-attributes :id, :name, :location, :photo_url, :logo_url
+attributes :id, :name, :city, :state, :country, :location, :website, :biography, :photo_url, :logo_url, :liker_count, :follower_count, :recording_count, :session_count
+
+node :musicians do |band|
+  unless band.users.nil? || band.users.size == 0
+    child :users => :musicians do
+      attributes :id, :first_name, :last_name, :name, :photo_url
+
+      # TODO: figure out how to omit empty arrays
+      node :instruments do |user|
+        unless user.instruments.nil? || user.instruments.size == 0
+          child :musician_instruments => :instruments do
+            attributes :instrument_id, :description, :proficiency_level, :priority
+          end
+        end
+      end
+    end
+  end
+end
 
 node :genres do |band|
   unless band.genres.nil? || band.genres.size == 0

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

@@ -66,6 +66,8 @@
                 <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">
@@ -106,12 +108,25 @@
         <div class="avatar-small">
             <img src="{avatar_url}" width="275" height="183" />
         </div>
-        <div class="profile-band-name"><a href="{band_url}">{name}</a><br />
+        <div class="profile-band-name">
+            {name}<br />
             <span class="profile-band-location">{location}</span>
+            <br clear="left" /><br />
+            <div style="width:50px;">{genres}</div><br /><br />
+            {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="{band_url}">PROFILE</a>&nbsp;&nbsp;
+            <a id="btn-follow-band" class="button-orange smallbutton m0">FOLLOW</a>
+        </div>
+        <div class="left ml10 w25">
+            <table class="profile-musicians" cellpadding="0" cellspacing="5">
+                {musicians}
+            </table>
         </div>
-        <br clear="left" />
-        <div class="profile-band-genres">{genres}</div>
-        <a id="btn-follow-band" class="button-orange smallbutton right">FOLLOW</a>
     </div>
 </script>