From 3cb28274c021c49a0fbe4e239fad9ea6cb0ff65e Mon Sep 17 00:00:00 2001 From: Brian Smith Date: Fri, 26 Apr 2013 23:33:52 -0400 Subject: [PATCH] VRFS-306 musician profile social tab --- app/assets/javascripts/profile.js | 185 +++++++++++++++++- app/assets/javascripts/searchResults.js | 2 +- .../stylesheets/client/profile.css.scss | 57 +++++- app/controllers/api_users_controller.rb | 2 +- app/views/api_users/follower_index.rabl | 26 ++- app/views/api_users/following_index.rabl | 24 ++- app/views/clients/_profile.html.erb | 39 +++- config/routes.rb | 2 +- 8 files changed, 303 insertions(+), 34 deletions(-) diff --git a/app/assets/javascripts/profile.js b/app/assets/javascripts/profile.js index 9cf4a771d..83c3819d0 100644 --- a/app/assets/javascripts/profile.js +++ b/app/assets/javascripts/profile.js @@ -27,15 +27,94 @@ function afterShow(data) { resetForm(); events(); - bindUser(); + renderActive(); } function resetForm() { $('#profile-instruments').empty(); + + $('#profile-about').show(); + $('#profile-history').hide(); + $('#profile-bands').hide(); + $('#profile-social').hide(); + $('#profile-favorites').hide(); + + $('.profile-nav a.active').removeClass('active'); + $('.profile-nav a.#profile-about-link').addClass('active'); + } + + function renderAbout() { + $('#profile-instruments').empty(); + + $('#profile-about').show(); + $('#profile-history').hide(); + $('#profile-bands').hide(); + $('#profile-social').hide(); + $('#profile-favorites').hide(); + + $('.profile-nav a.active').removeClass('active'); + $('.profile-nav a.#profile-about-link').addClass('active'); + + bindAbout(); + } + + function renderHistory() { + $('#profile-about').hide(); + $('#profile-history').show(); + $('#profile-bands').hide(); + $('#profile-social').hide(); + $('#profile-favorites').hide(); + + $('.profile-nav a.active').removeClass('active'); + $('.profile-nav a.#profile-history-link').addClass('active'); + } + + function renderBands() { + $('#profile-about').hide(); + $('#profile-history').hide(); + $('#profile-bands').show(); + $('#profile-social').hide(); + $('#profile-favorites').hide(); + + $('.profile-nav a.active').removeClass('active'); + $('.profile-nav a.#profile-bands-link').addClass('active'); + } + + function renderSocial() { + $('#profile-social-friends').empty(); + $('#profile-social-followings').empty(); + $('#profile-social-followers').empty(); + + $('#profile-about').hide(); + $('#profile-history').hide(); + $('#profile-bands').hide(); + $('#profile-social').show(); + $('#profile-favorites').hide(); + + $('.profile-nav a.active').removeClass('active'); + $('.profile-nav a.#profile-social-link').addClass('active'); + + bindSocial(); + } + + function renderFavorites() { + $('#profile-about').hide(); + $('#profile-history').hide(); + $('#profile-bands').hide(); + $('#profile-social').hide(); + $('#profile-favorites').show(); + + $('.profile-nav a.active').removeClass('active'); + $('.profile-nav a.#profile-favorites-link').addClass('active'); } function events() { - // TODO: wire up panel clicks + // wire up panel clicks + $('#profile-about-link').click(renderAbout); + $('#profile-history-link').click(renderHistory); + $('#profile-bands-link').click(renderBands); + $('#profile-social-link').click(renderSocial); + $('#profile-favorites-link').click(renderFavorites); // wire up buttons if you're not viewing your own profile if (userId != context.JK.currentUserId) { @@ -68,8 +147,7 @@ url: url, processData: false, success: function(response) { - resetForm(); - bindUser(); // refresh stats + renderActive(); // refresh stats configureFriendButton(false); }, error: app.ajaxError @@ -130,8 +208,7 @@ data: JSON.stringify(newFollowing), processData: false, success: function(response) { - resetForm(); - bindUser(); // refresh stats + renderActive(); // refresh stats configureFollowingButton(true); }, error: app.ajaxError @@ -151,8 +228,7 @@ data: JSON.stringify(following), processData: false, success: function(response) { - resetForm(); - bindUser(); // refresh stats + renderActive(); // refresh stats configureFollowingButton(false); }, error: app.ajaxError @@ -196,7 +272,26 @@ } } - function bindUser() { + function renderActive() { + if ($('#profile-about-link').hasClass('active')) { + renderAbout(); + } + else if ($('#profile-history-link').hasClass('active')) { + renderHistory(); + } + else if ($('#profile-bands-link').hasClass('active')) { + renderBands(); + } + else if ($('#profile-social-link').hasClass('active')) { + renderSocial(); + } + else if ($('#profile-favorites-link').hasClass('active')) { + renderFavorites(); + } + } + + function bindAbout() { + $('#profile-instruments').empty(); var url = "/api/users/" + userId; $.ajax({ type: "GET", @@ -262,6 +357,78 @@ } } + function bindSocial() { + // FRIENDS + var url = "/api/users/" + userId + "/friends"; + $.ajax({ + type: "GET", + dataType: "json", + url: url, + async: false, + processData:false, + success: function(response) { + $.each(response, function(index, val) { + var template = $('#template-profile-social').html(); + var friendHtml = context.JK.fillTemplate(template, { + avatar_url: context.JK.resolveAvatarUrl(val.photo_url), + userName: val.name, + location: val.location, + type: "Friends" + }); + + $('#profile-social-friends').append(friendHtml); + }); + }, + error: app.ajaxError + }); + + // FOLLOWINGS + url = "/api/users/" + userId + "/followings"; + $.ajax({ + type: "GET", + dataType: "json", + url: url, + async: false, + processData:false, + success: function(response) { + $.each(response, function(index, val) { + var template = $('#template-profile-social').html(); + var followingHtml = context.JK.fillTemplate(template, { + avatar_url: context.JK.resolveAvatarUrl(val.photo_url), + userName: val.name, + location: val.location + }); + + $('#profile-social-followings').append(followingHtml); + }); + }, + error: app.ajaxError + }); + + // FOLLOWERS + url = "/api/users/" + userId + "/followers"; + $.ajax({ + type: "GET", + dataType: "json", + url: url, + async: false, + processData:false, + success: function(response) { + $.each(response, function(index, val) { + var template = $('#template-profile-social').html(); + var followerHtml = context.JK.fillTemplate(template, { + avatar_url: context.JK.resolveAvatarUrl(val.photo_url), + userName: val.name, + location: val.location + }); + + $('#profile-social-followers').append(followerHtml); + }); + }, + error: app.ajaxError + }); + } + function initialize() { var screenBindings = { 'beforeShow': beforeShow, diff --git a/app/assets/javascripts/searchResults.js b/app/assets/javascripts/searchResults.js index a96577562..c67a72833 100644 --- a/app/assets/javascripts/searchResults.js +++ b/app/assets/javascripts/searchResults.js @@ -45,7 +45,7 @@ var searchResultHtml = context.JK.fillTemplate(template, { userId: val.id, avatar_url: context.JK.resolveAvatarUrl(val.photo_url), - profile_url: val.id, + profile_url: "/#/profile/" + val.id, userName: val.name, location: val.location, instruments: getInstrumentHtml(val.instruments) diff --git a/app/assets/stylesheets/client/profile.css.scss b/app/assets/stylesheets/client/profile.css.scss index 6d45dbe64..7c56b0c6d 100644 --- a/app/assets/stylesheets/client/profile.css.scss +++ b/app/assets/stylesheets/client/profile.css.scss @@ -86,7 +86,7 @@ border-radius:44px; } -.profile-wrapper { +.profile-about-wrapper { padding:10px 25px 10px 25px; font-size:15px; color:#ccc; @@ -141,4 +141,57 @@ font-size:10px; color:#ed3618; font-weight:600; -} \ No newline at end of file +} + +.profile-social-wrapper { + padding:10px 25px 10px 25px; + font-size:15px; + color:#ccc; + border-bottom: dotted 1px #444; + position:relative; + display:block; +} + +.profile-social-left { + float:left; + width:32%; + margin-right:12px; + border-right:solid 1px #666; +} + +.profile-social-mid { + float:left; + width:31%; + margin-right:12px; + border-right:solid 1px #666; +} + +.profile-social-right { + float:left; + width:31%; +} + +.profile-social-left h2, .profile-social-mid h2, .profile-social-right h2 { + font-weight:200; + color:#fff; + font-size:20px; +} + +.profile-block { + clear:left; + white-space:nowrap; + display:block; + margin-bottom:10px; +} + +.profile-block-name { + display:inline-block; + margin-top:13px; + font-size:14px; + color:#fff; + font-weight:bold; +} + +.profile-block-city { + font-size:12px; +} diff --git a/app/controllers/api_users_controller.rb b/app/controllers/api_users_controller.rb index 9579a592a..6ec888d79 100644 --- a/app/controllers/api_users_controller.rb +++ b/app/controllers/api_users_controller.rb @@ -3,7 +3,7 @@ class ApiUsersController < ApiController before_filter :api_signed_in_user, :except => [:create, :signup_confirm, :auth_session_create, :complete] before_filter :auth_user, :only => [:session_settings_show, :session_history_index, :session_user_history_index, :update, :delete, :like_create, :like_destroy, # likes - :following_create, :following_show, :following_destroy, :band_following_index, # followings + :following_create, :following_show, :following_destroy, # followings :recording_update, :recording_destroy, # recordings :favorite_create, :favorite_destroy, # favorites :friend_request_index, :friend_request_show, :friend_request_create, :friend_request_update, # friend requests diff --git a/app/views/api_users/follower_index.rabl b/app/views/api_users/follower_index.rabl index 0d82e3b56..42e710277 100644 --- a/app/views/api_users/follower_index.rabl +++ b/app/views/api_users/follower_index.rabl @@ -1,31 +1,37 @@ object @user.followers -attributes :follower_id => :user_id +node :id do |follower| + follower.id +end node :first_name do |follower| - follower.user.first_name + follower.first_name end node :last_name do |follower| - follower.user.last_name + follower.last_name +end + +node :name do |follower| + follower.name end node :city do |follower| - follower.user.city + follower.city end node :state do |follower| - follower.user.state + follower.state end -node :country do |follower| - follower.user.country +node :location do |follower| + follower.location end node :musician do |follower| - follower.user.musician + follower.musician end node :photo_url do |follower| - follower.user.photo_url -end \ No newline at end of file + follower.photo_url +end diff --git a/app/views/api_users/following_index.rabl b/app/views/api_users/following_index.rabl index 12afb07f4..b18e43b79 100644 --- a/app/views/api_users/following_index.rabl +++ b/app/views/api_users/following_index.rabl @@ -1,31 +1,37 @@ object @user.followings -attributes :user_id +node :id do |following| + following.id +end node :first_name do |following| - following.user.first_name + following.first_name end node :last_name do |following| - following.user.last_name + following.last_name +end + +node :name do |following| + following.name end node :city do |following| - following.user.city + following.city end node :state do |following| - following.user.state + following.state end -node :country do |following| - following.user.country +node :location do |following| + following.location end node :musician do |following| - following.user.musician + following.musician end node :photo_url do |following| - following.user.photo_url + following.photo_url end \ No newline at end of file diff --git a/app/views/clients/_profile.html.erb b/app/views/clients/_profile.html.erb index 80c11a39e..3f755dd15 100644 --- a/app/views/clients/_profile.html.erb +++ b/app/views/clients/_profile.html.erb @@ -44,7 +44,7 @@
-
+

Location:


@@ -62,6 +62,33 @@

+
+
+
+
+
+
+
+
+

Friends

+
+
+
+
+

Following

+
+
+
+
+

Followers

+
+
+
+
+
+
+
+
@@ -72,4 +99,14 @@ {instrument_description}
{proficiency_level} + + + \ No newline at end of file diff --git a/config/routes.rb b/config/routes.rb index 3c2d523d0..1e035dc62 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -99,7 +99,7 @@ SampleApp::Application.routes.draw do match '/users/:id/likes' => 'api_users#like_destroy', :via => :delete # user followers - match '/users/:id/followers' => 'api_users#follower_index', :via => :get + match '/users/:id/followers' => 'api_users#follower_index', :via => :get, :as => 'api_user_follower_index' # user followings match '/users/:id/followings' => 'api_users#following_index', :via => :get, :as => 'api_user_following_index'