seth
/
jam-cloud
mirror of https://bitbucket.org/jamkazam/jam-cloud.git
1
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

VRFS-306 musician profile social tab

This commit is contained in:
Brian Smith 2013-04-26 23:33:52 -04:00
parent 10a8296ae5
commit 3cb28274c0
8 changed files with 303 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

185
app/assets/javascripts/profile.js
View File

@ -27,15 +27,94 @@
function afterShow(data) { function afterShow(data) {
resetForm(); resetForm();
events(); events();
bindUser(); renderActive();
} }
function resetForm() { function resetForm() {
$('#profile-instruments').empty(); $('#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() { 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 // wire up buttons if you're not viewing your own profile
if (userId != context.JK.currentUserId) { if (userId != context.JK.currentUserId) {
@ -68,8 +147,7 @@
url: url, url: url,
processData: false, processData: false,
success: function(response) { success: function(response) {
resetForm(); renderActive(); // refresh stats
bindUser(); // refresh stats
configureFriendButton(false); configureFriendButton(false);
}, },
error: app.ajaxError error: app.ajaxError
@ -130,8 +208,7 @@
data: JSON.stringify(newFollowing), data: JSON.stringify(newFollowing),
processData: false, processData: false,
success: function(response) { success: function(response) {
resetForm(); renderActive(); // refresh stats
bindUser(); // refresh stats
configureFollowingButton(true); configureFollowingButton(true);
}, },
error: app.ajaxError error: app.ajaxError
@ -151,8 +228,7 @@
data: JSON.stringify(following), data: JSON.stringify(following),
processData: false, processData: false,
success: function(response) { success: function(response) {
resetForm(); renderActive(); // refresh stats
bindUser(); // refresh stats
configureFollowingButton(false); configureFollowingButton(false);
}, },
error: app.ajaxError 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; var url = "/api/users/" + userId;
$.ajax({ $.ajax({
type: "GET", 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() { function initialize() {
var screenBindings = { var screenBindings = {
'beforeShow': beforeShow, 'beforeShow': beforeShow,

2
app/assets/javascripts/searchResults.js
View File

@ -45,7 +45,7 @@
var searchResultHtml = context.JK.fillTemplate(template, { var searchResultHtml = context.JK.fillTemplate(template, {
userId: val.id, userId: val.id,
avatar_url: context.JK.resolveAvatarUrl(val.photo_url), avatar_url: context.JK.resolveAvatarUrl(val.photo_url),
profile_url: val.id, profile_url: "/#/profile/" + val.id,
userName: val.name, userName: val.name,
location: val.location, location: val.location,
instruments: getInstrumentHtml(val.instruments) instruments: getInstrumentHtml(val.instruments)

57
app/assets/stylesheets/client/profile.css.scss
View File

@ -86,7 +86,7 @@
border-radius:44px; border-radius:44px;
} }
.profile-wrapper { .profile-about-wrapper {
padding:10px 25px 10px 25px; padding:10px 25px 10px 25px;
font-size:15px; font-size:15px;
color:#ccc; color:#ccc;
@ -141,4 +141,57 @@
font-size:10px; font-size:10px;
color:#ed3618; color:#ed3618;
font-weight:600; font-weight:600;
} }
.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;
}

2
app/controllers/api_users_controller.rb
View File

@ -3,7 +3,7 @@ class ApiUsersController < ApiController
before_filter :api_signed_in_user, :except => [:create, :signup_confirm, :auth_session_create, :complete] 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, before_filter :auth_user, :only => [:session_settings_show, :session_history_index, :session_user_history_index, :update, :delete,
:like_create, :like_destroy, # likes :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 :recording_update, :recording_destroy, # recordings
:favorite_create, :favorite_destroy, # favorites :favorite_create, :favorite_destroy, # favorites
:friend_request_index, :friend_request_show, :friend_request_create, :friend_request_update, # friend requests :friend_request_index, :friend_request_show, :friend_request_create, :friend_request_update, # friend requests

26
app/views/api_users/follower_index.rabl
View File

@ -1,31 +1,37 @@
object @user.followers object @user.followers
attributes :follower_id => :user_id node :id do |follower|
follower.id
end
node :first_name do |follower| node :first_name do |follower|
follower.user.first_name follower.first_name
end end
node :last_name do |follower| node :last_name do |follower|
follower.user.last_name follower.last_name
end
node :name do |follower|
follower.name
end end
node :city do |follower| node :city do |follower|
follower.user.city follower.city
end end
node :state do |follower| node :state do |follower|
follower.user.state follower.state
end end
node :country do |follower| node :location do |follower|
follower.user.country follower.location
end end
node :musician do |follower| node :musician do |follower|
follower.user.musician follower.musician
end end
node :photo_url do |follower| node :photo_url do |follower|
follower.user.photo_url follower.photo_url
end end

24
app/views/api_users/following_index.rabl
View File

@ -1,31 +1,37 @@
object @user.followings object @user.followings
attributes :user_id node :id do |following|
following.id
end
node :first_name do |following| node :first_name do |following|
following.user.first_name following.first_name
end end
node :last_name do |following| node :last_name do |following|
following.user.last_name following.last_name
end
node :name do |following|
following.name
end end
node :city do |following| node :city do |following|
following.user.city following.city
end end
node :state do |following| node :state do |following|
following.user.state following.state
end end
node :country do |following| node :location do |following|
following.user.country following.location
end end
node :musician do |following| node :musician do |following|
following.user.musician following.musician
end end
node :photo_url do |following| node :photo_url do |following|
following.user.photo_url following.photo_url
end end

39
app/views/clients/_profile.html.erb
View File

@ -44,7 +44,7 @@
</div> </div>
<br clear="all" /> <br clear="all" />
<div id="content-scroller"> <div id="content-scroller">
<div class="profile-wrapper"> <div id="profile-about" class="profile-about-wrapper">
<!-- stats & location --> <!-- stats & location -->
<div class="profile-about-left"> <div class="profile-about-left">
<h3>Location:</h3><br /> <h3>Location:</h3><br />
@ -62,6 +62,33 @@
</div> </div>
<br clear="all" /> <br clear="all" />
</div> </div>
<div id="profile-history" class="profile-history-wrapper">
<br clear="all" />
</div>
<div id="profile-bands" class="profile-bands-wrapper">
<br clear="all" />
</div>
<div id="profile-social" class="profile-social-wrapper">
<div class="profile-social-left">
<h2>Friends</h2>
<div id="profile-social-friends">
</div>
</div>
<div class="profile-social-mid">
<h2>Following</h2>
<div id="profile-social-followings">
</div>
</div>
<div class="profile-social-right">
<h2>Followers</h2>
<div id="profile-social-followers">
</div>
</div>
<br clear="all" />
</div>
<div id="profile-favorites" class="profile-favorites-wrapper">
<br clear="all" />
</div>
</div> </div>
</form> </form>
</div> </div>
@ -72,4 +99,14 @@
<span>{instrument_description}</span><br /> <span>{instrument_description}</span><br />
<span class="{proficiency_level_css}">{proficiency_level}</span> <span class="{proficiency_level_css}">{proficiency_level}</span>
</div> </div>
</script>
<script type="text/template" id="template-profile-social">
<div class="profile-block">
<div class="avatar-small">
<img src="{avatar_url}" />
</div>
<div class="profile-block-name">{userName}</div>
<div class="profile-block-city">{location}</div>
</div>
</script> </script>

2
config/routes.rb
View File

@ -99,7 +99,7 @@ SampleApp::Application.routes.draw do
match '/users/:id/likes' => 'api_users#like_destroy', :via => :delete match '/users/:id/likes' => 'api_users#like_destroy', :via => :delete
# user followers # 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 # user followings
match '/users/:id/followings' => 'api_users#following_index', :via => :get, :as => 'api_user_following_index' match '/users/:id/followings' => 'api_users#following_index', :via => :get, :as => 'api_user_following_index'